From 3a8502793427fa914ecc092515db95caa648ed28 Mon Sep 17 00:00:00 2001 From: Dawid Date: Fri, 29 Jul 2022 18:45:52 +0200 Subject: [PATCH] Fix variant details/create page sidebar (#2180) --- locale/defaultMessages.json | 12 +- src/graphql/hooks.generated.ts | 3 + src/graphql/types.generated.ts | 2 +- src/intl.ts | 5 + .../ProductVariantCreatePage.tsx | 4 + .../ProductVariantNavigation.tsx | 79 +------ .../ProductVariantNavigation/messages.ts | 19 ++ .../ProductVariantNavigation/styles.ts | 38 +++ src/products/queries.ts | 3 + src/products/views/ProductVariantCreate.tsx | 1 + .../__snapshots__/Stories.test.ts.snap | 219 ++++++++++++------ 11 files changed, 234 insertions(+), 151 deletions(-) create mode 100644 src/products/components/ProductVariantNavigation/messages.ts create mode 100644 src/products/components/ProductVariantNavigation/styles.ts diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json index e6b9c5cc2..d2375b055 100644 --- a/locale/defaultMessages.json +++ b/locale/defaultMessages.json @@ -1225,6 +1225,10 @@ "context": "order refund amount, input button", "string": "Refund {currency} {amount}" }, + "8GC/ah": { + "context": "variants section name", + "string": "Variants" + }, "8HRy+U": { "string": "Category Description" }, @@ -2609,6 +2613,10 @@ "IoDlcd": { "string": "Slug" }, + "IqRBql": { + "context": "variant name", + "string": "New variant" + }, "Irflxf": { "context": "window title", "string": "Create category" @@ -5582,10 +5590,6 @@ "context": "gift card history message", "string": "Gift card was deactivated by {deactivatedBy}" }, - "gF7hbK": { - "context": "variant name", - "string": "New Variant" - }, "gKdGxP": { "context": "error message", "string": "Only pre-authorized payments can be captured" diff --git a/src/graphql/hooks.generated.ts b/src/graphql/hooks.generated.ts index 90ea95187..abfc418ab 100644 --- a/src/graphql/hooks.generated.ts +++ b/src/graphql/hooks.generated.ts @@ -12445,6 +12445,9 @@ export const ProductVariantCreateDataDocument = gql` thumbnail { url } + defaultVariant { + id + } variants { id name diff --git a/src/graphql/types.generated.ts b/src/graphql/types.generated.ts index 5c6ea3c47..e2b22e3fb 100644 --- a/src/graphql/types.generated.ts +++ b/src/graphql/types.generated.ts @@ -7693,7 +7693,7 @@ export type ProductVariantCreateDataQueryVariables = Exact<{ }>; -export type ProductVariantCreateDataQuery = { __typename: 'Query', product: { __typename: 'Product', id: string, name: string, media: Array<{ __typename: 'ProductMedia', id: string, sortOrder: number | null, url: string }> | null, channelListings: Array<{ __typename: 'ProductChannelListing', channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null, productType: { __typename: 'ProductType', id: string, selectionVariantAttributes: Array<{ __typename: 'Attribute', id: string, name: string | null, slug: string | null, inputType: AttributeInputTypeEnum | null, entityType: AttributeEntityTypeEnum | null, valueRequired: boolean, unit: MeasurementUnitsEnum | null, choices: { __typename: 'AttributeValueCountableConnection', pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null }, edges: Array<{ __typename: 'AttributeValueCountableEdge', cursor: string, node: { __typename: 'AttributeValue', plainText: string | null, richText: any | null, id: string, name: string | null, slug: string | null, reference: string | null, boolean: boolean | null, date: any | null, dateTime: any | null, value: string | null, file: { __typename: 'File', url: string, contentType: string | null } | null } }> } | null }> | null, nonSelectionVariantAttributes: Array<{ __typename: 'Attribute', id: string, name: string | null, slug: string | null, inputType: AttributeInputTypeEnum | null, entityType: AttributeEntityTypeEnum | null, valueRequired: boolean, unit: MeasurementUnitsEnum | null, choices: { __typename: 'AttributeValueCountableConnection', pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null }, edges: Array<{ __typename: 'AttributeValueCountableEdge', cursor: string, node: { __typename: 'AttributeValue', plainText: string | null, richText: any | null, id: string, name: string | null, slug: string | null, reference: string | null, boolean: boolean | null, date: any | null, dateTime: any | null, value: string | null, file: { __typename: 'File', url: string, contentType: string | null } | null } }> } | null }> | null }, thumbnail: { __typename: 'Image', url: string } | null, variants: Array<{ __typename: 'ProductVariant', id: string, name: string, sku: string | null, media: Array<{ __typename: 'ProductMedia', id: string, url: string, type: ProductMediaType }> | null }> | null } | null }; +export type ProductVariantCreateDataQuery = { __typename: 'Query', product: { __typename: 'Product', id: string, name: string, media: Array<{ __typename: 'ProductMedia', id: string, sortOrder: number | null, url: string }> | null, channelListings: Array<{ __typename: 'ProductChannelListing', channel: { __typename: 'Channel', id: string, name: string, currencyCode: string } }> | null, productType: { __typename: 'ProductType', id: string, selectionVariantAttributes: Array<{ __typename: 'Attribute', id: string, name: string | null, slug: string | null, inputType: AttributeInputTypeEnum | null, entityType: AttributeEntityTypeEnum | null, valueRequired: boolean, unit: MeasurementUnitsEnum | null, choices: { __typename: 'AttributeValueCountableConnection', pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null }, edges: Array<{ __typename: 'AttributeValueCountableEdge', cursor: string, node: { __typename: 'AttributeValue', plainText: string | null, richText: any | null, id: string, name: string | null, slug: string | null, reference: string | null, boolean: boolean | null, date: any | null, dateTime: any | null, value: string | null, file: { __typename: 'File', url: string, contentType: string | null } | null } }> } | null }> | null, nonSelectionVariantAttributes: Array<{ __typename: 'Attribute', id: string, name: string | null, slug: string | null, inputType: AttributeInputTypeEnum | null, entityType: AttributeEntityTypeEnum | null, valueRequired: boolean, unit: MeasurementUnitsEnum | null, choices: { __typename: 'AttributeValueCountableConnection', pageInfo: { __typename: 'PageInfo', endCursor: string | null, hasNextPage: boolean, hasPreviousPage: boolean, startCursor: string | null }, edges: Array<{ __typename: 'AttributeValueCountableEdge', cursor: string, node: { __typename: 'AttributeValue', plainText: string | null, richText: any | null, id: string, name: string | null, slug: string | null, reference: string | null, boolean: boolean | null, date: any | null, dateTime: any | null, value: string | null, file: { __typename: 'File', url: string, contentType: string | null } | null } }> } | null }> | null }, thumbnail: { __typename: 'Image', url: string } | null, defaultVariant: { __typename: 'ProductVariant', id: string } | null, variants: Array<{ __typename: 'ProductVariant', id: string, name: string, sku: string | null, media: Array<{ __typename: 'ProductMedia', id: string, url: string, type: ProductMediaType }> | null }> | null } | null }; export type ProductMediaByIdQueryVariables = Exact<{ productId: Scalars['ID']; diff --git a/src/intl.ts b/src/intl.ts index 3541665c1..e5d88feee 100644 --- a/src/intl.ts +++ b/src/intl.ts @@ -486,6 +486,11 @@ export const sectionNames = defineMessages({ defaultMessage: "Translations", description: "translations section name", }, + variants: { + id: "8GC/ah", + defaultMessage: "Variants", + description: "variants section name", + }, vouchers: { id: "iUy2dx", defaultMessage: "Vouchers", diff --git a/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx b/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx index 5c80d612d..f854d2b11 100644 --- a/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx +++ b/src/products/components/ProductVariantCreatePage/ProductVariantCreatePage.tsx @@ -70,6 +70,7 @@ const messages = defineMessages({ interface ProductVariantCreatePageProps { productId: string; + defaultVariantId?: string; disabled: boolean; errors: ProductErrorWithAttributesFragment[]; header: string; @@ -100,6 +101,7 @@ interface ProductVariantCreatePageProps { const ProductVariantCreatePage: React.FC = ({ productId, + defaultVariantId, disabled, errors, header, @@ -177,7 +179,9 @@ const ProductVariantCreatePage: React.FC = ({ fallbackThumbnail={product?.thumbnail?.url} variants={product?.variants} productId={productId} + defaultVariantId={defaultVariantId} onReorder={onVariantReorder} + isCreate={true} />
diff --git a/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx b/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx index e9263d43e..d412ad497 100644 --- a/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx +++ b/src/products/components/ProductVariantNavigation/ProductVariantNavigation.tsx @@ -1,5 +1,4 @@ import { Card, TableCell, TableRow } from "@material-ui/core"; -import { fade } from "@material-ui/core/styles/colorManipulator"; import { Button } from "@saleor/components/Button"; import CardTitle from "@saleor/components/CardTitle"; import ResponsiveTable from "@saleor/components/ResponsiveTable"; @@ -13,7 +12,7 @@ import { ProductVariantCreateDataQuery, ProductVariantDetailsQuery, } from "@saleor/graphql"; -import { makeStyles } from "@saleor/macaw-ui"; +import { sectionNames } from "@saleor/intl"; import { productVariantAddUrl, productVariantEditUrl, @@ -24,48 +23,8 @@ import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; import { renderCollection } from "../../../misc"; - -const useStyles = makeStyles( - theme => ({ - colAvatar: { - width: 64, - }, - colName: { - paddingLeft: 0, - }, - defaultVariant: { - color: fade(theme.palette.text.secondary, 0.6), - display: "block", - }, - firstVariant: { - width: 104, - }, - link: { - cursor: "pointer", - }, - noHandle: { - "&&&": { - paddingRight: theme.spacing(3), - }, - textAlign: "right", - }, - tabActive: { - "& > td:first-child": { - "&:before": { - background: theme.palette.primary.main, - content: '""', - height: "100%", - left: 0, - position: "absolute", - top: 0, - width: 2, - }, - position: "relative", - }, - }, - }), - { name: "ProductVariantNavigation" }, -); +import { messages } from "./messages"; +import { useStyles } from "./styles"; interface ProductVariantNavigationProps { current?: string; @@ -95,13 +54,7 @@ const ProductVariantNavigation: React.FC = props return ( - + {renderCollection(variants, (variant, variantIndex) => { @@ -117,7 +70,7 @@ const ProductVariantNavigation: React.FC = props key={variant ? variant.id : "skeleton"} index={variantIndex || 0} className={classNames(classes.link, { - [classes.tabActive]: isActive, + [classes.rowActive]: isActive, })} href={ variant @@ -133,11 +86,7 @@ const ProductVariantNavigation: React.FC = props {variant ? variant.name || variant.sku : } {isDefault && ( - {intl.formatMessage({ - id: "vZMs8f", - defaultMessage: "Default", - description: "default product variant indicator", - })} + {intl.formatMessage(messages.defaultVariant)} )} @@ -145,17 +94,13 @@ const ProductVariantNavigation: React.FC = props ); })} {!isCreate ? ( - + @@ -165,7 +110,7 @@ const ProductVariantNavigation: React.FC = props alignRight className={classNames( classes.colAvatar, - classes.tabActive, + classes.rowActive, classes.noHandle, { [classes.firstVariant]: variants?.length === 0, @@ -175,11 +120,7 @@ const ProductVariantNavigation: React.FC = props colSpan={2} /> - + )} diff --git a/src/products/components/ProductVariantNavigation/messages.ts b/src/products/components/ProductVariantNavigation/messages.ts new file mode 100644 index 000000000..45ef6765c --- /dev/null +++ b/src/products/components/ProductVariantNavigation/messages.ts @@ -0,0 +1,19 @@ +import { defineMessages } from "react-intl"; + +export const messages = defineMessages({ + defaultVariant: { + id: "vZMs8f", + defaultMessage: "Default", + description: "default product variant indicator", + }, + addVariant: { + id: "3C3Nj5", + defaultMessage: "Add variant", + description: "button", + }, + newVariant: { + id: "IqRBql", + defaultMessage: "New variant", + description: "variant name", + }, +}); diff --git a/src/products/components/ProductVariantNavigation/styles.ts b/src/products/components/ProductVariantNavigation/styles.ts new file mode 100644 index 000000000..3ef7c87ff --- /dev/null +++ b/src/products/components/ProductVariantNavigation/styles.ts @@ -0,0 +1,38 @@ +import { fade } from "@material-ui/core/styles/colorManipulator"; +import { makeStyles } from "@saleor/macaw-ui"; + +export const useStyles = makeStyles( + theme => ({ + colAvatar: { + width: 64, + }, + colName: { + paddingLeft: 0, + }, + defaultVariant: { + color: fade(theme.palette.text.secondary, 0.6), + display: "block", + }, + firstVariant: { + width: 104, + }, + link: { + cursor: "pointer", + }, + noHandle: { + "&&&": { + paddingRight: theme.spacing(3), + }, + textAlign: "right", + }, + rowActive: { + borderLeft: `${theme.palette.primary.main} solid 2px`, + }, + rowNew: { + "&:hover": { + backgroundColor: "unset !important", + }, + }, + }), + { name: "ProductVariantNavigation" }, +); diff --git a/src/products/queries.ts b/src/products/queries.ts index 73705fe5f..645b6c3d2 100644 --- a/src/products/queries.ts +++ b/src/products/queries.ts @@ -208,6 +208,9 @@ export const productVariantCreateQuery = gql` thumbnail { url } + defaultVariant { + id + } variants { id name diff --git a/src/products/views/ProductVariantCreate.tsx b/src/products/views/ProductVariantCreate.tsx index fd694fb23..189eb17df 100644 --- a/src/products/views/ProductVariantCreate.tsx +++ b/src/products/views/ProductVariantCreate.tsx @@ -225,6 +225,7 @@ export const ProductVariant: React.FC = ({ /> - - - Add variant - - + +
+ + + + New variant @@ -187714,23 +187727,36 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = ` class="MuiTableRow-root-id MuiTableRow-hover-id" > - - - Add variant - - + + + + + + New variant @@ -188703,23 +188729,36 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 1`] class="MuiTableRow-root-id MuiTableRow-hover-id" > - - - Add variant - - + + + + + + New variant @@ -189656,23 +189695,36 @@ exports[`Storyshots Views / Products / Create product variant when loading data class="MuiTableRow-root-id MuiTableRow-hover-id" > - - - Add variant - - + + + + + + New variant @@ -190512,23 +190564,36 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] = class="MuiTableRow-root-id MuiTableRow-hover-id" > - - - Add variant - - + + + + + + New variant @@ -227818,7 +227883,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors class="MuiTableBody-root-id" >