@salifbiaye/create-boutique 0.1.1

package/templates/storefront/src/modules/account/components/login/index.tsx

@@ -0,0 +1,65 @@
+import { T } from "@lib/boutique/i18n-client"
+import { login } from "@lib/data/customer"
+import { LOGIN_VIEW } from "@modules/account/templates/login-template"
+import ErrorMessage from "@modules/checkout/components/error-message"
+import { SubmitButton } from "@modules/checkout/components/submit-button"
+import Input from "@modules/common/components/input"
+import { useActionState } from "react"
+
+type Props = {
+  setCurrentView: (view: LOGIN_VIEW) => void
+}
+
+const Login = ({ setCurrentView }: Props) => {
+  const [message, formAction] = useActionState(login, null)
+
+  return (
+    <div
+      className="max-w-sm w-full flex flex-col items-center"
+      data-testid="login-page"
+    >
+      <h1 className="text-large-semi uppercase mb-6"><T k="account.welcomeBack" /></h1>
+      <p className="text-center text-base-regular text-ui-fg-base mb-8">
+        <T k="account.signInText" />
+      </p>
+      <form className="w-full" action={formAction}>
+        <div className="flex flex-col w-full gap-y-2">
+          <Input
+            label="form.email"
+            name="email"
+            type="email"
+            title="form.emailInvalid"
+            autoComplete="email"
+            required
+            data-testid="email-input"
+          />
+          <Input
+            label="form.password"
+            name="password"
+            type="password"
+            autoComplete="current-password"
+            required
+            data-testid="password-input"
+          />
+        </div>
+        <ErrorMessage error={message} data-testid="login-error-message" />
+        <SubmitButton data-testid="sign-in-button" className="w-full mt-6">
+          <T k="account.signIn" />
+        </SubmitButton>
+      </form>
+      <span className="text-center text-ui-fg-base text-small-regular mt-6">
+        <T k="account.notMember" />{" "}
+        <button
+          onClick={() => setCurrentView(LOGIN_VIEW.REGISTER)}
+          className="underline"
+          data-testid="register-button"
+        >
+          <T k="account.joinUs" />
+        </button>
+        .
+      </span>
+    </div>
+  )
+}
+
+export default Login

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

@@ -0,0 +1,88 @@
+import { T } from "@lib/boutique/i18n-client"
+import { Button } from "@medusajs/ui"
+import { useMemo } from "react"
+
+import Thumbnail from "@modules/products/components/thumbnail"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import { convertToLocale } from "@lib/util/money"
+import { HttpTypes } from "@medusajs/types"
+
+type OrderCardProps = {
+  order: HttpTypes.StoreOrder
+}
+
+const OrderCard = ({ order }: OrderCardProps) => {
+  const numberOfLines = useMemo(() => {
+    return (
+      order.items?.reduce((acc, item) => {
+        return acc + item.quantity
+      }, 0) ?? 0
+    )
+  }, [order])
+
+  const numberOfProducts = useMemo(() => {
+    return order.items?.length ?? 0
+  }, [order])
+
+  return (
+    <div className="bg-white flex flex-col" data-testid="order-card">
+      <div className="uppercase text-large-semi mb-1">
+        #<span data-testid="order-display-id">{order.display_id}</span>
+      </div>
+      <div className="flex items-center divide-x divide-gray-200 text-small-regular text-ui-fg-base">
+        <span className="pr-2" data-testid="order-created-at">
+          {new Date(order.created_at).toDateString()}
+        </span>
+        <span className="px-2" data-testid="order-amount">
+          {convertToLocale({
+            amount: order.total,
+            currency_code: order.currency_code,
+          })}
+        </span>
+        <span className="pl-2">{`${numberOfLines} ${
+          numberOfLines > 1 ? "items" : "item"
+        }`}</span>
+      </div>
+      <div className="grid grid-cols-2 small:grid-cols-4 gap-4 my-4">
+        {order.items?.slice(0, 3).map((i) => {
+          return (
+            <div
+              key={i.id}
+              className="flex flex-col gap-y-2"
+              data-testid="order-item"
+            >
+              <Thumbnail thumbnail={i.thumbnail} images={[]} size="full" />
+              <div className="flex items-center text-small-regular text-ui-fg-base">
+                <span
+                  className="text-ui-fg-base font-semibold"
+                  data-testid="item-title"
+                >
+                  {i.title}
+                </span>
+                <span className="ml-2">x</span>
+                <span data-testid="item-quantity">{i.quantity}</span>
+              </div>
+            </div>
+          )
+        })}
+        {numberOfProducts > 4 && (
+          <div className="w-full h-full flex flex-col items-center justify-center">
+            <span className="text-small-regular text-ui-fg-base">
+              + {numberOfLines - 4}
+            </span>
+            <span className="text-small-regular text-ui-fg-base">more</span>
+          </div>
+        )}
+      </div>
+      <div className="flex justify-end">
+        <LocalizedClientLink href={`/account/orders/details/${order.id}`}>
+          <Button data-testid="order-details-link" variant="secondary">
+            <T k="order.seeDetails" />
+          </Button>
+        </LocalizedClientLink>
+      </div>
+    </div>
+  )
+}
+
+export default OrderCard

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

