diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json index fcfbd1404..c0c980f6e 100644 --- a/locale/defaultMessages.json +++ b/locale/defaultMessages.json @@ -6731,6 +6731,10 @@ "context": "max price in channel", "string": "Max. value" }, + "src_dot_shipping_dot_components_dot_OrderValue_dot_1064401942": { + "context": "price rates info", + "string": "This rate will apply to all orders" + }, "src_dot_shipping_dot_components_dot_OrderValue_dot_1449127001": { "string": "Min Value" }, @@ -6742,9 +6746,9 @@ "context": "card title", "string": "Order Value" }, - "src_dot_shipping_dot_components_dot_OrderValue_dot_4226393146": { - "context": "price rates info", - "string": "This rate will apply to all orders of all prices" + "src_dot_shipping_dot_components_dot_OrderValue_dot_491724403": { + "context": "checkbox label", + "string": "Restrict order value" }, "src_dot_shipping_dot_components_dot_OrderValue_dot_507892781": { "context": "channel name", @@ -6757,14 +6761,14 @@ "context": "min price in channel", "string": "Min. value" }, - "src_dot_shipping_dot_components_dot_OrderValue_dot_882649212": { - "context": "checkbox label", - "string": "There are no value limits" - }, "src_dot_shipping_dot_components_dot_OrderWeight_dot_1064401942": { "context": "info text", "string": "This rate will apply to all orders" }, + "src_dot_shipping_dot_components_dot_OrderWeight_dot_1648082334": { + "context": "checkbox label", + "string": "Restrict order weight" + }, "src_dot_shipping_dot_components_dot_OrderWeight_dot_2211490913": { "context": "card title", "string": "Order Weight" @@ -6772,10 +6776,6 @@ "src_dot_shipping_dot_components_dot_OrderWeight_dot_2935375344": { "string": "Min. Order Weight" }, - "src_dot_shipping_dot_components_dot_OrderWeight_dot_882649212": { - "context": "checkbox label", - "string": "There are no value limits" - }, "src_dot_shipping_dot_components_dot_OrderWeight_dot_959089677": { "string": "Max. Order Weight" }, diff --git a/src/shipping/components/OrderValue/OrderValue.stories.tsx b/src/shipping/components/OrderValue/OrderValue.stories.tsx index 8c176384f..6d06ec13e 100644 --- a/src/shipping/components/OrderValue/OrderValue.stories.tsx +++ b/src/shipping/components/OrderValue/OrderValue.stories.tsx @@ -12,7 +12,7 @@ const props: OrderValueProps = { ), disabled: false, errors: [], - noLimits: false, + orderValueRestricted: true, onChange: () => undefined, onChannelsChange: () => undefined }; diff --git a/src/shipping/components/OrderValue/OrderValue.tsx b/src/shipping/components/OrderValue/OrderValue.tsx index 670f241d8..adaba7cbf 100644 --- a/src/shipping/components/OrderValue/OrderValue.tsx +++ b/src/shipping/components/OrderValue/OrderValue.tsx @@ -1,11 +1,11 @@ import { Card, - CardContent, TableBody, TableCell, TableRow, Typography } from "@material-ui/core"; +import VerticalSpacer from "@saleor/apps/components/VerticalSpacer"; import { ChannelShippingData } from "@saleor/channels/utils"; import CardTitle from "@saleor/components/CardTitle"; import ControlledCheckbox from "@saleor/components/ControlledCheckbox"; @@ -32,7 +32,7 @@ export interface OrderValueProps { channels: ChannelShippingData[]; errors: ShippingChannelsErrorFragment[]; disabled: boolean; - noLimits: boolean; + orderValueRestricted: boolean; onChange: (event: ChangeEvent) => void; onChannelsChange: (channelId: string, value: Value) => void; } @@ -42,7 +42,7 @@ const numberOfColumns = 3; export const OrderValue: React.FC = ({ channels, errors, - noLimits, + orderValueRestricted, disabled, onChannelsChange, onChange @@ -62,37 +62,36 @@ export const OrderValue: React.FC = ({ description: "card title" })} /> - +
- + {intl.formatMessage({ - defaultMessage: - "This rate will apply to all orders of all prices", + defaultMessage: "This rate will apply to all orders", description: "price rates info" })} } - checked={noLimits} + checked={orderValueRestricted} onChange={onChange} disabled={disabled} /> - - - + + +
- {!noLimits && ( + {orderValueRestricted && ( @@ -185,7 +184,7 @@ export const OrderValue: React.FC = ({ )} - +
); }; diff --git a/src/shipping/components/OrderValue/styles.ts b/src/shipping/components/OrderValue/styles.ts index f6aba2f4c..85b77460a 100644 --- a/src/shipping/components/OrderValue/styles.ts +++ b/src/shipping/components/OrderValue/styles.ts @@ -2,9 +2,6 @@ import { makeStyles } from "@saleor/macaw-ui"; export const useStyles = makeStyles( theme => ({ - caption: { - marginBottom: theme.spacing(2) - }, colName: { fontSize: 14, paddingLeft: 0, @@ -16,11 +13,7 @@ export const useStyles = makeStyles( width: 200 }, content: { - "&:last-child": { - paddingBottom: 0 - }, - paddingLeft: 0, - paddingRight: 0 + padding: theme.spacing(3, 0, 3, 0) }, info: { fontSize: 14 @@ -29,7 +22,7 @@ export const useStyles = makeStyles( verticalAlign: "top" }, subheader: { - padding: theme.spacing(0, 3, 2, 3) + padding: theme.spacing(0, 3, 0, 3) }, table: { tableLayout: "fixed" diff --git a/src/shipping/components/OrderWeight/OrderWeight.stories.tsx b/src/shipping/components/OrderWeight/OrderWeight.stories.tsx index 4025f22aa..66f4ed9e1 100644 --- a/src/shipping/components/OrderWeight/OrderWeight.stories.tsx +++ b/src/shipping/components/OrderWeight/OrderWeight.stories.tsx @@ -10,7 +10,7 @@ const props: OrderWeightProps = { errors: [], maxValue: "2", minValue: "1", - noLimits: false, + orderValueRestricted: true, onChange: () => undefined }; diff --git a/src/shipping/components/OrderWeight/OrderWeight.tsx b/src/shipping/components/OrderWeight/OrderWeight.tsx index bad24c7dd..4d90c6cb7 100644 --- a/src/shipping/components/OrderWeight/OrderWeight.tsx +++ b/src/shipping/components/OrderWeight/OrderWeight.tsx @@ -1,8 +1,16 @@ -import { Card, CardContent, TextField, Typography } from "@material-ui/core"; +import { + Card, + CardContent, + InputAdornment, + TextField, + Typography +} from "@material-ui/core"; +import VerticalSpacer from "@saleor/apps/components/VerticalSpacer"; import CardTitle from "@saleor/components/CardTitle"; import ControlledCheckbox from "@saleor/components/ControlledCheckbox"; import { ShippingErrorFragment } from "@saleor/fragments/types/ShippingErrorFragment"; import { ChangeEvent } from "@saleor/hooks/useForm"; +import useShop from "@saleor/hooks/useShop"; import { getShippingWeightRateErrorMessage } from "@saleor/shipping/errors"; import { getFormErrors } from "@saleor/utils/errors"; import React from "react"; @@ -13,14 +21,14 @@ import { useStyles } from "./styles"; export interface OrderWeightProps { disabled: boolean; errors: ShippingErrorFragment[]; - noLimits: boolean; + orderValueRestricted: boolean; maxValue: string; minValue: string; onChange: (event: ChangeEvent) => void; } export const OrderWeight: React.FC = ({ - noLimits, + orderValueRestricted, disabled, errors, maxValue = "", @@ -29,6 +37,7 @@ export const OrderWeight: React.FC = ({ }) => { const classes = useStyles({}); const intl = useIntl(); + const shop = useShop(); const formFields = ["minimumOrderWeight", "maximumOrderWeight"]; const formErrors = getFormErrors(formFields, errors); @@ -43,14 +52,14 @@ export const OrderWeight: React.FC = ({ /> - + = ({ } - checked={noLimits} + checked={orderValueRestricted} onChange={onChange} disabled={disabled} /> - - {!noLimits && ( -
- - -
+ {orderValueRestricted && ( + <> + +
+ + {shop?.defaultWeightUnit} + + ) + }} + value={minValue} + onChange={onChange} + /> + + {shop?.defaultWeightUnit} + + ) + }} + value={maxValue} + onChange={onChange} + /> +
+ )}
diff --git a/src/shipping/components/OrderWeight/styles.ts b/src/shipping/components/OrderWeight/styles.ts index 7c0128004..cd920ef7b 100644 --- a/src/shipping/components/OrderWeight/styles.ts +++ b/src/shipping/components/OrderWeight/styles.ts @@ -2,9 +2,6 @@ import { makeStyles } from "@saleor/macaw-ui"; export const useStyles = makeStyles( theme => ({ - caption: { - marginBottom: theme.spacing(2) - }, grid: { display: "grid", gridColumnGap: theme.spacing(2), diff --git a/src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.tsx b/src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.tsx index fb05c6caf..666d6aa5d 100644 --- a/src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.tsx +++ b/src/shipping/components/ShippingZoneRatesCreatePage/ShippingZoneRatesCreatePage.tsx @@ -27,18 +27,7 @@ import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; import ShippingZonePostalCodes from "../ShippingZonePostalCodes"; - -export interface FormData { - channelListings: ChannelShippingData[]; - name: string; - description: OutputData; - noLimits: boolean; - minValue: string; - maxValue: string; - minDays: string; - maxDays: string; - type: ShippingMethodTypeEnum; -} +import { ShippingZoneRateCommonFormData } from "../ShippingZoneRatesPage/types"; export interface ShippingZoneRatesCreatePageProps { allChannelsCount?: number; @@ -51,7 +40,7 @@ export interface ShippingZoneRatesCreatePageProps { saveButtonBarState: ConfirmButtonTransitionState; onBack: () => void; onDelete?: () => void; - onSubmit: (data: FormData) => void; + onSubmit: (data: ShippingZoneRateCommonFormData) => void; onPostalCodeInclusionChange: ( inclusion: PostalCodeRuleInclusionTypeEnum ) => void; @@ -83,7 +72,7 @@ export const ShippingZoneRatesCreatePage: React.FC { const intl = useIntl(); const isPriceVariant = variant === ShippingMethodTypeEnum.PRICE; - const initialForm: FormData = { + const initialForm: ShippingZoneRateCommonFormData = { channelListings: shippingChannels, maxDays: "", maxValue: "", @@ -91,7 +80,7 @@ export const ShippingZoneRatesCreatePage: React.FC ) : ( >, @@ -65,7 +53,7 @@ export interface ShippingZoneRatesPageProps postalCodeRules: ShippingZone_shippingZone_shippingMethods_postalCodeRules[]; onBack: () => void; onDelete?: () => void; - onSubmit: (data: FormData) => void; + onSubmit: (data: ShippingZoneRateUpdateFormData) => void; onPostalCodeInclusionChange: ( inclusion: PostalCodeRuleInclusionTypeEnum ) => void; @@ -103,7 +91,8 @@ export const ShippingZoneRatesPage: React.FC = ({ ...listProps }) => { const isPriceVariant = variant === ShippingMethodTypeEnum.PRICE; - const initialForm: FormData = { + + const initialForm: ShippingZoneRateUpdateFormData = { channelListings: shippingChannels, maxDays: rate?.maximumDeliveryDays?.toString() || "", maxValue: rate?.maximumOrderWeight?.value.toString() || "", @@ -112,7 +101,7 @@ export const ShippingZoneRatesPage: React.FC = ({ minValue: rate?.minimumOrderWeight?.value.toString() || "", name: rate?.name || "", description: rate?.description && JSON.parse(rate.description), - noLimits: false, + orderValueRestricted: !!rate?.channelListings.length, privateMetadata: rate?.privateMetadata.map(mapMetadataItemToInput), type: rate?.type || null }; @@ -161,14 +150,14 @@ export const ShippingZoneRatesPage: React.FC = ({ ) : ( ({ channelId: channel.id, maximumOrderPrice: - channel.maxValue && !noLimits ? channel.maxValue : null, + channel.maxValue && orderValueRestricted ? channel.maxValue : null, minimumOrderPrice: - channel.minValue && !noLimits ? channel.minValue : null, + channel.minValue && orderValueRestricted ? channel.minValue : null, price: channel.price || null })) || [], removeChannels @@ -226,7 +226,7 @@ export function useShippingRateCreator( ? shippingPriceRatesEditUrl : shippingWeightRatesEditUrl; - const createShippingRate = async (data: ShippingZoneRatesPageFormData) => { + const createShippingRate = async (data: ShippingZoneRateCommonFormData) => { const response = await createBaseShippingRate({ variables: getVariables(data, shippingZoneId, postalCodes, inclusionType) }); @@ -239,7 +239,7 @@ export function useShippingRateCreator( updateShippingMethodChannelListing({ variables: getShippingMethodChannelVariables( rateId, - data.noLimits, + data.orderValueRestricted, data.channelListings ) }) diff --git a/src/shipping/views/PriceRatesUpdate/PriceRatesUpdate.tsx b/src/shipping/views/PriceRatesUpdate/PriceRatesUpdate.tsx index 50b65825c..821c86c81 100644 --- a/src/shipping/views/PriceRatesUpdate/PriceRatesUpdate.tsx +++ b/src/shipping/views/PriceRatesUpdate/PriceRatesUpdate.tsx @@ -24,9 +24,8 @@ import useProductSearch from "@saleor/searches/useProductSearch"; import DeleteShippingRateDialog from "@saleor/shipping/components/DeleteShippingRateDialog"; import ShippingMethodProductsAddDialog from "@saleor/shipping/components/ShippingMethodProductsAddDialog"; import ShippingZonePostalCodeRangeDialog from "@saleor/shipping/components/ShippingZonePostalCodeRangeDialog"; -import ShippingZoneRatesPage, { - FormData -} from "@saleor/shipping/components/ShippingZoneRatesPage"; +import ShippingZoneRatesPage from "@saleor/shipping/components/ShippingZoneRatesPage"; +import { ShippingZoneRateUpdateFormData } from "@saleor/shipping/components/ShippingZoneRatesPage/types"; import UnassignDialog from "@saleor/shipping/components/UnassignDialog"; import { getShippingMethodChannelVariables, @@ -211,7 +210,9 @@ export const PriceRatesUpdate: React.FC = ({ }); }; - const updateData = async (formData: FormData): Promise => { + const updateData = async ( + formData: ShippingZoneRateUpdateFormData + ): Promise => { const response = await updateShippingRate({ variables: getUpdateShippingPriceRateVariables( formData, @@ -229,7 +230,7 @@ export const PriceRatesUpdate: React.FC = ({ updateShippingMethodChannelListing({ variables: getShippingMethodChannelVariables( rateId, - formData.noLimits, + formData.orderValueRestricted, formData.channelListings, shippingChannels ) diff --git a/src/shipping/views/WeightRatesUpdate/WeightRatesUpdate.tsx b/src/shipping/views/WeightRatesUpdate/WeightRatesUpdate.tsx index 5fd087ae9..3bff002e9 100644 --- a/src/shipping/views/WeightRatesUpdate/WeightRatesUpdate.tsx +++ b/src/shipping/views/WeightRatesUpdate/WeightRatesUpdate.tsx @@ -24,9 +24,8 @@ import useProductSearch from "@saleor/searches/useProductSearch"; import DeleteShippingRateDialog from "@saleor/shipping/components/DeleteShippingRateDialog"; import ShippingMethodProductsAddDialog from "@saleor/shipping/components/ShippingMethodProductsAddDialog"; import ShippingZonePostalCodeRangeDialog from "@saleor/shipping/components/ShippingZonePostalCodeRangeDialog"; -import ShippingZoneRatesPage, { - FormData -} from "@saleor/shipping/components/ShippingZoneRatesPage"; +import ShippingZoneRatesPage from "@saleor/shipping/components/ShippingZoneRatesPage"; +import { ShippingZoneRateUpdateFormData } from "@saleor/shipping/components/ShippingZoneRatesPage/types"; import UnassignDialog from "@saleor/shipping/components/UnassignDialog"; import { getShippingMethodChannelVariables, @@ -233,7 +232,7 @@ export const WeightRatesUpdate: React.FC = ({ const [updateMetadata] = useMetadataUpdate({}); const [updatePrivateMetadata] = usePrivateMetadataUpdate({}); - const updateData = async (data: FormData) => { + const updateData = async (data: ShippingZoneRateUpdateFormData) => { const response = await updateShippingRate({ variables: getUpdateShippingWeightRateVariables( data, @@ -250,7 +249,7 @@ export const WeightRatesUpdate: React.FC = ({ updateShippingMethodChannelListing({ variables: getShippingMethodChannelVariables( rateId, - data.noLimits, + data.orderValueRestricted, data.channelListings, shippingChannels ) diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index bfc28737b..186251154 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -18388,7 +18388,7 @@ exports[`Storyshots Shipping / Order value rates default 1`] = ` class="CardTitle-hr-id" />
@@ -18424,19 +18425,21 @@ exports[`Storyshots Shipping / Order value rates default 1`] = ` - There are no value limits + Restrict order value
- This rate will apply to all orders of all prices + This rate will apply to all orders
- Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency -
+ class="VerticalSpacer-container-id VerticalSpacer-container-id" + /> + Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency +
@@ -18658,19 +18662,21 @@ exports[`Storyshots Shipping / Order value rates loading 1`] = ` - There are no value limits + Restrict order value
- This rate will apply to all orders of all prices + This rate will apply to all orders
- Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency -
+ class="VerticalSpacer-container-id VerticalSpacer-container-id" + /> + Channels that don’t have assigned discounts will use their parent channel to define the price. Price will be converted to channel’s currency +
@@ -18889,14 +18896,17 @@ exports[`Storyshots Shipping / Order weight rates default 1`] = ` - There are no value limits + Restrict order weight
This rate will apply to all orders
+
@@ -18910,16 +18920,23 @@ exports[`Storyshots Shipping / Order weight rates default 1`] = ` Min. Order Weight
+
+
+