From db1c33d1fea0befe761fc631fc22b1436a24bd09 Mon Sep 17 00:00:00 2001 From: Krzysztof Wolski Date: Thu, 1 Oct 2020 18:56:38 +0200 Subject: [PATCH] Add default variant indicator for variant nav --- src/fragments/products.ts | 3 + src/fragments/types/ProductVariant.ts | 6 ++ .../ProductVariantNavigation.tsx | 60 ++++++++++++------- .../ProductVariantPage/ProductVariantPage.tsx | 16 +++-- src/products/types/ProductVariantDetails.ts | 6 ++ src/products/types/SimpleProductUpdate.ts | 24 ++++++++ src/products/types/VariantCreate.ts | 6 ++ src/products/types/VariantImageAssign.ts | 6 ++ src/products/types/VariantImageUnassign.ts | 6 ++ src/products/types/VariantUpdate.ts | 12 ++++ src/products/views/ProductVariant.tsx | 1 + 11 files changed, 119 insertions(+), 27 deletions(-) diff --git a/src/fragments/products.ts b/src/fragments/products.ts index b0d729069..33e0fbc33 100644 --- a/src/fragments/products.ts +++ b/src/fragments/products.ts @@ -253,6 +253,9 @@ export const fragmentVariant = gql` url } } + defaultVariant { + id + } } sku stocks { diff --git a/src/fragments/types/ProductVariant.ts b/src/fragments/types/ProductVariant.ts index 928e068c8..cc447088e 100644 --- a/src/fragments/types/ProductVariant.ts +++ b/src/fragments/types/ProductVariant.ts @@ -99,6 +99,11 @@ export interface ProductVariant_product_variants { images: (ProductVariant_product_variants_images | null)[] | null; } +export interface ProductVariant_product_defaultVariant { + __typename: "ProductVariant"; + id: string; +} + export interface ProductVariant_product { __typename: "Product"; id: string; @@ -107,6 +112,7 @@ export interface ProductVariant_product { name: string; thumbnail: ProductVariant_product_thumbnail | null; variants: (ProductVariant_product_variants | null)[] | null; + defaultVariant: ProductVariant_product_defaultVariant | null; } export interface ProductVariant_stocks_warehouse { diff --git a/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx b/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx index 6d9214d22..8bae5945a 100644 --- a/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx +++ b/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx @@ -1,6 +1,7 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; import { makeStyles } from "@material-ui/core/styles"; +import { fade } from "@material-ui/core/styles/colorManipulator"; import TableCell from "@material-ui/core/TableCell"; import TableRow from "@material-ui/core/TableRow"; import CardTitle from "@saleor/components/CardTitle"; @@ -28,6 +29,10 @@ const useStyles = makeStyles( colName: { paddingLeft: 0 }, + defaultVariant: { + color: fade(theme.palette.text.secondary, 0.6), + display: "block" + }, firstVariant: { width: 88 }, @@ -57,6 +62,7 @@ const useStyles = makeStyles( interface ProductVariantNavigationProps { current?: string; + defaultVariantId?: string; fallbackThumbnail: string; variants: | ProductVariantDetails_productVariant[] @@ -69,6 +75,7 @@ interface ProductVariantNavigationProps { const ProductVariantNavigation: React.FC = props => { const { current, + defaultVariantId, fallbackThumbnail, variants, onAdd, @@ -89,28 +96,37 @@ const ProductVariantNavigation: React.FC = props /> - {renderCollection(variants, (variant, variantIndex) => ( - onRowClick(variant.id) : undefined} - > - variant.images[0].url, - fallbackThumbnail - )} - /> - - {variant ? variant.name || variant.sku : } - - - ))} + {renderCollection(variants, (variant, variantIndex) => { + const isDefault = variant && variant.id === defaultVariantId; + const isActive = variant && variant.id === current; + return ( + onRowClick(variant.id) : undefined} + > + + + {variant ? variant.name || variant.sku : } + {isDefault && ( + + {intl.formatMessage({ + defaultMessage: "default", + description: "default variant label" + })} + + )} + + + ); + })} {onAdd ? ( diff --git a/src/products/components/ProductVariantPage/ProductVariantPage.tsx b/src/products/components/ProductVariantPage/ProductVariantPage.tsx index 3e19efa9e..0030e346d 100644 --- a/src/products/components/ProductVariantPage/ProductVariantPage.tsx +++ b/src/products/components/ProductVariantPage/ProductVariantPage.tsx @@ -15,6 +15,7 @@ import useFormset, { FormsetChange, FormsetData } from "@saleor/hooks/useFormset"; +import { VariantUpdate_productVariantUpdate_errors } from "@saleor/products/types/VariantUpdate"; import { getAttributeInputFromVariant, getStockInputFromVariant @@ -54,13 +55,16 @@ export interface ProductVariantPageSubmitData } interface ProductVariantPageProps { + defaultVariantId?: string; defaultWeightUnit: string; - variant?: ProductVariant; - errors: ProductErrorWithAttributesFragment[]; - saveButtonBarState: ConfirmButtonTransitionState; + errors: + | ProductErrorWithAttributesFragment[] + | VariantUpdate_productVariantUpdate_errors[]; + header: string; loading?: boolean; placeholderImage?: string; - header: string; + saveButtonBarState: ConfirmButtonTransitionState; + variant?: ProductVariant; warehouses: WarehouseFragment[]; onVariantReorder: ReorderAction; onAdd(); @@ -74,10 +78,11 @@ interface ProductVariantPageProps { } const ProductVariantPage: React.FC = ({ + defaultVariantId, defaultWeightUnit, errors, - loading, header, + loading, placeholderImage, saveButtonBarState, variant, @@ -192,6 +197,7 @@ const ProductVariantPage: React.FC = ({
variant.product.thumbnail.url )} diff --git a/src/products/types/ProductVariantDetails.ts b/src/products/types/ProductVariantDetails.ts index 7227a7405..6917ef57d 100644 --- a/src/products/types/ProductVariantDetails.ts +++ b/src/products/types/ProductVariantDetails.ts @@ -99,6 +99,11 @@ export interface ProductVariantDetails_productVariant_product_variants { images: (ProductVariantDetails_productVariant_product_variants_images | null)[] | null; } +export interface ProductVariantDetails_productVariant_product_defaultVariant { + __typename: "ProductVariant"; + id: string; +} + export interface ProductVariantDetails_productVariant_product { __typename: "Product"; id: string; @@ -107,6 +112,7 @@ export interface ProductVariantDetails_productVariant_product { name: string; thumbnail: ProductVariantDetails_productVariant_product_thumbnail | null; variants: (ProductVariantDetails_productVariant_product_variants | null)[] | null; + defaultVariant: ProductVariantDetails_productVariant_product_defaultVariant | null; } export interface ProductVariantDetails_productVariant_stocks_warehouse { diff --git a/src/products/types/SimpleProductUpdate.ts b/src/products/types/SimpleProductUpdate.ts index b0c1a04d3..276322553 100644 --- a/src/products/types/SimpleProductUpdate.ts +++ b/src/products/types/SimpleProductUpdate.ts @@ -346,6 +346,11 @@ export interface SimpleProductUpdate_productVariantUpdate_productVariant_product images: (SimpleProductUpdate_productVariantUpdate_productVariant_product_variants_images | null)[] | null; } +export interface SimpleProductUpdate_productVariantUpdate_productVariant_product_defaultVariant { + __typename: "ProductVariant"; + id: string; +} + export interface SimpleProductUpdate_productVariantUpdate_productVariant_product { __typename: "Product"; id: string; @@ -354,6 +359,7 @@ export interface SimpleProductUpdate_productVariantUpdate_productVariant_product name: string; thumbnail: SimpleProductUpdate_productVariantUpdate_productVariant_product_thumbnail | null; variants: (SimpleProductUpdate_productVariantUpdate_productVariant_product_variants | null)[] | null; + defaultVariant: SimpleProductUpdate_productVariantUpdate_productVariant_product_defaultVariant | null; } export interface SimpleProductUpdate_productVariantUpdate_productVariant_stocks_warehouse { @@ -497,6 +503,11 @@ export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_p images: (SimpleProductUpdate_productVariantStocksCreate_productVariant_product_variants_images | null)[] | null; } +export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_product_defaultVariant { + __typename: "ProductVariant"; + id: string; +} + export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_product { __typename: "Product"; id: string; @@ -505,6 +516,7 @@ export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_p name: string; thumbnail: SimpleProductUpdate_productVariantStocksCreate_productVariant_product_thumbnail | null; variants: (SimpleProductUpdate_productVariantStocksCreate_productVariant_product_variants | null)[] | null; + defaultVariant: SimpleProductUpdate_productVariantStocksCreate_productVariant_product_defaultVariant | null; } export interface SimpleProductUpdate_productVariantStocksCreate_productVariant_stocks_warehouse { @@ -647,6 +659,11 @@ export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_p images: (SimpleProductUpdate_productVariantStocksDelete_productVariant_product_variants_images | null)[] | null; } +export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_product_defaultVariant { + __typename: "ProductVariant"; + id: string; +} + export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_product { __typename: "Product"; id: string; @@ -655,6 +672,7 @@ export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_p name: string; thumbnail: SimpleProductUpdate_productVariantStocksDelete_productVariant_product_thumbnail | null; variants: (SimpleProductUpdate_productVariantStocksDelete_productVariant_product_variants | null)[] | null; + defaultVariant: SimpleProductUpdate_productVariantStocksDelete_productVariant_product_defaultVariant | null; } export interface SimpleProductUpdate_productVariantStocksDelete_productVariant_stocks_warehouse { @@ -798,6 +816,11 @@ export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_p images: (SimpleProductUpdate_productVariantStocksUpdate_productVariant_product_variants_images | null)[] | null; } +export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_product_defaultVariant { + __typename: "ProductVariant"; + id: string; +} + export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_product { __typename: "Product"; id: string; @@ -806,6 +829,7 @@ export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_p name: string; thumbnail: SimpleProductUpdate_productVariantStocksUpdate_productVariant_product_thumbnail | null; variants: (SimpleProductUpdate_productVariantStocksUpdate_productVariant_product_variants | null)[] | null; + defaultVariant: SimpleProductUpdate_productVariantStocksUpdate_productVariant_product_defaultVariant | null; } export interface SimpleProductUpdate_productVariantStocksUpdate_productVariant_stocks_warehouse { diff --git a/src/products/types/VariantCreate.ts b/src/products/types/VariantCreate.ts index be28216f6..c364133a0 100644 --- a/src/products/types/VariantCreate.ts +++ b/src/products/types/VariantCreate.ts @@ -106,6 +106,11 @@ export interface VariantCreate_productVariantCreate_productVariant_product_varia images: (VariantCreate_productVariantCreate_productVariant_product_variants_images | null)[] | null; } +export interface VariantCreate_productVariantCreate_productVariant_product_defaultVariant { + __typename: "ProductVariant"; + id: string; +} + export interface VariantCreate_productVariantCreate_productVariant_product { __typename: "Product"; id: string; @@ -114,6 +119,7 @@ export interface VariantCreate_productVariantCreate_productVariant_product { name: string; thumbnail: VariantCreate_productVariantCreate_productVariant_product_thumbnail | null; variants: (VariantCreate_productVariantCreate_productVariant_product_variants | null)[] | null; + defaultVariant: VariantCreate_productVariantCreate_productVariant_product_defaultVariant | null; } export interface VariantCreate_productVariantCreate_productVariant_stocks_warehouse { diff --git a/src/products/types/VariantImageAssign.ts b/src/products/types/VariantImageAssign.ts index 5dcf48722..4407c7bd5 100644 --- a/src/products/types/VariantImageAssign.ts +++ b/src/products/types/VariantImageAssign.ts @@ -105,6 +105,11 @@ export interface VariantImageAssign_variantImageAssign_productVariant_product_va images: (VariantImageAssign_variantImageAssign_productVariant_product_variants_images | null)[] | null; } +export interface VariantImageAssign_variantImageAssign_productVariant_product_defaultVariant { + __typename: "ProductVariant"; + id: string; +} + export interface VariantImageAssign_variantImageAssign_productVariant_product { __typename: "Product"; id: string; @@ -113,6 +118,7 @@ export interface VariantImageAssign_variantImageAssign_productVariant_product { name: string; thumbnail: VariantImageAssign_variantImageAssign_productVariant_product_thumbnail | null; variants: (VariantImageAssign_variantImageAssign_productVariant_product_variants | null)[] | null; + defaultVariant: VariantImageAssign_variantImageAssign_productVariant_product_defaultVariant | null; } export interface VariantImageAssign_variantImageAssign_productVariant_stocks_warehouse { diff --git a/src/products/types/VariantImageUnassign.ts b/src/products/types/VariantImageUnassign.ts index 347b3f992..2836421b1 100644 --- a/src/products/types/VariantImageUnassign.ts +++ b/src/products/types/VariantImageUnassign.ts @@ -105,6 +105,11 @@ export interface VariantImageUnassign_variantImageUnassign_productVariant_produc images: (VariantImageUnassign_variantImageUnassign_productVariant_product_variants_images | null)[] | null; } +export interface VariantImageUnassign_variantImageUnassign_productVariant_product_defaultVariant { + __typename: "ProductVariant"; + id: string; +} + export interface VariantImageUnassign_variantImageUnassign_productVariant_product { __typename: "Product"; id: string; @@ -113,6 +118,7 @@ export interface VariantImageUnassign_variantImageUnassign_productVariant_produc name: string; thumbnail: VariantImageUnassign_variantImageUnassign_productVariant_product_thumbnail | null; variants: (VariantImageUnassign_variantImageUnassign_productVariant_product_variants | null)[] | null; + defaultVariant: VariantImageUnassign_variantImageUnassign_productVariant_product_defaultVariant | null; } export interface VariantImageUnassign_variantImageUnassign_productVariant_stocks_warehouse { diff --git a/src/products/types/VariantUpdate.ts b/src/products/types/VariantUpdate.ts index 7bb411da3..f785727d7 100644 --- a/src/products/types/VariantUpdate.ts +++ b/src/products/types/VariantUpdate.ts @@ -106,6 +106,11 @@ export interface VariantUpdate_productVariantUpdate_productVariant_product_varia images: (VariantUpdate_productVariantUpdate_productVariant_product_variants_images | null)[] | null; } +export interface VariantUpdate_productVariantUpdate_productVariant_product_defaultVariant { + __typename: "ProductVariant"; + id: string; +} + export interface VariantUpdate_productVariantUpdate_productVariant_product { __typename: "Product"; id: string; @@ -114,6 +119,7 @@ export interface VariantUpdate_productVariantUpdate_productVariant_product { name: string; thumbnail: VariantUpdate_productVariantUpdate_productVariant_product_thumbnail | null; variants: (VariantUpdate_productVariantUpdate_productVariant_product_variants | null)[] | null; + defaultVariant: VariantUpdate_productVariantUpdate_productVariant_product_defaultVariant | null; } export interface VariantUpdate_productVariantUpdate_productVariant_stocks_warehouse { @@ -257,6 +263,11 @@ export interface VariantUpdate_productVariantStocksUpdate_productVariant_product images: (VariantUpdate_productVariantStocksUpdate_productVariant_product_variants_images | null)[] | null; } +export interface VariantUpdate_productVariantStocksUpdate_productVariant_product_defaultVariant { + __typename: "ProductVariant"; + id: string; +} + export interface VariantUpdate_productVariantStocksUpdate_productVariant_product { __typename: "Product"; id: string; @@ -265,6 +276,7 @@ export interface VariantUpdate_productVariantStocksUpdate_productVariant_product name: string; thumbnail: VariantUpdate_productVariantStocksUpdate_productVariant_product_thumbnail | null; variants: (VariantUpdate_productVariantStocksUpdate_productVariant_product_variants | null)[] | null; + defaultVariant: VariantUpdate_productVariantStocksUpdate_productVariant_product_defaultVariant | null; } export interface VariantUpdate_productVariantStocksUpdate_productVariant_stocks_warehouse { diff --git a/src/products/views/ProductVariant.tsx b/src/products/views/ProductVariant.tsx index 2de88694b..50b8ccd52 100644 --- a/src/products/views/ProductVariant.tsx +++ b/src/products/views/ProductVariant.tsx @@ -201,6 +201,7 @@ export const ProductVariant: React.FC = ({