feat: add gtin attribute to the google feed app

.changeset/soft-shoes-flash.md

@@ -0,0 +1,5 @@
+---
+"products-feed": minor
+---
+
+You can now map GTIN attribute from Saleor to your Google Feed.

apps/products-feed/src/modules/app-configuration/app-config.test.ts

@@ -23,6 +23,7 @@ const exampleAttributeMappingConfig: RootConfig["attributeMapping"] = {
   patternAttributeIds: [],
   materialAttributeIds: [],
   sizeAttributeIds: [],
+  gtinAttributeIds: [],
 };
 
 const exampleTitleTemplate: RootConfig["titleTemplate"] =
@@ -52,6 +53,7 @@ describe("AppConfig", function () {
           patternAttributeIds: [],
           materialAttributeIds: [],
           sizeAttributeIds: [],
+          gtinAttributeIds: [],
         },
         titleTemplate: "{{variant.product.name}} - {{variant.name}}",
         imageSize: 1024,
@@ -84,6 +86,7 @@ describe("AppConfig", function () {
           patternAttributeIds: [],
           materialAttributeIds: [],
           sizeAttributeIds: [],
+          gtinAttributeIds: [],
         },
         titleTemplate: "{{variant.product.name}} - {{variant.name}}",
         imageSize: 1024,
@@ -115,6 +118,7 @@ describe("AppConfig", function () {
           patternAttributeIds: [],
           materialAttributeIds: [],
           sizeAttributeIds: [],
+          gtinAttributeIds: [],
         },
         titleTemplate: "{{ variant.name }}",
         imageSize: 1024,
@@ -138,6 +142,7 @@ describe("AppConfig", function () {
           patternAttributeIds: [],
           materialAttributeIds: [],
           sizeAttributeIds: [],
+          gtinAttributeIds: [],
         },
         titleTemplate: "{{ variant.name }}",
         imageSize: 1024,
@@ -167,6 +172,7 @@ describe("AppConfig", function () {
         patternAttributeIds: [],
         materialAttributeIds: [],
         sizeAttributeIds: ["size-id"],
+        gtinAttributeIds: [],
       },
       titleTemplate: "{{ variant.product.name }} - {{ variant.name }}",
       imageSize: 1024,
@@ -194,6 +200,7 @@ describe("AppConfig", function () {
           patternAttributeIds: [],
           materialAttributeIds: [],
           sizeAttributeIds: ["size-id"],
+          gtinAttributeIds: [],
         },
         titleTemplate: "{{ variant.product.name }} - {{ variant.name }}",
         imageSize: 1024,
@@ -225,6 +232,7 @@ describe("AppConfig", function () {
         patternAttributeIds: [],
         materialAttributeIds: [],
         sizeAttributeIds: ["size-id"],
+        gtinAttributeIds: [],
       });
     });
   });

apps/products-feed/src/modules/app-configuration/app-config.ts

@@ -23,6 +23,7 @@ const attributeMappingSchema = z.object({
   sizeAttributeIds: z.array(z.string()).default([]),
   materialAttributeIds: z.array(z.string()).default([]),
   patternAttributeIds: z.array(z.string()).default([]),
+  gtinAttributeIds: z.array(z.string()).default([]),
 });
 
 const s3ConfigSchema = z.object({

apps/products-feed/src/modules/app-configuration/attribute-mapping-form.tsx

@@ -66,6 +66,12 @@ export const AttributeMappingConfigurationForm = (props: Props) => {
         label="Size attributes"
         options={options}
       />
+      <Multiselect
+        control={control}
+        name="gtinAttributeIds"
+        label="GTIN attributes"
+        options={options}
+      />
       <Box display={"flex"} flexDirection={"row"} gap={4} justifyContent={"flex-end"}>
         <Button type="submit" variant="primary">
           Save mapping
@@ -98,7 +104,7 @@ export const ConnectedAttributeMappingForm = () => {
     async (data: AttributeMappingConfiguration) => {
       mutate(data);
     },
-    [mutate]
+    [mutate],
   );
 
   const formData: AttributeMappingConfiguration = useMemo(() => {
@@ -112,6 +118,7 @@ export const ConnectedAttributeMappingForm = () => {
       brandAttributeIds: [],
       patternAttributeIds: [],
       materialAttributeIds: [],
+      gtinAttributeIds: [],
     };
   }, [data]);
 

apps/products-feed/src/modules/google-feed/attribute-mapping.test.ts

@@ -81,7 +81,7 @@ describe("attribute-mapping", () => {
             },
             values: [],
           },
-        ])
+        ]),
       ).toStrictEqual("Red");
     });
 
@@ -111,7 +111,7 @@ describe("attribute-mapping", () => {
               },
             ],
           },
-        ])
+        ]),
       ).toStrictEqual("Red/Blue/Yellow");
     });
   });
@@ -130,7 +130,7 @@ describe("attribute-mapping", () => {
             product: productBase,
             attributes: [],
           },
-        })
+        }),
       ).toStrictEqual(undefined);
     });
 
