Fix variant creator (#2085)

* Set channels for products without any variants

* Fix duplicated_input_item error

* Persist skus between steps

* Cleanup code

* Fix types

src/channels/ChannelsWithVariantsAvailabilityCard/ChannelsWithVariantsAvailabilityCard.tsx

@@ -1,4 +1,3 @@
-import CannotDefineChannelsAvailabilityCard from "@saleor/channels/components/CannotDefineChannelsAvailabilityCard/CannotDefineChannelsAvailabilityCard";
 import { ChannelData } from "@saleor/channels/utils";
 import ChannelAvailabilityItemContent from "@saleor/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemContent";
 import ChannelsAvailabilityCardWrapper, {
@@ -66,10 +65,6 @@ const ChannelsWithVariantsAvailabilityCard: React.FC<ChannelsWithVariantsAvailab
     channelsWithVariantsData
   );
 
-  if (!variants?.length) {
-    return <CannotDefineChannelsAvailabilityCard />;
-  }
-
   return (
     <ChannelsAvailabilityCardWrapper
       managePermissions={[PermissionEnum.MANAGE_PRODUCTS]}

src/collections/components/CollectionCreatePage/CollectionCreatePage.tsx

@@ -151,7 +151,6 @@ const CollectionCreatePage: React.FC<CollectionCreatePageProps> = ({
                 }}
                 managePermissions={[PermissionEnum.MANAGE_PRODUCTS]}
                 errors={channelsErrors}
-                selectedChannelsCount={data.channelListings.length}
                 allChannelsCount={channelsCount}
                 channels={data.channelListings}
                 disabled={disabled}

src/collections/components/CollectionDetailsPage/CollectionDetailsPage.tsx

@@ -141,7 +141,6 @@ const CollectionDetailsPage: React.FC<CollectionDetailsPageProps> = ({
                     })
                   }}
                   errors={channelsErrors}
-                  selectedChannelsCount={data.channelListings.length}
                   allChannelsCount={channelsCount}
                   channels={data.channelListings}
                   disabled={disabled}

src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCard.stories.tsx

@@ -38,8 +38,7 @@ const props: ChannelsAvailabilityCardProps = {
   })),
   errors: [],
   onChange: () => undefined,
-  openModal: () => undefined,
+  openModal: () => undefined
-  selectedChannelsCount: 3
 };
 
 storiesOf("Generics / Channels availability card", module)

src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCard.tsx

@@ -17,7 +17,10 @@ import { ChannelOpts, ChannelsAvailabilityError, Messages } from "./types";
 import { getChannelsAvailabilityMessages } from "./utils";
 
 export interface ChannelsAvailability
-  extends Omit<ChannelsAvailabilityWrapperProps, "children"> {
+  extends Omit<
+    ChannelsAvailabilityWrapperProps,
+    "children" | "selectedChannelsCount"
+  > {
   channels: ChannelData[];
   channelsList: ChannelList[];
   errors?: ChannelsAvailabilityError[];
@@ -36,7 +39,6 @@ export const ChannelsAvailability: React.FC<ChannelsAvailabilityCardProps> = pro
   const {
     channelsList,
     errors = [],
-    selectedChannelsCount = 0,
     allChannelsCount = 0,
     channels,
     messages,
@@ -57,7 +59,7 @@ export const ChannelsAvailability: React.FC<ChannelsAvailabilityCardProps> = pro
 
   return (
     <ChannelsAvailabilityCardWrapper
-      selectedChannelsCount={selectedChannelsCount}
+      selectedChannelsCount={(channels ?? channelsList).length ?? 0}
       allChannelsCount={allChannelsCount}
       managePermissions={managePermissions}
       openModal={openModal}

src/discounts/components/SaleCreatePage/SaleCreatePage.tsx

@@ -143,7 +143,6 @@ const SaleCreatePage: React.FC<SaleCreatePageProps> = ({
               <div>
                 <ChannelsAvailabilityCard
                   managePermissions={[PermissionEnum.MANAGE_DISCOUNTS]}
-                  selectedChannelsCount={data.channelListings.length}
                   allChannelsCount={allChannelsCount}
                   channelsList={data.channelListings.map(channel => ({
                     id: channel.id,

src/discounts/components/SaleDetailsPage/SaleDetailsPage.tsx

@@ -334,7 +334,6 @@ const SaleDetailsPage: React.FC<SaleDetailsPageProps> = ({
                 <CardSpacer />
                 <ChannelsAvailabilityCard
                   managePermissions={[PermissionEnum.MANAGE_DISCOUNTS]}
-                  selectedChannelsCount={data.channelListings.length}
                   allChannelsCount={allChannelsCount}
                   channelsList={data.channelListings.map(channel => ({
                     id: channel.id,

src/discounts/components/VoucherCreatePage/VoucherCreatePage.tsx

@@ -191,7 +191,6 @@ const VoucherCreatePage: React.FC<VoucherCreatePageProps> = ({
               <div>
                 <ChannelsAvailabilityCard
                   managePermissions={[PermissionEnum.MANAGE_DISCOUNTS]}
-                  selectedChannelsCount={data.channelListings.length}
                   allChannelsCount={allChannelsCount}
                   channelsList={data.channelListings.map(channel => ({
                     id: channel.id,

src/discounts/components/VoucherDetailsPage/VoucherDetailsPage.tsx

@@ -402,7 +402,6 @@ const VoucherDetailsPage: React.FC<VoucherDetailsPageProps> = ({
                 <CardSpacer />
                 <ChannelsAvailabilityCard
                   managePermissions={[PermissionEnum.MANAGE_DISCOUNTS]}
-                  selectedChannelsCount={data.channelListings.length}
                   allChannelsCount={allChannelsCount}
                   channelsList={data.channelListings.map(channel => ({
                     id: channel.id,

src/products/components/ProductCreatePage/ProductCreatePage.tsx

@@ -348,7 +348,6 @@ export const ProductCreatePage: React.FC<ProductCreatePageProps> = ({
                       })
                     }}
                     errors={channelsErrors}
-                    selectedChannelsCount={data.channelListings?.length || 0}
                     allChannelsCount={allChannelsCount}
                     channels={data.channelListings || []}
                     disabled={loading}

src/products/components/ProductUpdatePage/ProductUpdatePage.tsx

@@ -290,7 +290,30 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
         submit,
         isSaveDisabled,
         attributeRichTextGetters
-      }) => (
+      }) => {
+        const availabilityCommonProps = {
+          managePermissions: [PermissionEnum.MANAGE_PRODUCTS],
+          messages: {
+            hiddenLabel: intl.formatMessage({
+              id: "saKXY3",
+              defaultMessage: "Not published",
+              description: "product label"
+            }),
+
+            visibleLabel: intl.formatMessage({
+              id: "qJedl0",
+              defaultMessage: "Published",
+              description: "product label"
+            })
+          },
+          errors: channelsErrors,
+          allChannelsCount,
+          disabled,
+          onChange: handlers.changeChannels,
+          openModal: openChannelsModal
+        };
+
+        return (
           <>
             <Container>
               <Backlink href={productListUrl()}>
@@ -298,7 +321,10 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
               </Backlink>
               <PageHeader title={header}>
                 {extensionMenuItems.length > 0 && (
-                <CardMenu menuItems={extensionMenuItems} data-test-id="menu" />
+                  <CardMenu
+                    menuItems={extensionMenuItems}
+                    data-test-id="menu"
+                  />
                 )}
               </PageHeader>
               <Grid richText>
@@ -448,27 +474,13 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
                   <CardSpacer />
                   {isSimpleProduct ? (
                     <ChannelsAvailabilityCard
-                    managePermissions={[PermissionEnum.MANAGE_PRODUCTS]}
+                      {...availabilityCommonProps}
-                    messages={{
-                      hiddenLabel: intl.formatMessage({
-                        id: "saKXY3",
-                        defaultMessage: "Not published",
-                        description: "product label"
-                      }),
-
-                      visibleLabel: intl.formatMessage({
-                        id: "qJedl0",
-                        defaultMessage: "Published",
-                        description: "product label"
-                      })
-                    }}
-                    errors={channelsErrors}
-                    selectedChannelsCount={data.channelListings.length}
-                    allChannelsCount={allChannelsCount}
                       channels={data.channelListings}
-                    disabled={disabled}
+                    />
-                    onChange={handlers.changeChannels}
+                  ) : product?.variants.length === 0 ? (
-                    openModal={openChannelsModal}
+                    <ChannelsAvailabilityCard
+                      {...availabilityCommonProps}
+                      channelsList={data.channelListings}
                     />
                   ) : (
                     <ChannelsWithVariantsAvailabilityCard
@@ -543,7 +555,8 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
               />
             </Container>
           </>
-      )}
+        );
+      }}
     </ProductUpdateForm>
   );
 };

src/products/components/ProductVariantCreatorPage/ProductVariantCreatorPage.tsx

@@ -24,6 +24,7 @@ import reduceProductVariantCreateFormData, {
   ProductVariantCreateReducerActionType
 } from "./reducer";
 import { ProductVariantCreatorStep } from "./types";
+import { dedupeListings } from "./utils";
 
 const useStyles = makeStyles(
   theme => ({
@@ -176,7 +177,7 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = props
       onTransition: (_, nextStep) => {
         if (nextStep === ProductVariantCreatorStep.summary) {
           dispatchFormDataAction({
-            type: ProductVariantCreateReducerActionType.reload
+            type: ProductVariantCreateReducerActionType.rebuild
           });
         }
       }
@@ -237,7 +238,7 @@ const ProductVariantCreatePage: React.FC<ProductVariantCreatePageProps> = props
             className={classes.button}
             disabled={!canHitNext(step, wizardData, variantsLeft)}
             variant="primary"
-            onClick={() => onSubmit(wizardData.variants)}
+            onClick={() => onSubmit(dedupeListings(wizardData).variants)}
           >
             <FormattedMessage
               id="Q3j++G"

src/products/components/ProductVariantCreatorPage/ProductVariantCreatorSummary.tsx

@@ -102,7 +102,7 @@ const useStyles = makeStyles<ProductVariantCreatorSummaryProps, ClassKey>(
         `minmax(180px, auto) repeat(${props.data.variants[0].channelListings
           .length +
           props.data.variants[0].stocks
-            .length}, minmax(180px, auto)) 140px 64px`,
+            .length}, minmax(180px, auto)) 220px 64px`,
       overflowX: "scroll",
       rowGap: theme.spacing(),
       paddingBottom: 3

src/products/components/ProductVariantCreatorPage/createVariants.ts

@@ -152,14 +152,6 @@ function addAttributeToVariant(
     }
   ]);
 }
-function addVariantAttributeInput(
-  data: CreateVariantInput[],
-  attribute: Attribute
-): CreateVariantInput[] {
-  return data
-    .map(variant => addAttributeToVariant(attribute, variant))
-    .reduce((acc, variantInput) => [...acc, ...variantInput]);
-}
 
 export function createVariantFlatMatrixDimension(
   variants: CreateVariantInput[],
@@ -167,7 +159,9 @@ export function createVariantFlatMatrixDimension(
 ): CreateVariantInput[] {
   if (attributes.length > 0) {
     return createVariantFlatMatrixDimension(
-      addVariantAttributeInput(variants, attributes[0]),
+      variants.flatMap(variant =>
+        addAttributeToVariant(attributes[0], variant)
+      ),
       attributes.slice(1)
     );
   } else {

src/products/components/ProductVariantCreatorPage/reducer.ts

@@ -1,4 +1,8 @@
-import { AttributeValueFragment, StockInput } from "@saleor/graphql";
+import {
+  AttributeValueFragment,
+  ProductVariantBulkCreateInput,
+  StockInput
+} from "@saleor/graphql";
 import {
   add,
   remove,
@@ -32,6 +36,7 @@ export enum ProductVariantCreateReducerActionType {
   changeWarehouses,
   deleteVariant,
   reload,
+  rebuild,
   selectValue
 }
 export interface ProductVariantCreateReducerAction {
@@ -80,6 +85,44 @@ export interface ProductVariantCreateReducerAction {
   type: ProductVariantCreateReducerActionType;
 }
 
+function getVariantId(variant: ProductVariantBulkCreateInput): string {
+  return variant.attributes
+    .map(attribute => attribute.values.join(":"))
+    .join("-");
+}
+
+function merge(
+  prev: ProductVariantBulkCreateInput[],
+  update: ProductVariantBulkCreateInput[]
+): ProductVariantBulkCreateInput[] {
+  const prevIds = prev.map(getVariantId);
+  const updateIds = update.map(getVariantId);
+  return [
+    ...prev
+      .filter(variant => updateIds.includes(getVariantId(variant)))
+      .map(variant => {
+        const updatedVariant = update.find(
+          v => getVariantId(v) === getVariantId(variant)
+        );
+
+        return {
+          ...updatedVariant,
+          sku: variant.sku
+        };
+      }),
+    ...update.filter(variant => !prevIds.includes(getVariantId(variant)))
+  ];
+}
+
+function rebuild(
+  state: ProductVariantCreateFormData
+): ProductVariantCreateFormData {
+  return {
+    ...state,
+    variants: merge(state.variants, createVariants(state))
+  };
+}
+
 function selectValue(
   prevState: ProductVariantCreateFormData,
   attributeId: string,
@@ -519,6 +562,8 @@ function reduceProductVariantCreateFormData(
       return deleteVariant(prevState, action.deleteVariant.variantIndex);
     case ProductVariantCreateReducerActionType.reload:
       return action.reload?.data || createVariantMatrix(prevState);
+    case ProductVariantCreateReducerActionType.rebuild:
+      return rebuild(prevState);
     default:
       return prevState;
   }

src/products/components/ProductVariantCreatorPage/utils.ts

@@ -5,6 +5,7 @@ import {
 } from "@saleor/graphql";
 import { getById } from "@saleor/orders/components/OrderReturnPage/utils";
 import { RelayToFlat } from "@saleor/types";
+import uniqBy from "lodash/uniqBy";
 
 import { AttributeValue, ProductVariantCreateFormData } from "./form";
 
@@ -79,3 +80,15 @@ export const getBasicAttributeValue = (
       attributeValues.find(getBySlug(attributeValue))
   };
 };
+
+export function dedupeListings(
+  data: ProductVariantCreateFormData
+): ProductVariantCreateFormData {
+  return {
+    ...data,
+    variants: data.variants.map(variant => ({
+      ...variant,
+      channelListings: uniqBy(variant.channelListings, "channelId")
+    }))
+  };
+}

src/products/views/ProductUpdate/ProductUpdate.tsx

@@ -530,7 +530,7 @@ export const ProductUpdate: React.FC<ProductUpdateProps> = ({ id, params }) => {
     <>
       <WindowTitle title={data?.product?.name} />
       {!!allChannels?.length &&
-        (isSimpleProduct ? (
+        (isSimpleProduct || product?.variants.length === 0 ? (
           <ChannelsAvailabilityDialog
             isSelected={isChannelSelected}
             channels={allChannels}

src/products/views/ProductUpdate/handlers/index.ts

@@ -142,7 +142,11 @@ export function createUpdateHandler(
       const result = await updateProduct(productVariables);
       errors = [...errors, ...result.data.productUpdate.errors];
 
+      if (product.variants.length === 0) {
+        await updateChannels(getSimpleChannelsVariables(data, product));
+      } else {
         await updateChannels(getChannelsVariables(product, allChannels, data));
+      }
     } else {
       if (!product.variants.length) {
         const productVariantResult = await productVariantCreate({

src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.tsx

@@ -204,7 +204,6 @@ export const ShippingZoneRatesCreatePage: React.FC<ShippingZoneRatesCreatePagePr
               <ChannelsAvailabilityCard
                 managePermissions={[PermissionEnum.MANAGE_SHIPPING]}
                 allChannelsCount={allChannelsCount}
-                selectedChannelsCount={shippingChannels?.length}
                 channelsList={data.channelListings}
                 openModal={openChannelsModal}
               />

src/shipping/components/ShippingZoneRatesPage/ShippingZoneRatesPage.tsx

@@ -235,7 +235,6 @@ export const ShippingZoneRatesPage: React.FC<ShippingZoneRatesPageProps> = ({
               <ChannelsAvailabilityCard
                 managePermissions={[PermissionEnum.MANAGE_SHIPPING]}
                 allChannelsCount={allChannelsCount}
-                selectedChannelsCount={shippingChannels?.length}
                 channelsList={data.channelListings.map(channel => ({
                   id: channel.id,
                   name: channel.name

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -4583,7 +4583,7 @@ exports[`Storyshots Generics / Channels availability card default 1`] = `
       <div
         class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
       >
-        Available at 3 out of 4 channels
+        Available at 2 out of 4 channels
       </div>
       <hr
         class="Hr-root-id ChannelsAvailabilityCard-hr-id"
@@ -4667,7 +4667,7 @@ exports[`Storyshots Generics / Channels availability card with onChange 1`] = `
       <div
         class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
       >
-        Available at 3 out of 4 channels
+        Available at 2 out of 4 channels
       </div>
       <hr
         class="Hr-root-id ChannelsAvailabilityCard-hr-id"
@@ -206300,11 +206300,21 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
                   Availability
                 </span>
               </div>
+              <div
+                class="MuiCardHeader-action-id"
+              />
             </div>
             <div
-              class="MuiCardContent-root-id"
+              class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
             >
-              You will be able to define availability of product after creating variants.
+              <div
+                class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
+              >
+                Available at 1 out of 7 channels
+              </div>
+              <hr
+                class="Hr-root-id ChannelsAvailabilityCard-hr-id"
+              />
             </div>
           </div>
           <div