@salifbiaye/create-boutique 0.1.1

package/templates/storefront/src/modules/checkout/components/addresses/index.tsx

@@ -0,0 +1,186 @@
+"use client"
+
+
+import { T } from "@lib/boutique/i18n-client"
+import { setAddresses } from "@lib/data/cart"
+import compareAddresses from "@lib/util/compare-addresses"
+import { CheckCircleSolid } from "@medusajs/icons"
+import { HttpTypes } from "@medusajs/types"
+import { Heading, Text, useToggleState } from "@medusajs/ui"
+import Divider from "@modules/common/components/divider"
+import Spinner from "@modules/common/icons/spinner"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { useActionState } from "react"
+import BillingAddress from "../billing_address"
+import ErrorMessage from "../error-message"
+import ShippingAddress from "../shipping-address"
+import { SubmitButton } from "../submit-button"
+
+const Addresses = ({
+  cart,
+  customer,
+}: {
+  cart: HttpTypes.StoreCart | null
+  customer: HttpTypes.StoreCustomer | null
+}) => {
+  const searchParams = useSearchParams()
+  const router = useRouter()
+  const pathname = usePathname()
+
+  const isOpen = searchParams.get("step") === "address"
+
+  const { state: sameAsBilling, toggle: toggleSameAsBilling } = useToggleState(
+    cart?.shipping_address && cart?.billing_address
+      ? compareAddresses(cart?.shipping_address, cart?.billing_address)
+      : true
+  )
+
+  const handleEdit = () => {
+    router.push(pathname + "?step=address")
+  }
+
+  const [message, formAction] = useActionState(setAddresses, null)
+
+  return (
+    <div className="bg-white">
+      <div className="flex flex-row items-center justify-between mb-6">
+        <Heading
+          level="h2"
+          className="flex flex-row text-3xl-regular gap-x-2 items-baseline"
+        >
+          <T k="checkout.shippingAddress" />
+          {!isOpen && <CheckCircleSolid />}
+        </Heading>
+        {!isOpen && cart?.shipping_address && (
+          <Text>
+            <button
+              onClick={handleEdit}
+              className="text-ui-fg-interactive hover:text-ui-fg-interactive-hover"
+              data-testid="edit-address-button"
+            >
+              <T k="form.edit" />
+            </button>
+          </Text>
+        )}
+      </div>
+      {isOpen ? (
+        <form action={formAction}>
+          <div className="pb-8">
+            <ShippingAddress
+              customer={customer}
+              checked={sameAsBilling}
+              onChange={toggleSameAsBilling}
+              cart={cart}
+            />
+
+            {!sameAsBilling && (
+              <div>
+                <Heading
+                  level="h2"
+                  className="text-3xl-regular gap-x-4 pb-6 pt-8"
+                >
+                  <T k="form.billingAddress" />
+                </Heading>
+
+                <BillingAddress cart={cart} />
+              </div>
+            )}
+            <SubmitButton className="mt-6" data-testid="submit-address-button">
+              <T k="checkout.continueDelivery" />
+            </SubmitButton>
+            <ErrorMessage error={message} data-testid="address-error-message" />
+          </div>
+        </form>
+      ) : (
+        <div>
+          <div className="text-small-regular">
+            {cart && cart.shipping_address ? (
+              <div className="flex items-start gap-x-8">
+                <div className="flex items-start gap-x-1 w-full">
+                  <div
+                    className="flex flex-col w-1/3"
+                    data-testid="shipping-address-summary"
+                  >
+                    <Text className="txt-medium-plus text-ui-fg-base mb-1">
+                      <T k="checkout.shippingAddress" />
+                    </Text>
+                    <Text className="txt-medium text-ui-fg-subtle">
+                      {cart.shipping_address.first_name}{" "}
+                      {cart.shipping_address.last_name}
+                    </Text>
+                    <Text className="txt-medium text-ui-fg-subtle">
+                      {cart.shipping_address.address_1}{" "}
+                      {cart.shipping_address.address_2}
+                    </Text>
+                    <Text className="txt-medium text-ui-fg-subtle">
+                      {cart.shipping_address.postal_code},{" "}
+                      {cart.shipping_address.city}
+                    </Text>
+                    <Text className="txt-medium text-ui-fg-subtle">
+                      {cart.shipping_address.country_code?.toUpperCase()}
+                    </Text>
+                  </div>
+
+                  <div
+                    className="flex flex-col w-1/3 "
+                    data-testid="shipping-contact-summary"
+                  >
+                    <Text className="txt-medium-plus text-ui-fg-base mb-1">
+                      <T k="checkout.contact" />
+                    </Text>
+                    <Text className="txt-medium text-ui-fg-subtle">
+                      {cart.shipping_address.phone}
+                    </Text>
+                    <Text className="txt-medium text-ui-fg-subtle">
+                      {cart.email}
+                    </Text>
+                  </div>
+
+                  <div
+                    className="flex flex-col w-1/3"
+                    data-testid="billing-address-summary"
+                  >
+                    <Text className="txt-medium-plus text-ui-fg-base mb-1">
+                      <T k="checkout.billingAddress" />
+                    </Text>
+
+                    {sameAsBilling ? (
+                      <Text className="txt-medium text-ui-fg-subtle">
+                        <T k="checkout.sameAddress" />
+                      </Text>
+                    ) : (
+                      <>
+                        <Text className="txt-medium text-ui-fg-subtle">
+                          {cart.billing_address?.first_name}{" "}
+                          {cart.billing_address?.last_name}
+                        </Text>
+                        <Text className="txt-medium text-ui-fg-subtle">
+                          {cart.billing_address?.address_1}{" "}
+                          {cart.billing_address?.address_2}
+                        </Text>
+                        <Text className="txt-medium text-ui-fg-subtle">
+                          {cart.billing_address?.postal_code},{" "}
+                          {cart.billing_address?.city}
+                        </Text>
+                        <Text className="txt-medium text-ui-fg-subtle">
+                          {cart.billing_address?.country_code?.toUpperCase()}
+                        </Text>
+                      </>
+                    )}
+                  </div>
+                </div>
+              </div>
+            ) : (
+              <div>
+                <Spinner />
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+      <Divider className="mt-8" />
+    </div>
+  )
+}
+
+export default Addresses

package/templates/storefront/src/modules/checkout/components/billing_address/index.tsx

@@ -0,0 +1,114 @@
+import { HttpTypes } from "@medusajs/types"
+import Input from "@modules/common/components/input"
+import React, { useState } from "react"
+import CountrySelect from "../country-select"
+
+const BillingAddress = ({ cart }: { cart: HttpTypes.StoreCart | null }) => {
+  const [formData, setFormData] = useState<any>({
+    "billing_address.first_name": cart?.billing_address?.first_name || "",
+    "billing_address.last_name": cart?.billing_address?.last_name || "",
+    "billing_address.address_1": cart?.billing_address?.address_1 || "",
+    "billing_address.company": cart?.billing_address?.company || "",
+    "billing_address.postal_code": cart?.billing_address?.postal_code || "",
+    "billing_address.city": cart?.billing_address?.city || "",
+    "billing_address.country_code": cart?.billing_address?.country_code || "",
+    "billing_address.province": cart?.billing_address?.province || "",
+    "billing_address.phone": cart?.billing_address?.phone || "",
+  })
+
+  const handleChange = (
+    e: React.ChangeEvent<
+      HTMLInputElement | HTMLInputElement | HTMLSelectElement
+    >
+  ) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    })
+  }
+
+  return (
+    <>
+      <div className="grid grid-cols-2 gap-4">
+        <Input
+          label="form.firstName"
+          name="billing_address.first_name"
+          autoComplete="given-name"
+          value={formData["billing_address.first_name"]}
+          onChange={handleChange}
+          required
+          data-testid="billing-first-name-input"
+        />
+        <Input
+          label="form.lastName"
+          name="billing_address.last_name"
+          autoComplete="family-name"
+          value={formData["billing_address.last_name"]}
+          onChange={handleChange}
+          required
+          data-testid="billing-last-name-input"
+        />
+        <Input
+          label="form.address"
+          name="billing_address.address_1"
+          autoComplete="address-line1"
+          value={formData["billing_address.address_1"]}
+          onChange={handleChange}
+          required
+          data-testid="billing-address-input"
+        />
+        <Input
+          label="form.company"
+          name="billing_address.company"
+          value={formData["billing_address.company"]}
+          onChange={handleChange}
+          autoComplete="organization"
+          data-testid="billing-company-input"
+        />
+        <Input
+          label="form.postalCode"
+          name="billing_address.postal_code"
+          autoComplete="postal-code"
+          value={formData["billing_address.postal_code"]}
+          onChange={handleChange}
+          required
+          data-testid="billing-postal-input"
+        />
+        <Input
+          label="form.city"
+          name="billing_address.city"
+          autoComplete="address-level2"
+          value={formData["billing_address.city"]}
+          onChange={handleChange}
+        />
+        <CountrySelect
+          name="billing_address.country_code"
+          autoComplete="country"
+          region={cart?.region}
+          value={formData["billing_address.country_code"]}
+          onChange={handleChange}
+          required
+          data-testid="billing-country-select"
+        />
+        <Input
+          label="form.province"
+          name="billing_address.province"
+          autoComplete="address-level1"
+          value={formData["billing_address.province"]}
+          onChange={handleChange}
+          data-testid="billing-province-input"
+        />
+        <Input
+          label="form.phone"
+          name="billing_address.phone"
+          autoComplete="tel"
+          value={formData["billing_address.phone"]}
+          onChange={handleChange}
+          data-testid="billing-phone-input"
+        />
+      </div>
+    </>
+  )
+}
+
+export default BillingAddress

package/templates/storefront/src/modules/checkout/components/country-select/index.tsx

@@ -0,0 +1,50 @@
+import { forwardRef, useImperativeHandle, useMemo, useRef } from "react"
+
+import NativeSelect, {
+  NativeSelectProps,
+} from "@modules/common/components/native-select"
+import { HttpTypes } from "@medusajs/types"
+
+const CountrySelect = forwardRef<
+  HTMLSelectElement,
+  NativeSelectProps & {
+    region?: HttpTypes.StoreRegion
+  }
+>(({ placeholder = "Country", region, defaultValue, ...props }, ref) => {
+  const innerRef = useRef<HTMLSelectElement>(null)
+
+  useImperativeHandle<HTMLSelectElement | null, HTMLSelectElement | null>(
+    ref,
+    () => innerRef.current
+  )
+
+  const countryOptions = useMemo(() => {
+    if (!region) {
+      return []
+    }
+
+    return region.countries?.map((country) => ({
+      value: country.iso_2,
+      label: country.display_name,
+    }))
+  }, [region])
+
+  return (
+    <NativeSelect
+      ref={innerRef}
+      placeholder={placeholder}
+      defaultValue={defaultValue}
+      {...props}
+    >
+      {countryOptions?.map(({ value, label }, index) => (
+        <option key={index} value={value}>
+          {label}
+        </option>
+      ))}
+    </NativeSelect>
+  )
+})
+
+CountrySelect.displayName = "CountrySelect"
+
+export default CountrySelect

package/templates/storefront/src/modules/checkout/components/discount-code/index.tsx

@@ -0,0 +1,181 @@
+"use client"
+
+
+import { T } from "@lib/boutique/i18n-client"
+import { Badge, Heading, Input, Label, Text } from "@medusajs/ui"
+import React from "react"
+
+import { applyPromotions } from "@lib/data/cart"
+import { convertToLocale } from "@lib/util/money"
+import { HttpTypes } from "@medusajs/types"
+import Trash from "@modules/common/icons/trash"
+import ErrorMessage from "../error-message"
+import { SubmitButton } from "../submit-button"
+
+type DiscountCodeProps = {
+  cart: HttpTypes.StoreCart & {
+    promotions: HttpTypes.StorePromotion[]
+  }
+}
+
+const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
+  const [isOpen, setIsOpen] = React.useState(false)
+  const [errorMessage, setErrorMessage] = React.useState("")
+
+  const { promotions = [] } = cart
+  const removePromotionCode = async (code: string) => {
+    const validPromotions = promotions.filter(
+      (promotion) => promotion.code !== code
+    )
+
+    await applyPromotions(
+      validPromotions.filter((p) => p.code !== undefined).map((p) => p.code!)
+    )
+  }
+
+  const addPromotionCode = async (formData: FormData) => {
+    setErrorMessage("")
+
+    const code = formData.get("code")
+    if (!code) {
+      return
+    }
+    const input = document.getElementById("promotion-input") as HTMLInputElement
+    const codes = promotions
+      .filter((p) => p.code !== undefined)
+      .map((p) => p.code!)
+    codes.push(code.toString())
+
+    try {
+      await applyPromotions(codes)
+    } catch (e: any) {
+      setErrorMessage(e.message)
+    }
+
+    if (input) {
+      input.value = ""
+    }
+  }
+
+  return (
+    <div className="w-full bg-white flex flex-col">
+      <div className="txt-medium">
+        <form action={(a) => addPromotionCode(a)} className="w-full mb-5">
+          <Label className="flex gap-x-1 my-2 items-center">
+            <button
+              onClick={() => setIsOpen(!isOpen)}
+              type="button"
+              className="txt-medium text-ui-fg-interactive hover:text-ui-fg-interactive-hover"
+              data-testid="add-discount-button"
+            >
+              <T k="checkout.addPromo" />
+            </button>
+
+            {/* <Tooltip content="You can add multiple promotion codes">
+              <InformationCircleSolid color="var(--fg-muted)" />
+            </Tooltip> */}
+          </Label>
+
+          {isOpen && (
+            <>
+              <div className="flex w-full gap-x-2">
+                <Input
+                  className="size-full"
+                  id="promotion-input"
+                  name="code"
+                  type="text"
+                  autoFocus={false}
+                  data-testid="discount-input"
+                />
+                <SubmitButton
+                  variant="secondary"
+                  data-testid="discount-apply-button"
+                >
+                  <T k="checkout.apply" />
+                </SubmitButton>
+              </div>
+
+              <ErrorMessage
+                error={errorMessage}
+                data-testid="discount-error-message"
+              />
+            </>
+          )}
+        </form>
+
+        {promotions.length > 0 && (
+          <div className="w-full flex items-center">
+            <div className="flex flex-col w-full">
+              <Heading className="txt-medium mb-2">
+                <T k="checkout.promosApplied" />
+              </Heading>
+
+              {promotions.map((promotion) => {
+                return (
+                  <div
+                    key={promotion.id}
+                    className="flex items-center justify-between w-full max-w-full mb-2"
+                    data-testid="discount-row"
+                  >
+                    <Text className="flex gap-x-1 items-baseline txt-small-plus w-4/5 pr-1">
+                      <span className="truncate" data-testid="discount-code">
+                        <Badge
+                          color={promotion.is_automatic ? "green" : "grey"}
+                          size="small"
+                        >
+                          {promotion.code}
+                        </Badge>{" "}
+                        (
+                        {promotion.application_method?.value !== undefined &&
+                          promotion.application_method.currency_code !==
+                            undefined && (
+                            <>
+                              {promotion.application_method.type ===
+                              "percentage"
+                                ? `${promotion.application_method.value}%`
+                                : convertToLocale({
+                                    amount: +promotion.application_method.value,
+                                    currency_code:
+                                      promotion.application_method
+                                        .currency_code,
+                                  })}
+                            </>
+                          )}
+                        )
+                        {/* {promotion.is_automatic && (
+                          <Tooltip content="This promotion is automatically applied">
+                            <InformationCircleSolid className="inline text-zinc-400" />
+                          </Tooltip>
+                        )} */}
+                      </span>
+                    </Text>
+                    {!promotion.is_automatic && (
+                      <button
+                        className="flex items-center"
+                        onClick={() => {
+                          if (!promotion.code) {
+                            return
+                          }
+
+                          removePromotionCode(promotion.code)
+                        }}
+                        data-testid="remove-discount-button"
+                      >
+                        <Trash size={14} />
+                        <span className="sr-only">
+                          <T k="checkout.removePromo" />
+                        </span>
+                      </button>
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default DiscountCode

package/templates/storefront/src/modules/checkout/components/error-message/index.tsx

@@ -0,0 +1,13 @@
+const ErrorMessage = ({ error, 'data-testid': dataTestid }: { error?: string | null, 'data-testid'?: string }) => {
+  if (!error) {
+    return null
+  }
+
+  return (
+    <div className="pt-2 text-rose-500 text-small-regular" data-testid={dataTestid}>
+      <span>{error}</span>
+    </div>
+  )
+}
+
+export default ErrorMessage