@salifbiaye/create-boutique 0.1.1

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

@@ -0,0 +1,79 @@
+"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 ProfileName: React.FC<MyInformationProps> = ({ customer }) => {
+  const [successState, setSuccessState] = React.useState(false)
+
+  const updateCustomerName = async (
+    _currentState: Record<string, unknown>,
+    formData: FormData
+  ) => {
+    const customer = {
+      first_name: formData.get("first_name") as string,
+      last_name: formData.get("last_name") as string,
+    }
+
+    try {
+      await updateCustomer(customer)
+      return { success: true, error: null }
+    } catch (error: any) {
+      return { success: false, error: error.toString() }
+    }
+  }
+
+  const [state, formAction] = useActionState(updateCustomerName, {
+    error: false,
+    success: false,
+  })
+
+  const clearState = () => {
+    setSuccessState(false)
+  }
+
+  useEffect(() => {
+    setSuccessState(state.success)
+  }, [state])
+
+  return (
+    <form action={formAction} className="w-full overflow-visible">
+      <AccountInfo
+        label="form.name"
+        currentInfo={`${customer.first_name} ${customer.last_name}`}
+        isSuccess={successState}
+        isError={!!state?.error}
+        clearState={clearState}
+        data-testid="account-name-editor"
+      >
+        <div className="grid grid-cols-2 gap-x-4">
+          <Input
+            label="form.firstName"
+            name="first_name"
+            required
+            defaultValue={customer.first_name ?? ""}
+            data-testid="first-name-input"
+          />
+          <Input
+            label="form.lastName"
+            name="last_name"
+            required
+            defaultValue={customer.last_name ?? ""}
+            data-testid="last-name-input"
+          />
+        </div>
+      </AccountInfo>
+    </form>
+  )
+}
+
+export default ProfileName

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

@@ -0,0 +1,72 @@
+"use client"
+
+
+import { T } from "@lib/boutique/i18n-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 { toast } from "@medusajs/ui"
+
+type MyInformationProps = {
+  customer: HttpTypes.StoreCustomer
+}
+
+const ProfilePassword: React.FC<MyInformationProps> = ({ customer }) => {
+  const [successState, setSuccessState] = React.useState(false)
+
+  // TODO: Add support for password updates
+  const updatePassword = async () => {
+    toast.info("Password update is not implemented")
+  }
+
+  const clearState = () => {
+    setSuccessState(false)
+  }
+
+  return (
+    <form
+      action={updatePassword}
+      onReset={() => clearState()}
+      className="w-full"
+    >
+      <AccountInfo
+        label="form.password"
+        currentInfo={
+          <span><T k="account.passwordHidden" /></span>
+        }
+        isSuccess={successState}
+        isError={false}
+        errorMessage={undefined}
+        clearState={clearState}
+        data-testid="account-password-editor"
+      >
+        <div className="grid grid-cols-2 gap-4">
+          <Input
+            label="form.oldPassword"
+            name="old_password"
+            required
+            type="password"
+            data-testid="old-password-input"
+          />
+          <Input
+            label="form.newPassword"
+            type="password"
+            name="new_password"
+            required
+            data-testid="new-password-input"
+          />
+          <Input
+            label="form.confirmPassword"
+            type="password"
+            name="confirm_password"
+            required
+            data-testid="confirm-password-input"
+          />
+        </div>
+      </AccountInfo>
+    </form>
+  )
+}
+
+export default ProfilePassword

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

