feat: new address form bottom component

Author: Berardo Matè

components/composite/StepCustomer/AddressFormBottom/index.tsx

@@ -0,0 +1,28 @@
+import { useTranslation } from "react-i18next"
+
+import { AddressSectionSaveOnAddressBook } from "../AddressSectionSaveOnAddressBook"
+
+import { LinkButton } from "components/ui/LinkButton"
+
+import { Wrapper } from "./styled"
+
+interface Props {
+  addressType: "billing" | "shipping"
+  onClick?: () => void
+  className?: string
+}
+
+export const AddressFormBottom: React.FC<Props> = ({
+  addressType,
+  onClick,
+  className,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <Wrapper className={className}>
+      <AddressSectionSaveOnAddressBook addressType={addressType} />
+      <LinkButton label={t("stepCustomer.closeForm")} onClick={onClick} />
+    </Wrapper>
+  )
+}

components/composite/StepCustomer/AddressFormBottom/styled.tsx

@@ -0,0 +1,6 @@
+import styled from "styled-components"
+import tw from "twin.macro"
+
+export const Wrapper = styled.div`
+  ${tw`flex justify-between`}
+`

components/composite/StepCustomer/CheckoutCustomerAddresses.tsx

@@ -20,9 +20,9 @@ import { GridContainer } from "components/ui/GridContainer"
 import { SpinnerIcon } from "components/ui/SpinnerIcon"
 import { Toggle } from "components/ui/Toggle"
 
+import { AddressFormBottom } from "./AddressFormBottom"
 import { AddressSectionEmail } from "./AddressSectionEmail"
 import { AddressSectionSaveForm } from "./AddressSectionSaveForm"
-import { AddressSectionSaveOnAddressBook } from "./AddressSectionSaveOnAddressBook"
 import { AddressSectionTitle } from "./AddressSectionTitle"
 import { BillingAddressFormNew } from "./BillingAddressFormNew"
 import { ShippingAddressFormNew } from "./ShippingAddressFormNew"
@@ -163,15 +163,10 @@ export const CheckoutCustomerAddresses: React.FC<Props> = ({
               {mountBillingAddressForm ? (
                 <>
                   <BillingAddressFormNew billingAddress={billingAddressFill} />
-                  <div className="flex justify-between" key="actionsWrapper">
-                    <AddressSectionSaveOnAddressBook addressType="billing" />
-                    <p
-                      className="font-extrabold text-red-400 border-b border-red-100 cursor-pointer text-ss"
-                      onClick={handleShowBillingForm}
-                    >
-                      Close
-                    </p>
-                  </div>
+                  <AddressFormBottom
+                    addressType="billing"
+                    onClick={handleShowBillingForm}
+                  />
                 </>
               ) : (
                 <Fragment />
@@ -244,15 +239,11 @@ export const CheckoutCustomerAddresses: React.FC<Props> = ({
                       <ShippingAddressFormNew
                         shippingAddress={shippingAddressFill}
                       />
-                      <div className="flex justify-between mb-4">
-                        <AddressSectionSaveOnAddressBook addressType="shipping" />
-                        <p
-                          className="font-extrabold text-red-400 border-b border-red-100 cursor-pointer text-ss"
-                          onClick={handleShowShippingForm}
-                        >
-                          Close
-                        </p>
-                      </div>
+                      <AddressFormBottom
+                        addressType="shipping"
+                        onClick={handleShowShippingForm}
+                        className="mb-4"
+                      />
                     </>
                   ) : (
                     <Fragment />

components/ui/LinkButton/index.tsx

@@ -0,0 +1,6 @@
+import LinkButtonProps from "./props"
+import { Button } from "./styled"
+
+export const LinkButton: React.FC<LinkButtonProps> = ({ onClick, label }) => {
+  return <Button onClick={onClick}>{label}</Button>
+}

components/ui/LinkButton/props.tsx

@@ -0,0 +1,6 @@
+interface LinkButtonProps {
+  onClick?: () => void
+  label?: string
+}
+
+export default LinkButtonProps

components/ui/LinkButton/styled.tsx

@@ -0,0 +1,10 @@
+import styled from "styled-components"
+import tw from "twin.macro"
+
+import LinkButtonProps from "./props"
+
+export const Button = styled.a.attrs(
+  (props: LinkButtonProps) => ({})
+)<LinkButtonProps>`
+  ${tw`text-ss font-bold cursor-pointer border-b border-gray-200 text-primary`}
+`

public/static/locales/en/common.json

@@ -64,7 +64,8 @@
         "addNewBillingAddress": "Add new billing address",
         "addNewShippingAddress": "Add new shipping address",
         "continueToDelivery": "Continue to delivery",
-        "notSet": "Fill in your Billing/Shipping Address"
+        "notSet": "Fill in your Billing/Shipping Address",
+        "closeForm": "Choose address"
     },
 
     "stepShipping": {

public/static/locales/it/common.json

@@ -64,7 +64,8 @@
         "addNewBillingAddress": "Aggiungi nuovo indirizzo di fatturazione",
         "addNewShippingAddress": "Aggiungi un nuovo indirizzo di spedizione",
         "continueToDelivery": "Continuare alla consegna",
-        "notSet": "Inserisci il tuo indirizzo di fatturazione/spedizione"
+        "notSet": "Inserisci il tuo indirizzo di fatturazione/spedizione",
+        "closeForm": "Scegli indirizzo"
     },
 
     "stepShipping": {