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
saleor · May 6, 2021 · 0e054cc · 0e054cc
1 parent e2a80e4
commit 0e054cc
Show file tree

Hide file tree

Showing 104 changed files with 1,373 additions and 160 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -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
 

diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json
@@ -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"

diff --git a/schema.graphql b/schema.graphql
@@ -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
-}
+}
diff --git a/src/auth/components/NewPasswordPage/NewPasswordPage.stories.tsx b/src/auth/components/NewPasswordPage/NewPasswordPage.stories.tsx
@@ -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}

diff --git a/src/auth/types/ExternalAuthenticationUrl.ts b/src/auth/types/ExternalAuthenticationUrl.ts
@@ -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 {

diff --git a/src/auth/types/ExternalObtainAccessTokens.ts b/src/auth/types/ExternalObtainAccessTokens.ts
@@ -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 {

diff --git a/src/auth/types/RequestPasswordReset.ts b/src/auth/types/RequestPasswordReset.ts
@@ -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 {

diff --git a/src/auth/types/SetPassword.ts b/src/auth/types/SetPassword.ts
@@ -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 {

diff --git a/src/components/AddressEdit/AddressEdit.tsx b/src/components/AddressEdit/AddressEdit.tsx
@@ -74,6 +74,7 @@ const AddressEdit: React.FC<AddressEditProps> = props => {
     "streetAddress1",
     "streetAddress2"
   ];
+
   const formErrors = getFormErrors<
     keyof AddressTypeInput,
     AccountErrorFragment | OrderErrorFragment

diff --git a/src/customers/components/CustomerAddressChoiceCard/CustomerAddressChoiceCard.tsx b/src/customers/components/CustomerAddressChoiceCard/CustomerAddressChoiceCard.tsx
@@ -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;
diff --git a/src/customers/components/CustomerAddressChoiceCard/index.ts b/src/customers/components/CustomerAddressChoiceCard/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./CustomerAddressChoiceCard";
+export * from "./CustomerAddressChoiceCard";
diff --git a/src/customers/components/CustomerAddressChoiceCard/styles.ts b/src/customers/components/CustomerAddressChoiceCard/styles.ts
@@ -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" }
+);
diff --git a/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx b/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx
@@ -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

diff --git a/src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx b/src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx
@@ -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

diff --git a/src/customers/queries.ts b/src/customers/queries.ts
@@ -107,6 +107,10 @@ export const TypedCustomerAddressesQuery = TypedQuery<
   CustomerAddresses,
   CustomerAddressesVariables
 >(customerAddresses);
+export const useCustomerAddressesQuery = makeQuery<
+  CustomerAddresses,
+  CustomerAddressesVariables
+>(customerAddresses);
 
 const customerCreateData = gql`
   query CustomerCreateData {

diff --git a/src/customers/types.ts b/src/customers/types.ts
@@ -11,6 +11,7 @@ export interface AddressTypeInput {
   streetAddress1: string;
   streetAddress2?: string;
 }
+
 export interface AddressType {
   id: string;
   city: string;

diff --git a/src/customers/types/BulkRemoveCustomers.ts b/src/customers/types/BulkRemoveCustomers.ts
@@ -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 {

diff --git a/src/customers/types/CreateCustomer.ts b/src/customers/types/CreateCustomer.ts
@@ -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 {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { default } from "./CustomerAddressChoiceCard";
		export * from "./CustomerAddressChoiceCard";