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,260 +290,273 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
         submit,
         isSaveDisabled,
         attributeRichTextGetters
-      }) => (
+      }) => {
-        <>
+        const availabilityCommonProps = {
-          <Container>
+          managePermissions: [PermissionEnum.MANAGE_PRODUCTS],
-            <Backlink href={productListUrl()}>
+          messages: {
-              {intl.formatMessage(sectionNames.products)}
+            hiddenLabel: intl.formatMessage({
-            </Backlink>
+              id: "saKXY3",
-            <PageHeader title={header}>
+              defaultMessage: "Not published",
-              {extensionMenuItems.length > 0 && (
+              description: "product label"
-                <CardMenu menuItems={extensionMenuItems} data-test-id="menu" />
+            }),
-              )}
+
-            </PageHeader>
+            visibleLabel: intl.formatMessage({
-            <Grid richText>
+              id: "qJedl0",
-              <div>
+              defaultMessage: "Published",
-                <ProductDetailsForm
+              description: "product label"
-                  data={data}
+            })
-                  disabled={disabled}
+          },
-                  errors={errors}
+          errors: channelsErrors,
-                  onChange={change}
+          allChannelsCount,
-                />
+          disabled,
-                <CardSpacer />
+          onChange: handlers.changeChannels,
-                <ProductMedia
+          openModal: openChannelsModal
-                  media={media}
+        };
-                  placeholderImage={placeholderImage}
+
-                  onImageDelete={onImageDelete}
+        return (
-                  onImageReorder={onImageReorder}
+          <>
-                  onImageUpload={onImageUpload}
+            <Container>
-                  openMediaUrlModal={() => setMediaUrlModalStatus(true)}
+              <Backlink href={productListUrl()}>
-                  getImageEditUrl={imageId =>
+                {intl.formatMessage(sectionNames.products)}
-                    productImageUrl(productId, imageId)
+              </Backlink>
+              <PageHeader title={header}>
+                {extensionMenuItems.length > 0 && (
+                  <CardMenu
+                    menuItems={extensionMenuItems}
+                    data-test-id="menu"
+                  />
+                )}
+              </PageHeader>
+              <Grid richText>
+                <div>
+                  <ProductDetailsForm
+                    data={data}
+                    disabled={disabled}
+                    errors={errors}
+                    onChange={change}
+                  />
+                  <CardSpacer />
+                  <ProductMedia
+                    media={media}
+                    placeholderImage={placeholderImage}
+                    onImageDelete={onImageDelete}
+                    onImageReorder={onImageReorder}
+                    onImageUpload={onImageUpload}
+                    openMediaUrlModal={() => setMediaUrlModalStatus(true)}
+                    getImageEditUrl={imageId =>
+                      productImageUrl(productId, imageId)
+                    }
+                  />
+                  <CardSpacer />
+                  {data.attributes.length > 0 && (
+                    <Attributes
+                      attributes={data.attributes}
+                      attributeValues={attributeValues}
+                      errors={errors}
+                      loading={disabled}
+                      disabled={disabled}
+                      onChange={handlers.selectAttribute}
+                      onMultiChange={handlers.selectAttributeMultiple}
+                      onFileChange={handlers.selectAttributeFile}
+                      onReferencesRemove={handlers.selectAttributeReference}
+                      onReferencesAddClick={onAssignReferencesClick}
+                      onReferencesReorder={handlers.reorderAttributeValue}
+                      fetchAttributeValues={fetchAttributeValues}
+                      fetchMoreAttributeValues={fetchMoreAttributeValues}
+                      onAttributeSelectBlur={onAttributeSelectBlur}
+                      richTextGetters={attributeRichTextGetters}
+                    />
+                  )}
+                  <CardSpacer />
+                  {isSimpleProduct && (
+                    <>
+                      <ProductVariantPrice
+                        ProductVariantChannelListings={data.channelListings}
+                        errors={channelsErrors}
+                        loading={disabled}
+                        onChange={handlers.changeChannelPrice}
+                      />
+                      <CardSpacer />
+                    </>
+                  )}
+                  {hasVariants ? (
+                    <ProductVariants
+                      productId={productId}
+                      disabled={disabled}
+                      limits={limits}
+                      variants={variants}
+                      product={product}
+                      onVariantsAdd={onVariantsAdd}
+                      onVariantReorder={onVariantReorder}
+                      onSetDefaultVariant={onSetDefaultVariant}
+                      toolbar={toolbar}
+                      isChecked={isChecked}
+                      selected={selected}
+                      selectedChannelId={selectedChannelId}
+                      toggle={toggle}
+                      toggleAll={toggleAll}
+                    />
+                  ) : (
+                    <>
+                      <ProductShipping
+                        data={data}
+                        disabled={disabled}
+                        errors={errors}
+                        weightUnit={product?.weight?.unit || defaultWeightUnit}
+                        onChange={change}
+                      />
+                      <CardSpacer />
+                      <ProductStocks
+                        onVariantChannelListingChange={
+                          handlers.changeChannelPreorder
+                        }
+                        productVariantChannelListings={data.channelListings}
+                        onEndPreorderTrigger={
+                          !!variants?.[0]?.preorder
+                            ? () => onVariantEndPreorderDialogOpen()
+                            : null
+                        }
+                        data={data}
+                        disabled={disabled}
+                        hasVariants={false}
+                        errors={errors}
+                        formErrors={formErrors}
+                        stocks={data.stocks}
+                        warehouses={warehouses}
+                        onChange={handlers.changeStock}
+                        onFormDataChange={change}
+                        onChangePreorderEndDate={handlers.changePreorderEndDate}
+                        onWarehouseStockAdd={handlers.addStock}
+                        onWarehouseStockDelete={handlers.deleteStock}
+                        onWarehouseConfigure={onWarehouseConfigure}
+                      />
+                    </>
+                  )}
+                  <CardSpacer />
+                  <SeoForm
+                    errors={errors}
+                    title={data.seoTitle}
+                    titlePlaceholder={data.name}
+                    description={data.seoDescription}
+                    descriptionPlaceholder={""} // TODO: cast description to string
+                    slug={data.slug}
+                    slugPlaceholder={data.name}
+                    loading={disabled}
+                    onClick={onSeoClick}
+                    onChange={change}
+                    helperText={intl.formatMessage({
+                      id: "LKoIB1",
+                      defaultMessage:
+                        "Add search engine title and description to make this product easier to find"
+                    })}
+                  />
+                  <CardSpacer />
+                  <Metadata data={data} onChange={handlers.changeMetadata} />
+                </div>
+                <div>
+                  <ProductOrganization
+                    canChangeType={false}
+                    categories={categories}
+                    categoryInputDisplayValue={selectedCategory}
+                    collections={collections}
+                    collectionsInputDisplayValue={selectedCollections}
+                    data={data}
+                    disabled={disabled}
+                    errors={errors}
+                    fetchCategories={fetchCategories}
+                    fetchCollections={fetchCollections}
+                    fetchMoreCategories={fetchMoreCategories}
+                    fetchMoreCollections={fetchMoreCollections}
+                    productType={product?.productType}
+                    onCategoryChange={handlers.selectCategory}
+                    onCollectionChange={handlers.selectCollection}
+                  />
+                  <CardSpacer />
+                  {isSimpleProduct ? (
+                    <ChannelsAvailabilityCard
+                      {...availabilityCommonProps}
+                      channels={data.channelListings}
+                    />
+                  ) : product?.variants.length === 0 ? (
+                    <ChannelsAvailabilityCard
+                      {...availabilityCommonProps}
+                      channelsList={data.channelListings}
+                    />
+                  ) : (
+                    <ChannelsWithVariantsAvailabilityCard
+                      messages={{
+                        hiddenLabel: intl.formatMessage({
+                          id: "saKXY3",
+                          defaultMessage: "Not published",
+                          description: "product label"
+                        }),
+
+                        visibleLabel: intl.formatMessage({
+                          id: "qJedl0",
+                          defaultMessage: "Published",
+                          description: "product label"
+                        })
+                      }}
+                      errors={channelsErrors}
+                      channels={data.channelsData}
+                      channelsWithVariantsData={channelsWithVariantsData}
+                      variants={variants}
+                      onChange={handlers.changeChannels}
+                      openModal={openChannelsModal}
+                    />
+                  )}
+                  <CardSpacer />
+                  <ProductTaxes
+                    data={data}
+                    disabled={disabled}
+                    selectedTaxTypeDisplayName={selectedTaxType}
+                    taxTypes={taxTypes}
+                    onChange={change}
+                    onTaxTypeChange={handlers.selectTaxRate}
+                  />
+                </div>
+              </Grid>
+              <Savebar
+                onCancel={() => navigate(productListUrl())}
+                onDelete={onDelete}
+                onSubmit={submit}
+                state={saveButtonBarState}
+                disabled={isSaveDisabled}
+              />
+              {canOpenAssignReferencesAttributeDialog && (
+                <AssignAttributeValueDialog
+                  attributeValues={getAttributeValuesFromReferences(
+                    assignReferencesAttributeId,
+                    data.attributes,
+                    referencePages,
+                    referenceProducts
+                  )}
+                  hasMore={handlers.fetchMoreReferences?.hasMore}
+                  open={canOpenAssignReferencesAttributeDialog}
+                  onFetch={handlers.fetchReferences}
+                  onFetchMore={handlers.fetchMoreReferences?.onFetchMore}
+                  loading={handlers.fetchMoreReferences?.loading}
+                  onClose={onCloseDialog}
+                  onSubmit={attributeValues =>
+                    handleAssignReferenceAttribute(
+                      attributeValues,
+                      data,
+                      handlers
+                    )
                   }
                 />
-                <CardSpacer />
+              )}
-                {data.attributes.length > 0 && (
-                  <Attributes
-                    attributes={data.attributes}
-                    attributeValues={attributeValues}
-                    errors={errors}
-                    loading={disabled}
-                    disabled={disabled}
-                    onChange={handlers.selectAttribute}
-                    onMultiChange={handlers.selectAttributeMultiple}
-                    onFileChange={handlers.selectAttributeFile}
-                    onReferencesRemove={handlers.selectAttributeReference}
-                    onReferencesAddClick={onAssignReferencesClick}
-                    onReferencesReorder={handlers.reorderAttributeValue}
-                    fetchAttributeValues={fetchAttributeValues}
-                    fetchMoreAttributeValues={fetchMoreAttributeValues}
-                    onAttributeSelectBlur={onAttributeSelectBlur}
-                    richTextGetters={attributeRichTextGetters}
-                  />
-                )}
-                <CardSpacer />
-                {isSimpleProduct && (
-                  <>
-                    <ProductVariantPrice
-                      ProductVariantChannelListings={data.channelListings}
-                      errors={channelsErrors}
-                      loading={disabled}
-                      onChange={handlers.changeChannelPrice}
-                    />
-                    <CardSpacer />
-                  </>
-                )}
-                {hasVariants ? (
-                  <ProductVariants
-                    productId={productId}
-                    disabled={disabled}
-                    limits={limits}
-                    variants={variants}
-                    product={product}
-                    onVariantsAdd={onVariantsAdd}
-                    onVariantReorder={onVariantReorder}
-                    onSetDefaultVariant={onSetDefaultVariant}
-                    toolbar={toolbar}
-                    isChecked={isChecked}
-                    selected={selected}
-                    selectedChannelId={selectedChannelId}
-                    toggle={toggle}
-                    toggleAll={toggleAll}
-                  />
-                ) : (
-                  <>
-                    <ProductShipping
-                      data={data}
-                      disabled={disabled}
-                      errors={errors}
-                      weightUnit={product?.weight?.unit || defaultWeightUnit}
-                      onChange={change}
-                    />
-                    <CardSpacer />
-                    <ProductStocks
-                      onVariantChannelListingChange={
-                        handlers.changeChannelPreorder
-                      }
-                      productVariantChannelListings={data.channelListings}
-                      onEndPreorderTrigger={
-                        !!variants?.[0]?.preorder
-                          ? () => onVariantEndPreorderDialogOpen()
-                          : null
-                      }
-                      data={data}
-                      disabled={disabled}
-                      hasVariants={false}
-                      errors={errors}
-                      formErrors={formErrors}
-                      stocks={data.stocks}
-                      warehouses={warehouses}
-                      onChange={handlers.changeStock}
-                      onFormDataChange={change}
-                      onChangePreorderEndDate={handlers.changePreorderEndDate}
-                      onWarehouseStockAdd={handlers.addStock}
-                      onWarehouseStockDelete={handlers.deleteStock}
-                      onWarehouseConfigure={onWarehouseConfigure}
-                    />
-                  </>
-                )}
-                <CardSpacer />
-                <SeoForm
-                  errors={errors}
-                  title={data.seoTitle}
-                  titlePlaceholder={data.name}
-                  description={data.seoDescription}
-                  descriptionPlaceholder={""} // TODO: cast description to string
-                  slug={data.slug}
-                  slugPlaceholder={data.name}
-                  loading={disabled}
-                  onClick={onSeoClick}
-                  onChange={change}
-                  helperText={intl.formatMessage({
-                    id: "LKoIB1",
-                    defaultMessage:
-                      "Add search engine title and description to make this product easier to find"
-                  })}
-                />
-                <CardSpacer />
-                <Metadata data={data} onChange={handlers.changeMetadata} />
-              </div>
-              <div>
-                <ProductOrganization
-                  canChangeType={false}
-                  categories={categories}
-                  categoryInputDisplayValue={selectedCategory}
-                  collections={collections}
-                  collectionsInputDisplayValue={selectedCollections}
-                  data={data}
-                  disabled={disabled}
-                  errors={errors}
-                  fetchCategories={fetchCategories}
-                  fetchCollections={fetchCollections}
-                  fetchMoreCategories={fetchMoreCategories}
-                  fetchMoreCollections={fetchMoreCollections}
-                  productType={product?.productType}
-                  onCategoryChange={handlers.selectCategory}
-                  onCollectionChange={handlers.selectCollection}
-                />
-                <CardSpacer />
-                {isSimpleProduct ? (
-                  <ChannelsAvailabilityCard
-                    managePermissions={[PermissionEnum.MANAGE_PRODUCTS]}
-                    messages={{
-                      hiddenLabel: intl.formatMessage({
-                        id: "saKXY3",
-                        defaultMessage: "Not published",
-                        description: "product label"
-                      }),
 
-                      visibleLabel: intl.formatMessage({
+              <ProductExternalMediaDialog
-                        id: "qJedl0",
+                product={product}
-                        defaultMessage: "Published",
+                onClose={() => setMediaUrlModalStatus(false)}
-                        description: "product label"
+                open={mediaUrlModalStatus}
-                      })
+                onSubmit={onMediaUrlUpload}
-                    }}
-                    errors={channelsErrors}
-                    selectedChannelsCount={data.channelListings.length}
-                    allChannelsCount={allChannelsCount}
-                    channels={data.channelListings}
-                    disabled={disabled}
-                    onChange={handlers.changeChannels}
-                    openModal={openChannelsModal}
-                  />
-                ) : (
-                  <ChannelsWithVariantsAvailabilityCard
-                    messages={{
-                      hiddenLabel: intl.formatMessage({
-                        id: "saKXY3",
-                        defaultMessage: "Not published",
-                        description: "product label"
-                      }),
-
-                      visibleLabel: intl.formatMessage({
-                        id: "qJedl0",
-                        defaultMessage: "Published",
-                        description: "product label"
-                      })
-                    }}
-                    errors={channelsErrors}
-                    channels={data.channelsData}
-                    channelsWithVariantsData={channelsWithVariantsData}
-                    variants={variants}
-                    onChange={handlers.changeChannels}
-                    openModal={openChannelsModal}
-                  />
-                )}
-                <CardSpacer />
-                <ProductTaxes
-                  data={data}
-                  disabled={disabled}
-                  selectedTaxTypeDisplayName={selectedTaxType}
-                  taxTypes={taxTypes}
-                  onChange={change}
-                  onTaxTypeChange={handlers.selectTaxRate}
-                />
-              </div>
-            </Grid>
-            <Savebar
-              onCancel={() => navigate(productListUrl())}
-              onDelete={onDelete}
-              onSubmit={submit}
-              state={saveButtonBarState}
-              disabled={isSaveDisabled}
-            />
-            {canOpenAssignReferencesAttributeDialog && (
-              <AssignAttributeValueDialog
-                attributeValues={getAttributeValuesFromReferences(
-                  assignReferencesAttributeId,
-                  data.attributes,
-                  referencePages,
-                  referenceProducts
-                )}
-                hasMore={handlers.fetchMoreReferences?.hasMore}
-                open={canOpenAssignReferencesAttributeDialog}
-                onFetch={handlers.fetchReferences}
-                onFetchMore={handlers.fetchMoreReferences?.onFetchMore}
-                loading={handlers.fetchMoreReferences?.loading}
-                onClose={onCloseDialog}
-                onSubmit={attributeValues =>
-                  handleAssignReferenceAttribute(
-                    attributeValues,
-                    data,
-                    handlers
-                  )
-                }
               />
-            )}
+            </Container>
-
+          </>
-            <ProductExternalMediaDialog
+        );
-              product={product}
+      }}
-              onClose={() => setMediaUrlModalStatus(false)}
-              open={mediaUrlModalStatus}
-              onSubmit={onMediaUrlUpload}
-            />
-          </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];
 
-      await updateChannels(getChannelsVariables(product, allChannels, data));
+      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