@salifbiaye/create-boutique 0.1.1

package/templates/storefront/src/modules/account/components/account-nav/index.tsx

@@ -0,0 +1,198 @@
+"use client"
+
+
+import { T } from "@lib/boutique/i18n-client"
+import { clx } from "@medusajs/ui"
+import { ArrowRightOnRectangle } from "@medusajs/icons"
+import { usePathname } from "next/navigation"
+
+import ChevronDown from "@modules/common/icons/chevron-down"
+import User from "@modules/common/icons/user"
+import MapPin from "@modules/common/icons/map-pin"
+import Package from "@modules/common/icons/package"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import { HttpTypes } from "@medusajs/types"
+import { signout } from "@lib/data/customer"
+
+const AccountNav = ({
+  customer,
+}: {
+  customer: HttpTypes.StoreCustomer | null
+}) => {
+  const route = usePathname()
+
+  const handleLogout = async () => {
+    await signout()
+  }
+
+  return (
+    <div>
+      <div className="small:hidden" data-testid="mobile-account-nav">
+        {route !== "/account" ? (
+          <LocalizedClientLink
+            href="/account"
+            className="flex items-center gap-x-2 text-small-regular py-2"
+            data-testid="account-main-link"
+          >
+            <>
+              <ChevronDown className="transform rotate-90" />
+              <span><T k="account.title" /></span>
+            </>
+          </LocalizedClientLink>
+        ) : (
+          <>
+            <div className="text-xl-semi mb-4 px-8">
+              Hello {customer?.first_name}
+            </div>
+            <div className="text-base-regular">
+              <ul>
+                <li>
+                  <LocalizedClientLink
+                    href="/account/profile"
+                    className="flex items-center justify-between py-4 border-b border-gray-200 px-8"
+                    data-testid="profile-link"
+                  >
+                    <>
+                      <div className="flex items-center gap-x-2">
+                        <User size={20} />
+                        <span><T k="account.profile" /></span>
+                      </div>
+                      <ChevronDown className="transform -rotate-90" />
+                    </>
+                  </LocalizedClientLink>
+                </li>
+                <li>
+                  <LocalizedClientLink
+                    href="/account/addresses"
+                    className="flex items-center justify-between py-4 border-b border-gray-200 px-8"
+                    data-testid="addresses-link"
+                  >
+                    <>
+                      <div className="flex items-center gap-x-2">
+                        <MapPin size={20} />
+                        <span><T k="account.addresses" /></span>
+                      </div>
+                      <ChevronDown className="transform -rotate-90" />
+                    </>
+                  </LocalizedClientLink>
+                </li>
+                <li>
+                  <LocalizedClientLink
+                    href="/account/orders"
+                    className="flex items-center justify-between py-4 border-b border-gray-200 px-8"
+                    data-testid="orders-link"
+                  >
+                    <div className="flex items-center gap-x-2">
+                      <Package size={20} />
+                      <span><T k="account.orders" /></span>
+                    </div>
+                    <ChevronDown className="transform -rotate-90" />
+                  </LocalizedClientLink>
+                </li>
+                <li>
+                  <button
+                    type="button"
+                    className="flex items-center justify-between py-4 border-b border-gray-200 px-8 w-full"
+                    onClick={handleLogout}
+                    data-testid="logout-button"
+                  >
+                    <div className="flex items-center gap-x-2">
+                      <ArrowRightOnRectangle />
+                      <span><T k="account.logout" /></span>
+                    </div>
+                    <ChevronDown className="transform -rotate-90" />
+                  </button>
+                </li>
+              </ul>
+            </div>
+          </>
+        )}
+      </div>
+      <div className="hidden small:block" data-testid="account-nav">
+        <div>
+          <div className="pb-4">
+            <h3 className="text-base-semi">Account</h3>
+          </div>
+          <div className="text-base-regular">
+            <ul className="flex mb-0 justify-start items-start flex-col gap-y-4">
+              <li>
+                <AccountNavLink
+                  href="/account"
+                  route={route!}
+                  data-testid="overview-link"
+                >
+                  <T k="account.overview" />
+                </AccountNavLink>
+              </li>
+              <li>
+                <AccountNavLink
+                  href="/account/profile"
+                  route={route!}
+                  data-testid="profile-link"
+                >
+                  <T k="account.profile" />
+                </AccountNavLink>
+              </li>
+              <li>
+                <AccountNavLink
+                  href="/account/addresses"
+                  route={route!}
+                  data-testid="addresses-link"
+                >
+                  <T k="account.addresses" />
+                </AccountNavLink>
+              </li>
+              <li>
+                <AccountNavLink
+                  href="/account/orders"
+                  route={route!}
+                  data-testid="orders-link"
+                >
+                  <T k="account.orders" />
+                </AccountNavLink>
+              </li>
+              <li className="text-grey-700">
+                <button
+                  type="button"
+                  onClick={handleLogout}
+                  data-testid="logout-button"
+                >
+                  <T k="account.logout" />
+                </button>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+type AccountNavLinkProps = {
+  href: string
+  route: string
+  children: React.ReactNode
+  "data-testid"?: string
+}
+
+const AccountNavLink = ({
+  href,
+  route,
+  children,
+  "data-testid": dataTestId,
+}: AccountNavLinkProps) => {
+  const active = route === href
+  return (
+    <LocalizedClientLink
+      href={href}
+      className={clx("text-ui-fg-subtle hover:text-ui-fg-base", {
+        "text-ui-fg-base font-semibold": active,
+      })}
+      data-testid={dataTestId}
+    >
+      {children}
+    </LocalizedClientLink>
+  )
+}
+
+export default AccountNav

package/templates/storefront/src/modules/account/components/address-book/index.tsx

@@ -0,0 +1,28 @@
+import React from "react"
+
+import AddAddress from "../address-card/add-address"
+import EditAddress from "../address-card/edit-address-modal"
+import { HttpTypes } from "@medusajs/types"
+
+type AddressBookProps = {
+  customer: HttpTypes.StoreCustomer
+  region: HttpTypes.StoreRegion
+}
+
+const AddressBook: React.FC<AddressBookProps> = ({ customer, region }) => {
+  const { addresses } = customer
+  return (
+    <div className="w-full">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 flex-1 mt-4">
+        <AddAddress region={region} addresses={addresses} />
+        {addresses.map((address) => {
+          return (
+            <EditAddress region={region} address={address} key={address.id} />
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default AddressBook

package/templates/storefront/src/modules/account/components/address-card/add-address.tsx

@@ -0,0 +1,169 @@
+"use client"
+
+
+import { T } from "@lib/boutique/i18n-client"
+import { Plus } from "@medusajs/icons"
+import { Button, Heading } from "@medusajs/ui"
+import { useEffect, useState, useActionState } from "react"
+
+import useToggleState from "@lib/hooks/use-toggle-state"
+import CountrySelect from "@modules/checkout/components/country-select"
+import Input from "@modules/common/components/input"
+import Modal from "@modules/common/components/modal"
+import { SubmitButton } from "@modules/checkout/components/submit-button"
+import { HttpTypes } from "@medusajs/types"
+import { addCustomerAddress } from "@lib/data/customer"
+
+const AddAddress = ({
+  region,
+  addresses,
+}: {
+  region: HttpTypes.StoreRegion
+  addresses: HttpTypes.StoreCustomerAddress[]
+}) => {
+  const [successState, setSuccessState] = useState(false)
+  const { state, open, close: closeModal } = useToggleState(false)
+
+  const [formState, formAction] = useActionState(addCustomerAddress, {
+    isDefaultShipping: addresses.length === 0,
+    success: false,
+    error: null,
+  })
+
+  const close = () => {
+    setSuccessState(false)
+    closeModal()
+  }
+
+  useEffect(() => {
+    if (successState) {
+      close()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [successState])
+
+  useEffect(() => {
+    if (formState.success) {
+      setSuccessState(true)
+    }
+  }, [formState])
+
+  return (
+    <>
+      <button
+        className="border border-ui-border-base rounded-rounded p-5 min-h-[220px] h-full w-full flex flex-col justify-between"
+        onClick={open}
+        data-testid="add-address-button"
+      >
+        <span className="text-base-semi">New address</span>
+        <Plus />
+      </button>
+
+      <Modal isOpen={state} close={close} data-testid="add-address-modal">
+        <Modal.Title>
+          <Heading className="mb-2">Add address</Heading>
+        </Modal.Title>
+        <form action={formAction}>
+          <Modal.Body>
+            <div className="flex flex-col gap-y-2">
+              <div className="grid grid-cols-2 gap-x-2">
+                <Input
+                  label="form.firstName"
+                  name="first_name"
+                  required
+                  autoComplete="given-name"
+                  data-testid="first-name-input"
+                />
+                <Input
+                  label="form.lastName"
+                  name="last_name"
+                  required
+                  autoComplete="family-name"
+                  data-testid="last-name-input"
+                />
+              </div>
+              <Input
+                label="form.company"
+                name="company"
+                autoComplete="organization"
+                data-testid="company-input"
+              />
+              <Input
+                label="form.address"
+                name="address_1"
+                required
+                autoComplete="address-line1"
+                data-testid="address-1-input"
+              />
+              <Input
+                label="form.address2"
+                name="address_2"
+                autoComplete="address-line2"
+                data-testid="address-2-input"
+              />
+              <div className="grid grid-cols-[144px_1fr] gap-x-2">
+                <Input
+                  label="form.postalCode"
+                  name="postal_code"
+                  required
+                  autoComplete="postal-code"
+                  data-testid="postal-code-input"
+                />
+                <Input
+                  label="form.city"
+                  name="city"
+                  required
+                  autoComplete="locality"
+                  data-testid="city-input"
+                />
+              </div>
+              <Input
+                label="form.province"
+                name="province"
+                autoComplete="address-level1"
+                data-testid="state-input"
+              />
+              <CountrySelect
+                region={region}
+                name="country_code"
+                required
+                autoComplete="country"
+                data-testid="country-select"
+              />
+              <Input
+                label="form.phone"
+                name="phone"
+                autoComplete="phone"
+                data-testid="phone-input"
+              />
+            </div>
+            {formState.error && (
+              <div
+                className="text-rose-500 text-small-regular py-2"
+                data-testid="address-error"
+              >
+                {formState.error}
+              </div>
+            )}
+          </Modal.Body>
+          <Modal.Footer>
+            <div className="flex gap-3 mt-6">
+              <Button
+                type="reset"
+                variant="secondary"
+                onClick={close}
+                className="h-10"
+                data-testid="cancel-button"
+              >
+                <T k="form.cancel" />
+              </Button>
+              <SubmitButton data-testid="save-button">Save</SubmitButton>
+            </div>
+          </Modal.Footer>
+        </form>
+      </Modal>
+    </>
+  )
+}
+
+export default AddAddress

package/templates/storefront/src/modules/account/components/address-card/edit-address-modal.tsx

@@ -0,0 +1,241 @@
+"use client"
+
+
+import { T } from "@lib/boutique/i18n-client"
+import React, { useEffect, useState, useActionState } from "react"
+import { PencilSquare as Edit, Trash } from "@medusajs/icons"
+import { Button, Heading, Text, clx } from "@medusajs/ui"
+
+import useToggleState from "@lib/hooks/use-toggle-state"
+import CountrySelect from "@modules/checkout/components/country-select"
+import Input from "@modules/common/components/input"
+import Modal from "@modules/common/components/modal"
+import Spinner from "@modules/common/icons/spinner"
+import { SubmitButton } from "@modules/checkout/components/submit-button"
+import { HttpTypes } from "@medusajs/types"
+import {
+  deleteCustomerAddress,
+  updateCustomerAddress,
+} from "@lib/data/customer"
+
+type EditAddressProps = {
+  region: HttpTypes.StoreRegion
+  address: HttpTypes.StoreCustomerAddress
+  isActive?: boolean
+}
+
+const EditAddress: React.FC<EditAddressProps> = ({
+  region,
+  address,
+  isActive = false,
+}) => {
+  const [removing, setRemoving] = useState(false)
+  const [successState, setSuccessState] = useState(false)
+  const { state, open, close: closeModal } = useToggleState(false)
+
+  const [formState, formAction] = useActionState(updateCustomerAddress, {
+    success: false,
+    error: null,
+    addressId: address.id,
+  })
+
+  const close = () => {
+    setSuccessState(false)
+    closeModal()
+  }
+
+  useEffect(() => {
+    if (successState) {
+      close()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [successState])
+
+  useEffect(() => {
+    if (formState.success) {
+      setSuccessState(true)
+    }
+  }, [formState])
+
+  const removeAddress = async () => {
+    setRemoving(true)
+    await deleteCustomerAddress(address.id)
+    setRemoving(false)
+  }
+
+  return (
+    <>
+      <div
+        className={clx(
+          "border rounded-rounded p-5 min-h-[220px] h-full w-full flex flex-col justify-between transition-colors",
+          {
+            "border-gray-900": isActive,
+          }
+        )}
+        data-testid="address-container"
+      >
+        <div className="flex flex-col">
+          <Heading
+            className="text-left text-base-semi"
+            data-testid="address-name"
+          >
+            {address.first_name} {address.last_name}
+          </Heading>
+          {address.company && (
+            <Text
+              className="txt-compact-small text-ui-fg-base"
+              data-testid="address-company"
+            >
+              {address.company}
+            </Text>
+          )}
+          <Text className="flex flex-col text-left text-base-regular mt-2">
+            <span data-testid="address-address">
+              {address.address_1}
+              {address.address_2 && <span>, {address.address_2}</span>}
+            </span>
+            <span data-testid="address-postal-city">
+              {address.postal_code}, {address.city}
+            </span>
+            <span data-testid="address-province-country">
+              {address.province && `${address.province}, `}
+              {address.country_code?.toUpperCase()}
+            </span>
+          </Text>
+        </div>
+        <div className="flex items-center gap-x-4">
+          <button
+            className="text-small-regular text-ui-fg-base flex items-center gap-x-2"
+            onClick={open}
+            data-testid="address-edit-button"
+          >
+            <Edit />
+            <T k="form.edit" />
+          </button>
+          <button
+            className="text-small-regular text-ui-fg-base flex items-center gap-x-2"
+            onClick={removeAddress}
+            data-testid="address-delete-button"
+          >
+            {removing ? <Spinner /> : <Trash />}
+            <T k="form.remove" />
+          </button>
+        </div>
+      </div>
+
+      <Modal isOpen={state} close={close} data-testid="edit-address-modal">
+        <Modal.Title>
+          <Heading className="mb-2">Edit address</Heading>
+        </Modal.Title>
+        <form action={formAction}>
+          <input type="hidden" name="addressId" value={address.id} />
+          <Modal.Body>
+            <div className="grid grid-cols-1 gap-y-2">
+              <div className="grid grid-cols-2 gap-x-2">
+                <Input
+                  label="form.firstName"
+                  name="first_name"
+                  required
+                  autoComplete="given-name"
+                  defaultValue={address.first_name || undefined}
+                  data-testid="first-name-input"
+                />
+                <Input
+                  label="form.lastName"
+                  name="last_name"
+                  required
+                  autoComplete="family-name"
+                  defaultValue={address.last_name || undefined}
+                  data-testid="last-name-input"
+                />
+              </div>
+              <Input
+                label="form.company"
+                name="company"
+                autoComplete="organization"
+                defaultValue={address.company || undefined}
+                data-testid="company-input"
+              />
+              <Input
+                label="form.address"
+                name="address_1"
+                required
+                autoComplete="address-line1"
+                defaultValue={address.address_1 || undefined}
+                data-testid="address-1-input"
+              />
+              <Input
+                label="form.address2"
+                name="address_2"
+                autoComplete="address-line2"
+                defaultValue={address.address_2 || undefined}
+                data-testid="address-2-input"
+              />
+              <div className="grid grid-cols-[144px_1fr] gap-x-2">
+                <Input
+                  label="form.postalCode"
+                  name="postal_code"
+                  required
+                  autoComplete="postal-code"
+                  defaultValue={address.postal_code || undefined}
+                  data-testid="postal-code-input"
+                />
+                <Input
+                  label="form.city"
+                  name="city"
+                  required
+                  autoComplete="locality"
+                  defaultValue={address.city || undefined}
+                  data-testid="city-input"
+                />
+              </div>
+              <Input
+                label="form.province"
+                name="province"
+                autoComplete="address-level1"
+                defaultValue={address.province || undefined}
+                data-testid="state-input"
+              />
+              <CountrySelect
+                name="country_code"
+                region={region}
+                required
+                autoComplete="country"
+                defaultValue={address.country_code || undefined}
+                data-testid="country-select"
+              />
+              <Input
+                label="form.phone"
+                name="phone"
+                autoComplete="phone"
+                defaultValue={address.phone || undefined}
+                data-testid="phone-input"
+              />
+            </div>
+            {formState.error && (
+              <div className="text-rose-500 text-small-regular py-2">
+                {formState.error}
+              </div>
+            )}
+          </Modal.Body>
+          <Modal.Footer>
+            <div className="flex gap-3 mt-6">
+              <Button
+                type="reset"
+                variant="secondary"
+                onClick={close}
+                className="h-10"
+                data-testid="cancel-button"
+              >
+                <T k="form.cancel" />
+              </Button>
+              <SubmitButton data-testid="save-button">Save</SubmitButton>
+            </div>
+          </Modal.Footer>
+        </form>
+      </Modal>
+    </>
+  )
+}
+
+export default EditAddress