djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge shipping rates views (#1851)

Browse source 
* Merge price and weight based rate pages

* Increate text field width

* Update messages
This commit is contained in:
Dominik Żegleń 2022-02-25 16:04:11 +01:00 committed by GitHub
parent 5e8b93262e
commit 8ab05ab8e1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
19 changed files with 71 additions and 771 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
locale/defaultMessages.json
View file

@ -7433,17 +7433,14 @@
"context": "dialog header",
"string": "Delete Shipping Zones"
},
"src_dot_shipping_dot_views_dot_3823295269": {
"string": "Manage Channel Availability"
},
"src_dot_shipping_dot_views_dot_725201918": {
"context": "dialog content",
"string": "{counter,plural,one{Are you sure you want to delete this shipping zone?} other{Are you sure you want to delete {displayQuantity} shipping zones?}}"
},
"src_dot_shipping_dot_views_dot_PriceRatesCreate_dot_3823295269": {
"string": "Manage Channel Availability"
},
"src_dot_shipping_dot_views_dot_PriceRatesUpdate_dot_3823295269": {
"string": "Manage Channel Availability"
},
"src_dot_shipping_dot_views_dot_PriceRatesUpdate_dot_870815507": {
"src_dot_shipping_dot_views_dot_870815507": {
"context": "unassign products from shipping method, button",
"string": "Unassign"
},
@ -7459,16 +7456,6 @@
"context": "unassign country, dialog header",
"string": "Delete from Shipping Zone"
},
"src_dot_shipping_dot_views_dot_WeightRatesCreate_dot_3014453080": {
"string": "Manage Channels Availability"
},
"src_dot_shipping_dot_views_dot_WeightRatesUpdate_dot_3014453080": {
"string": "Manage Channels Availability"
},
"src_dot_shipping_dot_views_dot_WeightRatesUpdate_dot_870815507": {
"context": "unassign products from shipping method, button",
"string": "Unassign"
},
"src_dot_shipping_dot_weight": {
"context": "error message",
"string": "Maximum weight cannot be lower than minimum"

2
src/shipping/components/OrderValue/styles.ts
View file

@ -10,7 +10,7 @@ export const useStyles = makeStyles(
colType: {
fontSize: 14,
textAlign: "right",
width: 200
width: 250
},
content: {
padding: theme.spacing(3, 0, 3, 0)

2
src/shipping/components/PricingCard/styles.ts
View file

@ -14,7 +14,7 @@ export const useStyles = makeStyles(
colType: {
fontSize: 14,
textAlign: "right",
width: 200
width: 250
},
pricingContent: {
"&:last-child": {

8
src/shipping/handlers.ts
View file

@ -23,7 +23,7 @@ import {
useShippingRateCreate,
useShippingRateDelete
} from "./mutations";
import { shippingPriceRatesEditUrl, shippingWeightRatesEditUrl } from "./urls";
import { shippingRateEditUrl } from "./urls";
export const createChannelsChangeHandler = (
selectedChannels: ChannelShippingData[],
@ -222,10 +222,6 @@ export function useShippingRateCreator(
type === ShippingMethodTypeEnum.PRICE
? getCreateShippingPriceRateVariables
: getCreateShippingWeightRateVariables;
const getUrl =
type === ShippingMethodTypeEnum.PRICE
? shippingPriceRatesEditUrl
: shippingWeightRatesEditUrl;
const createShippingRate = async (data: ShippingZoneRateCommonFormData) => {
const response = await createBaseShippingRate({
@ -268,7 +264,7 @@ export function useShippingRateCreator(
status: "success",
text: intl.formatMessage(commonMessages.savedChanges)
});
navigate(getUrl(shippingZoneId, rateId));
navigate(shippingRateEditUrl(shippingZoneId, rateId));
return [];
}
};

67
src/shipping/index.tsx
View file

@ -6,25 +6,21 @@ import { Route, RouteComponentProps, Switch } from "react-router-dom";
import { WindowTitle } from "../components/WindowTitle";
import {
shippingPriceRatesEditPath,
shippingPriceRatesPath,
shippingRateCreatePath,
ShippingRateCreateUrlQueryParams,
shippingRateEditPath,
ShippingRateUrlQueryParams,
shippingWeightRatesEditPath,
shippingWeightRatesPath,
shippingZoneAddPath,
shippingZonePath,
shippingZonesListPath,
ShippingZonesListUrlQueryParams,
ShippingZoneUrlQueryParams
} from "./urls";
import PriceRatesCreateComponent from "./views/PriceRatesCreate";
import PriceRatesUpdateComponent from "./views/PriceRatesUpdate";
import RateCreateComponent from "./views/RateCreate";
import RateUpdateComponent from "./views/RateUpdate";
import ShippingZoneCreate from "./views/ShippingZoneCreate";
import ShippingZoneDetailsComponent from "./views/ShippingZoneDetails";
import ShippingZonesListComponent from "./views/ShippingZonesList";
import WeightRatesCreateComponent from "./views/WeightRatesCreate";
import WeightRatesUpdateComponent from "./views/WeightRatesUpdate";
const ShippingZonesList: React.FC<RouteComponentProps<{}>> = ({ location }) => {
const qs = parseQs(location.search.substr(1));
@ -48,35 +44,21 @@ const ShippingZoneDetails: React.FC<RouteComponentProps<
);
};
const PriceRatesCreate: React.FC<RouteComponentProps<{ id: string }>> = ({
const RateCreate: React.FC<RouteComponentProps<{ id: string }>> = ({
match
}) => {
const qs = parseQs(location.search.substr(1));
const params: ShippingRateCreateUrlQueryParams = qs;
return (
<PriceRatesCreateComponent
<RateCreateComponent
id={decodeURIComponent(match.params.id)}
params={params}
/>
);
};
const WeightRatesCreate: React.FC<RouteComponentProps<{ id: string }>> = ({
match
}) => {
const qs = parseQs(location.search.substr(1));
const params: ShippingRateCreateUrlQueryParams = qs;
return (
<WeightRatesCreateComponent
id={decodeURIComponent(match.params.id)}
params={params}
/>
);
};
const WeightRatesUpdate: React.FC<RouteComponentProps<{
const RateUpdate: React.FC<RouteComponentProps<{
id: string;
rateId: string;
}>> = ({ match }) => {
@ -84,23 +66,7 @@ const WeightRatesUpdate: React.FC<RouteComponentProps<{
const params: ShippingRateUrlQueryParams = qs;
return (
<WeightRatesUpdateComponent
id={decodeURIComponent(match.params.id)}
rateId={decodeURIComponent(match.params.rateId)}
params={params}
/>
);
};
const PriceRatesUpdate: React.FC<RouteComponentProps<{
id: string;
rateId: string;
}>> = ({ match }) => {
const qs = parseQs(location.search.substr(1));
const params: ShippingRateUrlQueryParams = qs;
return (
<PriceRatesUpdateComponent
<RateUpdateComponent
id={decodeURIComponent(match.params.id)}
rateId={decodeURIComponent(match.params.rateId)}
params={params}
@ -130,21 +96,10 @@ export const ShippingRouter: React.FC = () => {
path={shippingZonePath(":id")}
component={ShippingZoneDetails}
/>
<Route path={shippingRateCreatePath(":id")} component={RateCreate} />
<Route
path={shippingPriceRatesPath(":id")}
component={PriceRatesCreate}
/>
<Route
path={shippingWeightRatesPath(":id")}
component={WeightRatesCreate}
/>
<Route
path={shippingWeightRatesEditPath(":id", ":rateId")}
component={WeightRatesUpdate}
/>
<Route
path={shippingPriceRatesEditPath(":id", ":rateId")}
component={PriceRatesUpdate}
path={shippingRateEditPath(":id", ":rateId")}
component={RateUpdate}
/>
</Switch>
</>

46
src/shipping/urls.ts
View file

@ -54,48 +54,26 @@ export type ShippingRateCreateUrlDialog = ZipCodeRangeActions | ChannelsAction;
export type ShippingRateCreateUrlQueryParams = Dialog<
ShippingRateCreateUrlDialog
> &
SingleAction;
SingleAction &
Partial<{
type: ShippingMethodTypeEnum;
}>;
export const shippingPriceRatesPath = (id: string) =>
urlJoin(shippingZonePath(id), "price", "add");
export const shippingPriceRatesUrl = (
export const shippingRateCreatePath = (id: string) =>
urlJoin(shippingZonePath(id), "add");
export const shippingRateCreateUrl = (
id: string,
params?: ShippingRateCreateUrlQueryParams
) => shippingPriceRatesPath(encodeURIComponent(id)) + "?" + stringifyQs(params);
) => shippingRateCreatePath(encodeURIComponent(id)) + "?" + stringifyQs(params);
export const shippingWeightRatesPath = (id: string) =>
urlJoin(shippingZonePath(id), "weight", "add");
export const shippingWeightRatesUrl = (
id: string,
params?: ShippingRateCreateUrlQueryParams
) =>
shippingWeightRatesPath(encodeURIComponent(id)) + "?" + stringifyQs(params);
export const shippingPriceRatesEditPath = (id: string, rateId: string) =>
urlJoin(shippingZonePath(id), "price", rateId);
export const shippingPriceRatesEditUrl = (
export const shippingRateEditPath = (id: string, rateId: string) =>
urlJoin(shippingZonePath(id), rateId);
export const shippingRateEditUrl = (
id: string,
rateId: string,
params?: ShippingRateUrlQueryParams
) =>
shippingPriceRatesEditPath(
encodeURIComponent(id),
encodeURIComponent(rateId)
) +
"?" +
stringifyQs(params);
export const shippingWeightRatesEditPath = (id: string, rateId: string) =>
urlJoin(shippingZonePath(id), "weight", rateId);
export const shippingWeightRatesEditUrl = (
id: string,
rateId: string,
params?: ShippingRateUrlQueryParams
) =>
shippingWeightRatesEditPath(
encodeURIComponent(id),
encodeURIComponent(rateId)
) +
shippingRateEditPath(encodeURIComponent(id), encodeURIComponent(rateId)) +
"?" +
stringifyQs(params);

1
src/shipping/views/PriceRatesCreate/consts.ts
View file

@ -1 +0,0 @@
export const PRICE_RATES_CREATE_FORM_ID = Symbol();

2
src/shipping/views/PriceRatesCreate/index.ts
View file

@ -1,2 +0,0 @@
export * from "./PriceRatesCreate";
export { default } from "./PriceRatesCreate";

1
src/shipping/views/PriceRatesUpdate/consts.ts
View file

@ -1 +0,0 @@
export const PRICE_RATES_UPDATE_FORM_ID = Symbol();

2
src/shipping/views/PriceRatesUpdate/index.ts
View file

@ -1,2 +0,0 @@
export * from "./PriceRatesUpdate";
export { default } from "./PriceRatesUpdate";

28
src/shipping/views/PriceRatesCreate/PriceRatesCreate.tsx → src/shipping/views/RateCreate.tsx
View file

@ -9,7 +9,7 @@ import ShippingZoneRatesCreatePage from "@saleor/shipping/components/ShippingZon
import { useShippingRateCreator } from "@saleor/shipping/handlers";
import { useShippingZoneChannels } from "@saleor/shipping/queries";
import {
shippingPriceRatesUrl,
shippingRateCreateUrl,
ShippingRateCreateUrlDialog,
ShippingRateCreateUrlQueryParams,
shippingZoneUrl
@ -21,32 +21,26 @@ import {
getRuleObject
} from "@saleor/shipping/views/utils";
import { MinMax } from "@saleor/types";
import {
PostalCodeRuleInclusionTypeEnum,
ShippingMethodTypeEnum
} from "@saleor/types/globalTypes";
import { PostalCodeRuleInclusionTypeEnum } from "@saleor/types/globalTypes";
import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
import React from "react";
import { useIntl } from "react-intl";
import { PRICE_RATES_CREATE_FORM_ID } from "./consts";
const FORM_ID = Symbol();
export interface PriceRatesCreateProps {
export interface RateCreateProps {
id: string;
params: ShippingRateCreateUrlQueryParams;
}
export const PriceRatesCreate: React.FC<PriceRatesCreateProps> = ({
id,
params
}) => {
export const RateCreate: React.FC<RateCreateProps> = ({ id, params }) => {
const navigate = useNavigator();
const intl = useIntl();
const [openModal, closeModal] = createDialogActionHandlers<
ShippingRateCreateUrlDialog,
ShippingRateCreateUrlQueryParams
>(navigate, params => shippingPriceRatesUrl(id, params), params);
>(navigate, params => shippingRateCreateUrl(id, params), params);
const {
data: shippingZoneData,
@ -75,7 +69,7 @@ export const PriceRatesCreate: React.FC<PriceRatesCreateProps> = ({
allChannels,
params?.action,
{ closeModal, openModal },
{ formId: PRICE_RATES_CREATE_FORM_ID }
{ formId: FORM_ID }
);
const [state, dispatch] = React.useReducer(postalCodesReducer, {
@ -93,7 +87,7 @@ export const PriceRatesCreate: React.FC<PriceRatesCreateProps> = ({
status
} = useShippingRateCreator(
id,
ShippingMethodTypeEnum.PRICE,
params.type,
state.postalCodeRules,
state.inclusionType
);
@ -153,7 +147,7 @@ export const PriceRatesCreate: React.FC<PriceRatesCreateProps> = ({
)}
<ShippingZoneRatesCreatePage
formId={PRICE_RATES_CREATE_FORM_ID}
formId={FORM_ID}
allChannelsCount={allChannels?.length}
shippingChannels={currentChannels}
disabled={channelsLoading || status === "loading"}
@ -168,7 +162,7 @@ export const PriceRatesCreate: React.FC<PriceRatesCreateProps> = ({
onPostalCodeAssign={() => openModal("add-range")}
onPostalCodeUnassign={onPostalCodeUnassign}
onPostalCodeInclusionChange={onPostalCodeInclusionChange}
variant={ShippingMethodTypeEnum.PRICE}
variant={params.type}
/>
<ShippingZonePostalCodeRangeDialog
confirmButtonState="default"
@ -180,4 +174,4 @@ export const PriceRatesCreate: React.FC<PriceRatesCreateProps> = ({
);
};
export default PriceRatesCreate;
export default RateCreate;

27
src/shipping/views/PriceRatesUpdate/PriceRatesUpdate.tsx → src/shipping/views/RateUpdate.tsx
View file

@ -29,7 +29,8 @@ import { ShippingZoneRateUpdateFormData } from "@saleor/shipping/components/Ship
import UnassignDialog from "@saleor/shipping/components/UnassignDialog";
import {
getShippingMethodChannelVariables,
getUpdateShippingPriceRateVariables
getUpdateShippingPriceRateVariables,
getUpdateShippingWeightRateVariables
} from "@saleor/shipping/handlers";
import {
useShippingMethodChannelListingUpdate,
@ -40,7 +41,7 @@ import {
} from "@saleor/shipping/mutations";
import { useShippingZone } from "@saleor/shipping/queries";
import {
shippingPriceRatesEditUrl,
shippingRateEditUrl,
ShippingRateUrlDialog,
ShippingRateUrlQueryParams,
shippingZoneUrl
@ -66,15 +67,15 @@ import {
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import { PRICE_RATES_UPDATE_FORM_ID } from "./consts";
const FORM_ID = Symbol();
export interface PriceRatesUpdateProps {
export interface RateUpdateProps {
id: string;
rateId: string;
params: ShippingRateUrlQueryParams;
}
export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
export const RateUpdate: React.FC<RateUpdateProps> = ({
id,
rateId,
params
@ -106,7 +107,7 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
const [openModal, closeModal] = createDialogActionHandlers<
ShippingRateUrlDialog,
ShippingRateUrlQueryParams
>(navigate, params => shippingPriceRatesEditUrl(id, rateId, params), params);
>(navigate, params => shippingRateEditUrl(id, rateId, params), params);
const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
[]
@ -164,7 +165,7 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
shippingChannels,
params?.action,
{ closeModal, openModal },
{ formId: PRICE_RATES_UPDATE_FORM_ID }
{ formId: FORM_ID }
);
const [updateShippingRate, updateShippingRateOpts] = useShippingRateUpdate(
@ -221,8 +222,12 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
const updateData = async (
formData: ShippingZoneRateUpdateFormData
): Promise<unknown[]> => {
const getUpdateVariables =
rate!.type === ShippingMethodTypeEnum.PRICE
? getUpdateShippingPriceRateVariables
: getUpdateShippingWeightRateVariables;
const response = await updateShippingRate({
variables: getUpdateShippingPriceRateVariables(
variables: getUpdateVariables(
formData,
id,
rateId,
@ -362,7 +367,7 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
onSubmit={handleProductAssign}
/>
<ShippingZoneRatesPage
formId={PRICE_RATES_UPDATE_FORM_ID}
formId={FORM_ID}
allChannelsCount={allChannels?.length}
shippingChannels={currentChannels}
disabled={
@ -388,7 +393,7 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
onChannelsChange={setCurrentChannels}
onProductUnassign={handleProductUnassign}
onProductAssign={() => openModal("assign-product")}
variant={ShippingMethodTypeEnum.PRICE}
variant={rate?.type}
isChecked={isSelected}
selected={listElements.length}
toggle={toggle}
@ -419,4 +424,4 @@ export const PriceRatesUpdate: React.FC<PriceRatesUpdateProps> = ({
);
};
export default PriceRatesUpdate;
export default RateUpdate;

23
src/shipping/views/ShippingZoneDetails/index.tsx
View file

@ -43,16 +43,15 @@ import {
} from "../../../misc";
import {
CountryCode,
ShippingMethodTypeEnum,
ShippingZoneUpdateInput
} from "../../../types/globalTypes";
import ShippingZoneDetailsPage from "../../components/ShippingZoneDetailsPage";
import { ShippingZoneUpdateFormData } from "../../components/ShippingZoneDetailsPage/types";
import { useShippingZone } from "../../queries";
import {
shippingPriceRatesEditUrl,
shippingPriceRatesUrl,
shippingWeightRatesEditUrl,
shippingWeightRatesUrl,
shippingRateCreateUrl,
shippingRateEditUrl,
shippingZonesListUrl,
shippingZoneUrl,
ShippingZoneUrlDialog,
@ -213,10 +212,12 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
})
}
onDelete={() => openModal("remove")}
onPriceRateAdd={() => navigate(shippingPriceRatesUrl(id))}
onPriceRateEdit={rateId =>
navigate(shippingPriceRatesEditUrl(id, rateId))
onPriceRateAdd={() =>
navigate(
shippingRateCreateUrl(id, { type: ShippingMethodTypeEnum.PRICE })
)
}
onPriceRateEdit={rateId => navigate(shippingRateEditUrl(id, rateId))}
onRateRemove={rateId =>
openModal("remove-rate", {
id: rateId
@ -225,10 +226,12 @@ const ShippingZoneDetails: React.FC<ShippingZoneDetailsProps> = ({
onSubmit={handleSubmit}
allChannels={availableChannels}
onWarehouseAdd={() => openModal("add-warehouse")}
onWeightRateAdd={() => navigate(shippingWeightRatesUrl(id))}
onWeightRateEdit={rateId =>
navigate(shippingWeightRatesEditUrl(id, rateId))
onWeightRateAdd={() =>
navigate(
shippingRateCreateUrl(id, { type: ShippingMethodTypeEnum.WEIGHT })
)
}
onWeightRateEdit={rateId => navigate(shippingRateEditUrl(id, rateId))}
saveButtonBarState={updateShippingZoneOpts.status}
shippingZone={data?.shippingZone}
warehouses={mapEdgesToItems(searchWarehousesOpts?.data?.search) || []}

188
src/shipping/views/WeightRatesCreate/WeightRatesCreate.tsx
View file

@ -1,188 +0,0 @@
import {
createShippingChannels,
createSortedShippingChannels
} from "@saleor/channels/utils";
import ChannelsAvailabilityDialog from "@saleor/components/ChannelsAvailabilityDialog";
import { WindowTitle } from "@saleor/components/WindowTitle";
import useChannels from "@saleor/hooks/useChannels";
import useNavigator from "@saleor/hooks/useNavigator";
import { sectionNames } from "@saleor/intl";
import ShippingZonePostalCodeRangeDialog from "@saleor/shipping/components/ShippingZonePostalCodeRangeDialog";
import ShippingZoneRatesCreatePage from "@saleor/shipping/components/ShippingZoneRatesCreatePage";
import { useShippingRateCreator } from "@saleor/shipping/handlers";
import { useShippingZoneChannels } from "@saleor/shipping/queries";
import {
ShippingRateCreateUrlDialog,
ShippingRateCreateUrlQueryParams,
shippingWeightRatesUrl,
shippingZoneUrl
} from "@saleor/shipping/urls";
import postalCodesReducer from "@saleor/shipping/views/reducer";
import {
filterPostalCodes,
getPostalCodeRuleByMinMax,
getRuleObject
} from "@saleor/shipping/views/utils";
import { MinMax } from "@saleor/types";
import {
PostalCodeRuleInclusionTypeEnum,
ShippingMethodTypeEnum
} from "@saleor/types/globalTypes";
import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
import React from "react";
import { useIntl } from "react-intl";
import { WEIGHT_RATES_CREATE_FORM_ID } from "./consts";
export interface WeightRatesCreateProps {
id: string;
params: ShippingRateCreateUrlQueryParams;
}
export const WeightRatesCreate: React.FC<WeightRatesCreateProps> = ({
id,
params
}) => {
const navigate = useNavigator();
const intl = useIntl();
const {
data: shippingZoneData,
loading: channelsLoading
} = useShippingZoneChannels({
displayLoader: true,
variables: { id }
});
const [openModal, closeModal] = createDialogActionHandlers<
ShippingRateCreateUrlDialog,
ShippingRateCreateUrlQueryParams
>(navigate, params => shippingWeightRatesUrl(id, params), params);
const shippingChannels = createShippingChannels(
shippingZoneData?.shippingZone?.channels
);
const allChannels = createSortedShippingChannels(
shippingZoneData?.shippingZone?.channels
);
const {
channelListElements,
channelsToggle,
currentChannels,
handleChannelsConfirm,
handleChannelsModalClose,
handleChannelsModalOpen,
isChannelSelected,
isChannelsModalOpen,
setCurrentChannels,
toggleAllChannels
} = useChannels(
shippingChannels,
params?.action,
{ closeModal, openModal },
{ formId: WEIGHT_RATES_CREATE_FORM_ID }
);
const [state, dispatch] = React.useReducer(postalCodesReducer, {
codesToDelete: [],
havePostalCodesChanged: false,
inclusionType: PostalCodeRuleInclusionTypeEnum.EXCLUDE,
originalCodes: [],
postalCodeRules: []
});
const {
channelErrors,
createShippingRate,
errors,
status
} = useShippingRateCreator(
id,
ShippingMethodTypeEnum.WEIGHT,
state.postalCodeRules,
state.inclusionType
);
const handleBack = () => navigate(shippingZoneUrl(id));
const onPostalCodeAssign = (rule: MinMax) => {
if (
state.postalCodeRules.filter(getPostalCodeRuleByMinMax(rule)).length > 0
) {
closeModal();
return;
}
const newCode = getRuleObject(rule, state.inclusionType);
dispatch({
havePostalCodesChanged: true,
postalCodeRules: [...state.postalCodeRules, newCode]
});
closeModal();
};
const onPostalCodeInclusionChange = (
inclusion: PostalCodeRuleInclusionTypeEnum
) => {
dispatch({
inclusionType: inclusion,
postalCodeRules: []
});
};
const onPostalCodeUnassign = code => {
dispatch({
havePostalCodesChanged: true,
postalCodeRules: filterPostalCodes(state.postalCodeRules, code)
});
};
return (
<>
<WindowTitle title={intl.formatMessage(sectionNames.shipping)} />
{!!allChannels?.length && (
<ChannelsAvailabilityDialog
isSelected={isChannelSelected}
channels={allChannels}
onChange={channelsToggle}
onClose={handleChannelsModalClose}
open={isChannelsModalOpen}
title={intl.formatMessage({
defaultMessage: "Manage Channels Availability"
})}
confirmButtonState="default"
selected={channelListElements.length}
onConfirm={handleChannelsConfirm}
toggleAll={toggleAllChannels}
/>
)}
<ShippingZoneRatesCreatePage
formId={WEIGHT_RATES_CREATE_FORM_ID}
allChannelsCount={allChannels?.length}
shippingChannels={currentChannels}
disabled={channelsLoading || status === "loading"}
saveButtonBarState={status}
onSubmit={createShippingRate}
onBack={handleBack}
errors={errors}
channelErrors={channelErrors}
postalCodes={state.postalCodeRules}
openChannelsModal={handleChannelsModalOpen}
onChannelsChange={setCurrentChannels}
onPostalCodeAssign={() => openModal("add-range")}
onPostalCodeUnassign={onPostalCodeUnassign}
onPostalCodeInclusionChange={onPostalCodeInclusionChange}
variant={ShippingMethodTypeEnum.WEIGHT}
/>
<ShippingZonePostalCodeRangeDialog
confirmButtonState="default"
onClose={closeModal}
onSubmit={onPostalCodeAssign}
open={params.action === "add-range"}
/>
</>
);
};
export default WeightRatesCreate;

1
src/shipping/views/WeightRatesCreate/consts.ts
View file

@ -1 +0,0 @@
export const WEIGHT_RATES_CREATE_FORM_ID = Symbol();

2
src/shipping/views/WeightRatesCreate/index.ts
View file

@ -1,2 +0,0 @@
export * from "./WeightRatesCreate";
export { default } from "./WeightRatesCreate";

418
src/shipping/views/WeightRatesUpdate/WeightRatesUpdate.tsx
View file

@ -1,418 +0,0 @@
import {
createShippingChannelsFromRate,
createSortedShippingChannels
} from "@saleor/channels/utils";
import ChannelsAvailabilityDialog from "@saleor/components/ChannelsAvailabilityDialog";
import { WindowTitle } from "@saleor/components/WindowTitle";
import { DEFAULT_INITIAL_SEARCH_DATA } from "@saleor/config";
import { PAGINATE_BY } from "@saleor/config";
import useBulkActions from "@saleor/hooks/useBulkActions";
import useChannels from "@saleor/hooks/useChannels";
import useLocalPaginator, {
useLocalPaginationState
} from "@saleor/hooks/useLocalPaginator";
import useNavigator from "@saleor/hooks/useNavigator";
import useNotifier from "@saleor/hooks/useNotifier";
import { sectionNames } from "@saleor/intl";
import { commonMessages } from "@saleor/intl";
import { Button } from "@saleor/macaw-ui";
import {
getById,
getByUnmatchingId
} from "@saleor/orders/components/OrderReturnPage/utils";
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 from "@saleor/shipping/components/ShippingZoneRatesPage";
import { ShippingZoneRateUpdateFormData } from "@saleor/shipping/components/ShippingZoneRatesPage/types";
import UnassignDialog from "@saleor/shipping/components/UnassignDialog";
import {
getShippingMethodChannelVariables,
getUpdateShippingWeightRateVariables
} from "@saleor/shipping/handlers";
import {
useShippingMethodChannelListingUpdate,
useShippingPriceExcludeProduct,
useShippingPriceRemoveProductsFromExclude,
useShippingRateDelete,
useShippingRateUpdate
} from "@saleor/shipping/mutations";
import { useShippingZone } from "@saleor/shipping/queries";
import {
ShippingRateUrlDialog,
ShippingRateUrlQueryParams,
shippingWeightRatesEditUrl,
shippingZoneUrl
} from "@saleor/shipping/urls";
import postalCodesReducer from "@saleor/shipping/views/reducer";
import {
filterPostalCodes,
getPostalCodeRuleByMinMax,
getRuleObject
} from "@saleor/shipping/views/utils";
import { MinMax } from "@saleor/types";
import {
PostalCodeRuleInclusionTypeEnum,
ShippingMethodTypeEnum
} from "@saleor/types/globalTypes";
import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandlers";
import createMetadataUpdateHandler from "@saleor/utils/handlers/metadataUpdateHandler";
import { mapEdgesToItems } from "@saleor/utils/maps";
import {
useMetadataUpdate,
usePrivateMetadataUpdate
} from "@saleor/utils/metadata/updateMetadata";
import React from "react";
import { FormattedMessage, useIntl } from "react-intl";
import { WEIGHT_RATES_UPDATE_FORM_ID } from "./consts";
export interface WeightRatesUpdateProps {
id: string;
rateId: string;
params: ShippingRateUrlQueryParams;
}
export const WeightRatesUpdate: React.FC<WeightRatesUpdateProps> = ({
id,
rateId,
params
}) => {
const navigate = useNavigator();
const notify = useNotifier();
const intl = useIntl();
const [paginationState, setPaginationState] = useLocalPaginationState(
PAGINATE_BY
);
const paginate = useLocalPaginator(setPaginationState);
const { data, loading, refetch } = useShippingZone({
displayLoader: true,
variables: { id, ...paginationState }
});
const channelsData = data?.shippingZone?.channels;
const rate = data?.shippingZone?.shippingMethods?.find(getById(rateId));
const [openModal, closeModal] = createDialogActionHandlers<
ShippingRateUrlDialog,
ShippingRateUrlQueryParams
>(navigate, params => shippingWeightRatesEditUrl(id, rateId, params), params);
const [state, dispatch] = React.useReducer(postalCodesReducer, {
codesToDelete: [],
havePostalCodesChanged: false,
inclusionType: rate?.postalCodeRules[0]?.inclusionType,
originalCodes: [],
postalCodeRules: rate?.postalCodeRules || []
});
const postalCodeRulesLoaded =
!loading &&
!state.postalCodeRules?.length &&
!state.codesToDelete?.length &&
rate?.postalCodeRules?.length;
if (postalCodeRulesLoaded) {
dispatch({ postalCodeRules: rate.postalCodeRules });
}
const onPostalCodeInclusionChange = (
inclusion: PostalCodeRuleInclusionTypeEnum
) => {
dispatch({
codesToDelete: rate.postalCodeRules.map(code => code.id),
havePostalCodesChanged: true,
inclusionType: inclusion,
postalCodeRules: []
});
};
const onPostalCodeAssign = (rule: MinMax) => {
if (!state.originalCodes.length) {
dispatch({ originalCodes: rate.postalCodeRules });
}
if (
state.postalCodeRules.filter(getPostalCodeRuleByMinMax(rule)).length > 0
) {
closeModal();
return;
}
const newCode = getRuleObject(rule, state.inclusionType);
dispatch({
havePostalCodesChanged: true,
postalCodeRules: [...state.postalCodeRules, newCode]
});
closeModal();
};
const {
loadMore,
search: productsSearch,
result: productsSearchOpts
} = useProductSearch({ variables: DEFAULT_INITIAL_SEARCH_DATA });
const { isSelected, listElements, reset, toggle, toggleAll } = useBulkActions(
[]
);
const { loadNextPage, loadPreviousPage, pageInfo } = paginate(
rate?.excludedProducts.pageInfo,
paginationState
);
const [
updateShippingMethodChannelListing,
updateShippingMethodChannelListingOpts
] = useShippingMethodChannelListingUpdate({});
const [
unassignProduct,
unassignProductOpts
] = useShippingPriceRemoveProductsFromExclude({
onCompleted: data => {
if (data.shippingPriceRemoveProductFromExclude.errors.length === 0) {
handleSuccess();
refetch();
closeModal();
}
}
});
const [assignProduct, assignProductOpts] = useShippingPriceExcludeProduct({
onCompleted: data => {
if (data.shippingPriceExcludeProducts.errors.length === 0) {
handleSuccess();
refetch();
closeModal();
}
}
});
const shippingChannels = createShippingChannelsFromRate(
rate?.channelListings
);
const allChannels = createSortedShippingChannels(channelsData);
const {
channelListElements,
channelsToggle,
currentChannels,
handleChannelsConfirm,
handleChannelsModalClose,
handleChannelsModalOpen,
isChannelSelected,
isChannelsModalOpen,
setCurrentChannels,
toggleAllChannels
} = useChannels(
shippingChannels,
params?.action,
{ closeModal, openModal },
{ formId: WEIGHT_RATES_UPDATE_FORM_ID }
);
const [updateShippingRate, updateShippingRateOpts] = useShippingRateUpdate(
{}
);
const handleSuccess = () => {
notify({
status: "success",
text: intl.formatMessage(commonMessages.savedChanges)
});
};
const [deleteShippingRate, deleteShippingRateOpts] = useShippingRateDelete({
onCompleted: data => {
if (data.shippingPriceDelete.errors.length === 0) {
handleSuccess();
navigate(shippingZoneUrl(id));
}
}
});
const [updateMetadata] = useMetadataUpdate({});
const [updatePrivateMetadata] = usePrivateMetadataUpdate({});
const updateData = async (data: ShippingZoneRateUpdateFormData) => {
const response = await updateShippingRate({
variables: getUpdateShippingWeightRateVariables(
data,
id,
rateId,
state.postalCodeRules,
state.codesToDelete
)
});
const errors = response.data.shippingPriceUpdate.errors;
if (errors.length === 0) {
handleSuccess();
dispatch({ havePostalCodesChanged: false });
updateShippingMethodChannelListing({
variables: getShippingMethodChannelVariables(
rateId,
data.orderValueRestricted,
data.channelListings,
shippingChannels
)
});
}
return errors;
};
const onPostalCodeUnassign = code => {
if (code.id !== undefined) {
dispatch({
codesToDelete: [...state.codesToDelete, code.id],
havePostalCodesChanged: true,
postalCodeRules: state.postalCodeRules.filter(
getByUnmatchingId(code.id)
)
});
} else {
dispatch({
havePostalCodesChanged: true,
postalCodeRules: filterPostalCodes(state.postalCodeRules, code)
});
}
};
const handleSubmit = createMetadataUpdateHandler(
rate,
updateData,
variables => updateMetadata({ variables }),
variables => updatePrivateMetadata({ variables })
);
const handleProductAssign = (ids: string[]) =>
assignProduct({
variables: { id: rateId, input: { products: ids } }
});
const handleProductUnassign = (ids: string[]) => {
unassignProduct({
variables: { id: rateId, products: ids }
});
reset();
};
const handleBack = () => navigate(shippingZoneUrl(id));
return (
<>
<WindowTitle title={intl.formatMessage(sectionNames.shipping)} />
{!!allChannels?.length && (
<ChannelsAvailabilityDialog
isSelected={isChannelSelected}
channels={allChannels}
onChange={channelsToggle}
onClose={handleChannelsModalClose}
open={isChannelsModalOpen}
title={intl.formatMessage({
defaultMessage: "Manage Channels Availability"
})}
confirmButtonState="default"
selected={channelListElements.length}
onConfirm={handleChannelsConfirm}
toggleAll={toggleAllChannels}
/>
)}
<DeleteShippingRateDialog
confirmButtonState={deleteShippingRateOpts.status}
onClose={closeModal}
handleConfirm={() =>
deleteShippingRate({
variables: {
id: rateId
}
})
}
open={params.action === "remove"}
name={rate?.name}
/>
<UnassignDialog
open={params.action === "unassign-product" && !!listElements.length}
idsLength={listElements.length}
confirmButtonState={unassignProductOpts.status}
closeModal={closeModal}
onConfirm={() => handleProductUnassign(listElements)}
/>
<ShippingMethodProductsAddDialog
confirmButtonState={assignProductOpts.status}
loading={productsSearchOpts.loading}
open={params.action === "assign-product"}
hasMore={productsSearchOpts.data?.search?.pageInfo.hasNextPage}
products={mapEdgesToItems(productsSearchOpts?.data?.search)?.filter(
suggestedProduct => suggestedProduct.id
)}
onClose={closeModal}
onFetch={productsSearch}
onFetchMore={loadMore}
onSubmit={handleProductAssign}
/>
<ShippingZoneRatesPage
formId={WEIGHT_RATES_UPDATE_FORM_ID}
allChannelsCount={allChannels?.length}
shippingChannels={currentChannels}
disabled={
loading ||
updateShippingRateOpts?.status === "loading" ||
updateShippingMethodChannelListingOpts?.status === "loading" ||
unassignProductOpts?.status === "loading" ||
assignProductOpts?.status === "loading"
}
hasChannelChanged={shippingChannels?.length !== currentChannels?.length}
havePostalCodesChanged={state.havePostalCodesChanged}
saveButtonBarState={updateShippingRateOpts.status}
onDelete={() => openModal("remove")}
onSubmit={handleSubmit}
onBack={handleBack}
rate={rate}
errors={updateShippingRateOpts.data?.shippingPriceUpdate.errors || []}
channelErrors={
updateShippingMethodChannelListingOpts?.data
?.shippingMethodChannelListingUpdate?.errors || []
}
openChannelsModal={handleChannelsModalOpen}
onChannelsChange={setCurrentChannels}
onProductUnassign={handleProductUnassign}
onProductAssign={() => openModal("assign-product")}
variant={ShippingMethodTypeEnum.WEIGHT}
isChecked={isSelected}
selected={listElements.length}
toggle={toggle}
toggleAll={toggleAll}
onNextPage={loadNextPage}
onPreviousPage={loadPreviousPage}
postalCodeRules={state.postalCodeRules}
pageInfo={pageInfo}
toolbar={
<Button onClick={() => openModal("unassign-product")}>
<FormattedMessage
defaultMessage="Unassign"
description="unassign products from shipping method, button"
/>
</Button>
}
onPostalCodeInclusionChange={onPostalCodeInclusionChange}
onPostalCodeAssign={() => openModal("add-range")}
onPostalCodeUnassign={onPostalCodeUnassign}
/>
<ShippingZonePostalCodeRangeDialog
confirmButtonState={"default"}
onClose={closeModal}
onSubmit={code => onPostalCodeAssign(code)}
open={params.action === "add-range"}
/>
</>
);
};
export default WeightRatesUpdate;

1
src/shipping/views/WeightRatesUpdate/consts.ts
View file

@ -1 +0,0 @@
export const WEIGHT_RATES_UPDATE_FORM_ID = Symbol();

2
src/shipping/views/WeightRatesUpdate/index.ts
View file

@ -1,2 +0,0 @@
export * from "./WeightRatesUpdate";
export { default } from "./WeightRatesUpdate";