@@ -0,0 +1,47 @@
+"use client"
+
+
+import { T } from "@lib/boutique/i18n-client"
+import { Button } from "@medusajs/ui"
+
+import OrderCard from "../order-card"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import { HttpTypes } from "@medusajs/types"
+
+const OrderOverview = ({ orders }: { orders: HttpTypes.StoreOrder[] }) => {
+  if (orders?.length) {
+    return (
+      <div className="flex flex-col gap-y-8 w-full">
+        {orders.map((o) => (
+          <div
+            key={o.id}
+            className="border-b border-gray-200 pb-6 last:pb-0 last:border-none"
+          >
+            <OrderCard order={o} />
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className="w-full flex flex-col items-center gap-y-4"
+      data-testid="no-orders-container"
+    >
+      <h2 className="text-large-semi"><T k="account.nothingToSee" /></h2>
+      <p className="text-base-regular">
+        You don&apos;t have any orders yet, let us change that {":)"}
+      </p>
+      <div className="mt-4">
+        <LocalizedClientLink href="/" passHref>
+          <Button data-testid="continue-shopping-button">
+            <T k="order.continueShopping" />
+          </Button>
+        </LocalizedClientLink>
+      </div>
+    </div>
+  )
+}
+
+export default OrderOverview

package/templates/storefront/src/modules/account/components/overview/index.tsx

@@ -0,0 +1,169 @@
+import { T } from "@lib/boutique/i18n-client"
+import { Container } from "@medusajs/ui"
+
+import ChevronDown from "@modules/common/icons/chevron-down"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import { convertToLocale } from "@lib/util/money"
+import { HttpTypes } from "@medusajs/types"
+
+type OverviewProps = {
+  customer: HttpTypes.StoreCustomer | null
+  orders: HttpTypes.StoreOrder[] | null
+}
+
+const Overview = ({ customer, orders }: OverviewProps) => {
+  return (
+    <div data-testid="overview-page-wrapper">
+      <div className="hidden small:block">
+        <div className="text-xl-semi flex justify-between items-center mb-4">
+          <span data-testid="welcome-message" data-value={customer?.first_name}>
+            <T k="account.hello" vars={{ name: customer?.first_name ?? "" }} />
+          </span>
+          <span className="text-small-regular text-ui-fg-base">
+            <T k="account.signedInAs" />{" "}
+            <span
+              className="font-semibold"
+              data-testid="customer-email"
+              data-value={customer?.email}
+            >
+              {customer?.email}
+            </span>
+          </span>
+        </div>
+        <div className="flex flex-col py-8 border-t border-gray-200">
+          <div className="flex flex-col gap-y-4 h-full col-span-1 row-span-2 flex-1">
+            <div className="flex items-start gap-x-16 mb-6">
+              <div className="flex flex-col gap-y-4">
+                <h3 className="text-large-semi"><T k="account.profile" /></h3>
+                <div className="flex items-end gap-x-2">
+                  <span
+                    className="text-3xl-semi leading-none"
+                    data-testid="customer-profile-completion"
+                    data-value={getProfileCompletion(customer)}
+                  >
+                    {getProfileCompletion(customer)}%
+                  </span>
+                  <span className="uppercase text-base-regular text-ui-fg-subtle">
+                    <T k="account.completed" />
+                  </span>
+                </div>
+              </div>
+
+              <div className="flex flex-col gap-y-4">
+                <h3 className="text-large-semi"><T k="account.addresses" /></h3>
+                <div className="flex items-end gap-x-2">
+                  <span
+                    className="text-3xl-semi leading-none"
+                    data-testid="addresses-count"
+                    data-value={customer?.addresses?.length || 0}
+                  >
+                    {customer?.addresses?.length || 0}
+                  </span>
+                  <span className="uppercase text-base-regular text-ui-fg-subtle">
+                    <T k="account.saved" />
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <div className="flex flex-col gap-y-4">
+              <div className="flex items-center gap-x-2">
+                <h3 className="text-large-semi"><T k="account.recentOrders" /></h3>
+              </div>
+              <ul
+                className="flex flex-col gap-y-4"
+                data-testid="orders-wrapper"
+              >
+                {orders && orders.length > 0 ? (
+                  orders.slice(0, 5).map((order) => {
+                    return (
+                      <li
+                        key={order.id}
+                        data-testid="order-wrapper"
+                        data-value={order.id}
+                      >
+                        <LocalizedClientLink
+                          href={`/account/orders/details/${order.id}`}
+                        >
+                          <Container className="bg-gray-50 flex justify-between items-center p-4">
+                            <div className="grid grid-cols-3 grid-rows-2 text-small-regular gap-x-4 flex-1">
+                              <span className="font-semibold">Date placed</span>
+                              <span className="font-semibold">
+                                <T k="account.orderNumber" />
+                              </span>
+                              <span className="font-semibold">
+                                <T k="account.totalAmount" />
+                              </span>
+                              <span data-testid="order-created-date">
+                                {new Date(order.created_at).toDateString()}
+                              </span>
+                              <span
+                                data-testid="order-id"
+                                data-value={order.display_id}
+                              >
+                                #{order.display_id}
+                              </span>
+                              <span data-testid="order-amount">
+                                {convertToLocale({
+                                  amount: order.total,
+                                  currency_code: order.currency_code,
+                                })}
+                              </span>
+                            </div>
+                            <button
+                              className="flex items-center justify-between"
+                              data-testid="open-order-button"
+                            >
+                              <span className="sr-only">
+                                Go to order #{order.display_id}
+                              </span>
+                              <ChevronDown className="-rotate-90" />
+                            </button>
+                          </Container>
+                        </LocalizedClientLink>
+                      </li>
+                    )
+                  })
+                ) : (
+                  <span data-testid="no-orders-message"><T k="account.noRecentOrders" /></span>
+                )}
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+const getProfileCompletion = (customer: HttpTypes.StoreCustomer | null) => {
+  let count = 0
+
+  if (!customer) {
+    return 0
+  }
+
+  if (customer.email) {
+    count++
+  }
+
+  if (customer.first_name && customer.last_name) {
+    count++
+  }
+
+  if (customer.phone) {
+    count++
+  }
+
+  const billingAddress = customer.addresses?.find(
+    (addr) => addr.is_default_billing
+  )
+
+  if (billingAddress) {
+    count++
+  }
+
+  return (count / 4) * 100
+}
+
+export default Overview

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

@@ -0,0 +1,193 @@
+"use client"
+
+import React, { useEffect, useMemo, useActionState } from "react"
+
+import { useT } from "@lib/boutique/i18n-client"
+import Input from "@modules/common/components/input"
+import NativeSelect from "@modules/common/components/native-select"
+
+import AccountInfo from "../account-info"
+import { HttpTypes } from "@medusajs/types"
+import { addCustomerAddress, updateCustomerAddress } from "@lib/data/customer"
+
+type MyInformationProps = {
+  customer: HttpTypes.StoreCustomer
+  regions: HttpTypes.StoreRegion[]
+}
+
+const ProfileBillingAddress: React.FC<MyInformationProps> = ({
+  customer,
+  regions,
+}) => {
+  const t = useT()
+  const regionOptions = useMemo(() => {
+    return (
+      regions
+        ?.map((region) => {
+          return region.countries?.map((country) => ({
+            value: country.iso_2,
+            label: country.display_name,
+          }))
+        })
+        .flat() || []
+    )
+  }, [regions])
+
+  const [successState, setSuccessState] = React.useState(false)
+
+  const billingAddress = customer.addresses?.find(
+    (addr) => addr.is_default_billing
+  )
+
+  const initialState: Record<string, any> = {
+    isDefaultBilling: true,
+    isDefaultShipping: false,
+    error: false,
+    success: false,
+  }
+
+  if (billingAddress) {
+    initialState.addressId = billingAddress.id
+  }
+
+  const [state, formAction] = useActionState(
+    billingAddress ? updateCustomerAddress : addCustomerAddress,
+    initialState
+  )
+
+  const clearState = () => {
+    setSuccessState(false)
+  }
+
+  useEffect(() => {
+    setSuccessState(state.success)
+  }, [state])
+
+  const currentInfo = useMemo(() => {
+    if (!billingAddress) {
+      return t("account.noBilling")
+    }
+
+    const country =
+      regionOptions?.find(
+        (country) => country?.value === billingAddress.country_code
+      )?.label || billingAddress.country_code?.toUpperCase()
+
+    return (
+      <div className="flex flex-col font-semibold" data-testid="current-info">
+        <span>
+          {billingAddress.first_name} {billingAddress.last_name}
+        </span>
+        <span>{billingAddress.company}</span>
+        <span>
+          {billingAddress.address_1}
+          {billingAddress.address_2 ? `, ${billingAddress.address_2}` : ""}
+        </span>
+        <span>
+          {billingAddress.postal_code}, {billingAddress.city}
+        </span>
+        <span>{country}</span>
+      </div>
+    )
+  }, [billingAddress, regionOptions])
+
+  return (
+    <form action={formAction} onReset={() => clearState()} className="w-full">
+      <input type="hidden" name="addressId" value={billingAddress?.id} />
+      <AccountInfo
+        label="form.billingAddress"
+        currentInfo={currentInfo}
+        isSuccess={successState}
+        isError={!!state.error}
+        clearState={clearState}
+        data-testid="account-billing-address-editor"
+      >
+        <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"
+              defaultValue={billingAddress?.first_name || undefined}
+              required
+              data-testid="billing-first-name-input"
+            />
+            <Input
+              label="form.lastName"
+              name="last_name"
+              defaultValue={billingAddress?.last_name || undefined}
+              required
+              data-testid="billing-last-name-input"
+            />
+          </div>
+          <Input
+            label="form.company"
+            name="company"
+            defaultValue={billingAddress?.company || undefined}
+            data-testid="billing-company-input"
+          />
+          <Input
+            label="form.phone"
+            name="phone"
+            type="phone"
+            autoComplete="phone"
+            required
+            defaultValue={billingAddress?.phone ?? customer?.phone ?? ""}
+            data-testid="billing-phone-input"
+          />
+          <Input
+            label="form.address"
+            name="address_1"
+            defaultValue={billingAddress?.address_1 || undefined}
+            required
+            data-testid="billing-address-1-input"
+          />
+          <Input
+            label="form.address2"
+            name="address_2"
+            defaultValue={billingAddress?.address_2 || undefined}
+            data-testid="billing-address-2-input"
+          />
+          <div className="grid grid-cols-[144px_1fr] gap-x-2">
+            <Input
+              label="form.postalCode"
+              name="postal_code"
+              defaultValue={billingAddress?.postal_code || undefined}
+              required
+              data-testid="billing-postcal-code-input"
+            />
+            <Input
+              label="form.city"
+              name="city"
+              defaultValue={billingAddress?.city || undefined}
+              required
+              data-testid="billing-city-input"
+            />
+          </div>
+          <Input
+            label="form.province"
+            name="province"
+            defaultValue={billingAddress?.province || undefined}
+            data-testid="billing-province-input"
+          />
+          <NativeSelect
+            name="country_code"
+            defaultValue={billingAddress?.country_code || undefined}
+            required
+            data-testid="billing-country-code-select"
+          >
+            <option value="">-</option>
+            {regionOptions.map((option, i) => {
+              return (
+                <option key={i} value={option?.value}>
+                  {option?.label}
+                </option>
+              )
+            })}
+          </NativeSelect>
+        </div>
+      </AccountInfo>
+    </form>
+  )
+}
+
+export default ProfileBillingAddress

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

@@ -0,0 +1,75 @@
+"use client"
+
+import React, { useEffect, useActionState } from "react";
+
+import Input from "@modules/common/components/input"
+
+import AccountInfo from "../account-info"
+import { HttpTypes } from "@medusajs/types"
+// import { updateCustomer } from "@lib/data/customer"
+
+type MyInformationProps = {
+  customer: HttpTypes.StoreCustomer
+}
+
+const ProfileEmail: React.FC<MyInformationProps> = ({ customer }) => {
+  const [successState, setSuccessState] = React.useState(false)
+
+  // TODO: It seems we don't support updating emails now?
+  const updateCustomerEmail = (
+    _currentState: Record<string, unknown>,
+    formData: FormData
+  ) => {
+    const customer = {
+      email: formData.get("email") as string,
+    }
+
+    try {
+      // await updateCustomer(customer)
+      return { success: true, error: null }
+    } catch (error: any) {
+      return { success: false, error: error.toString() }
+    }
+  }
+
+  const [state, formAction] = useActionState(updateCustomerEmail, {
+    error: false,
+    success: false,
+  })
+
+  const clearState = () => {
+    setSuccessState(false)
+  }
+
+  useEffect(() => {
+    setSuccessState(state.success)
+  }, [state])
+
+  return (
+    <form action={formAction} className="w-full">
+      <AccountInfo
+        label="form.email"
+        currentInfo={`${customer.email}`}
+        isSuccess={successState}
+        isError={!!state.error}
+        errorMessage={state.error}
+        clearState={clearState}
+        data-testid="account-email-editor"
+      >
+        <div className="grid grid-cols-1 gap-y-2">
+          <Input
+            label="form.email"
+            name="email"
+            type="email"
+            autoComplete="email"
+            required
+            defaultValue={customer.email}
+            data-testid="email-input"
+          />
+        </div>
+      </AccountInfo>
+    </form>
+  )
+}
+
+export default ProfileEmail