@@ -0,0 +1,74 @@
+"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)
+
+  const updateCustomerPhone = async (
+    _currentState: Record<string, unknown>,
+    formData: FormData
+  ) => {
+    const customer = {
+      phone: formData.get("phone") as string,
+    }
+
+    try {
+      await updateCustomer(customer)
+      return { success: true, error: null }
+    } catch (error: any) {
+      return { success: false, error: error.toString() }
+    }
+  }
+
+  const [state, formAction] = useActionState(updateCustomerPhone, {
+    error: false,
+    success: false,
+  })
+
+  const clearState = () => {
+    setSuccessState(false)
+  }
+
+  useEffect(() => {
+    setSuccessState(state.success)
+  }, [state])
+
+  return (
+    <form action={formAction} className="w-full">
+      <AccountInfo
+        label="form.phone"
+        currentInfo={`${customer.phone}`}
+        isSuccess={successState}
+        isError={!!state.error}
+        errorMessage={state.error}
+        clearState={clearState}
+        data-testid="account-phone-editor"
+      >
+        <div className="grid grid-cols-1 gap-y-2">
+          <Input
+            label="form.phone"
+            name="phone"
+            type="phone"
+            autoComplete="phone"
+            required
+            defaultValue={customer.phone ?? ""}
+            data-testid="phone-input"
+          />
+        </div>
+      </AccountInfo>
+    </form>
+  )
+}
+
+export default ProfileEmail

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

@@ -0,0 +1,107 @@
+"use client"
+
+
+import { T } from "@lib/boutique/i18n-client"
+import { useActionState } from "react"
+import Input from "@modules/common/components/input"
+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 LocalizedClientLink from "@modules/common/components/localized-client-link"
+import { signup } from "@lib/data/customer"
+
+type Props = {
+  setCurrentView: (view: LOGIN_VIEW) => void
+}
+
+const Register = ({ setCurrentView }: Props) => {
+  const [message, formAction] = useActionState(signup, null)
+
+  return (
+    <div
+      className="max-w-sm flex flex-col items-center"
+      data-testid="register-page"
+    >
+      <h1 className="text-large-semi uppercase mb-6">
+        <T k="account.becomeMember" />
+      </h1>
+      <p className="text-center text-base-regular text-ui-fg-base mb-4">
+        <T k="account.registerText" />
+      </p>
+      <form className="w-full flex flex-col" action={formAction}>
+        <div className="flex flex-col w-full gap-y-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"
+          />
+          <Input
+            label="form.email"
+            name="email"
+            required
+            type="email"
+            autoComplete="email"
+            data-testid="email-input"
+          />
+          <Input
+            label="form.phone"
+            name="phone"
+            type="tel"
+            autoComplete="tel"
+            data-testid="phone-input"
+          />
+          <Input
+            label="form.password"
+            name="password"
+            required
+            type="password"
+            autoComplete="new-password"
+            data-testid="password-input"
+          />
+        </div>
+        <ErrorMessage error={message} data-testid="register-error" />
+        <span className="text-center text-ui-fg-base text-small-regular mt-6">
+          <T k="account.agree" />{" "}
+          <LocalizedClientLink
+            href="/content/privacy-policy"
+            className="underline"
+          >
+            <T k="account.privacy" />
+          </LocalizedClientLink>{" "}
+          {" "}<T k="account.and" />{" "}
+          <LocalizedClientLink
+            href="/content/terms-of-use"
+            className="underline"
+          >
+            <T k="account.terms" />
+          </LocalizedClientLink>
+          .
+        </span>
+        <SubmitButton className="w-full mt-6" data-testid="register-button">
+          <T k="account.join" />
+        </SubmitButton>
+      </form>
+      <span className="text-center text-ui-fg-base text-small-regular mt-6">
+        <T k="account.alreadyMember" />{" "}
+        <button
+          onClick={() => setCurrentView(LOGIN_VIEW.SIGN_IN)}
+          className="underline"
+        >
+          <T k="account.signIn" />
+        </button>
+        .
+      </span>
+    </div>
+  )
+}
+
+export default Register

package/templates/storefront/src/modules/account/components/transfer-request-form/index.tsx

