diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json index 2f7279e23..3183cd510 100644 --- a/locale/defaultMessages.json +++ b/locale/defaultMessages.json @@ -2200,40 +2200,48 @@ "context": "dialog title", "string": "Add Address" }, - "src_dot_customers_dot_components_dot_CustomerAddressListPage_dot_1090326769": { - "context": "customer's address book, header", - "string": "{fullName}'s Address Book" - }, - "src_dot_customers_dot_components_dot_CustomerAddressListPage_dot_1428369222": { - "string": "This customer doesn’t have any adresses added to his address book. You can add address using the button below." - }, - "src_dot_customers_dot_components_dot_CustomerAddressListPage_dot_1484733755": { - "string": "There is no address to show for this customer" - }, - "src_dot_customers_dot_components_dot_CustomerAddressListPage_dot_3623935073": { + "src_dot_customers_dot_components_dot_CustomerAddressListPage_dot_addAddress": { "context": "button", "string": "Add address" }, - "src_dot_customers_dot_components_dot_CustomerAddressListPage_dot_489918044": { + "src_dot_customers_dot_components_dot_CustomerAddressListPage_dot_doesntHaveAddresses": { + "string": "This customer doesn’t have any adresses added to his address book. You can add address using the button below." + }, + "src_dot_customers_dot_components_dot_CustomerAddressListPage_dot_fullNameAddress": { + "context": "customer's address book, header", + "string": "{fullName}'s Address Book" + }, + "src_dot_customers_dot_components_dot_CustomerAddressListPage_dot_fullNameDetail": { "context": "customer details, header", "string": "{fullName} Details" }, - "src_dot_customers_dot_components_dot_CustomerAddress_dot_1224809208": { + "src_dot_customers_dot_components_dot_CustomerAddressListPage_dot_noAddressToShow": { + "string": "There is no address to show for this customer" + }, + "src_dot_customers_dot_components_dot_CustomerAddress_dot_defaultAddress": { "string": "Default Address" }, - "src_dot_customers_dot_components_dot_CustomerAddress_dot_1578192486": { + "src_dot_customers_dot_components_dot_CustomerAddress_dot_defaultBillingAddress": { "string": "Default Billing Address" }, - "src_dot_customers_dot_components_dot_CustomerAddress_dot_2131178753": { - "context": "button", - "string": "Set as default shipping address" + "src_dot_customers_dot_components_dot_CustomerAddress_dot_defaultShippingAddress": { + "string": "Default Shipping Address" }, - "src_dot_customers_dot_components_dot_CustomerAddress_dot_3096438859": { + "src_dot_customers_dot_components_dot_CustomerAddress_dot_deleteAddress": { + "context": "button", + "string": "Delete Address" + }, + "src_dot_customers_dot_components_dot_CustomerAddress_dot_editAddress": { + "context": "button", + "string": "Edit Address" + }, + "src_dot_customers_dot_components_dot_CustomerAddress_dot_setDefaultBilling": { "context": "button", "string": "Set as default billing address" }, - "src_dot_customers_dot_components_dot_CustomerAddress_dot_4109348993": { - "string": "Default Shipping Address" + "src_dot_customers_dot_components_dot_CustomerAddress_dot_setDefaultShipping": { + "context": "button", + "string": "Set as default shipping address" }, "src_dot_customers_dot_components_dot_CustomerAddresses_dot_1967111456": { "context": "header", diff --git a/src/components/AddressFormatter/AddressFormatter.tsx b/src/components/AddressFormatter/AddressFormatter.tsx index a7f7f59ac..86db5e226 100644 --- a/src/components/AddressFormatter/AddressFormatter.tsx +++ b/src/components/AddressFormatter/AddressFormatter.tsx @@ -21,6 +21,7 @@ const AddressFormatter: React.FC = ({ address }) => { {address.firstName} {address.lastName} + {address.phone} {address.companyName && ( {address.companyName} )} diff --git a/src/customers/components/CustomerAddress/CustomerAddress.tsx b/src/customers/components/CustomerAddress/CustomerAddress.tsx index 7a40c0988..900ccb803 100644 --- a/src/customers/components/CustomerAddress/CustomerAddress.tsx +++ b/src/customers/components/CustomerAddress/CustomerAddress.tsx @@ -1,15 +1,12 @@ -import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; -import CardActions from "@material-ui/core/CardActions"; import CardContent from "@material-ui/core/CardContent"; import { makeStyles } from "@material-ui/core/styles"; import AddressFormatter from "@saleor/components/AddressFormatter"; import CardMenu from "@saleor/components/CardMenu"; import CardTitle from "@saleor/components/CardTitle"; import Skeleton from "@saleor/components/Skeleton"; -import { buttonMessages } from "@saleor/intl"; import React from "react"; -import { FormattedMessage, useIntl } from "react-intl"; +import { defineMessages, useIntl } from "react-intl"; import { AddressTypeEnum } from "../../../types/globalTypes"; import { CustomerAddresses_user_addresses } from "../../types/CustomerAddresses"; @@ -25,6 +22,34 @@ export interface CustomerAddressProps { onSetAsDefault: (type: AddressTypeEnum) => void; } +const messages = defineMessages({ + defaultAddress: { + defaultMessage: "Default Address" + }, + defaultShippingAddress: { + defaultMessage: "Default Shipping Address" + }, + defaultBillingAddress: { + defaultMessage: "Default Billing Address" + }, + setDefaultShipping: { + defaultMessage: "Set as default shipping address", + description: "button" + }, + setDefaultBilling: { + defaultMessage: "Set as default billing address", + description: "button" + }, + editAddress: { + defaultMessage: "Edit Address", + description: "button" + }, + deleteAddress: { + defaultMessage: "Delete Address", + description: "button" + } +}); + const useStyles = makeStyles( { actions: { @@ -64,17 +89,11 @@ const CustomerAddress: React.FC = props => { address ? ( <> {isDefaultBillingAddress && isDefaultShippingAddress - ? intl.formatMessage({ - defaultMessage: "Default Address" - }) + ? intl.formatMessage(messages.defaultAddress) : isDefaultShippingAddress - ? intl.formatMessage({ - defaultMessage: "Default Shipping Address" - }) + ? intl.formatMessage(messages.defaultShippingAddress) : isDefaultBillingAddress - ? intl.formatMessage({ - defaultMessage: "Default Billing Address" - }) + ? intl.formatMessage(messages.defaultBillingAddress) : null} ) : ( @@ -87,18 +106,20 @@ const CustomerAddress: React.FC = props => { disabled={disabled} menuItems={[ { - label: intl.formatMessage({ - defaultMessage: "Set as default shipping address", - description: "button" - }), + label: intl.formatMessage(messages.setDefaultShipping), onSelect: () => onSetAsDefault(AddressTypeEnum.SHIPPING) }, { - label: intl.formatMessage({ - defaultMessage: "Set as default billing address", - description: "button" - }), + label: intl.formatMessage(messages.setDefaultBilling), onSelect: () => onSetAsDefault(AddressTypeEnum.BILLING) + }, + { + label: intl.formatMessage(messages.editAddress), + onSelect: () => onEdit() + }, + { + label: intl.formatMessage(messages.deleteAddress), + onSelect: () => onRemove() } ]} /> @@ -107,16 +128,6 @@ const CustomerAddress: React.FC = props => { -
- - - - -
); }; diff --git a/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx b/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx index f60e53dfd..3ca004fa4 100644 --- a/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx +++ b/src/customers/components/CustomerAddressDialog/CustomerAddressDialog.tsx @@ -14,7 +14,6 @@ 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 { AddressInput } from "@saleor/types/globalTypes"; import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler"; import React from "react"; @@ -59,7 +58,7 @@ const CustomerAddressDialog = withStyles( onConfirm }: CustomerAddressDialogProps & WithStyles) => { const [countryDisplayName, setCountryDisplayName] = useStateFromProps( - maybe(() => address.country.country, "") + address?.country.country || "" ); const { errors: validationErrors, @@ -71,27 +70,24 @@ const CustomerAddressDialog = withStyles( ); const initialForm: AddressTypeInput = { - city: maybe(() => address.city, ""), - cityArea: maybe(() => address.cityArea, ""), - companyName: maybe(() => address.companyName, ""), - country: maybe(() => address.country.code, ""), - countryArea: maybe(() => address.countryArea, ""), - firstName: maybe(() => address.firstName, ""), - lastName: maybe(() => address.lastName, ""), - phone: maybe(() => address.phone, ""), - postalCode: maybe(() => address.postalCode, ""), - streetAddress1: maybe(() => address.streetAddress1, ""), - streetAddress2: maybe(() => address.streetAddress2, "") + city: address?.city || "", + cityArea: address?.cityArea || "", + companyName: address?.companyName || "", + country: address?.country.code || "", + countryArea: address?.countryArea || "", + firstName: address?.firstName || "", + lastName: address?.lastName || "", + phone: address?.phone || "", + postalCode: address?.postalCode || "", + streetAddress1: address?.streetAddress1 || "", + streetAddress2: address?.streetAddress2 || "" }; - const countryChoices = maybe( - () => - countries.map(country => ({ - label: country.label, - value: country.code - })), - [] - ); + const countryChoices = + countries?.map(country => ({ + label: country.label, + value: country.code + })) || []; return ( void; } +const messages = defineMessages({ + fullNameAddress: { + defaultMessage: "{fullName}'s Address Book", + description: "customer's address book, header" + }, + fullNameDetail: { + defaultMessage: "{fullName} Details", + description: "customer details, header" + }, + addAddress: { + defaultMessage: "Add address", + description: "button" + }, + noAddressToShow: { + defaultMessage: "There is no address to show for this customer" + }, + doesntHaveAddresses: { + defaultMessage: + "This customer doesn’t have any adresses added to his address book. You can add address using the button below." + } +}); + const useStyles = makeStyles( theme => ({ addButton: { @@ -36,10 +58,15 @@ const useStyles = makeStyles( width: 600 }, root: { - columnGap: theme.spacing(3), display: "grid", + gap: `${theme.spacing(3)}px`, gridTemplateColumns: "repeat(3, 1fr)", - rowGap: theme.spacing(3) + [theme.breakpoints.down("md")]: { + gridTemplateColumns: "repeat(2, 1fr)" + }, + [theme.breakpoints.down("sm")]: { + gridTemplateColumns: "repeat(1, 1fr)" + } } }), { name: "CustomerAddressListPage" } @@ -59,50 +86,30 @@ const CustomerAddressListPage: React.FC = props => const intl = useIntl(); - const isEmpty = maybe(() => customer.addresses.length) === 0; - const fullName = maybe( - () => [customer.firstName, customer.lastName].join(" "), - "..." - ); + const isEmpty = customer?.addresses?.length === 0; + const fullName = [customer?.firstName, customer?.lastName].join(" ") || "..."; return ( - + {intl.formatMessage(messages.fullNameDetail, { fullName })} {!isEmpty && ( )} {isEmpty ? (
- + {intl.formatMessage(messages.noAddressToShow)} - + {intl.formatMessage(messages.doesntHaveAddresses)}
) : (
- {renderCollection( - maybe(() => customer.addresses), - (address, addressNumber) => ( - customer.defaultBillingAddress.id) === - maybe(() => address.id) - } - isDefaultShippingAddress={ - maybe(() => customer.defaultShippingAddress.id) === - maybe(() => address.id) - } - onEdit={() => onEdit(address.id)} - onRemove={() => onRemove(address.id)} - onSetAsDefault={type => onSetAsDefault(address.id, type)} - key={maybe(() => address.id, "skeleton")} - /> - ) - )} + {renderCollection(customer?.addresses, (address, addressNumber) => ( + onEdit(address.id)} + onRemove={() => onRemove(address.id)} + onSetAsDefault={type => onSetAsDefault(address.id, type)} + key={address?.id || "skeleton"} + /> + ))}
)} diff --git a/src/customers/views/CustomerAddresses.tsx b/src/customers/views/CustomerAddresses.tsx index cf1a7975a..ef971ddce 100644 --- a/src/customers/views/CustomerAddresses.tsx +++ b/src/customers/views/CustomerAddresses.tsx @@ -9,7 +9,6 @@ import createDialogActionHandlers from "@saleor/utils/handlers/dialogActionHandl import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; -import { maybe } from "../../misc"; import CustomerAddressDialog from "../components/CustomerAddressDialog"; import CustomerAddressListPage from "../components/CustomerAddressListPage"; import { @@ -102,23 +101,20 @@ const CustomerAddresses: React.FC = ({ {(removeCustomerAddress, removeCustomerAddressOpts) => ( {customerData => { - const countryChoices = maybe( - () => - shop.countries.map(country => ({ - code: country.code, - label: country.country - })), - [] - ); + const countryChoices = + shop?.countries?.map(country => ({ + code: country.code, + label: country.country + })) || []; return ( <> customerData.data.user.email)} + title={customerData?.data?.user.email} /> customerData.data.user)} - disabled={customerData.loading} + customer={customerData?.data?.user} + disabled={customerData?.loading} onAdd={() => openModal("add")} onBack={() => navigate(customerUrl(id))} onEdit={id => @@ -143,12 +139,10 @@ const CustomerAddresses: React.FC = ({ createCustomerAddressOpts.status } countries={countryChoices} - errors={maybe( - () => - createCustomerAddressOpts.data.addressCreate - .errors, - [] - )} + errors={ + createCustomerAddressOpts?.data?.addressCreate + .errors || [] + } open={params.action === "add"} variant="create" onClose={closeModal} @@ -162,21 +156,17 @@ const CustomerAddresses: React.FC = ({ } /> - customerData.data.user.addresses.find( - addr => addr.id === params.id - ) + address={customerData?.data?.user.addresses.find( + addr => addr.id === params.id )} confirmButtonState={ updateCustomerAddressOpts.status } countries={countryChoices} - errors={maybe( - () => - updateCustomerAddressOpts.data.addressUpdate - .errors, - [] - )} + errors={ + updateCustomerAddressOpts?.data?.addressUpdate + .errors || [] + } open={params.action === "edit"} variant="edit" onClose={closeModal} diff --git a/src/misc.ts b/src/misc.ts index f471fc2a0..5a7e58d15 100644 --- a/src/misc.ts +++ b/src/misc.ts @@ -197,17 +197,17 @@ export const transformOrderStatus = ( }; export const transformAddressToForm = (data: AddressType) => ({ - city: maybe(() => data.city, ""), - cityArea: maybe(() => data.cityArea, ""), - companyName: maybe(() => data.companyName, ""), - country: maybe(() => data.country.code, ""), - countryArea: maybe(() => data.countryArea, ""), - firstName: maybe(() => data.firstName, ""), - lastName: maybe(() => data.lastName, ""), - phone: maybe(() => data.phone, ""), - postalCode: maybe(() => data.postalCode, ""), - streetAddress1: maybe(() => data.streetAddress1, ""), - streetAddress2: maybe(() => data.streetAddress2, "") + city: data?.city || "", + cityArea: data?.cityArea || "", + companyName: data?.companyName || "", + country: data?.country?.code || "", + countryArea: data?.countryArea || "", + firstName: data?.firstName || "", + lastName: data?.lastName || "", + phone: data?.phone || "", + postalCode: data?.postalCode || "", + streetAddress1: data?.streetAddress1 || "", + streetAddress2: data?.streetAddress2 || "" }); export function maybe(exp: () => T): T | undefined; diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index 730ec3607..545e9b98f 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -1899,6 +1899,9 @@ exports[`Storyshots Generics / AddressFormatter default 1`] = ` > Elizabeth Vaughn

+

@@ -56025,6 +56028,9 @@ exports[`Storyshots Views / Customers / Address Book default 1`] = ` > Elizabeth Vaughn

+

@@ -56044,36 +56050,6 @@ exports[`Storyshots Views / Customers / Address Book default 1`] = `

-
-
- - -
-
Timmy Macejkovic

+

+ +41 460-907-9374 +

@@ -56149,36 +56130,6 @@ exports[`Storyshots Views / Customers / Address Book default 1`] = `

-
-
- - -
-
@@ -56198,7 +56149,7 @@ exports[`Storyshots Views / Customers / Address Book loading 1`] = `
- ...'s Address Book + 's Address Book
-
-
- - -
-
@@ -59135,6 +59054,9 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = ` > Elizabeth Vaughn

+

@@ -59814,6 +59736,9 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`] > Elizabeth Vaughn

+

@@ -59851,6 +59776,9 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`] > Elizabeth Vaughn

+

@@ -60545,6 +60473,9 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = ` > Elizabeth Vaughn

+

@@ -61840,6 +61771,9 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = ` > Elizabeth Vaughn

+

@@ -62513,6 +62447,9 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`] > Elizabeth Vaughn

+

@@ -63840,6 +63777,9 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr > Elizabeth Vaughn

+

@@ -64519,6 +64459,9 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add > Elizabeth Vaughn

+