feat: add SKU to CMS App

apps/cms-v2/graphql/fragments/WebhookProductVariant.graphql

@@ -1,6 +1,7 @@
 fragment WebhookProductVariant on ProductVariant {
   id
   name
+  sku
   product {
     id
     name

apps/cms-v2/src/modules/configuration/app-config.test.ts

@@ -17,6 +17,7 @@ const getMockContentfulInput = (): ContentfulProviderConfig.InputShape => {
       productSlug: "productSlug",
       variantId: "variantId",
       variantName: "variantName",
+      variantSku: "variantSku",
     },
     spaceId: "test",
   };
@@ -34,6 +35,7 @@ const getMockDatocmsInput = (): DatocmsProviderConfig.InputShape => {
       productSlug: "productSlug",
       variantId: "variantId",
       variantName: "variantName",
+      variantSku: "variantSku",
     },
   };
 };

apps/cms-v2/src/modules/configuration/print-saleor-product-fields.ts

@@ -20,5 +20,8 @@ export const printSaleorProductFields = (fieldName: SaleorProviderFieldsMappingK
     case "variantId": {
       return "Variant ID";
     }
+    case "variantSku": {
+      return "Variant SKU";
+    }
   }
 };

apps/cms-v2/src/modules/configuration/schemas/saleor-provider-fields-mapping.schema.ts

@@ -6,6 +6,7 @@ import { z } from "zod";
 export const SaleorProviderFieldsMappingSchema = z.object({
   variantId: z.string().min(1),
   variantName: z.string().min(1),
+  variantSku: z.string().min(1),
   productId: z.string().min(1),
   productName: z.string().min(1),
   productSlug: z.string().min(1),
@@ -22,4 +23,5 @@ export const SaleorProviderFieldsMappingKeys: Array<SaleorProviderFieldsMappingK
   "productName",
   "productSlug",
   "channels",
+  "variantSku",
 ];

apps/cms-v2/src/modules/providers/builder.io/builder-io-config-form.tsx

@@ -172,6 +172,7 @@ const AddFormVariant = () => {
           productName: "",
           productSlug: "",
           variantId: "",
+          variantSku: "",
         },
       }}
     />

apps/cms-v2/src/modules/providers/contentful/contentful-client.test.ts

@@ -18,13 +18,15 @@ const getMockContenfulConfiguration = (): ContentfulProviderConfig.FullShape =>
     productSlug: "product-slug",
     variantId: "variant-id",
     variantName: "variant-name",
+    variantSku: "variant-sku",
   },
 });
 
 const getMockWebhookProductVariant = (): WebhookProductVariantFragment => {
   return {
     id: "test-id",
     name: "test-name",
+    sku: "test-sku",
     product: {
       id: "test-product-id",
       name: "test-product-name",

apps/cms-v2/src/modules/providers/contentful/contentful-config-form.tsx

@@ -339,6 +339,7 @@ const AddVariant = () => {
           productName: "",
           productSlug: "",
           variantId: "",
+          variantSku: "",
         },
         spaceId: "",
       }}

apps/cms-v2/src/modules/providers/contentful/contentful-webhooks-processor.test.ts

@@ -21,13 +21,15 @@ const getMockContenfulConfiguration = (): ContentfulProviderConfig.FullShape =>
     productSlug: "product-slug",
     variantId: "variant-id",
     variantName: "variant-name",
+    variantSku: "variant-sku",
   },
 });
 
 const getMockWebhookProductVariant = (): WebhookProductVariantFragment => {
   return {
     id: "test-id",
     name: "test-name",
+    sku: "test-sku",
     product: {
       id: "test-product-id",
       name: "test-product-name",
@@ -61,7 +63,7 @@ describe("ContentfulWebhooksProcessor", () => {
 
     processor = new ContentfulWebhooksProcessor(
       getMockContenfulConfiguration(),
-      () => mockContentfulClient
+      () => mockContentfulClient,
     );
   });
 
@@ -74,7 +76,7 @@ describe("ContentfulWebhooksProcessor", () => {
       expect.objectContaining({
         configuration: getMockContenfulConfiguration(),
         variant: mockProductVariant,
-      })
+      }),
     );
   });
 
@@ -87,7 +89,7 @@ describe("ContentfulWebhooksProcessor", () => {
       expect.objectContaining({
         configuration: getMockContenfulConfiguration(),
         variant: mockProductVariant,
-      })
+      }),
     );
   });
 
@@ -100,7 +102,7 @@ describe("ContentfulWebhooksProcessor", () => {
       expect.objectContaining({
         configuration: getMockContenfulConfiguration(),
         variant: mockProductVariant,
-      })
+      }),
     );
   });
 

apps/cms-v2/src/modules/providers/datocms/datocms-config-form.tsx

@@ -255,6 +255,7 @@ const AddFormVariant = () => {
           productName: "",
           productSlug: "",
           variantId: "",
+          variantSku: "",
         },
       }}
     />

apps/cms-v2/src/modules/providers/fields-mapper.test.ts

@@ -11,10 +11,12 @@ describe("FieldsMapper", () => {
         productSlug: "product-slug",
         variantId: "variant-id",
         variantName: "variant-name",
+        variantSku: "variant-sku",
       },
       variant: {
         id: "aaa-bbb-ccc",
         name: "43",
+        sku: "sku",
         channelListings: [
           {
             channel: {
@@ -37,6 +39,7 @@ describe("FieldsMapper", () => {
       "product-name": "Shoes",
       "product-slug": "shoes",
       "variant-id": "aaa-bbb-ccc",
+      "variant-sku": "sku",
       channels: [
         {
           channel: {

apps/cms-v2/src/modules/providers/fields-mapper.ts

@@ -9,7 +9,8 @@ export class FieldsMapper {
     variant: WebhookProductVariantFragment;
     configMapping: ProvidersConfig.AnyFullShape["productVariantFieldsMapping"];
   }) {
-    const { channels, variantName, productId, productName, productSlug, variantId } = configMapping;
+    const { channels, variantName, productId, productName, productSlug, variantId, variantSku } =
+      configMapping;
 
     return {
       [variantName]: variant.name,
@@ -18,6 +19,7 @@ export class FieldsMapper {
       [productSlug]: variant.product.slug,
       [variantId]: variant.id,
       [channels]: variant.channelListings,
+      [variantSku]: variant.sku,
     };
   }
 }

apps/cms-v2/src/modules/providers/payloadcms/payloadcms-config-form.tsx

@@ -197,6 +197,7 @@ const AddFormVariant = () => {
           productName: "",
           productSlug: "",
           variantId: "",
+          variantSku: "",
         },
       }}
     />

apps/cms-v2/src/modules/providers/strapi/strapi-config-form.tsx

@@ -37,7 +37,7 @@ const PureForm = ({ defaultValues, onSubmit, onDelete }: PureFormProps) => {
         control={control}
         name="configName"
         label="Configuration name"
-        helperText="Meaningful name that will help you understand it later. E.g. 'staging' or 'prod' "
+        helperText={`Meaningful name that will help you understand it later, e.g. "staging" or "prod".`}
       />
 
       <Box display={"grid"} gap={4} marginY={4}>
@@ -47,14 +47,14 @@ const PureForm = ({ defaultValues, onSubmit, onDelete }: PureFormProps) => {
           control={control}
           name="authToken"
           label="Auth token"
-          helperText="Token with full permissions for the content type you want Saleor to store product."
+          helperText="Token with full permissions for the content type you want Saleor to store product in."
         />
         <Input
           required
           control={control}
           name="url"
           label="API Url"
-          helperText="Base api URL, usually without /api suffix"
+          helperText={`Base API URL, usually without the "/api" suffix.`}
           placeholder="https://your-strapi-url.com"
         />
       </Box>
@@ -65,15 +65,15 @@ const PureForm = ({ defaultValues, onSubmit, onDelete }: PureFormProps) => {
           name="itemType"
           control={control}
           placeholder="saleor-products"
-          helperText="Plural name of the content type you want Saleor to send product to. E.g. 'products' or 'product-variants'"
+          helperText={`Plural name of the content type you want Saleor to send product to, e.g. "products" or "product-variants".`}
         />
 
         <Text as="p" variant="heading" size="small">
-          Map fields from Saleor to your Strapi schema.
+          Map fields from Saleor to your Strapi schema
         </Text>
         <Text as="p" marginTop={2} marginBottom={4}>
-          All fields should be type of <Text variant="bodyStrong">Text</Text>. Channels should be
-          type of <Text variant="bodyStrong">JSON</Text>.
+          All fields should be of type <Text variant="bodyStrong">Text</Text>. Channels should be of
+          type <Text variant="bodyStrong">JSON</Text>.
         </Text>
         <Box
           marginBottom={4}
@@ -85,7 +85,7 @@ const PureForm = ({ defaultValues, onSubmit, onDelete }: PureFormProps) => {
           padding={2}
         >
           <Text variant="caption">Saleor Field</Text>
-          <Text variant="caption">Strapi field</Text>
+          <Text variant="caption">Strapi Field</Text>
         </Box>
         {SaleorProviderFieldsMappingKeys.map((saleorField) => (
           // todo extract this table to component
@@ -155,6 +155,7 @@ const AddFormVariant = () => {
           productName: "",
           productSlug: "",
           variantId: "",
+          variantSku: "",
         },
       }}
     />

apps/cms-v2/src/modules/webhooks-operations/webhooks-processors-delegator.test.ts

@@ -18,6 +18,7 @@ const getMockContentfulInput = (): ContentfulProviderConfig.InputShape => {
       productSlug: "productSlug",
       variantId: "variantId",
       variantName: "variantName",
+      variantSku: "variantSku",
     },
     spaceId: "test",
   };
@@ -36,6 +37,7 @@ const getMockDatocmsInput = (): DatocmsProviderConfig.InputShape => {
       productSlug: "productSlug",
       variantId: "variantId",
       variantName: "variantName",
+      variantSku: "variantSku",
     },
   };
 };
@@ -81,6 +83,7 @@ const getMockProductVariantWebhookFragment = (): WebhookProductVariantFragment =
   return {
     id: "variant-id",
     name: "variant-name",
+    sku: "variant-sku",
     product: {
       id: "product-id",
       name: "product-name",