@@ -0,0 +1,83 @@
+"use client"
+
+
+import { T } from "@lib/boutique/i18n-client"
+import { useActionState } from "react"
+import { createTransferRequest } from "@lib/data/orders"
+import { Text, Heading, Input, Button, IconButton, Toaster } from "@medusajs/ui"
+import { SubmitButton } from "@modules/checkout/components/submit-button"
+import { CheckCircleMiniSolid, XCircleSolid } from "@medusajs/icons"
+import { useEffect, useState } from "react"
+
+export default function TransferRequestForm() {
+  const [showSuccess, setShowSuccess] = useState(false)
+
+  const [state, formAction] = useActionState(createTransferRequest, {
+    success: false,
+    error: null,
+    order: null,
+  })
+
+  useEffect(() => {
+    if (state.success && state.order) {
+      setShowSuccess(true)
+    }
+  }, [state.success, state.order])
+
+  return (
+    <div className="flex flex-col gap-y-4 w-full">
+      <div className="grid sm:grid-cols-2 items-center gap-x-8 gap-y-4 w-full">
+        <div className="flex flex-col gap-y-1">
+          <Heading level="h3" className="text-lg text-neutral-950">
+            <T k="account.orderTransfers" />
+          </Heading>
+          <Text className="text-base-regular text-neutral-500">
+            <T k="account.cantFind" />
+            <br /> <T k="account.connectOrder" />
+          </Text>
+        </div>
+        <form
+          action={formAction}
+          className="flex flex-col gap-y-1 sm:items-end"
+        >
+          <div className="flex flex-col gap-y-2 w-full">
+            <Input className="w-full" name="order_id" placeholder="Order ID" />
+            <SubmitButton
+              variant="secondary"
+              className="w-fit whitespace-nowrap self-end"
+            >
+              <T k="account.requestTransfer" />
+            </SubmitButton>
+          </div>
+        </form>
+      </div>
+      {!state.success && state.error && (
+        <Text className="text-base-regular text-rose-500 text-right">
+          {state.error}
+        </Text>
+      )}
+      {showSuccess && (
+        <div className="flex justify-between p-4 bg-neutral-50 shadow-borders-base w-full self-stretch items-center">
+          <div className="flex gap-x-2 items-center">
+            <CheckCircleMiniSolid className="w-4 h-4 text-emerald-500" />
+            <div className="flex flex-col gap-y-1">
+              <Text className="text-medim-pl text-neutral-950">
+                Transfer for order {state.order?.id} requested
+              </Text>
+              <Text className="text-base-regular text-neutral-600">
+                Transfer request email sent to {state.order?.email}
+              </Text>
+            </div>
+          </div>
+          <IconButton
+            variant="transparent"
+            className="h-fit"
+            onClick={() => setShowSuccess(false)}
+          >
+            <XCircleSolid className="w-4 h-4 text-neutral-500" />
+          </IconButton>
+        </div>
+      )}
+    </div>
+  )
+}

package/templates/storefront/src/modules/account/templates/account-layout.tsx

