Saleor 1945 adjust adress management to the designs (#922)

* Fix grid

* Move edit and delte option from buttons to card items menu

* Add phone and update labels

* Remove some maybe()

* Update storybook

* Update locale

* Fix RWD and move messages

* Update locale

locale/defaultMessages.json

@@ -2200,40 +2200,48 @@
     "context": "dialog title",
     "string": "Add Address"
   },
-  "src_dot_customers_dot_components_dot_CustomerAddressListPage_dot_1090326769": {
+  "src_dot_customers_dot_components_dot_CustomerAddressListPage_dot_addAddress": {
-    "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": {
     "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": {
+  "src_dot_customers_dot_components_dot_CustomerAddress_dot_defaultShippingAddress": {
-    "context": "button",
+    "string": "Default Shipping Address"
-    "string": "Set as 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": {
+  "src_dot_customers_dot_components_dot_CustomerAddress_dot_setDefaultShipping": {
-    "string": "Default Shipping Address"
+    "context": "button",
+    "string": "Set as default shipping address"
   },
   "src_dot_customers_dot_components_dot_CustomerAddresses_dot_1967111456": {
     "context": "header",

src/components/AddressFormatter/AddressFormatter.tsx

@@ -21,6 +21,7 @@ const AddressFormatter: React.FC<AddressFormatterProps> = ({ address }) => {
       <Typography component="p">
         {address.firstName} {address.lastName}
       </Typography>
+      <Typography component="p">{address.phone}</Typography>
       {address.companyName && (
         <Typography component="p">{address.companyName}</Typography>
       )}

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<CustomerAddressProps> = props => {
           address ? (
             <>
               {isDefaultBillingAddress && isDefaultShippingAddress
-                ? intl.formatMessage({
+                ? intl.formatMessage(messages.defaultAddress)
-                    defaultMessage: "Default Address"
-                  })
                 : isDefaultShippingAddress
-                ? intl.formatMessage({
+                ? intl.formatMessage(messages.defaultShippingAddress)
-                    defaultMessage: "Default Shipping Address"
-                  })
                 : isDefaultBillingAddress
-                ? intl.formatMessage({
+                ? intl.formatMessage(messages.defaultBillingAddress)
-                    defaultMessage: "Default Billing Address"
-                  })
                 : null}
             </>
           ) : (
@@ -87,18 +106,20 @@ const CustomerAddress: React.FC<CustomerAddressProps> = props => {
             disabled={disabled}
             menuItems={[
               {
-                label: intl.formatMessage({
+                label: intl.formatMessage(messages.setDefaultShipping),
-                  defaultMessage: "Set as default shipping address",
-                  description: "button"
-                }),
                 onSelect: () => onSetAsDefault(AddressTypeEnum.SHIPPING)
               },
               {
-                label: intl.formatMessage({
+                label: intl.formatMessage(messages.setDefaultBilling),
-                  defaultMessage: "Set as default billing address",
-                  description: "button"
-                }),
                 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<CustomerAddressProps> = props => {
       <CardContent>
         <AddressFormatter address={address} />
       </CardContent>
-      <div className={classes.actionsContainer}>
-        <CardActions className={classes.actions}>
-          <Button color="primary" disabled={disabled} onClick={onEdit}>
-            <FormattedMessage {...buttonMessages.edit} />
-          </Button>
-          <Button color="primary" disabled={disabled} onClick={onRemove}>
-            <FormattedMessage {...buttonMessages.delete} />
-          </Button>
-        </CardActions>
-      </div>
     </Card>
   );
 };

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<typeof styles>) => {
     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, ""),
+      city: address?.city || "",
-      cityArea: maybe(() => address.cityArea, ""),
+      cityArea: address?.cityArea || "",
-      companyName: maybe(() => address.companyName, ""),
+      companyName: address?.companyName || "",
-      country: maybe(() => address.country.code, ""),
+      country: address?.country.code || "",
-      countryArea: maybe(() => address.countryArea, ""),
+      countryArea: address?.countryArea || "",
-      firstName: maybe(() => address.firstName, ""),
+      firstName: address?.firstName || "",
-      lastName: maybe(() => address.lastName, ""),
+      lastName: address?.lastName || "",
-      phone: maybe(() => address.phone, ""),
+      phone: address?.phone || "",
-      postalCode: maybe(() => address.postalCode, ""),
+      postalCode: address?.postalCode || "",
-      streetAddress1: maybe(() => address.streetAddress1, ""),
+      streetAddress1: address?.streetAddress1 || "",
-      streetAddress2: maybe(() => address.streetAddress2, "")
+      streetAddress2: address?.streetAddress2 || ""
     };
 
-    const countryChoices = maybe(
+    const countryChoices =
-      () =>
+      countries?.map(country => ({
-        countries.map(country => ({
         label: country.label,
         value: country.code
-        })),
+      })) || [];
-      []
-    );
 
     return (
       <Dialog

src/customers/components/CustomerAddressListPage/CustomerAddressListPage.tsx

@@ -4,10 +4,10 @@ import Typography from "@material-ui/core/Typography";
 import AppHeader from "@saleor/components/AppHeader";
 import Container from "@saleor/components/Container";
 import PageHeader from "@saleor/components/PageHeader";
+import { renderCollection } from "@saleor/misc";
 import React from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { defineMessages, useIntl } from "react-intl";
 
-import { maybe, renderCollection } from "../../../misc";
 import { AddressTypeEnum } from "../../../types/globalTypes";
 import { CustomerAddresses_user } from "../../types/CustomerAddresses";
 import CustomerAddress from "../CustomerAddress/CustomerAddress";
@@ -22,6 +22,28 @@ export interface CustomerAddressListPageProps {
   onSetAsDefault: (id: string, type: AddressTypeEnum) => 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<CustomerAddressListPageProps> = props =>
 
   const intl = useIntl();
 
-  const isEmpty = maybe(() => customer.addresses.length) === 0;
+  const isEmpty = customer?.addresses?.length === 0;
-  const fullName = maybe(
+  const fullName = [customer?.firstName, customer?.lastName].join(" ") || "...";
-    () => [customer.firstName, customer.lastName].join(" "),
-    "..."
-  );
 
   return (
     <Container>
       <AppHeader onBack={onBack}>
-        <FormattedMessage
+        {intl.formatMessage(messages.fullNameDetail, { fullName })}
-          defaultMessage="{fullName} Details"
-          description="customer details, header"
-          values={{
-            fullName
-          }}
-        />
       </AppHeader>
       {!isEmpty && (
         <PageHeader
-          title={intl.formatMessage(
+          title={intl.formatMessage(messages.fullNameAddress, { fullName })}
-            {
-              defaultMessage: "{fullName}'s Address Book",
-              description: "customer's address book, header"
-            },
-            {
-              fullName
-            }
-          )}
         >
           <Button color="primary" variant="contained" onClick={onAdd}>
-            <FormattedMessage
+            {intl.formatMessage(messages.addAddress)}
-              defaultMessage="Add address"
-              description="button"
-            />
           </Button>
         </PageHeader>
       )}
       {isEmpty ? (
         <div className={classes.empty}>
           <Typography variant="h5">
-            <FormattedMessage defaultMessage="There is no address to show for this customer" />
+            {intl.formatMessage(messages.noAddressToShow)}
           </Typography>
           <Typography className={classes.description}>
-            <FormattedMessage defaultMessage="This customer doesn’t have any adresses added to his address book. You can add address using the button below." />
+            {intl.formatMessage(messages.doesntHaveAddresses)}
           </Typography>
           <Button
             className={classes.addButton}
@@ -110,36 +117,28 @@ const CustomerAddressListPage: React.FC<CustomerAddressListPageProps> = props =>
             variant="contained"
             onClick={onAdd}
           >
-            <FormattedMessage
+            {intl.formatMessage(messages.addAddress)}
-              defaultMessage="Add address"
-              description="button"
-            />
           </Button>
         </div>
       ) : (
         <div className={classes.root}>
-          {renderCollection(
+          {renderCollection(customer?.addresses, (address, addressNumber) => (
-            maybe(() => customer.addresses),
-            (address, addressNumber) => (
             <CustomerAddress
               address={address}
               addressNumber={addressNumber + 1}
               disabled={disabled}
               isDefaultBillingAddress={
-                  maybe(() => customer.defaultBillingAddress.id) ===
+                customer?.defaultBillingAddress?.id === address?.id
-                  maybe(() => address.id)
               }
               isDefaultShippingAddress={
-                  maybe(() => customer.defaultShippingAddress.id) ===
+                customer?.defaultShippingAddress?.id === address?.id
-                  maybe(() => address.id)
               }
               onEdit={() => onEdit(address.id)}
               onRemove={() => onRemove(address.id)}
               onSetAsDefault={type => onSetAsDefault(address.id, type)}
-                key={maybe(() => address.id, "skeleton")}
+              key={address?.id || "skeleton"}
             />
-            )
+          ))}
-          )}
         </div>
       )}
     </Container>

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<CustomerAddressesProps> = ({
                   {(removeCustomerAddress, removeCustomerAddressOpts) => (
                     <TypedCustomerAddressesQuery variables={{ id }}>
                       {customerData => {
-                        const countryChoices = maybe(
+                        const countryChoices =
-                          () =>
+                          shop?.countries?.map(country => ({
-                            shop.countries.map(country => ({
                             code: country.code,
                             label: country.country
-                            })),
+                          })) || [];
-                          []
-                        );
 
                         return (
                           <>
                             <WindowTitle
-                              title={maybe(() => customerData.data.user.email)}
+                              title={customerData?.data?.user.email}
                             />
                             <CustomerAddressListPage
-                              customer={maybe(() => customerData.data.user)}
+                              customer={customerData?.data?.user}
-                              disabled={customerData.loading}
+                              disabled={customerData?.loading}
                               onAdd={() => openModal("add")}
                               onBack={() => navigate(customerUrl(id))}
                               onEdit={id =>
@@ -143,12 +139,10 @@ const CustomerAddresses: React.FC<CustomerAddressesProps> = ({
                                 createCustomerAddressOpts.status
                               }
                               countries={countryChoices}
-                              errors={maybe(
+                              errors={
-                                () =>
+                                createCustomerAddressOpts?.data?.addressCreate
-                                  createCustomerAddressOpts.data.addressCreate
+                                  .errors || []
-                                    .errors,
+                              }
-                                []
-                              )}
                               open={params.action === "add"}
                               variant="create"
                               onClose={closeModal}
@@ -162,21 +156,17 @@ const CustomerAddresses: React.FC<CustomerAddressesProps> = ({
                               }
                             />
                             <CustomerAddressDialog
-                              address={maybe(() =>
+                              address={customerData?.data?.user.addresses.find(
-                                customerData.data.user.addresses.find(
                                 addr => addr.id === params.id
-                                )
                               )}
                               confirmButtonState={
                                 updateCustomerAddressOpts.status
                               }
                               countries={countryChoices}
-                              errors={maybe(
+                              errors={
-                                () =>
+                                updateCustomerAddressOpts?.data?.addressUpdate
-                                  updateCustomerAddressOpts.data.addressUpdate
+                                  .errors || []
-                                    .errors,
+                              }
-                                []
-                              )}
                               open={params.action === "edit"}
                               variant="edit"
                               onClose={closeModal}

src/misc.ts

@@ -197,17 +197,17 @@ export const transformOrderStatus = (
 };
 
 export const transformAddressToForm = (data: AddressType) => ({
-  city: maybe(() => data.city, ""),
+  city: data?.city || "",
-  cityArea: maybe(() => data.cityArea, ""),
+  cityArea: data?.cityArea || "",
-  companyName: maybe(() => data.companyName, ""),
+  companyName: data?.companyName || "",
-  country: maybe(() => data.country.code, ""),
+  country: data?.country?.code || "",
-  countryArea: maybe(() => data.countryArea, ""),
+  countryArea: data?.countryArea || "",
-  firstName: maybe(() => data.firstName, ""),
+  firstName: data?.firstName || "",
-  lastName: maybe(() => data.lastName, ""),
+  lastName: data?.lastName || "",
-  phone: maybe(() => data.phone, ""),
+  phone: data?.phone || "",
-  postalCode: maybe(() => data.postalCode, ""),
+  postalCode: data?.postalCode || "",
-  streetAddress1: maybe(() => data.streetAddress1, ""),
+  streetAddress1: data?.streetAddress1 || "",
-  streetAddress2: maybe(() => data.streetAddress2, "")
+  streetAddress2: data?.streetAddress2 || ""
 });
 
 export function maybe<T>(exp: () => T): T | undefined;

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -1899,6 +1899,9 @@ exports[`Storyshots Generics / AddressFormatter default 1`] = `
         >
           Elizabeth Vaughn
         </p>
+        <p
+          class="MuiTypography-root-id MuiTypography-body1-id"
+        />
         <p
           class="MuiTypography-root-id MuiTypography-body1-id"
         >
@@ -56025,6 +56028,9 @@ exports[`Storyshots Views / Customers / Address Book default 1`] = `
             >
               Elizabeth Vaughn
             </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            />
             <p
               class="MuiTypography-root-id MuiTypography-body1-id"
             >
@@ -56044,36 +56050,6 @@ exports[`Storyshots Views / Customers / Address Book default 1`] = `
             </p>
           </address>
         </div>
-        <div
-          class="CustomerAddress-actionsContainer-id"
-        >
-          <div
-            class="MuiCardActions-root-id CustomerAddress-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Edit
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Delete
-              </span>
-            </button>
-          </div>
-        </div>
       </div>
       <div
         class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id CustomerAddress-card-id MuiPaper-rounded-id"
@@ -56131,6 +56107,11 @@ exports[`Storyshots Views / Customers / Address Book default 1`] = `
             >
               Timmy Macejkovic
             </p>
+            <p
+              class="MuiTypography-root-id MuiTypography-body1-id"
+            >
+              +41 460-907-9374
+            </p>
             <p
               class="MuiTypography-root-id MuiTypography-body1-id"
             >
@@ -56149,36 +56130,6 @@ exports[`Storyshots Views / Customers / Address Book default 1`] = `
             </p>
           </address>
         </div>
-        <div
-          class="CustomerAddress-actionsContainer-id"
-        >
-          <div
-            class="MuiCardActions-root-id CustomerAddress-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Edit
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
-              tabindex="0"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Delete
-              </span>
-            </button>
-          </div>
-        </div>
       </div>
     </div>
   </div>
@@ -56198,7 +56149,7 @@ exports[`Storyshots Views / Customers / Address Book loading 1`] = `
       <div
         class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
       >
-        ...'s Address Book
+         's Address Book
       </div>
       <div
         class="ExtendedPageHeader-action-id"
@@ -56284,38 +56235,6 @@ exports[`Storyshots Views / Customers / Address Book loading 1`] = `
             ‌
           </span>
         </div>
-        <div
-          class="CustomerAddress-actionsContainer-id"
-        >
-          <div
-            class="MuiCardActions-root-id CustomerAddress-actions-id MuiCardActions-spacing-id"
-          >
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-              disabled=""
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Edit
-              </span>
-            </button>
-            <button
-              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-              disabled=""
-              tabindex="-1"
-              type="button"
-            >
-              <span
-                class="MuiButton-label-id"
-              >
-                Delete
-              </span>
-            </button>
-          </div>
-        </div>
       </div>
     </div>
   </div>
@@ -59135,6 +59054,9 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
                 >
                   Elizabeth Vaughn
                 </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                />
                 <p
                   class="MuiTypography-root-id MuiTypography-body1-id"
                 >
@@ -59814,6 +59736,9 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
                 >
                   Elizabeth Vaughn
                 </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                />
                 <p
                   class="MuiTypography-root-id MuiTypography-body1-id"
                 >
@@ -59851,6 +59776,9 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
                 >
                   Elizabeth Vaughn
                 </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                />
                 <p
                   class="MuiTypography-root-id MuiTypography-body1-id"
                 >
@@ -60545,6 +60473,9 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
                 >
                   Elizabeth Vaughn
                 </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                />
                 <p
                   class="MuiTypography-root-id MuiTypography-body1-id"
                 >
@@ -61840,6 +61771,9 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
                 >
                   Elizabeth Vaughn
                 </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                />
                 <p
                   class="MuiTypography-root-id MuiTypography-body1-id"
                 >
@@ -62513,6 +62447,9 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
                 >
                   Elizabeth Vaughn
                 </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                />
                 <p
                   class="MuiTypography-root-id MuiTypography-body1-id"
                 >
@@ -63840,6 +63777,9 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
                 >
                   Elizabeth Vaughn
                 </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                />
                 <p
                   class="MuiTypography-root-id MuiTypography-body1-id"
                 >
@@ -64519,6 +64459,9 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
                 >
                   Elizabeth Vaughn
                 </p>
+                <p
+                  class="MuiTypography-root-id MuiTypography-body1-id"
+                />
                 <p
                   class="MuiTypography-root-id MuiTypography-body1-id"
                 >