@@ -153,14 +153,16 @@ describe("attribute-mapping", () => {
             patternAttributeIds: ["pattern-id"],
             materialAttributeIds: ["material-id"],
             sizeAttributeIds: ["size-id"],
+            gtinAttributeIds: ["gtin-id"],
           },
-        })
+        }),
       ).toStrictEqual({
         material: undefined,
         color: undefined,
         size: undefined,
         brand: undefined,
         pattern: undefined,
+        gtin: undefined,
       });
     });
 
@@ -246,6 +248,16 @@ describe("attribute-mapping", () => {
                   },
                 ],
               },
+              {
+                attribute: {
+                  id: "gtin-id",
+                },
+                values: [
+                  {
+                    name: "01234500001-0",
+                  },
+                ],
+              },
             ],
           },
           attributeMapping: {
@@ -254,14 +266,16 @@ describe("attribute-mapping", () => {
             materialAttributeIds: ["material-id"],
             sizeAttributeIds: ["size-id"],
             patternAttributeIds: ["pattern-id"],
+            gtinAttributeIds: ["gtin-id"],
           },
-        })
+        }),
       ).toStrictEqual({
         material: "Cotton",
         color: "Red/Black",
         size: "XL",
         brand: "Saleor",
         pattern: "Plain",
+        gtin: "01234500001-0",
       });
     });
   });

apps/products-feed/src/modules/google-feed/attribute-mapping.ts

@@ -7,7 +7,7 @@ interface GetMappedAttributesArgs {
 }
 
 export const attributeArrayToValueString = (
-  attributes?: GoogleFeedProductVariantFragment["attributes"]
+  attributes?: GoogleFeedProductVariantFragment["attributes"],
 ) => {
   if (!attributes?.length) {
     return;
@@ -35,35 +35,41 @@ export const getMappedAttributes = ({
   const attributes = variant.attributes.concat(variant.product.attributes);
 
   const materialAttributes = attributes.filter((a) =>
-    mapping.materialAttributeIds.includes(a.attribute.id)
+    mapping.materialAttributeIds.includes(a.attribute.id),
   );
   const materialValue = attributeArrayToValueString(materialAttributes);
 
   const brandAttributes = attributes.filter((a) =>
-    mapping.brandAttributeIds.includes(a.attribute.id)
+    mapping.brandAttributeIds.includes(a.attribute.id),
   );
   const brandValue = attributeArrayToValueString(brandAttributes);
 
   const colorAttributes = attributes.filter((a) =>
-    mapping.colorAttributeIds.includes(a.attribute.id)
+    mapping.colorAttributeIds.includes(a.attribute.id),
   );
   const colorValue = attributeArrayToValueString(colorAttributes);
 
   const patternAttributes = attributes.filter((a) =>
-    mapping.patternAttributeIds.includes(a.attribute.id)
+    mapping.patternAttributeIds.includes(a.attribute.id),
   );
   const patternValue = attributeArrayToValueString(patternAttributes);
 
   const sizeAttributes = attributes.filter((a) =>
-    mapping.sizeAttributeIds.includes(a.attribute.id)
+    mapping.sizeAttributeIds.includes(a.attribute.id),
   );
   const sizeValue = attributeArrayToValueString(sizeAttributes);
 
+  const gtinAttributes = attributes.filter((a) =>
+    mapping.gtinAttributeIds.includes(a.attribute.id),
+  );
+  const gtinValue = attributeArrayToValueString(gtinAttributes);
+
   return {
     material: materialValue,
     brand: brandValue,
     color: colorValue,
     size: sizeValue,
     pattern: patternValue,
+    gtin: gtinValue,
   };
 };

apps/products-feed/src/modules/google-feed/generate-google-xml-feed.ts

@@ -92,6 +92,7 @@ export const generateGoogleXmlFeed = ({
       brand: attributes?.brand,
       pattern: attributes?.pattern,
       size: attributes?.size,
+      gtin: attributes?.gtin,
       weight,
       ...pricing,
     });

apps/products-feed/src/modules/google-feed/product-to-proxy.ts

@@ -183,6 +183,16 @@ export const productToProxy = (p: ProductEntry) => {
     });
   }
 
+  if (p.gtin) {
+    item.push({
+      "g:gtin": [
+        {
+          "#text": p.gtin,
+        },
+      ],
+    });
+  }
+
   return {
     item,
   };

apps/products-feed/src/modules/google-feed/types.ts

@@ -20,6 +20,7 @@ export type ProductEntry = {
   brand?: string;
   pattern?: string;
   weight?: string;
+  gtin?: string;
 };
 
 export type ShopDetailsEntry = {

cspell.json

@@ -83,7 +83,8 @@
     "OTLP",
     "FAAS",
     "millis",
-    "Parentfor"
+    "Parentfor",
+    "GTIN"
   ],
   "ignorePaths": [
     "node_modules",