@@ -0,0 +1,43 @@
+import { T } from "@lib/boutique/i18n-client"
+import React from "react"
+
+import UnderlineLink from "@modules/common/components/interactive-link"
+
+import AccountNav from "../components/account-nav"
+import { HttpTypes } from "@medusajs/types"
+
+interface AccountLayoutProps {
+  customer: HttpTypes.StoreCustomer | null
+  children: React.ReactNode
+}
+
+const AccountLayout: React.FC<AccountLayoutProps> = ({
+  customer,
+  children,
+}) => {
+  return (
+    <div className="flex-1 small:py-12" data-testid="account-page">
+      <div className="flex-1 content-container h-full max-w-5xl mx-auto bg-white flex flex-col">
+        <div className="grid grid-cols-1  small:grid-cols-[240px_1fr] py-12">
+          <div>{customer && <AccountNav customer={customer} />}</div>
+          <div className="flex-1">{children}</div>
+        </div>
+        <div className="flex flex-col small:flex-row items-end justify-between small:border-t border-gray-200 py-12 gap-8">
+          <div>
+            <h3 className="text-xl-semi mb-4"><T k="account.questions" /></h3>
+            <span className="txt-medium">
+              <T k="account.questionsText" />
+            </span>
+          </div>
+          <div>
+            <UnderlineLink href="/legal/contact">
+              <T k="account.contactUs" />
+            </UnderlineLink>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default AccountLayout

package/templates/storefront/src/modules/account/templates/login-template.tsx

@@ -0,0 +1,27 @@
+"use client"
+
+import { useState } from "react"
+
+import Register from "@modules/account/components/register"
+import Login from "@modules/account/components/login"
+
+export enum LOGIN_VIEW {
+  SIGN_IN = "sign-in",
+  REGISTER = "register",
+}
+
+const LoginTemplate = () => {
+  const [currentView, setCurrentView] = useState("sign-in")
+
+  return (
+    <div className="w-full flex justify-start px-8 py-8">
+      {currentView === "sign-in" ? (
+        <Login setCurrentView={setCurrentView} />
+      ) : (
+        <Register setCurrentView={setCurrentView} />
+      )}
+    </div>
+  )
+}
+
+export default LoginTemplate

package/templates/storefront/src/modules/cart/components/cart-item-select/index.tsx

@@ -0,0 +1,75 @@
+"use client"
+
+import { IconBadge, clx } from "@medusajs/ui"
+import {
+  SelectHTMLAttributes,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from "react"
+import { useT } from "@lib/boutique/i18n-client"
+
+import ChevronDown from "@modules/common/icons/chevron-down"
+
+type NativeSelectProps = {
+  placeholder?: string
+  errors?: Record<string, unknown>
+  touched?: Record<string, unknown>
+} & Omit<SelectHTMLAttributes<HTMLSelectElement>, "size">
+
+const CartItemSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
+  ({ placeholder = "form.select", className, children, ...props }, ref) => {
+    const t = useT()
+    const innerRef = useRef<HTMLSelectElement>(null)
+    const [isPlaceholder, setIsPlaceholder] = useState(false)
+
+    useImperativeHandle<HTMLSelectElement | null, HTMLSelectElement | null>(
+      ref,
+      () => innerRef.current
+    )
+
+    useEffect(() => {
+      if (innerRef.current && innerRef.current.value === "") {
+        setIsPlaceholder(true)
+      } else {
+        setIsPlaceholder(false)
+      }
+    }, [innerRef.current?.value])
+
+    return (
+      <div>
+        <IconBadge
+          onFocus={() => innerRef.current?.focus()}
+          onBlur={() => innerRef.current?.blur()}
+          className={clx(
+            "relative flex items-center txt-compact-small border text-ui-fg-base group",
+            className,
+            {
+              "text-ui-fg-subtle": isPlaceholder,
+            }
+          )}
+        >
+          <select
+            ref={innerRef}
+            {...props}
+            className="appearance-none bg-transparent border-none px-4 transition-colors duration-150 focus:border-gray-700 outline-none w-16 h-16 items-center justify-center"
+          >
+            <option disabled value="">
+              {t(placeholder)}
+            </option>
+            {children}
+          </select>
+          <span className="absolute flex pointer-events-none justify-end w-8 group-hover:animate-pulse">
+            <ChevronDown />
+          </span>
+        </IconBadge>
+      </div>
+    )
+  }
+)
+
+CartItemSelect.displayName = "CartItemSelect"
+
+export default CartItemSelect

package/templates/storefront/src/modules/cart/components/empty-cart-message/index.tsx

@@ -0,0 +1,25 @@
+import { T } from "@lib/boutique/i18n-client"
+import { Heading, Text } from "@medusajs/ui"
+
+import InteractiveLink from "@modules/common/components/interactive-link"
+
+const EmptyCartMessage = () => {
+  return (
+    <div className="py-48 px-2 flex flex-col justify-center items-start" data-testid="empty-cart-message">
+      <Heading
+        level="h1"
+        className="flex flex-row text-3xl-regular gap-x-2 items-baseline"
+      >
+        <T k="cart.title" />
+      </Heading>
+      <Text className="text-base-regular mt-4 mb-6 max-w-[32rem]">
+        <T k="cart.empty" />
+      </Text>
+      <div>
+        <InteractiveLink href="/store"><T k="cart.explore" /></InteractiveLink>
+      </div>
+    </div>
+  )
+}
+
+export default EmptyCartMessage