From ac4a21902394b9164a17380be133a3b78a14815b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Wed, 16 Mar 2022 10:45:15 +0100 Subject: [PATCH] Product variants enhancements (#1918) * Remove savebar docking * Hide attributes if empty * Select text in autocomplete after initial click * Update snapshots * Use stable macaw version * Remove maybes * Add util filter function --- package-lock.json | 5 +- package.json | 2 +- src/components/AppLayout/AppLayout.tsx | 13 +- .../SingleAutocompleteSelectField.tsx | 5 +- .../ProductVariantPage/ProductVariantPage.tsx | 349 +++++++++--------- .../__snapshots__/Stories.test.ts.snap | 108 ------ 6 files changed, 191 insertions(+), 291 deletions(-) diff --git a/package-lock.json b/package-lock.json index 5b499d223..789ca3e3a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4828,8 +4828,9 @@ } }, "@saleor/macaw-ui": { - "version": "github:saleor/macaw-ui#1f78f97748c00a64ca46973c32eacc4d9a1ac2ac", - "from": "github:saleor/macaw-ui#SALEOR-5840-button-states", + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.3.3.tgz", + "integrity": "sha512-b2dLlOAXDe2OSmYeZSFKwiRMrJc+YkGhvvQCHQXHHP89TZbGZlWP0F13ycCI3OJSfYbCWZlQGM+alMiE31HOuA==", "requires": { "clsx": "^1.1.1", "lodash": "^4.17.21", diff --git a/package.json b/package.json index d330bbc3b..cb118d7bb 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "@material-ui/icons": "^4.11.2", "@material-ui/lab": "^4.0.0-alpha.58", "@material-ui/styles": "^4.11.4", - "@saleor/macaw-ui": "github:saleor/macaw-ui#SALEOR-5840-button-states", + "@saleor/macaw-ui": "^0.3.3", "@saleor/sdk": "^0.4.2", "@sentry/react": "^6.0.0", "@types/faker": "^5.1.6", diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx index fdf4cf7a2..f04bc4e03 100644 --- a/src/components/AppLayout/AppLayout.tsx +++ b/src/components/AppLayout/AppLayout.tsx @@ -13,7 +13,6 @@ import { } from "@saleor/macaw-ui"; import { isDarkTheme } from "@saleor/misc"; import { staffMemberDetailsUrl } from "@saleor/staff/urls"; -import classNames from "classnames"; import React from "react"; import { useIntl } from "react-intl"; import useRouter from "use-react-router"; @@ -41,9 +40,6 @@ const useStyles = makeStyles( position: "sticky", zIndex: 10 }, - appActionDocked: { - position: "static" - }, appLoader: { height: appLoaderHeight, marginBottom: theme.spacing(4), @@ -123,7 +119,7 @@ interface AppLayoutProps { const AppLayout: React.FC = ({ children }) => { const classes = useStyles({}); const { themeType, setTheme } = useTheme(); - const { anchor: appActionAnchor, docked } = useActionBar(); + const { anchor: appActionAnchor } = useActionBar(); const appHeaderAnchor = useBacklink(); const { logout, user } = useUser(); const navigate = useNavigator(); @@ -234,12 +230,7 @@ const AppLayout: React.FC = ({ children }) => { : children} -
+
diff --git a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx index 207453e58..013aaa3bc 100644 --- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx +++ b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx @@ -90,7 +90,8 @@ const SingleAutocompleteSelectFieldComponent: React.FC(null); + const anchor = React.useRef(null); + const input = React.useRef(null); const handleChange = (item: string) => { onChange({ @@ -188,6 +189,7 @@ const SingleAutocompleteSelectFieldComponent: React.FC {isOpen && (!!inputValue || !!choices.length) && ( + attribute.data.variantAttributeScope === scope; +} + interface ProductVariantPageProps { assignReferencesAttributeId?: string; defaultVariantId?: string; @@ -223,175 +227,184 @@ const ProductVariantPage: React.FC = ({ handlers, hasChanged, submit - }) => ( - <> - -
- variant.product.thumbnail.url - )} - variants={maybe(() => variant.product.variants)} - onAdd={onAdd} - onRowClick={(variantId: string) => { - if (variant) { - return onVariantClick(variantId); - } - }} - onReorder={onVariantReorder} - /> -
-
- - - attribute.data.variantAttributeScope === - VariantAttributeScope.NOT_VARIANT_SELECTION - )} - attributeValues={attributeValues} - loading={loading} - disabled={loading} - errors={errors} - onChange={handlers.selectAttribute} - onMultiChange={handlers.selectAttributeMultiple} - onFileChange={handlers.selectAttributeFile} - onReferencesRemove={handlers.selectAttributeReference} - onReferencesAddClick={onAssignReferencesClick} - onReferencesReorder={handlers.reorderAttributeValue} - fetchAttributeValues={fetchAttributeValues} - fetchMoreAttributeValues={fetchMoreAttributeValues} - onAttributeSelectBlur={onAttributeSelectBlur} - /> - - - attribute.data.variantAttributeScope === - VariantAttributeScope.VARIANT_SELECTION - )} - attributeValues={attributeValues} - loading={loading} - disabled={loading} - errors={errors} - onChange={handlers.selectAttribute} - onMultiChange={handlers.selectAttributeMultiple} - onFileChange={handlers.selectAttributeFile} - onReferencesRemove={handlers.selectAttributeReference} - onReferencesAddClick={onAssignReferencesClick} - onReferencesReorder={handlers.reorderAttributeValue} - fetchAttributeValues={fetchAttributeValues} - fetchMoreAttributeValues={fetchMoreAttributeValues} - onAttributeSelectBlur={onAttributeSelectBlur} - /> - - - - ({ - ...channel.data, - ...channel.value - }) - )} - errors={channelErrors} - loading={loading} - onChange={handlers.changeChannels} - /> - - - + }) => { + const nonSelectionAttributes = data.attributes.filter( + byAttributeScope(VariantAttributeScope.NOT_VARIANT_SELECTION) + ); + const selectionAttributes = data.attributes.filter( + byAttributeScope(VariantAttributeScope.VARIANT_SELECTION) + ); - - - ({ - ...channel.data, - ...channel.value - }) + return ( + <> + +
+ { + if (variant) { + return onVariantClick(variantId); + } + }} + onReorder={onVariantReorder} + /> +
+
+ + {nonSelectionAttributes.length > 0 && ( + <> + + + )} - onVariantChannelListingChange={handlers.changeChannels} - data={data} - disabled={loading} - hasVariants={true} - errors={errors} - formErrors={formErrors} - stocks={data.stocks} - warehouses={warehouses} - onChange={handlers.changeStock} - onFormDataChange={change} - onChangePreorderEndDate={handlers.changePreorderEndDate} - onEndPreorderTrigger={ - !!variant?.preorder - ? () => setIsEndPreorderModalOpened(true) - : null - } - onWarehouseStockAdd={handlers.addStock} - onWarehouseStockDelete={handlers.deleteStock} - onWarehouseConfigure={onWarehouseConfigure} - /> - - -
- - - {canOpenAssignReferencesAttributeDialog && ( - - handleAssignReferenceAttribute( - attributeValues, - data, - handlers - ) - } + {selectionAttributes.length > 0 && ( + <> + + + + )} + + + ({ + ...channel.data, + ...channel.value + }) + )} + errors={channelErrors} + loading={loading} + onChange={handlers.changeChannels} + /> + + + + + + + ({ + ...channel.data, + ...channel.value + }) + )} + onVariantChannelListingChange={handlers.changeChannels} + data={data} + disabled={loading} + hasVariants={true} + errors={errors} + formErrors={formErrors} + stocks={data.stocks} + warehouses={warehouses} + onChange={handlers.changeStock} + onFormDataChange={change} + onChangePreorderEndDate={handlers.changePreorderEndDate} + onEndPreorderTrigger={ + !!variant?.preorder + ? () => setIsEndPreorderModalOpened(true) + : null + } + onWarehouseStockAdd={handlers.addStock} + onWarehouseStockDelete={handlers.deleteStock} + onWarehouseConfigure={onWarehouseConfigure} + /> + + +
+ + - )} - - )} + {canOpenAssignReferencesAttributeDialog && ( + + handleAssignReferenceAttribute( + attributeValues, + data, + handlers + ) + } + /> + )} + + ); + }} {variant && ( @@ -400,7 +413,7 @@ const ProductVariantPage: React.FC = ({ onMediaSelect={onMediaSelect} open={isModalOpened} media={productMedia} - selectedMedia={maybe(() => variant.media.map(image => image.id))} + selectedMedia={variant?.media.map(image => image.id)} /> )} {!!variant?.preorder && ( diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index db5114cc5..df6008c7b 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -225170,114 +225170,6 @@ exports[`Storyshots Views / Products / Product variant details when loading data
-
-
-
- - Variant Attributes - -
-
-
-
-
-
- 0 Attributes -
-
- -
-
-
-
-
-
-
- - Variant Selection Attributes - -
-
-
-
-
-
- 0 Attributes -
-
- -
-
-
-