Fix open-telemetry#586: Pass product's categories as an input for the Ad serice

Author: madhead

CHANGELOG.md

@@ -142,3 +142,5 @@ significant modifications will be credited to OpenTelemetry Authors.
 ([#583](https://github.com/open-telemetry/opentelemetry-demo/pull/583))
 * Change ZipCode data type from int to string
 ([#587](https://github.com/open-telemetry/opentelemetry-demo/pull/587))
+* Pass product's `categories` as an input for the Ad service
+([#600](https://github.com/open-telemetry/opentelemetry-demo/pull/600))

src/frontend/components/Ad/Ad.tsx

@@ -3,9 +3,8 @@ import { useAd } from '../../providers/Ad.provider';
 import * as S from './Ad.styled';
 
 const Ad = () => {
-  const {
-    adList: [{ text, redirectUrl } = { text: '', redirectUrl: '' }],
-  } = useAd();
+  const { adList } = useAd();
+  const { text, redirectUrl } = adList[Math.floor(Math.random() * adList.length)] || { text: '', redirectUrl: '' };
 
   return (
     <S.Ad data-cy={CypressFields.Ad}>

src/frontend/gateways/Api.gateway.ts

@@ -78,11 +78,11 @@ const ApiGateway = () => ({
       },
     });
   },
-  listAds(productIds: string[]) {
+  listAds(contextKeys: string[]) {
     return request<Ad[]>({
       url: `${basePath}/data`,
       queryParams: {
-        productIds,
+        contextKeys,
       },
     });
   },

src/frontend/gateways/rpc/Ad.gateway.ts

@@ -6,9 +6,9 @@ const { AD_SERVICE_ADDR = '' } = process.env;
 const client = new AdServiceClient(AD_SERVICE_ADDR, ChannelCredentials.createInsecure());
 
 const AdGateway = () => ({
-  listAds(productIds: string[]) {
+  listAds(contextKeys: string[]) {
     return new Promise<AdResponse>((resolve, reject) =>
-      client.getAds({ contextKeys: productIds }, (error, response) => (error ? reject(error) : resolve(response)))
+      client.getAds({ contextKeys: contextKeys }, (error, response) => (error ? reject(error) : resolve(response)))
     );
   },
 });

src/frontend/pages/api/data.ts

@@ -8,8 +8,8 @@ type TResponse = Ad[] | Empty;
 const handler = async ({ method, query }: NextApiRequest, res: NextApiResponse<TResponse>) => {
   switch (method) {
     case 'GET': {
-      const { productIds = [] } = query;
-      const { ads: adList } = await AdGateway.listAds(productIds as string[]);
+      const { contextKeys = [] } = query;
+      const { ads: adList } = await AdGateway.listAds(Array.isArray(contextKeys) ? contextKeys : contextKeys.split(','));
 
       return res.status(200).json(adList);
     }

src/frontend/pages/cart/checkout/[orderId]/index.tsx

@@ -16,7 +16,10 @@ const Checkout: NextPage = () => {
   const { items = [], shippingAddress } = JSON.parse((query.order || '{}') as string) as IProductCheckout;
 
   return (
-    <AdProvider productIds={items.map(({ item }) => item?.productId || '')}>
+    <AdProvider
+      productIds={items.map(({ item }) => item?.productId || '')}
+      contextKeys={[...new Set(items.flatMap(({ item }) => item.product.categories))]}
+    >
       <Layout>
         <S.Checkout>
           <S.Container>
@@ -25,7 +28,11 @@ const Checkout: NextPage = () => {
 
             <S.ItemList>
               {items.map(checkoutItem => (
-                <CheckoutItem key={checkoutItem.item.productId} checkoutItem={checkoutItem} address={shippingAddress!} />
+                <CheckoutItem
+                  key={checkoutItem.item.productId}
+                  checkoutItem={checkoutItem}
+                  address={shippingAddress!}
+                />
               ))}
             </S.ItemList>
 

src/frontend/pages/cart/index.tsx

@@ -14,7 +14,10 @@ const Cart: NextPage = () => {
   } = useCart();
 
   return (
-    <AdProvider productIds={items.map(({ productId }) => productId)}>
+    <AdProvider
+      productIds={items.map(({ productId }) => productId)}
+      contextKeys={[...new Set(items.flatMap(({ product }) => product.categories))]}
+    >
       <Layout>
         <S.Cart>
           {(!!items.length && <CartDetail />) || <EmptyCart />}

src/frontend/pages/product/[productId]/index.tsx

@@ -30,7 +30,13 @@ const ProductDetail: NextPage = () => {
   const productId = query.productId as string;
 
   const {
-    data: { name, picture, description, priceUsd = { units: 0, currencyCode: 'USD', nanos: 0 } } = {} as Product,
+    data: {
+      name,
+      picture,
+      description,
+      priceUsd = { units: 0, currencyCode: 'USD', nanos: 0 },
+      categories,
+    } = {} as Product,
   } = useQuery(
     ['product', productId, 'selectedCurrency', selectedCurrency],
     () => ApiGateway.getProduct(productId, selectedCurrency),
@@ -48,7 +54,10 @@ const ProductDetail: NextPage = () => {
   }, [addItem, productId, quantity, push]);
 
   return (
-    <AdProvider productIds={[productId, ...items.map(({ productId }) => productId)]}>
+    <AdProvider
+      productIds={[productId, ...items.map(({ productId }) => productId)]}
+      contextKeys={[...new Set(categories)]}
+    >
       <Layout>
         <S.ProductDetail data-cy={CypressFields.ProductDetail}>
           <S.Container>

src/frontend/providers/Ad.provider.tsx

@@ -17,13 +17,14 @@ export const Context = createContext<IContext>({
 interface IProps {
   children: React.ReactNode;
   productIds: string[];
+  contextKeys: string[];
 }
 
 export const useAd = () => useContext(Context);
 
-const AdProvider = ({ children, productIds }: IProps) => {
+const AdProvider = ({ children, productIds, contextKeys }: IProps) => {
   const { selectedCurrency } = useCurrency();
-  const { data: adList = [] } = useQuery(['ads', productIds], () => ApiGateway.listAds(productIds), {
+  const { data: adList = [] } = useQuery(['ads', contextKeys], () => ApiGateway.listAds(contextKeys), {
     refetchOnWindowFocus: false,
   });
   const { data: recommendedProductList = [] } = useQuery(

src/frontend/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ES2015",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,