Saleor 2798 user addresses selection for draft order (#1082)
* Create user addresses select modal * Prepare user addresses select modal form * Add user addresses select modal to order draft details page * Update draft order validation of adresses in edit modal * Add Customer Change modal * Update snapshots and messages * Indication of address form errors by address type * Refactor addresses submiting * Refactor address transform functions * Add data-testids to addresses change dialog * Update customer address choice style * Trigger CI * Update customer addresses edit flow * Move styles outside of component files * Refactor after review * Refactor after review * Do not update customer if the same selected * Handle setting adress after edit customer with no addresses * Trigger CI
This commit is contained in:
Dawid Tarasiuk
GitHub
parent
e2a80e4758
commit
0e054cc1e4
104 changed files with 1373 additions and 160 deletions
|
|
@ -43,6 +43,7 @@ All notable, unreleased changes to this project will be documented in this file.
|
|||
- useFormset.setItemValue wrong updates,
|
||||
- Drop deprecated fields - #1071 by @jwm0
|
||||
- Add service worker - #1073 by @dominik-zeglen
|
||||
- Choosing user shipping and billing addresses for draft order - #1082 by @orzechdev
|
||||
|
||||
# 2.11.1
|
||||
|
||||
|
|
|
|||
|
|
@ -370,10 +370,6 @@
|
|||
"context": "product field",
|
||||
"string": "Export Variant Weight"
|
||||
},
|
||||
"productExportFieldVisibility": {
|
||||
"context": "product field",
|
||||
"string": "Visibility"
|
||||
},
|
||||
"productStockHeader": {
|
||||
"context": "product stock, section header",
|
||||
"string": "Inventory"
|
||||
|
|
@ -2460,6 +2456,10 @@
|
|||
"context": "button",
|
||||
"string": "Refresh"
|
||||
},
|
||||
"src_dot_continue": {
|
||||
"context": "button",
|
||||
"string": "Continue"
|
||||
},
|
||||
"src_dot_create": {
|
||||
"context": "button",
|
||||
"string": "Create"
|
||||
|
|
@ -3377,6 +3377,54 @@
|
|||
"context": "section header",
|
||||
"string": "Sales channel"
|
||||
},
|
||||
"src_dot_orders_dot_components_dot_OrderCustomerAddressesEditDialog_dot_billingAddressDescription": {
|
||||
"context": "dialog content",
|
||||
"string": "Add a new address:"
|
||||
},
|
||||
"src_dot_orders_dot_components_dot_OrderCustomerAddressesEditDialog_dot_billingSameAsShipping": {
|
||||
"context": "checkbox label",
|
||||
"string": "Billing address same as shipping address"
|
||||
},
|
||||
"src_dot_orders_dot_components_dot_OrderCustomerAddressesEditDialog_dot_customerAddress": {
|
||||
"context": "address type",
|
||||
"string": "Use one of customer addresses"
|
||||
},
|
||||
"src_dot_orders_dot_components_dot_OrderCustomerAddressesEditDialog_dot_customerBillingAddressDescription": {
|
||||
"context": "dialog content",
|
||||
"string": "Select one of customer addresses or add a new address:"
|
||||
},
|
||||
"src_dot_orders_dot_components_dot_OrderCustomerAddressesEditDialog_dot_customerShippingAddressDescription": {
|
||||
"context": "dialog content",
|
||||
"string": "Which address would you like to use as shipping address for selected customer:"
|
||||
},
|
||||
"src_dot_orders_dot_components_dot_OrderCustomerAddressesEditDialog_dot_newAddress": {
|
||||
"context": "address type",
|
||||
"string": "Add new address"
|
||||
},
|
||||
"src_dot_orders_dot_components_dot_OrderCustomerAddressesEditDialog_dot_shippingAddressDescription": {
|
||||
"context": "dialog content",
|
||||
"string": "This customer doesn’t have any shipping addresses. Provide address for order:"
|
||||
},
|
||||
"src_dot_orders_dot_components_dot_OrderCustomerAddressesEditDialog_dot_title": {
|
||||
"context": "dialog header",
|
||||
"string": "Shipping address for order"
|
||||
},
|
||||
"src_dot_orders_dot_components_dot_OrderCustomerChangeDialog_dot_changeAddress": {
|
||||
"context": "option label",
|
||||
"string": "Change address"
|
||||
},
|
||||
"src_dot_orders_dot_components_dot_OrderCustomerChangeDialog_dot_description": {
|
||||
"context": "dialog description",
|
||||
"string": "You have changed customer assigned to this order. What would you like to do with the shipping address?"
|
||||
},
|
||||
"src_dot_orders_dot_components_dot_OrderCustomerChangeDialog_dot_keepAddress": {
|
||||
"context": "option label",
|
||||
"string": "Keep address"
|
||||
},
|
||||
"src_dot_orders_dot_components_dot_OrderCustomerChangeDialog_dot_title": {
|
||||
"context": "dialog header",
|
||||
"string": "Changed Customer"
|
||||
},
|
||||
"src_dot_orders_dot_components_dot_OrderCustomerNote_dot_1505053535": {
|
||||
"string": "No notes from customer"
|
||||
},
|
||||
|
|
@ -5802,6 +5850,10 @@
|
|||
"src_dot_savedChanges": {
|
||||
"string": "Saved changes"
|
||||
},
|
||||
"src_dot_select": {
|
||||
"context": "select option, button",
|
||||
"string": "Select"
|
||||
},
|
||||
"src_dot_selectAll": {
|
||||
"context": "select all options, button",
|
||||
"string": "Select All"
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ type AccountError {
|
|||
field: String
|
||||
message: String
|
||||
code: AccountErrorCode!
|
||||
addressType: AddressTypeEnum
|
||||
}
|
||||
|
||||
enum AccountErrorCode {
|
||||
|
|
@ -982,6 +983,7 @@ type CheckoutError {
|
|||
message: String
|
||||
code: CheckoutErrorCode!
|
||||
variants: [ID!]
|
||||
addressType: AddressTypeEnum
|
||||
}
|
||||
|
||||
enum CheckoutErrorCode {
|
||||
|
|
@ -3105,6 +3107,7 @@ type OrderError {
|
|||
warehouse: ID
|
||||
orderLine: ID
|
||||
variants: [ID!]
|
||||
addressType: AddressTypeEnum
|
||||
}
|
||||
|
||||
enum OrderErrorCode {
|
||||
|
|
@ -4198,7 +4201,6 @@ enum ProductFieldEnum {
|
|||
DESCRIPTION
|
||||
PRODUCT_TYPE
|
||||
CATEGORY
|
||||
VISIBLE
|
||||
PRODUCT_WEIGHT
|
||||
COLLECTIONS
|
||||
CHARGE_TAXES
|
||||
|
|
@ -5305,6 +5307,7 @@ type StaffError {
|
|||
field: String
|
||||
message: String
|
||||
code: AccountErrorCode!
|
||||
addressType: AddressTypeEnum
|
||||
permissions: [PermissionEnum!]
|
||||
groups: [ID!]
|
||||
users: [ID!]
|
||||
|
|
@ -6128,4 +6131,4 @@ union _Entity = Address | User | Group | App | ProductVariant | Product | Produc
|
|||
|
||||
type _Service {
|
||||
sdl: String
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,8 @@ storiesOf("Views / Authentication / Set up a new password", module)
|
|||
errors={["password"].map(field => ({
|
||||
__typename: "AccountError",
|
||||
code: AccountErrorCode.PASSWORD_TOO_SHORT,
|
||||
field
|
||||
field,
|
||||
addressType: null
|
||||
}))}
|
||||
disabled={false}
|
||||
onSubmit={() => undefined}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { AccountErrorCode } from "./../../types/globalTypes";
|
||||
import { AccountErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: ExternalAuthenticationUrl
|
||||
|
|
@ -13,6 +13,7 @@ export interface ExternalAuthenticationUrl_externalAuthenticationUrl_errors {
|
|||
__typename: "AccountError";
|
||||
code: AccountErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface ExternalAuthenticationUrl_externalAuthenticationUrl {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { PermissionEnum, AccountErrorCode } from "./../../types/globalTypes";
|
||||
import { PermissionEnum, AccountErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: ExternalObtainAccessTokens
|
||||
|
|
@ -35,6 +35,7 @@ export interface ExternalObtainAccessTokens_externalObtainAccessTokens_errors {
|
|||
__typename: "AccountError";
|
||||
code: AccountErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface ExternalObtainAccessTokens_externalObtainAccessTokens {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { AccountErrorCode } from "./../../types/globalTypes";
|
||||
import { AccountErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: RequestPasswordReset
|
||||
|
|
@ -13,6 +13,7 @@ export interface RequestPasswordReset_requestPasswordReset_errors {
|
|||
__typename: "AccountError";
|
||||
code: AccountErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface RequestPasswordReset_requestPasswordReset {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { AccountErrorCode, PermissionEnum } from "./../../types/globalTypes";
|
||||
import { AccountErrorCode, AddressTypeEnum, PermissionEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: SetPassword
|
||||
|
|
@ -13,6 +13,7 @@ export interface SetPassword_setPassword_errors {
|
|||
__typename: "AccountError";
|
||||
code: AccountErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface SetPassword_setPassword_user_userPermissions {
|
||||
|
|
|
|||
|
|
@ -74,6 +74,7 @@ const AddressEdit: React.FC<AddressEditProps> = props => {
|
|||
"streetAddress1",
|
||||
"streetAddress2"
|
||||
];
|
||||
|
||||
const formErrors = getFormErrors<
|
||||
keyof AddressTypeInput,
|
||||
AccountErrorFragment | OrderErrorFragment
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
import Card from "@material-ui/core/Card";
|
||||
import CardContent from "@material-ui/core/CardContent";
|
||||
import AddressFormatter from "@saleor/components/AddressFormatter";
|
||||
import classNames from "classnames";
|
||||
import React from "react";
|
||||
|
||||
import { CustomerAddresses_user_addresses } from "../../types/CustomerAddresses";
|
||||
import { useStyles } from "./styles";
|
||||
|
||||
export interface CustomerAddressChoiceCardProps {
|
||||
address: CustomerAddresses_user_addresses;
|
||||
selected: boolean;
|
||||
onSelect: () => void;
|
||||
}
|
||||
|
||||
const CustomerAddressChoiceCard: React.FC<CustomerAddressChoiceCardProps> = props => {
|
||||
const { address, selected, onSelect } = props;
|
||||
const classes = useStyles(props);
|
||||
|
||||
return (
|
||||
<Card
|
||||
className={classNames(classes.card, {
|
||||
[classes.cardSelected]: selected
|
||||
})}
|
||||
onClick={onSelect}
|
||||
>
|
||||
<CardContent>
|
||||
<AddressFormatter address={address} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
CustomerAddressChoiceCard.displayName = "CustomerAddressChoiceCard";
|
||||
export default CustomerAddressChoiceCard;
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export { default } from "./CustomerAddressChoiceCard";
|
||||
export * from "./CustomerAddressChoiceCard";
|
||||
16
src/customers/components/CustomerAddressChoiceCard/styles.ts
Normal file
16
src/customers/components/CustomerAddressChoiceCard/styles.ts
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import { makeStyles } from "@saleor/theme";
|
||||
|
||||
export const useStyles = makeStyles(
|
||||
theme => ({
|
||||
card: {
|
||||
cursor: "pointer",
|
||||
padding: "1px"
|
||||
},
|
||||
cardSelected: {
|
||||
borderColor: theme.palette.primary.main,
|
||||
borderWidth: "2px",
|
||||
padding: "0"
|
||||
}
|
||||
}),
|
||||
{ name: "CustomerAddressChoiceCard" }
|
||||
);
|
||||
|
|
@ -8,6 +8,7 @@ import ConfirmButton, {
|
|||
ConfirmButtonTransitionState
|
||||
} from "@saleor/components/ConfirmButton";
|
||||
import Form from "@saleor/components/Form";
|
||||
import { ShopInfo_shop_countries } from "@saleor/components/Shop/types/ShopInfo";
|
||||
import { AccountErrorFragment } from "@saleor/fragments/types/AccountErrorFragment";
|
||||
import useAddressValidation from "@saleor/hooks/useAddressValidation";
|
||||
import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
|
||||
|
|
@ -16,6 +17,7 @@ import { buttonMessages } from "@saleor/intl";
|
|||
import { createStyles, WithStyles, withStyles } from "@saleor/theme";
|
||||
import { AddressInput } from "@saleor/types/globalTypes";
|
||||
import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
|
||||
import { mapCountriesToChoices } from "@saleor/utils/maps";
|
||||
import React from "react";
|
||||
import { FormattedMessage } from "react-intl";
|
||||
|
||||
|
|
@ -25,10 +27,7 @@ import { CustomerAddresses_user_addresses } from "../../types/CustomerAddresses"
|
|||
export interface CustomerAddressDialogProps {
|
||||
address: CustomerAddresses_user_addresses;
|
||||
confirmButtonState: ConfirmButtonTransitionState;
|
||||
countries: Array<{
|
||||
code: string;
|
||||
label: string;
|
||||
}>;
|
||||
countries: ShopInfo_shop_countries[];
|
||||
errors: AccountErrorFragment[];
|
||||
open: boolean;
|
||||
variant: "create" | "edit";
|
||||
|
|
@ -83,11 +82,7 @@ const CustomerAddressDialog = withStyles(
|
|||
streetAddress2: address?.streetAddress2 || ""
|
||||
};
|
||||
|
||||
const countryChoices =
|
||||
countries?.map(country => ({
|
||||
label: country.label,
|
||||
value: country.code
|
||||
})) || [];
|
||||
const countryChoices = mapCountriesToChoices(countries || []);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import useAddressValidation from "@saleor/hooks/useAddressValidation";
|
|||
import { sectionNames } from "@saleor/intl";
|
||||
import { AddressInput } from "@saleor/types/globalTypes";
|
||||
import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
|
||||
import { mapCountriesToChoices } from "@saleor/utils/maps";
|
||||
import React from "react";
|
||||
import { FormattedMessage, useIntl } from "react-intl";
|
||||
|
||||
|
|
@ -69,10 +70,7 @@ const CustomerCreatePage: React.FC<CustomerCreatePageProps> = ({
|
|||
const intl = useIntl();
|
||||
|
||||
const [countryDisplayName, setCountryDisplayName] = React.useState("");
|
||||
const countryChoices = countries.map(country => ({
|
||||
label: country.country,
|
||||
value: country.code
|
||||
}));
|
||||
const countryChoices = mapCountriesToChoices(countries);
|
||||
const {
|
||||
errors: validationErrors,
|
||||
submit: handleSubmitWithAddress
|
||||
|
|
|
|||
|
|
@ -107,6 +107,10 @@ export const TypedCustomerAddressesQuery = TypedQuery<
|
|||
CustomerAddresses,
|
||||
CustomerAddressesVariables
|
||||
>(customerAddresses);
|
||||
export const useCustomerAddressesQuery = makeQuery<
|
||||
CustomerAddresses,
|
||||
CustomerAddressesVariables
|
||||
>(customerAddresses);
|
||||
|
||||
const customerCreateData = gql`
|
||||
query CustomerCreateData {
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ export interface AddressTypeInput {
|
|||
streetAddress1: string;
|
||||
streetAddress2?: string;
|
||||
}
|
||||
|
||||
export interface AddressType {
|
||||
id: string;
|
||||
city: string;
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { AccountErrorCode } from "./../../types/globalTypes";
|
||||
import { AccountErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: BulkRemoveCustomers
|
||||
|
|
@ -13,6 +13,7 @@ export interface BulkRemoveCustomers_customerBulkDelete_errors {
|
|||
__typename: "AccountError";
|
||||
code: AccountErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface BulkRemoveCustomers_customerBulkDelete {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { UserCreateInput, AccountErrorCode } from "./../../types/globalTypes";
|
||||
import { UserCreateInput, AccountErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: CreateCustomer
|
||||
|
|
@ -13,6 +13,7 @@ export interface CreateCustomer_customerCreate_errors {
|
|||
__typename: "AccountError";
|
||||
code: AccountErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface CreateCustomer_customerCreate_user {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { AddressInput, AccountErrorCode } from "./../../types/globalTypes";
|
||||
import { AddressInput, AccountErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: CreateCustomerAddress
|
||||
|
|
@ -13,6 +13,7 @@ export interface CreateCustomerAddress_addressCreate_errors {
|
|||
__typename: "AccountError";
|
||||
code: AccountErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface CreateCustomerAddress_addressCreate_address_country {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { AccountErrorCode } from "./../../types/globalTypes";
|
||||
import { AccountErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: RemoveCustomer
|
||||
|
|
@ -13,6 +13,7 @@ export interface RemoveCustomer_customerDelete_errors {
|
|||
__typename: "AccountError";
|
||||
code: AccountErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface RemoveCustomer_customerDelete {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { AccountErrorCode } from "./../../types/globalTypes";
|
||||
import { AccountErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: RemoveCustomerAddress
|
||||
|
|
@ -13,6 +13,7 @@ export interface RemoveCustomerAddress_addressDelete_errors {
|
|||
__typename: "AccountError";
|
||||
code: AccountErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface RemoveCustomerAddress_addressDelete_user_addresses_country {
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ export interface SetCustomerDefaultAddress_addressSetDefault_errors {
|
|||
__typename: "AccountError";
|
||||
code: AccountErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface SetCustomerDefaultAddress_addressSetDefault_user_addresses_country {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { CustomerInput, AccountErrorCode } from "./../../types/globalTypes";
|
||||
import { CustomerInput, AccountErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: UpdateCustomer
|
||||
|
|
@ -13,6 +13,7 @@ export interface UpdateCustomer_customerUpdate_errors {
|
|||
__typename: "AccountError";
|
||||
code: AccountErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface UpdateCustomer_customerUpdate_user_metadata {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { AddressInput, AccountErrorCode } from "./../../types/globalTypes";
|
||||
import { AddressInput, AccountErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: UpdateCustomerAddress
|
||||
|
|
@ -13,6 +13,7 @@ export interface UpdateCustomerAddress_addressUpdate_errors {
|
|||
__typename: "AccountError";
|
||||
code: AccountErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface UpdateCustomerAddress_addressUpdate_address_country {
|
||||
|
|
|
|||
|
|
@ -101,11 +101,7 @@ const CustomerAddresses: React.FC<CustomerAddressesProps> = ({
|
|||
{(removeCustomerAddress, removeCustomerAddressOpts) => (
|
||||
<TypedCustomerAddressesQuery variables={{ id }}>
|
||||
{customerData => {
|
||||
const countryChoices =
|
||||
shop?.countries?.map(country => ({
|
||||
code: country.code,
|
||||
label: country.country
|
||||
})) || [];
|
||||
const countryChoices = shop?.countries || [];
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -44,6 +44,7 @@ export const accountErrorFragment = gql`
|
|||
fragment AccountErrorFragment on AccountError {
|
||||
code
|
||||
field
|
||||
addressType
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
@ -66,6 +67,7 @@ export const orderErrorFragment = gql`
|
|||
fragment OrderErrorFragment on OrderError {
|
||||
code
|
||||
field
|
||||
addressType
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { AccountErrorCode } from "./../../types/globalTypes";
|
||||
import { AccountErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL fragment: AccountErrorFragment
|
||||
|
|
@ -13,4 +13,5 @@ export interface AccountErrorFragment {
|
|||
__typename: "AccountError";
|
||||
code: AccountErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { OrderErrorCode } from "./../../types/globalTypes";
|
||||
import { OrderErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL fragment: OrderErrorFragment
|
||||
|
|
@ -13,4 +13,5 @@ export interface OrderErrorFragment {
|
|||
__typename: "OrderError";
|
||||
code: OrderErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
import { AddressTypeInput } from "@saleor/customers/types";
|
||||
import { AccountErrorFragment } from "@saleor/fragments/types/AccountErrorFragment";
|
||||
import { transformFormToAddress } from "@saleor/misc";
|
||||
import { AccountErrorCode, AddressInput } from "@saleor/types/globalTypes";
|
||||
import { transformFormToAddressInput } from "@saleor/misc";
|
||||
import {
|
||||
AccountErrorCode,
|
||||
AddressInput,
|
||||
AddressTypeEnum
|
||||
} from "@saleor/types/globalTypes";
|
||||
import { add, remove } from "@saleor/utils/lists";
|
||||
import { useState } from "react";
|
||||
|
||||
|
|
@ -11,7 +15,8 @@ interface UseAddressValidation<TInput, TOutput> {
|
|||
}
|
||||
|
||||
function useAddressValidation<TInput, TOutput>(
|
||||
onSubmit: (address: TInput & AddressInput) => TOutput
|
||||
onSubmit: (address: TInput & AddressInput) => TOutput,
|
||||
addressType?: AddressTypeEnum
|
||||
): UseAddressValidation<TInput, TOutput> {
|
||||
const [validationErrors, setValidationErrors] = useState<
|
||||
AccountErrorFragment[]
|
||||
|
|
@ -20,7 +25,8 @@ function useAddressValidation<TInput, TOutput>(
|
|||
const countryRequiredError: AccountErrorFragment = {
|
||||
__typename: "AccountError",
|
||||
code: AccountErrorCode.REQUIRED,
|
||||
field: "country"
|
||||
field: "country",
|
||||
addressType
|
||||
};
|
||||
|
||||
return {
|
||||
|
|
@ -34,7 +40,7 @@ function useAddressValidation<TInput, TOutput>(
|
|||
(a, b) => a.field === b.field
|
||||
)
|
||||
);
|
||||
return onSubmit(transformFormToAddress(data));
|
||||
return onSubmit(transformFormToAddressInput(data));
|
||||
} catch {
|
||||
setValidationErrors(add(countryRequiredError, validationErrors));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -128,6 +128,10 @@ export const buttonMessages = defineMessages({
|
|||
defaultMessage: "Confirm",
|
||||
description: "button"
|
||||
},
|
||||
continue: {
|
||||
defaultMessage: "Continue",
|
||||
description: "button"
|
||||
},
|
||||
create: {
|
||||
defaultMessage: "Create",
|
||||
description: "button"
|
||||
|
|
@ -164,6 +168,10 @@ export const buttonMessages = defineMessages({
|
|||
defaultMessage: "Save",
|
||||
description: "button"
|
||||
},
|
||||
select: {
|
||||
defaultMessage: "Select",
|
||||
description: "select option, button"
|
||||
},
|
||||
selectAll: {
|
||||
defaultMessage: "Select All",
|
||||
description: "select all options, button"
|
||||
|
|
|
|||
18
src/misc.ts
18
src/misc.ts
|
|
@ -215,7 +215,7 @@ export const transformOrderStatus = (
|
|||
};
|
||||
};
|
||||
|
||||
export const transformAddressToForm = (data: AddressType) => ({
|
||||
export const transformAddressToForm = (data?: AddressType) => ({
|
||||
city: data?.city || "",
|
||||
cityArea: data?.cityArea || "",
|
||||
companyName: data?.companyName || "",
|
||||
|
|
@ -410,7 +410,7 @@ export function capitalize(s: string) {
|
|||
return s.charAt(0).toLocaleUpperCase() + s.slice(1);
|
||||
}
|
||||
|
||||
export function transformFormToAddress<T>(
|
||||
export function transformFormToAddressInput<T>(
|
||||
address: T & AddressTypeInput
|
||||
): T & AddressInput {
|
||||
return {
|
||||
|
|
@ -437,3 +437,17 @@ export const getDatePeriod = (days: number): DateRangeInput => {
|
|||
lte: end.format(format)
|
||||
};
|
||||
};
|
||||
|
||||
export const transformAddressToAddressInput = (data?: AddressType) => ({
|
||||
city: data?.city || "",
|
||||
cityArea: data?.cityArea || "",
|
||||
companyName: data?.companyName || "",
|
||||
country: findInEnum(data?.country?.code || "", CountryCode),
|
||||
countryArea: data?.countryArea || "",
|
||||
firstName: data?.firstName || "",
|
||||
lastName: data?.lastName || "",
|
||||
phone: data?.phone || "",
|
||||
postalCode: data?.postalCode || "",
|
||||
streetAddress1: data?.streetAddress1 || "",
|
||||
streetAddress2: data?.streetAddress2 || ""
|
||||
});
|
||||
|
|
|
|||
|
|
@ -8,16 +8,17 @@ import ConfirmButton, {
|
|||
ConfirmButtonTransitionState
|
||||
} from "@saleor/components/ConfirmButton";
|
||||
import Form from "@saleor/components/Form";
|
||||
import { ShopInfo_shop_countries } from "@saleor/components/Shop/types/ShopInfo";
|
||||
import { AddressTypeInput } from "@saleor/customers/types";
|
||||
import { OrderErrorFragment } from "@saleor/fragments/types/OrderErrorFragment";
|
||||
import useAddressValidation from "@saleor/hooks/useAddressValidation";
|
||||
import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
|
||||
import useStateFromProps from "@saleor/hooks/useStateFromProps";
|
||||
import { buttonMessages } from "@saleor/intl";
|
||||
import { maybe } from "@saleor/misc";
|
||||
import { makeStyles } from "@saleor/theme";
|
||||
import { AddressInput } from "@saleor/types/globalTypes";
|
||||
import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
|
||||
import { mapCountriesToChoices } from "@saleor/utils/maps";
|
||||
import React from "react";
|
||||
import { FormattedMessage, useIntl } from "react-intl";
|
||||
|
||||
|
|
@ -36,10 +37,7 @@ interface OrderAddressEditDialogProps {
|
|||
open: boolean;
|
||||
errors: OrderErrorFragment[];
|
||||
variant: "billing" | "shipping" | string;
|
||||
countries?: Array<{
|
||||
code: string;
|
||||
label: string;
|
||||
}>;
|
||||
countries?: ShopInfo_shop_countries[];
|
||||
onClose();
|
||||
onConfirm(data: AddressInput);
|
||||
}
|
||||
|
|
@ -59,9 +57,7 @@ const OrderAddressEditDialog: React.FC<OrderAddressEditDialogProps> = props => {
|
|||
const classes = useStyles(props);
|
||||
const intl = useIntl();
|
||||
const [countryDisplayName, setCountryDisplayName] = useStateFromProps(
|
||||
maybe(
|
||||
() => countries.find(country => address.country === country.code).label
|
||||
)
|
||||
countries.find(country => address?.country === country.code)?.country
|
||||
);
|
||||
const {
|
||||
errors: validationErrors,
|
||||
|
|
@ -72,10 +68,7 @@ const OrderAddressEditDialog: React.FC<OrderAddressEditDialogProps> = props => {
|
|||
open
|
||||
);
|
||||
|
||||
const countryChoices = countries.map(country => ({
|
||||
label: country.label,
|
||||
value: country.code
|
||||
}));
|
||||
const countryChoices = mapCountriesToChoices(countries);
|
||||
|
||||
return (
|
||||
<Dialog onClose={onClose} open={open} classes={{ paper: classes.overflow }}>
|
||||
|
|
|
|||
|
|
@ -48,6 +48,13 @@ const useStyles = makeStyles(
|
|||
{ name: "OrderCustomer" }
|
||||
);
|
||||
|
||||
export interface CustomerEditData {
|
||||
user?: string;
|
||||
userEmail?: string;
|
||||
prevUser?: string;
|
||||
prevUserEmail?: string;
|
||||
}
|
||||
|
||||
export interface OrderCustomerProps
|
||||
extends Partial<FetchMoreProps>,
|
||||
UserPermissionProps {
|
||||
|
|
@ -57,7 +64,7 @@ export interface OrderCustomerProps
|
|||
canEditAddresses: boolean;
|
||||
canEditCustomer: boolean;
|
||||
fetchUsers?: (query: string) => void;
|
||||
onCustomerEdit?: (data: { user?: string; userEmail?: string }) => void;
|
||||
onCustomerEdit?: (data: CustomerEditData) => void;
|
||||
onProfileView: () => void;
|
||||
onBillingAddressEdit?: () => void;
|
||||
onShippingAddressEdit?: () => void;
|
||||
|
|
@ -132,6 +139,8 @@ const OrderCustomer: React.FC<OrderCustomerProps> = props => {
|
|||
const value = event.target.value;
|
||||
|
||||
onCustomerEdit({
|
||||
prevUser: user?.id,
|
||||
prevUserEmail: userEmail,
|
||||
[value.includes("@") ? "userEmail" : "user"]: value
|
||||
});
|
||||
toggleEditMode();
|
||||
|
|
|
|||
|
|
@ -0,0 +1,141 @@
|
|||
import FormControlLabel from "@material-ui/core/FormControlLabel";
|
||||
import Radio from "@material-ui/core/Radio";
|
||||
import RadioGroup from "@material-ui/core/RadioGroup";
|
||||
import AddressEdit from "@saleor/components/AddressEdit";
|
||||
import CardSpacer from "@saleor/components/CardSpacer";
|
||||
import FormSpacer from "@saleor/components/FormSpacer";
|
||||
import { SingleAutocompleteChoiceType } from "@saleor/components/SingleAutocompleteSelectField";
|
||||
import Skeleton from "@saleor/components/Skeleton";
|
||||
import CustomerAddressChoiceCard from "@saleor/customers/components/CustomerAddressChoiceCard";
|
||||
import { AddressTypeInput } from "@saleor/customers/types";
|
||||
import { CustomerAddresses_user_addresses } from "@saleor/customers/types/CustomerAddresses";
|
||||
import { AccountErrorFragment } from "@saleor/fragments/types/AccountErrorFragment";
|
||||
import { OrderErrorFragment } from "@saleor/fragments/types/OrderErrorFragment";
|
||||
import { FormChange } from "@saleor/hooks/useForm";
|
||||
import React from "react";
|
||||
import { useIntl } from "react-intl";
|
||||
|
||||
import { AddressInputOptionEnum } from "./form";
|
||||
import { addressEditMessages } from "./messages";
|
||||
import { useStyles } from "./styles";
|
||||
|
||||
export interface OrderCustomerAddressEditProps {
|
||||
loading: boolean;
|
||||
customerAddresses: CustomerAddresses_user_addresses[];
|
||||
countryChoices: SingleAutocompleteChoiceType[];
|
||||
addressInputOption: AddressInputOptionEnum;
|
||||
addressInputName: string;
|
||||
onChangeAddressInputOption: FormChange;
|
||||
customerAddressId: string;
|
||||
formAddress: AddressTypeInput;
|
||||
formAddressCountryDisplayName: string;
|
||||
formErrors: Array<AccountErrorFragment | OrderErrorFragment>;
|
||||
onChangeCustomerAddress: (
|
||||
customerAddress: CustomerAddresses_user_addresses
|
||||
) => void;
|
||||
onChangeFormAddress: (event: React.ChangeEvent<any>) => void;
|
||||
onChangeFormAddressCountry: (event: React.ChangeEvent<any>) => void;
|
||||
}
|
||||
|
||||
const OrderCustomerAddressEdit: React.FC<OrderCustomerAddressEditProps> = props => {
|
||||
const {
|
||||
loading,
|
||||
customerAddresses,
|
||||
countryChoices,
|
||||
addressInputOption,
|
||||
addressInputName,
|
||||
onChangeAddressInputOption,
|
||||
customerAddressId,
|
||||
formAddress,
|
||||
formAddressCountryDisplayName,
|
||||
formErrors,
|
||||
onChangeCustomerAddress,
|
||||
onChangeFormAddress,
|
||||
onChangeFormAddressCountry
|
||||
} = props;
|
||||
|
||||
const classes = useStyles(props);
|
||||
const intl = useIntl();
|
||||
|
||||
if (loading) {
|
||||
return <Skeleton />;
|
||||
}
|
||||
|
||||
if (!customerAddresses.length) {
|
||||
return (
|
||||
<AddressEdit
|
||||
countries={countryChoices}
|
||||
countryDisplayValue={formAddressCountryDisplayName}
|
||||
data={formAddress}
|
||||
errors={formErrors}
|
||||
onChange={onChangeFormAddress}
|
||||
onCountryChange={onChangeFormAddressCountry}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<RadioGroup
|
||||
className={classes.container}
|
||||
value={addressInputOption}
|
||||
name={addressInputName}
|
||||
onChange={event => onChangeAddressInputOption(event)}
|
||||
>
|
||||
<FormControlLabel
|
||||
value={AddressInputOptionEnum.CUSTOMER_ADDRESS}
|
||||
control={
|
||||
<Radio
|
||||
color="primary"
|
||||
data-test="addressInputOption"
|
||||
data-test-id={AddressInputOptionEnum.CUSTOMER_ADDRESS}
|
||||
/>
|
||||
}
|
||||
label={intl.formatMessage(addressEditMessages.customerAddress)}
|
||||
className={classes.optionLabel}
|
||||
/>
|
||||
{addressInputOption === AddressInputOptionEnum.CUSTOMER_ADDRESS && (
|
||||
<>
|
||||
{customerAddresses.map(customerAddress => (
|
||||
<React.Fragment key={customerAddress.id}>
|
||||
<CardSpacer />
|
||||
<CustomerAddressChoiceCard
|
||||
address={customerAddress}
|
||||
selected={customerAddress.id === customerAddressId}
|
||||
onSelect={() => onChangeCustomerAddress(customerAddress)}
|
||||
/>
|
||||
</React.Fragment>
|
||||
))}
|
||||
<FormSpacer />
|
||||
</>
|
||||
)}
|
||||
<FormControlLabel
|
||||
value={AddressInputOptionEnum.NEW_ADDRESS}
|
||||
control={
|
||||
<Radio
|
||||
color="primary"
|
||||
data-test={addressInputOption}
|
||||
data-test-id={AddressInputOptionEnum.NEW_ADDRESS}
|
||||
/>
|
||||
}
|
||||
label={intl.formatMessage(addressEditMessages.newAddress)}
|
||||
className={classes.optionLabel}
|
||||
/>
|
||||
{addressInputOption === AddressInputOptionEnum.NEW_ADDRESS && (
|
||||
<>
|
||||
<FormSpacer />
|
||||
<AddressEdit
|
||||
countries={countryChoices}
|
||||
countryDisplayValue={formAddressCountryDisplayName}
|
||||
data={formAddress}
|
||||
errors={formErrors}
|
||||
onChange={onChangeFormAddress}
|
||||
onCountryChange={onChangeFormAddressCountry}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</RadioGroup>
|
||||
);
|
||||
};
|
||||
|
||||
OrderCustomerAddressEdit.displayName = "OrderCustomerAddressEdit";
|
||||
export default OrderCustomerAddressEdit;
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
import Decorator from "@saleor/storybook/Decorator";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React from "react";
|
||||
|
||||
import { countries, order as orderFixture } from "../../fixtures";
|
||||
import OrderCustomerAddressesEditDialog, {
|
||||
OrderCustomerAddressesEditDialogProps
|
||||
} from "./OrderCustomerAddressesEditDialog";
|
||||
|
||||
const order = orderFixture("");
|
||||
|
||||
const props: OrderCustomerAddressesEditDialogProps = {
|
||||
confirmButtonState: "default",
|
||||
loading: false,
|
||||
onClose: () => undefined,
|
||||
onConfirm: () => undefined,
|
||||
open: true,
|
||||
errors: undefined
|
||||
};
|
||||
|
||||
storiesOf("Orders / OrderCustomerAddressesEditDialog", module)
|
||||
.addDecorator(Decorator)
|
||||
.add("default", () => (
|
||||
<OrderCustomerAddressesEditDialog
|
||||
{...props}
|
||||
countries={countries}
|
||||
customerAddresses={[
|
||||
order.shippingAddress,
|
||||
{ ...order.billingAddress, id: "asdfghjfuunie" }
|
||||
]}
|
||||
/>
|
||||
))
|
||||
.add("no customer addresses", () => (
|
||||
<OrderCustomerAddressesEditDialog
|
||||
{...props}
|
||||
countries={countries}
|
||||
customerAddresses={[]}
|
||||
/>
|
||||
))
|
||||
.add("loading", () => (
|
||||
<OrderCustomerAddressesEditDialog
|
||||
{...props}
|
||||
loading={true}
|
||||
confirmButtonState="loading"
|
||||
/>
|
||||
));
|
||||
|
|
@ -0,0 +1,262 @@
|
|||
import Dialog from "@material-ui/core/Dialog";
|
||||
import DialogActions from "@material-ui/core/DialogActions";
|
||||
import DialogContent from "@material-ui/core/DialogContent";
|
||||
import DialogTitle from "@material-ui/core/DialogTitle";
|
||||
import Divider from "@material-ui/core/Divider";
|
||||
import FormControlLabel from "@material-ui/core/FormControlLabel";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import Checkbox from "@saleor/components/Checkbox";
|
||||
import ConfirmButton, {
|
||||
ConfirmButtonTransitionState
|
||||
} from "@saleor/components/ConfirmButton";
|
||||
import FormSpacer from "@saleor/components/FormSpacer";
|
||||
import { ShopInfo_shop_countries } from "@saleor/components/Shop/types/ShopInfo";
|
||||
import {
|
||||
CustomerAddresses_user_addresses,
|
||||
CustomerAddresses_user_defaultBillingAddress,
|
||||
CustomerAddresses_user_defaultShippingAddress
|
||||
} from "@saleor/customers/types/CustomerAddresses";
|
||||
import { OrderErrorFragment } from "@saleor/fragments/types/OrderErrorFragment";
|
||||
import useAddressValidation from "@saleor/hooks/useAddressValidation";
|
||||
import { SubmitPromise } from "@saleor/hooks/useForm";
|
||||
import useModalDialogErrors from "@saleor/hooks/useModalDialogErrors";
|
||||
import { buttonMessages } from "@saleor/intl";
|
||||
import { transformAddressToAddressInput } from "@saleor/misc";
|
||||
import { AddressInput, AddressTypeEnum } from "@saleor/types/globalTypes";
|
||||
import { mapCountriesToChoices } from "@saleor/utils/maps";
|
||||
import React from "react";
|
||||
import { FormattedMessage, useIntl } from "react-intl";
|
||||
|
||||
import { getById } from "../OrderReturnPage/utils";
|
||||
import OrderCustomerAddressesEditForm, {
|
||||
AddressInputOptionEnum,
|
||||
OrderCustomerAddressesEditFormData
|
||||
} from "./form";
|
||||
import { dialogMessages } from "./messages";
|
||||
import OrderCustomerAddressEdit from "./OrderCustomerAddressEdit";
|
||||
import { useStyles } from "./styles";
|
||||
|
||||
export interface OrderCustomerAddressesEditDialogOutput {
|
||||
shippingAddress: AddressInput;
|
||||
billingAddress: AddressInput;
|
||||
}
|
||||
|
||||
export interface OrderCustomerAddressesEditDialogProps {
|
||||
open: boolean;
|
||||
loading: boolean;
|
||||
confirmButtonState: ConfirmButtonTransitionState;
|
||||
errors: OrderErrorFragment[];
|
||||
countries?: ShopInfo_shop_countries[];
|
||||
customerAddresses?: CustomerAddresses_user_addresses[];
|
||||
defaultShippingAddress?: CustomerAddresses_user_defaultShippingAddress;
|
||||
defaultBillingAddress?: CustomerAddresses_user_defaultBillingAddress;
|
||||
onClose();
|
||||
onConfirm(data: OrderCustomerAddressesEditDialogOutput): SubmitPromise;
|
||||
}
|
||||
|
||||
const OrderCustomerAddressesEditDialog: React.FC<OrderCustomerAddressesEditDialogProps> = props => {
|
||||
const {
|
||||
open,
|
||||
loading,
|
||||
confirmButtonState,
|
||||
errors = [],
|
||||
countries = [],
|
||||
customerAddresses = [],
|
||||
defaultShippingAddress,
|
||||
defaultBillingAddress,
|
||||
onClose,
|
||||
onConfirm
|
||||
} = props;
|
||||
|
||||
const classes = useStyles(props);
|
||||
const intl = useIntl();
|
||||
const {
|
||||
errors: shippingValidationErrors,
|
||||
submit: handleShippingSubmit
|
||||
} = useAddressValidation(address => address, AddressTypeEnum.SHIPPING);
|
||||
const {
|
||||
errors: billingValidationErrors,
|
||||
submit: handleBillingSubmit
|
||||
} = useAddressValidation(address => address, AddressTypeEnum.BILLING);
|
||||
const dialogErrors = useModalDialogErrors(
|
||||
[...errors, ...shippingValidationErrors, ...billingValidationErrors],
|
||||
open
|
||||
);
|
||||
|
||||
const getCustomerAddress = (customerAddressId: string): AddressInput =>
|
||||
transformAddressToAddressInput(
|
||||
customerAddresses.find(getById(customerAddressId))
|
||||
);
|
||||
|
||||
const handleAddressesSubmit = (data: OrderCustomerAddressesEditFormData) => {
|
||||
const shippingAddress =
|
||||
customerAddresses.length > 0 &&
|
||||
data.shippingAddressInputOption ===
|
||||
AddressInputOptionEnum.CUSTOMER_ADDRESS
|
||||
? getCustomerAddress(data.customerShippingAddress.id)
|
||||
: handleShippingSubmit(data.shippingAddress);
|
||||
|
||||
if (data.billingSameAsShipping) {
|
||||
return {
|
||||
shippingAddress,
|
||||
billingAddress: shippingAddress
|
||||
};
|
||||
}
|
||||
|
||||
const billingAddress =
|
||||
customerAddresses.length > 0 &&
|
||||
data.billingAddressInputOption === AddressInputOptionEnum.CUSTOMER_ADDRESS
|
||||
? getCustomerAddress(data.customerBillingAddress.id)
|
||||
: handleBillingSubmit(data.billingAddress);
|
||||
|
||||
return {
|
||||
shippingAddress,
|
||||
billingAddress
|
||||
};
|
||||
};
|
||||
|
||||
const handleSubmit = (data: OrderCustomerAddressesEditFormData) => {
|
||||
const adressesInput = handleAddressesSubmit(data);
|
||||
|
||||
if (adressesInput.shippingAddress && adressesInput.billingAddress) {
|
||||
onConfirm(adressesInput);
|
||||
}
|
||||
};
|
||||
|
||||
const countryChoices = mapCountriesToChoices(countries);
|
||||
|
||||
return (
|
||||
<Dialog onClose={onClose} open={open}>
|
||||
<OrderCustomerAddressesEditForm
|
||||
countryChoices={countryChoices}
|
||||
defaultShippingAddress={defaultShippingAddress}
|
||||
defaultBillingAddress={defaultBillingAddress}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
{({ change, data, handlers }) => (
|
||||
<>
|
||||
<DialogTitle>
|
||||
<FormattedMessage {...dialogMessages.title} />
|
||||
</DialogTitle>
|
||||
<DialogContent className={classes.overflow}>
|
||||
<Typography>
|
||||
{customerAddresses.length > 0 ? (
|
||||
<FormattedMessage
|
||||
{...dialogMessages.customerShippingAddressDescription}
|
||||
/>
|
||||
) : (
|
||||
<FormattedMessage
|
||||
{...dialogMessages.shippingAddressDescription}
|
||||
/>
|
||||
)}
|
||||
</Typography>
|
||||
<FormSpacer />
|
||||
<OrderCustomerAddressEdit
|
||||
loading={loading}
|
||||
countryChoices={countryChoices}
|
||||
addressInputOption={data.shippingAddressInputOption}
|
||||
addressInputName="shippingAddressInputOption"
|
||||
onChangeAddressInputOption={change}
|
||||
customerAddresses={customerAddresses}
|
||||
customerAddressId={data.customerShippingAddress?.id}
|
||||
formAddress={data.shippingAddress}
|
||||
formAddressCountryDisplayName={data.shippingCountryDisplayName}
|
||||
formErrors={dialogErrors.filter(
|
||||
error => error.addressType === AddressTypeEnum.SHIPPING
|
||||
)}
|
||||
onChangeCustomerAddress={customerAddress =>
|
||||
handlers.changeCustomerAddress(
|
||||
customerAddress,
|
||||
"customerShippingAddress"
|
||||
)
|
||||
}
|
||||
onChangeFormAddress={event =>
|
||||
handlers.changeFormAddress(event, "shippingAddress")
|
||||
}
|
||||
onChangeFormAddressCountry={handlers.selectShippingCountry}
|
||||
/>
|
||||
<FormSpacer />
|
||||
<Divider />
|
||||
<FormSpacer />
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
checked={data.billingSameAsShipping}
|
||||
name="billingSameAsShipping"
|
||||
onChange={() =>
|
||||
change({
|
||||
target: {
|
||||
name: "billingSameAsShipping",
|
||||
value: !data.billingSameAsShipping
|
||||
}
|
||||
})
|
||||
}
|
||||
data-test="billingSameAsShipping"
|
||||
/>
|
||||
}
|
||||
label={intl.formatMessage(dialogMessages.billingSameAsShipping)}
|
||||
/>
|
||||
{!data.billingSameAsShipping && (
|
||||
<>
|
||||
<FormSpacer />
|
||||
<Typography>
|
||||
{customerAddresses.length > 0 ? (
|
||||
<FormattedMessage
|
||||
{...dialogMessages.customerBillingAddressDescription}
|
||||
/>
|
||||
) : (
|
||||
<FormattedMessage
|
||||
{...dialogMessages.billingAddressDescription}
|
||||
/>
|
||||
)}
|
||||
</Typography>
|
||||
<FormSpacer />
|
||||
<OrderCustomerAddressEdit
|
||||
loading={loading}
|
||||
countryChoices={countryChoices}
|
||||
addressInputOption={data.billingAddressInputOption}
|
||||
addressInputName="billingAddressInputOption"
|
||||
onChangeAddressInputOption={change}
|
||||
customerAddresses={customerAddresses}
|
||||
customerAddressId={data.customerBillingAddress?.id}
|
||||
formAddress={data.billingAddress}
|
||||
formAddressCountryDisplayName={
|
||||
data.billingCountryDisplayName
|
||||
}
|
||||
formErrors={dialogErrors.filter(
|
||||
error => error.addressType === AddressTypeEnum.BILLING
|
||||
)}
|
||||
onChangeCustomerAddress={customerAddress =>
|
||||
handlers.changeCustomerAddress(
|
||||
customerAddress,
|
||||
"customerBillingAddress"
|
||||
)
|
||||
}
|
||||
onChangeFormAddress={event =>
|
||||
handlers.changeFormAddress(event, "billingAddress")
|
||||
}
|
||||
onChangeFormAddressCountry={handlers.selectBillingCountry}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<ConfirmButton
|
||||
transitionState={confirmButtonState}
|
||||
color="primary"
|
||||
variant="contained"
|
||||
type="submit"
|
||||
>
|
||||
<FormattedMessage {...buttonMessages.select} />
|
||||
</ConfirmButton>
|
||||
</DialogActions>
|
||||
</>
|
||||
)}
|
||||
</OrderCustomerAddressesEditForm>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
OrderCustomerAddressesEditDialog.displayName =
|
||||
"OrderCustomerAddressesEditDialog";
|
||||
export default OrderCustomerAddressesEditDialog;
|
||||
202
src/orders/components/OrderCustomerAddressesEditDialog/form.tsx
Normal file
202
src/orders/components/OrderCustomerAddressesEditDialog/form.tsx
Normal file
|
|
@ -0,0 +1,202 @@
|
|||
import { SingleAutocompleteChoiceType } from "@saleor/components/SingleAutocompleteSelectField";
|
||||
import { AddressTypeInput } from "@saleor/customers/types";
|
||||
import {
|
||||
CustomerAddresses_user_addresses,
|
||||
CustomerAddresses_user_defaultBillingAddress,
|
||||
CustomerAddresses_user_defaultShippingAddress
|
||||
} from "@saleor/customers/types/CustomerAddresses";
|
||||
import useForm, { FormChange } from "@saleor/hooks/useForm";
|
||||
import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
|
||||
import React, { useState } from "react";
|
||||
|
||||
export enum AddressInputOptionEnum {
|
||||
CUSTOMER_ADDRESS = "customerAddress",
|
||||
NEW_ADDRESS = "newAddress"
|
||||
}
|
||||
|
||||
export interface OrderCustomerAddressesEditFormData {
|
||||
billingSameAsShipping: boolean;
|
||||
shippingAddressInputOption: AddressInputOptionEnum;
|
||||
billingAddressInputOption: AddressInputOptionEnum;
|
||||
customerShippingAddress: CustomerAddresses_user_defaultShippingAddress;
|
||||
customerBillingAddress: CustomerAddresses_user_defaultBillingAddress;
|
||||
shippingAddress: AddressTypeInput;
|
||||
billingAddress: AddressTypeInput;
|
||||
}
|
||||
|
||||
export interface OrderCustomerAddressesEditData
|
||||
extends OrderCustomerAddressesEditFormData {
|
||||
shippingCountryDisplayName: string;
|
||||
billingCountryDisplayName: string;
|
||||
}
|
||||
|
||||
export interface OrderCustomerAddressesEditHandlers {
|
||||
changeFormAddress: (
|
||||
event: React.ChangeEvent<any>,
|
||||
addressType: "shippingAddress" | "billingAddress"
|
||||
) => void;
|
||||
changeCustomerAddress: (
|
||||
customerAddress: CustomerAddresses_user_addresses,
|
||||
addressType: "customerShippingAddress" | "customerBillingAddress"
|
||||
) => void;
|
||||
selectShippingCountry: FormChange;
|
||||
selectBillingCountry: FormChange;
|
||||
}
|
||||
|
||||
interface UseOrderCustomerAddressesEditFormResult {
|
||||
submit: (event: React.FormEvent<any>) => void;
|
||||
change: FormChange;
|
||||
hasChanged: boolean;
|
||||
data: OrderCustomerAddressesEditData;
|
||||
handlers: OrderCustomerAddressesEditHandlers;
|
||||
}
|
||||
|
||||
interface UseOrderCustomerAddressesEditFormOpts {
|
||||
countryChoices: SingleAutocompleteChoiceType[];
|
||||
defaultShippingAddress: CustomerAddresses_user_defaultShippingAddress;
|
||||
defaultBillingAddress: CustomerAddresses_user_defaultBillingAddress;
|
||||
}
|
||||
|
||||
export interface OrderCustomerAddressesEditFormProps
|
||||
extends UseOrderCustomerAddressesEditFormOpts {
|
||||
children: (props: UseOrderCustomerAddressesEditFormResult) => React.ReactNode;
|
||||
initial?: Partial<OrderCustomerAddressesEditFormData>;
|
||||
onSubmit: (data: OrderCustomerAddressesEditData) => void;
|
||||
}
|
||||
|
||||
function useOrderCustomerAddressesEditForm(
|
||||
initial: Partial<OrderCustomerAddressesEditFormData>,
|
||||
onSubmit: (data: OrderCustomerAddressesEditData) => void,
|
||||
opts: UseOrderCustomerAddressesEditFormOpts
|
||||
): UseOrderCustomerAddressesEditFormResult {
|
||||
const initialAddress: AddressTypeInput = {
|
||||
city: "",
|
||||
country: "",
|
||||
phone: "",
|
||||
postalCode: "",
|
||||
streetAddress1: ""
|
||||
};
|
||||
const defaultInitialFormData: OrderCustomerAddressesEditFormData = {
|
||||
billingSameAsShipping: true,
|
||||
shippingAddressInputOption: AddressInputOptionEnum.CUSTOMER_ADDRESS,
|
||||
billingAddressInputOption: AddressInputOptionEnum.CUSTOMER_ADDRESS,
|
||||
customerShippingAddress: opts.defaultShippingAddress,
|
||||
customerBillingAddress: opts.defaultBillingAddress,
|
||||
shippingAddress: initialAddress,
|
||||
billingAddress: initialAddress
|
||||
};
|
||||
|
||||
const form = useForm({
|
||||
...initial,
|
||||
...defaultInitialFormData
|
||||
});
|
||||
|
||||
const [changed, setChanged] = useState(false);
|
||||
const triggerChange = () => setChanged(true);
|
||||
|
||||
const [shippingCountryDisplayName, setShippingCountryDisplayName] = useState(
|
||||
""
|
||||
);
|
||||
const [billingCountryDisplayName, setBillingCountryDisplayName] = useState(
|
||||
""
|
||||
);
|
||||
|
||||
const handleChange: FormChange = (event, cb) => {
|
||||
form.change(event, cb);
|
||||
triggerChange();
|
||||
};
|
||||
const handleFormAddressChange = (
|
||||
event: React.ChangeEvent<any>,
|
||||
addressType: "shippingAddress" | "billingAddress"
|
||||
) =>
|
||||
form.change({
|
||||
target: {
|
||||
name: addressType,
|
||||
value: {
|
||||
...form.data[addressType],
|
||||
[event.target.name]: event.target.value
|
||||
}
|
||||
}
|
||||
});
|
||||
const handleCustomerAddressChange = (
|
||||
customerAddress: CustomerAddresses_user_addresses,
|
||||
addressType: "customerShippingAddress" | "customerBillingAddress"
|
||||
) =>
|
||||
form.change({
|
||||
target: {
|
||||
name: addressType,
|
||||
value: customerAddress
|
||||
}
|
||||
});
|
||||
const handleShippingCountrySelect = createSingleAutocompleteSelectHandler(
|
||||
event =>
|
||||
form.change({
|
||||
target: {
|
||||
name: "shippingAddress",
|
||||
value: {
|
||||
...form.data.shippingAddress,
|
||||
[event.target.name]: event.target.value
|
||||
}
|
||||
}
|
||||
}),
|
||||
setShippingCountryDisplayName,
|
||||
opts.countryChoices
|
||||
);
|
||||
const handleBillingCountrySelect = createSingleAutocompleteSelectHandler(
|
||||
event =>
|
||||
form.change({
|
||||
target: {
|
||||
name: "billingAddress",
|
||||
value: {
|
||||
...form.data.billingAddress,
|
||||
[event.target.name]: event.target.value
|
||||
}
|
||||
}
|
||||
}),
|
||||
setBillingCountryDisplayName,
|
||||
opts.countryChoices
|
||||
);
|
||||
|
||||
const data = {
|
||||
...form.data,
|
||||
shippingCountryDisplayName,
|
||||
billingCountryDisplayName
|
||||
};
|
||||
|
||||
const submit = (event: React.FormEvent<any>) => {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
return onSubmit(data);
|
||||
};
|
||||
|
||||
return {
|
||||
change: handleChange,
|
||||
submit,
|
||||
hasChanged: changed,
|
||||
data,
|
||||
handlers: {
|
||||
changeCustomerAddress: handleCustomerAddressChange,
|
||||
changeFormAddress: handleFormAddressChange,
|
||||
selectShippingCountry: handleShippingCountrySelect,
|
||||
selectBillingCountry: handleBillingCountrySelect
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
const OrderCustomerAddressesEditForm: React.FC<OrderCustomerAddressesEditFormProps> = ({
|
||||
children,
|
||||
initial,
|
||||
onSubmit,
|
||||
...rest
|
||||
}) => {
|
||||
const props = useOrderCustomerAddressesEditForm(
|
||||
initial || {},
|
||||
onSubmit,
|
||||
rest
|
||||
);
|
||||
|
||||
return <form onSubmit={props.submit}>{children(props)}</form>;
|
||||
};
|
||||
|
||||
OrderCustomerAddressesEditForm.displayName = "OrderCustomerAddressesEditForm";
|
||||
export default OrderCustomerAddressesEditForm;
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
export { default } from "./OrderCustomerAddressesEditDialog";
|
||||
export * from "./OrderCustomerAddressesEditDialog";
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
import { defineMessages } from "react-intl";
|
||||
|
||||
export const dialogMessages = defineMessages({
|
||||
title: {
|
||||
defaultMessage: "Shipping address for order",
|
||||
description: "dialog header"
|
||||
},
|
||||
billingSameAsShipping: {
|
||||
defaultMessage: "Billing address same as shipping address",
|
||||
description: "checkbox label"
|
||||
},
|
||||
shippingAddressDescription: {
|
||||
defaultMessage:
|
||||
"This customer doesn’t have any shipping addresses. Provide address for order:",
|
||||
description: "dialog content"
|
||||
},
|
||||
billingAddressDescription: {
|
||||
defaultMessage: "Add a new address:",
|
||||
description: "dialog content"
|
||||
},
|
||||
customerShippingAddressDescription: {
|
||||
defaultMessage:
|
||||
"Which address would you like to use as shipping address for selected customer:",
|
||||
description: "dialog content"
|
||||
},
|
||||
customerBillingAddressDescription: {
|
||||
defaultMessage: "Select one of customer addresses or add a new address:",
|
||||
description: "dialog content"
|
||||
}
|
||||
});
|
||||
|
||||
export const addressEditMessages = defineMessages({
|
||||
customerAddress: {
|
||||
defaultMessage: "Use one of customer addresses",
|
||||
description: "address type"
|
||||
},
|
||||
newAddress: {
|
||||
defaultMessage: "Add new address",
|
||||
description: "address type"
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
import { makeStyles } from "@saleor/theme";
|
||||
|
||||
export const useStyles = makeStyles(
|
||||
{
|
||||
container: {
|
||||
display: "block"
|
||||
},
|
||||
optionLabel: {
|
||||
display: "block"
|
||||
},
|
||||
overflow: {
|
||||
overflowY: "visible"
|
||||
}
|
||||
},
|
||||
{ name: "OrderCustomerAddressesEditDialog" }
|
||||
);
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import Decorator from "@saleor/storybook/Decorator";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React from "react";
|
||||
|
||||
import OrderCustomerChangeDialog, {
|
||||
OrderCustomerChangeDialogProps
|
||||
} from "./OrderCustomerChangeDialog";
|
||||
|
||||
const props: OrderCustomerChangeDialogProps = {
|
||||
onClose: () => undefined,
|
||||
onConfirm: () => undefined,
|
||||
open: true
|
||||
};
|
||||
|
||||
storiesOf("Orders / OrderCustomerChangeDialog", module)
|
||||
.addDecorator(Decorator)
|
||||
.add("default", () => (
|
||||
<OrderCustomerChangeDialog
|
||||
{...props}
|
||||
onClose={() => undefined}
|
||||
onConfirm={() => undefined}
|
||||
open={true}
|
||||
/>
|
||||
));
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
import Dialog from "@material-ui/core/Dialog";
|
||||
import DialogActions from "@material-ui/core/DialogActions";
|
||||
import DialogContent from "@material-ui/core/DialogContent";
|
||||
import DialogTitle from "@material-ui/core/DialogTitle";
|
||||
import FormControlLabel from "@material-ui/core/FormControlLabel";
|
||||
import Radio from "@material-ui/core/Radio";
|
||||
import RadioGroup from "@material-ui/core/RadioGroup";
|
||||
import Typography from "@material-ui/core/Typography";
|
||||
import ConfirmButton from "@saleor/components/ConfirmButton";
|
||||
import FormSpacer from "@saleor/components/FormSpacer";
|
||||
import { buttonMessages } from "@saleor/intl";
|
||||
import React from "react";
|
||||
import { FormattedMessage, useIntl } from "react-intl";
|
||||
|
||||
import OrderCustomerChangeForm, {
|
||||
CustomerChangeActionEnum,
|
||||
OrderCustomerChangeData
|
||||
} from "./form";
|
||||
import messages from "./messages";
|
||||
import { useStyles } from "./styles";
|
||||
|
||||
export interface OrderCustomerChangeDialogProps {
|
||||
open: boolean;
|
||||
onClose();
|
||||
onConfirm(data: OrderCustomerChangeData): void;
|
||||
}
|
||||
|
||||
const OrderCustomerChangeDialog: React.FC<OrderCustomerChangeDialogProps> = props => {
|
||||
const { open, onClose, onConfirm } = props;
|
||||
|
||||
const classes = useStyles(props);
|
||||
const intl = useIntl();
|
||||
|
||||
return (
|
||||
<Dialog onClose={onClose} open={open}>
|
||||
<OrderCustomerChangeForm onSubmit={onConfirm}>
|
||||
{({ change, data }) => (
|
||||
<>
|
||||
<DialogTitle>
|
||||
<FormattedMessage {...messages.title} />
|
||||
</DialogTitle>
|
||||
<DialogContent className={classes.overflow}>
|
||||
<Typography>
|
||||
<FormattedMessage {...messages.description} />
|
||||
</Typography>
|
||||
<FormSpacer />
|
||||
<RadioGroup
|
||||
className={classes.container}
|
||||
value={data.changeActionOption}
|
||||
name="changeActionOption"
|
||||
onChange={event => change(event)}
|
||||
>
|
||||
<FormControlLabel
|
||||
value={CustomerChangeActionEnum.KEEP_ADDRESS}
|
||||
control={<Radio color="primary" />}
|
||||
label={intl.formatMessage(messages.keepAddress)}
|
||||
className={classes.optionLabel}
|
||||
/>
|
||||
<FormControlLabel
|
||||
value={CustomerChangeActionEnum.CHANGE_ADDRESS}
|
||||
control={<Radio color="primary" />}
|
||||
label={intl.formatMessage(messages.changeAddress)}
|
||||
className={classes.optionLabel}
|
||||
/>
|
||||
</RadioGroup>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<ConfirmButton
|
||||
transitionState="default"
|
||||
color="primary"
|
||||
variant="contained"
|
||||
type="submit"
|
||||
>
|
||||
<FormattedMessage {...buttonMessages.continue} />
|
||||
</ConfirmButton>
|
||||
</DialogActions>
|
||||
</>
|
||||
)}
|
||||
</OrderCustomerChangeForm>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
OrderCustomerChangeDialog.displayName = "OrderCustomerChangeDialog";
|
||||
export default OrderCustomerChangeDialog;
|
||||
72
src/orders/components/OrderCustomerChangeDialog/form.tsx
Normal file
72
src/orders/components/OrderCustomerChangeDialog/form.tsx
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
import useForm, { FormChange } from "@saleor/hooks/useForm";
|
||||
import React, { useState } from "react";
|
||||
|
||||
export enum CustomerChangeActionEnum {
|
||||
KEEP_ADDRESS = "keepAddress",
|
||||
CHANGE_ADDRESS = "changeAddress"
|
||||
}
|
||||
|
||||
export interface OrderCustomerChangeData {
|
||||
changeActionOption: CustomerChangeActionEnum;
|
||||
}
|
||||
|
||||
interface UseOrderCustomerChangeFormResult {
|
||||
submit: (event: React.FormEvent<any>) => void;
|
||||
change: FormChange;
|
||||
hasChanged: boolean;
|
||||
data: OrderCustomerChangeData;
|
||||
}
|
||||
|
||||
export interface OrderCustomerChangeFormProps {
|
||||
children: (props: UseOrderCustomerChangeFormResult) => React.ReactNode;
|
||||
initial?: Partial<OrderCustomerChangeData>;
|
||||
onSubmit: (data: OrderCustomerChangeData) => void;
|
||||
}
|
||||
|
||||
function useOrderCustomerChangeForm(
|
||||
initial: Partial<OrderCustomerChangeData>,
|
||||
onSubmit: (data: OrderCustomerChangeData) => void
|
||||
): UseOrderCustomerChangeFormResult {
|
||||
const defaultInitialFormData: OrderCustomerChangeData = {
|
||||
changeActionOption: CustomerChangeActionEnum.KEEP_ADDRESS
|
||||
};
|
||||
|
||||
const form = useForm({
|
||||
...initial,
|
||||
...defaultInitialFormData
|
||||
});
|
||||
|
||||
const [changed, setChanged] = useState(false);
|
||||
const triggerChange = () => setChanged(true);
|
||||
|
||||
const handleChange: FormChange = (event, cb) => {
|
||||
form.change(event, cb);
|
||||
triggerChange();
|
||||
};
|
||||
|
||||
const submit = (event: React.FormEvent<any>) => {
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
return onSubmit(form.data);
|
||||
};
|
||||
|
||||
return {
|
||||
change: handleChange,
|
||||
submit,
|
||||
hasChanged: changed,
|
||||
data: form.data
|
||||
};
|
||||
}
|
||||
|
||||
const OrderCustomerChangeForm: React.FC<OrderCustomerChangeFormProps> = ({
|
||||
children,
|
||||
initial,
|
||||
onSubmit
|
||||
}) => {
|
||||
const props = useOrderCustomerChangeForm(initial || {}, onSubmit);
|
||||
|
||||
return <form onSubmit={props.submit}>{children(props)}</form>;
|
||||
};
|
||||
|
||||
OrderCustomerChangeForm.displayName = "OrderCustomerChangeForm";
|
||||
export default OrderCustomerChangeForm;
|
||||
23
src/orders/components/OrderCustomerChangeDialog/messages.ts
Normal file
23
src/orders/components/OrderCustomerChangeDialog/messages.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
import { defineMessages } from "react-intl";
|
||||
|
||||
const messages = defineMessages({
|
||||
title: {
|
||||
defaultMessage: "Changed Customer",
|
||||
description: "dialog header"
|
||||
},
|
||||
description: {
|
||||
defaultMessage:
|
||||
"You have changed customer assigned to this order. What would you like to do with the shipping address?",
|
||||
description: "dialog description"
|
||||
},
|
||||
keepAddress: {
|
||||
defaultMessage: "Keep address",
|
||||
description: "option label"
|
||||
},
|
||||
changeAddress: {
|
||||
defaultMessage: "Change address",
|
||||
description: "option label"
|
||||
}
|
||||
});
|
||||
|
||||
export default messages;
|
||||
16
src/orders/components/OrderCustomerChangeDialog/styles.ts
Normal file
16
src/orders/components/OrderCustomerChangeDialog/styles.ts
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import { makeStyles } from "@saleor/theme";
|
||||
|
||||
export const useStyles = makeStyles(
|
||||
{
|
||||
container: {
|
||||
display: "block"
|
||||
},
|
||||
optionLabel: {
|
||||
display: "block"
|
||||
},
|
||||
overflow: {
|
||||
overflowY: "visible"
|
||||
}
|
||||
},
|
||||
{ name: "OrderCustomerChangeDialog" }
|
||||
);
|
||||
|
|
@ -58,10 +58,6 @@ export interface OrderDetailsPageProps extends UserPermissionProps {
|
|||
id: string;
|
||||
name: string;
|
||||
}>;
|
||||
countries?: Array<{
|
||||
code: string;
|
||||
label: string;
|
||||
}>;
|
||||
disabled: boolean;
|
||||
saveButtonBarState: ConfirmButtonTransitionState;
|
||||
onOrderLineAdd?: () => void;
|
||||
|
|
|
|||
|
|
@ -17,9 +17,8 @@ import { FetchMoreProps, UserPermissionProps } from "@saleor/types";
|
|||
import React from "react";
|
||||
import { useIntl } from "react-intl";
|
||||
|
||||
import { DraftOrderInput } from "../../../types/globalTypes";
|
||||
import { OrderDetails_order } from "../../types/OrderDetails";
|
||||
import OrderCustomer from "../OrderCustomer";
|
||||
import OrderCustomer, { CustomerEditData } from "../OrderCustomer";
|
||||
import OrderDraftDetails from "../OrderDraftDetails/OrderDraftDetails";
|
||||
import { FormData as OrderDraftDetailsProductsFormData } from "../OrderDraftDetailsProducts";
|
||||
import OrderHistory, { FormData as HistoryFormData } from "../OrderHistory";
|
||||
|
|
@ -44,15 +43,11 @@ export interface OrderDraftPageProps
|
|||
order: OrderDetails_order;
|
||||
users: SearchCustomers_search_edges_node[];
|
||||
usersLoading: boolean;
|
||||
countries: Array<{
|
||||
code: string;
|
||||
label: string;
|
||||
}>;
|
||||
saveButtonBarState: ConfirmButtonTransitionState;
|
||||
fetchUsers: (query: string) => void;
|
||||
onBack: () => void;
|
||||
onBillingAddressEdit: () => void;
|
||||
onCustomerEdit: (data: DraftOrderInput) => void;
|
||||
onCustomerEdit: (data: CustomerEditData) => void;
|
||||
onDraftFinalize: () => void;
|
||||
onDraftRemove: () => void;
|
||||
onNoteAdd: (data: HistoryFormData) => void;
|
||||
|
|
|
|||
|
|
@ -37,7 +37,8 @@ storiesOf("Views / Orders / Fulfill order", module)
|
|||
code: OrderErrorCode.INSUFFICIENT_STOCK,
|
||||
field: null,
|
||||
orderLine: orderToFulfill.lines[0].id,
|
||||
warehouse: warehouseList[0].id
|
||||
warehouse: warehouseList[0].id,
|
||||
addressType: null
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
import { ShopInfo_shop_countries } from "@saleor/components/Shop/types/ShopInfo";
|
||||
import { InvoiceFragment } from "@saleor/fragments/types/InvoiceFragment";
|
||||
import { OrderSettingsFragment } from "@saleor/fragments/types/OrderSettingsFragment";
|
||||
import { SearchCustomers_search_edges_node } from "@saleor/searches/types/SearchCustomers";
|
||||
|
|
@ -1587,12 +1588,12 @@ export const variants = [
|
|||
{ id: "p7", name: "Product 5: variant 2", sku: "14345", stockQuantity: 11 }
|
||||
];
|
||||
export const prefixes = ["01", "02", "41", "49"];
|
||||
export const countries = [
|
||||
{ code: "AF", label: "Afghanistan" },
|
||||
{ code: "AX", label: "Åland Islands" },
|
||||
{ code: "AL", label: "Albania" },
|
||||
{ code: "DZ", label: "Algeria" },
|
||||
{ code: "AS", label: "American Samoa" }
|
||||
export const countries: ShopInfo_shop_countries[] = [
|
||||
{ __typename: "CountryDisplay", code: "AF", country: "Afghanistan" },
|
||||
{ __typename: "CountryDisplay", code: "AX", country: "Åland Islands" },
|
||||
{ __typename: "CountryDisplay", code: "AL", country: "Albania" },
|
||||
{ __typename: "CountryDisplay", code: "DZ", country: "Algeria" },
|
||||
{ __typename: "CountryDisplay", code: "AS", country: "American Samoa" }
|
||||
];
|
||||
export const shippingMethods = [
|
||||
{ country: "whole world", id: "s1", name: "DHL", price: {} },
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { OrderFulfillInput, OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
import { OrderFulfillInput, OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: FulfillOrder
|
||||
|
|
@ -13,6 +13,7 @@ export interface FulfillOrder_orderFulfill_errors {
|
|||
__typename: "OrderError";
|
||||
code: OrderErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
warehouse: string | null;
|
||||
orderLine: string | null;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { OrderReturnProductsInput, OrderErrorCode } from "./../../types/globalTypes";
|
||||
import { OrderReturnProductsInput, OrderErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: FulfillmentReturnProducts
|
||||
|
|
@ -13,6 +13,7 @@ export interface FulfillmentReturnProducts_orderFulfillmentReturnProducts_errors
|
|||
__typename: "OrderError";
|
||||
code: OrderErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface FulfillmentReturnProducts_orderFulfillmentReturnProducts_order {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { OrderAddNoteInput, OrderErrorCode, OrderEventsEmailsEnum, DiscountValueTypeEnum, OrderEventsEnum } from "./../../types/globalTypes";
|
||||
import { OrderAddNoteInput, OrderErrorCode, AddressTypeEnum, OrderEventsEmailsEnum, DiscountValueTypeEnum, OrderEventsEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: OrderAddNote
|
||||
|
|
@ -13,6 +13,7 @@ export interface OrderAddNote_orderAddNote_errors {
|
|||
__typename: "OrderError";
|
||||
code: OrderErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface OrderAddNote_orderAddNote_order_events_discount_amount {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
import { OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: OrderCancel
|
||||
|
|
@ -13,6 +13,7 @@ export interface OrderCancel_orderCancel_errors {
|
|||
__typename: "OrderError";
|
||||
code: OrderErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface OrderCancel_orderCancel_order_metadata {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
import { OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: OrderCapture
|
||||
|
|
@ -13,6 +13,7 @@ export interface OrderCapture_orderCapture_errors {
|
|||
__typename: "OrderError";
|
||||
code: OrderErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface OrderCapture_orderCapture_order_metadata {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
import { OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: OrderConfirm
|
||||
|
|
@ -13,6 +13,7 @@ export interface OrderConfirm_orderConfirm_errors {
|
|||
__typename: "OrderError";
|
||||
code: OrderErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface OrderConfirm_orderConfirm_order_metadata {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { OrderDiscountCommonInput, OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
import { OrderDiscountCommonInput, OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: OrderDiscountAdd
|
||||
|
|
@ -13,6 +13,7 @@ export interface OrderDiscountAdd_orderDiscountAdd_errors {
|
|||
__typename: "OrderError";
|
||||
code: OrderErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface OrderDiscountAdd_orderDiscountAdd_order_metadata {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
import { OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: OrderDiscountDelete
|
||||
|
|
@ -13,6 +13,7 @@ export interface OrderDiscountDelete_orderDiscountDelete_errors {
|
|||
__typename: "OrderError";
|
||||
code: OrderErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface OrderDiscountDelete_orderDiscountDelete_order_metadata {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { OrderDiscountCommonInput, OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
import { OrderDiscountCommonInput, OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: OrderDiscountUpdate
|
||||
|
|
@ -13,6 +13,7 @@ export interface OrderDiscountUpdate_orderDiscountUpdate_errors {
|
|||
__typename: "OrderError";
|
||||
code: OrderErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface OrderDiscountUpdate_orderDiscountUpdate_order_metadata {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { OrderErrorCode } from "./../../types/globalTypes";
|
||||
import { OrderErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: OrderDraftBulkCancel
|
||||
|
|
@ -13,6 +13,7 @@ export interface OrderDraftBulkCancel_draftOrderBulkDelete_errors {
|
|||
__typename: "OrderError";
|
||||
code: OrderErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface OrderDraftBulkCancel_draftOrderBulkDelete {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
import { OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: OrderDraftCancel
|
||||
|
|
@ -13,6 +13,7 @@ export interface OrderDraftCancel_draftOrderDelete_errors {
|
|||
__typename: "OrderError";
|
||||
code: OrderErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface OrderDraftCancel_draftOrderDelete_order_metadata {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { DraftOrderCreateInput, OrderErrorCode } from "./../../types/globalTypes";
|
||||
import { DraftOrderCreateInput, OrderErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: OrderDraftCreate
|
||||
|
|
@ -13,6 +13,7 @@ export interface OrderDraftCreate_draftOrderCreate_errors {
|
|||
__typename: "OrderError";
|
||||
code: OrderErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface OrderDraftCreate_draftOrderCreate_order {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
import { OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: OrderDraftFinalize
|
||||
|
|
@ -13,6 +13,7 @@ export interface OrderDraftFinalize_draftOrderComplete_errors {
|
|||
__typename: "OrderError";
|
||||
code: OrderErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface OrderDraftFinalize_draftOrderComplete_order_metadata {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { DraftOrderInput, OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
import { DraftOrderInput, OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: OrderDraftUpdate
|
||||
|
|
@ -13,6 +13,7 @@ export interface OrderDraftUpdate_draftOrderUpdate_errors {
|
|||
__typename: "OrderError";
|
||||
code: OrderErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface OrderDraftUpdate_draftOrderUpdate_order_metadata {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { FulfillmentCancelInput, OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
import { FulfillmentCancelInput, OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: OrderFulfillmentCancel
|
||||
|
|
@ -13,6 +13,7 @@ export interface OrderFulfillmentCancel_orderFulfillmentCancel_errors {
|
|||
__typename: "OrderError";
|
||||
code: OrderErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface OrderFulfillmentCancel_orderFulfillmentCancel_order_metadata {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { OrderRefundProductsInput, OrderErrorCode, DiscountValueTypeEnum, FulfillmentStatus, OrderDiscountType, OrderEventsEmailsEnum, OrderEventsEnum, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
import { OrderRefundProductsInput, OrderErrorCode, AddressTypeEnum, DiscountValueTypeEnum, FulfillmentStatus, OrderDiscountType, OrderEventsEmailsEnum, OrderEventsEnum, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: OrderFulfillmentRefundProducts
|
||||
|
|
@ -13,6 +13,7 @@ export interface OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_e
|
|||
__typename: "OrderError";
|
||||
code: OrderErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface OrderFulfillmentRefundProducts_orderFulfillmentRefundProducts_fulfillment_lines_orderLine_variant {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { FulfillmentUpdateTrackingInput, OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
import { FulfillmentUpdateTrackingInput, OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: OrderFulfillmentUpdateTracking
|
||||
|
|
@ -13,6 +13,7 @@ export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_e
|
|||
__typename: "OrderError";
|
||||
code: OrderErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface OrderFulfillmentUpdateTracking_orderFulfillmentUpdateTracking_order_metadata {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
import { OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: OrderLineDelete
|
||||
|
|
@ -13,6 +13,7 @@ export interface OrderLineDelete_orderLineDelete_errors {
|
|||
__typename: "OrderError";
|
||||
code: OrderErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface OrderLineDelete_orderLineDelete_order_metadata {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
import { OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: OrderLineDiscountRemove
|
||||
|
|
@ -13,6 +13,7 @@ export interface OrderLineDiscountRemove_orderLineDiscountRemove_errors {
|
|||
__typename: "OrderError";
|
||||
code: OrderErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface OrderLineDiscountRemove_orderLineDiscountRemove_order_metadata {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { OrderDiscountCommonInput, OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
import { OrderDiscountCommonInput, OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: OrderLineDiscountUpdate
|
||||
|
|
@ -13,6 +13,7 @@ export interface OrderLineDiscountUpdate_orderLineDiscountUpdate_errors {
|
|||
__typename: "OrderError";
|
||||
code: OrderErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface OrderLineDiscountUpdate_orderLineDiscountUpdate_order_metadata {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { OrderLineInput, OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
import { OrderLineInput, OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: OrderLineUpdate
|
||||
|
|
@ -13,6 +13,7 @@ export interface OrderLineUpdate_orderLineUpdate_errors {
|
|||
__typename: "OrderError";
|
||||
code: OrderErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface OrderLineUpdate_orderLineUpdate_order_metadata {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { OrderLineCreateInput, OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
import { OrderLineCreateInput, OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: OrderLinesAdd
|
||||
|
|
@ -13,6 +13,7 @@ export interface OrderLinesAdd_orderLinesCreate_errors {
|
|||
__typename: "OrderError";
|
||||
code: OrderErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface OrderLinesAdd_orderLinesCreate_order_metadata {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
import { OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: OrderMarkAsPaid
|
||||
|
|
@ -13,6 +13,7 @@ export interface OrderMarkAsPaid_orderMarkAsPaid_errors {
|
|||
__typename: "OrderError";
|
||||
code: OrderErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface OrderMarkAsPaid_orderMarkAsPaid_order_metadata {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
import { OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: OrderRefund
|
||||
|
|
@ -13,6 +13,7 @@ export interface OrderRefund_orderRefund_errors {
|
|||
__typename: "OrderError";
|
||||
code: OrderErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface OrderRefund_orderRefund_order_metadata {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { OrderUpdateShippingInput, OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
import { OrderUpdateShippingInput, OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: OrderShippingMethodUpdate
|
||||
|
|
@ -13,6 +13,7 @@ export interface OrderShippingMethodUpdate_orderUpdateShipping_errors {
|
|||
__typename: "OrderError";
|
||||
code: OrderErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface OrderShippingMethodUpdate_orderUpdateShipping_order_availableShippingMethods_price {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { OrderUpdateInput, OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
import { OrderUpdateInput, OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: OrderUpdate
|
||||
|
|
@ -13,6 +13,7 @@ export interface OrderUpdate_orderUpdate_errors {
|
|||
__typename: "OrderError";
|
||||
code: OrderErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface OrderUpdate_orderUpdate_order_metadata {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { OrderErrorCode, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
import { OrderErrorCode, AddressTypeEnum, OrderDiscountType, DiscountValueTypeEnum, OrderEventsEmailsEnum, OrderEventsEnum, FulfillmentStatus, PaymentChargeStatusEnum, OrderStatus, OrderAction, JobStatusEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: OrderVoid
|
||||
|
|
@ -13,6 +13,7 @@ export interface OrderVoid_orderVoid_errors {
|
|||
__typename: "OrderError";
|
||||
code: OrderErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface OrderVoid_orderVoid_order_metadata {
|
||||
|
|
|
|||
|
|
@ -105,6 +105,8 @@ export type OrderUrlDialog =
|
|||
| "cancel"
|
||||
| "cancel-fulfillment"
|
||||
| "capture"
|
||||
| "customer-change"
|
||||
| "edit-customer-addresses"
|
||||
| "edit-billing-address"
|
||||
| "edit-fulfillment"
|
||||
| "edit-shipping"
|
||||
|
|
|
|||
|
|
@ -57,10 +57,7 @@ const OrderAddressFields = ({
|
|||
confirmButtonState: isDraft
|
||||
? orderDraftUpdate.opts.status
|
||||
: orderUpdate.opts.status,
|
||||
countries: data?.shop?.countries.map(country => ({
|
||||
code: country.code,
|
||||
label: country.country
|
||||
})),
|
||||
countries: data?.shop?.countries,
|
||||
errors: isDraft
|
||||
? orderDraftUpdate.opts.data?.draftOrderUpdate.errors
|
||||
: orderUpdate.opts.data?.orderUpdate.errors,
|
||||
|
|
|
|||
|
|
@ -159,8 +159,8 @@ export const OrderDetailsMessages: React.FC<OrderDetailsMessages> = ({
|
|||
defaultMessage: "Order successfully updated"
|
||||
})
|
||||
});
|
||||
closeModal();
|
||||
}
|
||||
closeModal();
|
||||
};
|
||||
const handleShippingMethodUpdate = (data: OrderShippingMethodUpdate) => {
|
||||
const errs = data.orderUpdateShipping?.errors;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,18 @@
|
|||
import { WindowTitle } from "@saleor/components/WindowTitle";
|
||||
import { DEFAULT_INITIAL_SEARCH_DATA } from "@saleor/config";
|
||||
import { useCustomerAddressesQuery } from "@saleor/customers/queries";
|
||||
import useNavigator from "@saleor/hooks/useNavigator";
|
||||
import useUser from "@saleor/hooks/useUser";
|
||||
import { CustomerEditData } from "@saleor/orders/components/OrderCustomer";
|
||||
import OrderCustomerAddressesEditDialog, {
|
||||
OrderCustomerAddressesEditDialogOutput
|
||||
} from "@saleor/orders/components/OrderCustomerAddressesEditDialog";
|
||||
import {
|
||||
CustomerChangeActionEnum,
|
||||
OrderCustomerChangeData
|
||||
} from "@saleor/orders/components/OrderCustomerChangeDialog/form";
|
||||
import OrderCustomerChangeDialog from "@saleor/orders/components/OrderCustomerChangeDialog/OrderCustomerChangeDialog";
|
||||
import { OrderDetails } from "@saleor/orders/types/OrderDetails";
|
||||
import { OrderDiscountProvider } from "@saleor/products/components/OrderDiscountProviders/OrderDiscountProvider";
|
||||
import { OrderLineDiscountProvider } from "@saleor/products/components/OrderDiscountProviders/OrderLineDiscountProvider";
|
||||
import useCustomerSearch from "@saleor/searches/useCustomerSearch";
|
||||
|
|
@ -16,14 +27,14 @@ import OrderDraftPage from "../../../components/OrderDraftPage";
|
|||
import OrderProductAddDialog from "../../../components/OrderProductAddDialog";
|
||||
import OrderShippingMethodEditDialog from "../../../components/OrderShippingMethodEditDialog";
|
||||
import { useOrderVariantSearch } from "../../../queries";
|
||||
import { OrderUrlQueryParams } from "../../../urls";
|
||||
import { OrderUrlDialog, OrderUrlQueryParams } from "../../../urls";
|
||||
import { orderDraftListUrl } from "../../../urls";
|
||||
|
||||
interface OrderDraftDetailsProps {
|
||||
id: string;
|
||||
params: OrderUrlQueryParams;
|
||||
loading: any;
|
||||
data: any;
|
||||
data: OrderDetails;
|
||||
orderAddNote: any;
|
||||
orderLineUpdate: any;
|
||||
orderLineDelete: any;
|
||||
|
|
@ -32,7 +43,7 @@ interface OrderDraftDetailsProps {
|
|||
orderDraftUpdate: any;
|
||||
orderDraftCancel: any;
|
||||
orderDraftFinalize: any;
|
||||
openModal: any;
|
||||
openModal: (action: OrderUrlDialog, newParams?: OrderUrlQueryParams) => void;
|
||||
closeModal: any;
|
||||
}
|
||||
|
||||
|
|
@ -72,8 +83,70 @@ export const OrderDraftDetails: React.FC<OrderDraftDetailsProps> = ({
|
|||
variables: DEFAULT_INITIAL_SEARCH_DATA
|
||||
});
|
||||
|
||||
const {
|
||||
data: customerAddresses,
|
||||
loading: customerAddressesLoading
|
||||
} = useCustomerAddressesQuery({
|
||||
variables: {
|
||||
id: order?.user?.id
|
||||
},
|
||||
skip: params.action !== "edit-customer-addresses"
|
||||
});
|
||||
|
||||
const intl = useIntl();
|
||||
|
||||
const handleCustomerChange = async ({
|
||||
user,
|
||||
userEmail,
|
||||
prevUser,
|
||||
prevUserEmail
|
||||
}: CustomerEditData) => {
|
||||
const sameUser = user && user === prevUser;
|
||||
const sameUserEmail = userEmail && userEmail === prevUserEmail;
|
||||
if (sameUser || sameUserEmail) {
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await orderDraftUpdate.mutate({
|
||||
id,
|
||||
input: {
|
||||
user,
|
||||
userEmail
|
||||
}
|
||||
});
|
||||
|
||||
if (result?.data?.draftOrderUpdate?.errors?.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
const modalUri = prevUser ? "customer-change" : "edit-customer-addresses";
|
||||
openModal(modalUri);
|
||||
};
|
||||
|
||||
const handleCustomerChangeAction = (data: OrderCustomerChangeData) => {
|
||||
if (data.changeActionOption === CustomerChangeActionEnum.CHANGE_ADDRESS) {
|
||||
openModal("edit-customer-addresses");
|
||||
} else {
|
||||
closeModal();
|
||||
}
|
||||
};
|
||||
|
||||
const handleCustomerChangeAdresses = async (
|
||||
data: OrderCustomerAddressesEditDialogOutput
|
||||
) => {
|
||||
const result = await orderDraftUpdate.mutate({
|
||||
id,
|
||||
input: {
|
||||
shippingAddress: data.shippingAddress,
|
||||
billingAddress: data.billingAddress
|
||||
}
|
||||
});
|
||||
if (!result?.data?.draftOrderUpdate?.errors?.length) {
|
||||
closeModal();
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<WindowTitle
|
||||
|
|
@ -104,21 +177,12 @@ export const OrderDraftDetails: React.FC<OrderDraftDetailsProps> = ({
|
|||
fetchUsers={searchUsers}
|
||||
loading={users.loading}
|
||||
usersLoading={users.loading}
|
||||
onCustomerEdit={data =>
|
||||
orderDraftUpdate.mutate({
|
||||
id,
|
||||
input: data
|
||||
})
|
||||
}
|
||||
onCustomerEdit={handleCustomerChange}
|
||||
onDraftFinalize={() => orderDraftFinalize.mutate({ id })}
|
||||
onDraftRemove={() => openModal("cancel")}
|
||||
onOrderLineAdd={() => openModal("add-order-line")}
|
||||
onBack={() => navigate(orderDraftListUrl())}
|
||||
order={order}
|
||||
countries={(data?.shop?.countries || []).map(country => ({
|
||||
code: country.code,
|
||||
label: country.country
|
||||
}))}
|
||||
onProductClick={id => () =>
|
||||
navigate(productUrl(encodeURIComponent(id)))}
|
||||
onBillingAddressEdit={() => openModal("edit-billing-address")}
|
||||
|
|
@ -184,6 +248,23 @@ export const OrderDraftDetails: React.FC<OrderDraftDetailsProps> = ({
|
|||
})
|
||||
}
|
||||
/>
|
||||
<OrderCustomerChangeDialog
|
||||
open={params.action === "customer-change"}
|
||||
onClose={closeModal}
|
||||
onConfirm={handleCustomerChangeAction}
|
||||
/>
|
||||
<OrderCustomerAddressesEditDialog
|
||||
open={params.action === "edit-customer-addresses"}
|
||||
loading={customerAddressesLoading}
|
||||
confirmButtonState={orderDraftUpdate.opts.status}
|
||||
errors={orderDraftUpdate.opts.data?.draftOrderUpdate?.errors || []}
|
||||
countries={data?.shop?.countries}
|
||||
customerAddresses={customerAddresses?.user?.addresses}
|
||||
defaultShippingAddress={customerAddresses?.user?.defaultShippingAddress}
|
||||
defaultBillingAddress={customerAddresses?.user?.defaultBillingAddress}
|
||||
onClose={closeModal}
|
||||
onConfirm={handleCustomerChangeAdresses}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -59,11 +59,6 @@ function useProductExportFieldMessages() {
|
|||
defaultMessage: "Export Variant Weight",
|
||||
description: "product field",
|
||||
id: "productExportFieldVariantWeight"
|
||||
}),
|
||||
[ProductFieldEnum.VISIBLE]: intl.formatMessage({
|
||||
defaultMessage: "Visibility",
|
||||
description: "product field",
|
||||
id: "productExportFieldVisibility"
|
||||
})
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@ import { buttonMessages } from "@saleor/intl";
|
|||
import { makeStyles } from "@saleor/theme";
|
||||
import { DialogProps } from "@saleor/types";
|
||||
import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
|
||||
import { mapCountriesToChoices } from "@saleor/utils/maps";
|
||||
import React from "react";
|
||||
import { FormattedMessage, useIntl } from "react-intl";
|
||||
|
||||
|
|
@ -85,10 +86,7 @@ const ShippingZoneAddWarehouseDialog: React.FC<ShippingZoneAddWarehouseDialogPro
|
|||
useModalDialogOpen(open, {});
|
||||
const intl = useIntl();
|
||||
|
||||
const countryChoices = countries.map(country => ({
|
||||
label: country.country,
|
||||
value: country.code
|
||||
}));
|
||||
const countryChoices = mapCountriesToChoices(countries);
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { AccountErrorCode } from "./../../types/globalTypes";
|
||||
import { AccountErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: ChangeStaffPassword
|
||||
|
|
@ -13,6 +13,7 @@ export interface ChangeStaffPassword_passwordChange_errors {
|
|||
__typename: "AccountError";
|
||||
code: AccountErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface ChangeStaffPassword_passwordChange {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { AccountErrorCode } from "./../../types/globalTypes";
|
||||
import { AccountErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: StaffAvatarDelete
|
||||
|
|
@ -13,6 +13,7 @@ export interface StaffAvatarDelete_userAvatarDelete_errors {
|
|||
__typename: "AccountError";
|
||||
code: AccountErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface StaffAvatarDelete_userAvatarDelete_user_avatar {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
// @generated
|
||||
// This file was automatically generated and should not be edited.
|
||||
|
||||
import { AccountErrorCode } from "./../../types/globalTypes";
|
||||
import { AccountErrorCode, AddressTypeEnum } from "./../../types/globalTypes";
|
||||
|
||||
// ====================================================
|
||||
// GraphQL mutation operation: StaffAvatarUpdate
|
||||
|
|
@ -13,6 +13,7 @@ export interface StaffAvatarUpdate_userAvatarUpdate_errors {
|
|||
__typename: "AccountError";
|
||||
code: AccountErrorCode;
|
||||
field: string | null;
|
||||
addressType: AddressTypeEnum | null;
|
||||
}
|
||||
|
||||
export interface StaffAvatarUpdate_userAvatarUpdate_user_avatar {
|
||||
|
|
|
|||
|
|
@ -15639,6 +15639,30 @@ exports[`Storyshots Orders / OrderCustomer with different addresses 1`] = `
|
|||
</div>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Orders / OrderCustomerAddressesEditDialog default 1`] = `
|
||||
<div
|
||||
style="padding:24px"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Orders / OrderCustomerAddressesEditDialog loading 1`] = `
|
||||
<div
|
||||
style="padding:24px"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Orders / OrderCustomerAddressesEditDialog no customer addresses 1`] = `
|
||||
<div
|
||||
style="padding:24px"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Orders / OrderCustomerChangeDialog default 1`] = `
|
||||
<div
|
||||
style="padding:24px"
|
||||
/>
|
||||
`;
|
||||
|
||||
exports[`Storyshots Orders / OrderDraftCancelDialog default 1`] = `
|
||||
<div
|
||||
style="padding:24px"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import Card from "@material-ui/core/Card";
|
||||
import CardContent from "@material-ui/core/CardContent";
|
||||
import AddressEdit from "@saleor/components/AddressEdit";
|
||||
import { mapCountriesToChoices } from "@saleor/utils/maps";
|
||||
import { storiesOf } from "@storybook/react";
|
||||
import React from "react";
|
||||
|
||||
|
|
@ -22,10 +23,7 @@ storiesOf("Generics / AddressEdit", module)
|
|||
<AddressEdit
|
||||
errors={[]}
|
||||
data={transformAddressToForm(customer.defaultBillingAddress)}
|
||||
countries={countries.map(c => ({
|
||||
label: c.label,
|
||||
value: c.code
|
||||
}))}
|
||||
countries={mapCountriesToChoices(countries)}
|
||||
countryDisplayValue={customer.defaultBillingAddress.country.country}
|
||||
onChange={undefined}
|
||||
onCountryChange={() => undefined}
|
||||
|
|
|
|||
|
|
@ -12,8 +12,9 @@ const props: CustomerAddressDialogProps = {
|
|||
address: customer.addresses[0],
|
||||
confirmButtonState: "default",
|
||||
countries: countries.map(c => ({
|
||||
__typename: "CountryDisplay",
|
||||
code: c.code,
|
||||
label: c.name
|
||||
country: c.name
|
||||
})),
|
||||
errors: [],
|
||||
onClose: () => undefined,
|
||||
|
|
|
|||
|
|
@ -45,7 +45,8 @@ storiesOf("Views / Customers / Create customer", module)
|
|||
] as Array<keyof CustomerCreatePageFormData>).map(field => ({
|
||||
__typename: "AccountError",
|
||||
code: AccountErrorCode.INVALID,
|
||||
field
|
||||
field,
|
||||
addressType: null
|
||||
}))}
|
||||
/>
|
||||
));
|
||||
|
|
|
|||
|
|
@ -43,7 +43,8 @@ storiesOf("Views / Customers / Customer details", module)
|
|||
>).map(field => ({
|
||||
__typename: "AccountError",
|
||||
code: AccountErrorCode.INVALID,
|
||||
field
|
||||
field,
|
||||
addressType: null
|
||||
}))}
|
||||
/>
|
||||
))
|
||||
|
|
|
|||
|
|
@ -35,7 +35,8 @@ storiesOf("Orders / OrderCancelDialog", module)
|
|||
{
|
||||
__typename: "OrderError",
|
||||
code: OrderErrorCode.CANNOT_CANCEL_ORDER,
|
||||
field: null
|
||||
field: null,
|
||||
addressType: null
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import React from "react";
|
|||
import OrderDetailsPage, {
|
||||
OrderDetailsPageProps
|
||||
} from "../../../orders/components/OrderDetailsPage";
|
||||
import { countries, order as orderFixture } from "../../../orders/fixtures";
|
||||
import { order as orderFixture } from "../../../orders/fixtures";
|
||||
import {
|
||||
FulfillmentStatus,
|
||||
OrderStatus,
|
||||
|
|
@ -18,7 +18,6 @@ import Decorator from "../../Decorator";
|
|||
const order = orderFixture(placeholderImage);
|
||||
|
||||
const props: Omit<OrderDetailsPageProps, "classes"> = {
|
||||
countries,
|
||||
disabled: false,
|
||||
onBack: () => undefined,
|
||||
onBillingAddressEdit: undefined,
|
||||
|
|
|
|||
|
|
@ -26,7 +26,8 @@ storiesOf("Orders / OrderDraftCancelDialog", module)
|
|||
{
|
||||
__typename: "OrderError",
|
||||
code: OrderErrorCode.GRAPHQL_ERROR,
|
||||
field: null
|
||||
field: null,
|
||||
addressType: null
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import React from "react";
|
|||
import OrderDraftPage, {
|
||||
OrderDraftPageProps
|
||||
} from "../../../../orders/components/OrderDraftPage";
|
||||
import { clients, countries, draftOrder } from "../../../../orders/fixtures";
|
||||
import { clients, draftOrder } from "../../../../orders/fixtures";
|
||||
import Decorator from "../../../Decorator";
|
||||
import { getDiscountsProvidersWrapper } from "./utils";
|
||||
|
||||
|
|
@ -15,7 +15,6 @@ const order = draftOrder(placeholderImage);
|
|||
|
||||
const props: Omit<OrderDraftPageProps, "classes"> = {
|
||||
...fetchMoreProps,
|
||||
countries,
|
||||
disabled: false,
|
||||
fetchUsers: () => undefined,
|
||||
onBack: () => undefined,
|
||||
|
|
|
|||
|
|
@ -27,7 +27,8 @@ storiesOf("Orders / OrderFulfillmentCancelDialog", module)
|
|||
{
|
||||
__typename: "OrderError",
|
||||
code: OrderErrorCode.GRAPHQL_ERROR,
|
||||
field: null
|
||||
field: null,
|
||||
addressType: null
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -31,12 +31,14 @@ storiesOf("Orders / OrderFulfillmentDialog", module)
|
|||
{
|
||||
__typename: "OrderError",
|
||||
code: OrderErrorCode.FULFILL_ORDER_LINE,
|
||||
field: null
|
||||
field: null,
|
||||
addressType: null
|
||||
},
|
||||
{
|
||||
__typename: "OrderError",
|
||||
code: OrderErrorCode.INVALID,
|
||||
field: "trackingNumber"
|
||||
field: "trackingNumber",
|
||||
addressType: null
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -26,12 +26,14 @@ storiesOf("Orders / OrderFulfillmentTrackingDialog", module)
|
|||
{
|
||||
__typename: "OrderError",
|
||||
code: OrderErrorCode.GRAPHQL_ERROR,
|
||||
field: null
|
||||
field: null,
|
||||
addressType: null
|
||||
},
|
||||
{
|
||||
__typename: "OrderError",
|
||||
code: OrderErrorCode.INVALID,
|
||||
field: "trackingNumber"
|
||||
field: "trackingNumber",
|
||||
addressType: null
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,8 @@ storiesOf("Orders / OrderMarkAsPaidDialog", module)
|
|||
{
|
||||
__typename: "OrderError",
|
||||
code: OrderErrorCode.GRAPHQL_ERROR,
|
||||
field: null
|
||||
field: null,
|
||||
addressType: null
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -26,12 +26,14 @@ storiesOf("Orders / OrderPaymentDialog", module)
|
|||
{
|
||||
__typename: "OrderError",
|
||||
code: OrderErrorCode.CAPTURE_INACTIVE_PAYMENT,
|
||||
field: null
|
||||
field: null,
|
||||
addressType: null
|
||||
},
|
||||
{
|
||||
__typename: "OrderError",
|
||||
code: OrderErrorCode.INVALID,
|
||||
field: "payment"
|
||||
field: "payment",
|
||||
addressType: null
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,8 @@ storiesOf("Orders / OrderPaymentVoidDialog", module)
|
|||
{
|
||||
__typename: "OrderError",
|
||||
code: OrderErrorCode.VOID_INACTIVE_PAYMENT,
|
||||
field: null
|
||||
field: null,
|
||||
addressType: null
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue