@salifbiaye/create-boutique 0.1.1

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

@@ -0,0 +1,54 @@
+"use client"
+
+
+import { T } from "@lib/boutique/i18n-client"
+import { Heading, Text, clx } from "@medusajs/ui"
+
+import PaymentButton from "../payment-button"
+import { useSearchParams } from "next/navigation"
+
+const Review = ({ cart }: { cart: any }) => {
+  const searchParams = useSearchParams()
+
+  const isOpen = searchParams.get("step") === "review"
+
+  const paidByGiftcard =
+    cart?.gift_cards && cart?.gift_cards?.length > 0 && cart?.total === 0
+
+  const previousStepsCompleted =
+    cart.shipping_address &&
+    cart.shipping_methods.length > 0 &&
+    (cart.payment_collection || paidByGiftcard)
+
+  return (
+    <div className="bg-white">
+      <div className="flex flex-row items-center justify-between mb-6">
+        <Heading
+          level="h2"
+          className={clx(
+            "flex flex-row text-3xl-regular gap-x-2 items-baseline",
+            {
+              "opacity-50 pointer-events-none select-none": !isOpen,
+            }
+          )}
+        >
+          <T k="checkout.review" />
+        </Heading>
+      </div>
+      {isOpen && previousStepsCompleted && (
+        <>
+          <div className="flex items-start gap-x-1 w-full mb-6">
+            <div className="w-full">
+              <Text className="txt-medium-plus text-ui-fg-base mb-1">
+                <T k="checkout.terms" />
+              </Text>
+            </div>
+          </div>
+          <PaymentButton cart={cart} data-testid="submit-order-button" />
+        </>
+      )}
+    </div>
+  )
+}
+
+export default Review

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

@@ -0,0 +1,417 @@
+"use client"
+
+
+import { T } from "@lib/boutique/i18n-client"
+import { Radio, RadioGroup } from "@headlessui/react"
+import { setShippingMethod } from "@lib/data/cart"
+import { calculatePriceForShippingOption } from "@lib/data/fulfillment"
+import { convertToLocale } from "@lib/util/money"
+import { CheckCircleSolid, Loader } from "@medusajs/icons"
+import { HttpTypes } from "@medusajs/types"
+import { Button, clx, Heading, Text } from "@medusajs/ui"
+import ErrorMessage from "@modules/checkout/components/error-message"
+import Divider from "@modules/common/components/divider"
+import MedusaRadio from "@modules/common/components/radio"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
+import { useEffect, useState } from "react"
+
+// Champs demandés par listCartOptions (fields) mais absents du type StoreCartShippingOption.
+type ShippingOptionWithZone = HttpTypes.StoreCartShippingOption & {
+  service_zone?: {
+    fulfillment_set?: { type?: string; location?: { address?: HttpTypes.StoreCartAddress } }
+  }
+}
+
+const PICKUP_OPTION_ON = "__PICKUP_ON"
+const PICKUP_OPTION_OFF = "__PICKUP_OFF"
+
+type ShippingProps = {
+  cart: HttpTypes.StoreCart
+  availableShippingMethods: HttpTypes.StoreCartShippingOption[] | null
+}
+
+function formatAddress(address?: HttpTypes.StoreCartAddress) {
+  if (!address) {
+    return ""
+  }
+
+  let ret = ""
+
+  if (address.address_1) {
+    ret += ` ${address.address_1}`
+  }
+
+  if (address.address_2) {
+    ret += `, ${address.address_2}`
+  }
+
+  if (address.postal_code) {
+    ret += `, ${address.postal_code} ${address.city}`
+  }
+
+  if (address.country_code) {
+    ret += `, ${address.country_code.toUpperCase()}`
+  }
+
+  return ret
+}
+
+const Shipping: React.FC<ShippingProps> = ({
+  cart,
+  availableShippingMethods,
+}) => {
+  const [isLoading, setIsLoading] = useState(false)
+  const [isLoadingPrices, setIsLoadingPrices] = useState(true)
+
+  const [showPickupOptions, setShowPickupOptions] =
+    useState<string>(PICKUP_OPTION_OFF)
+  const [calculatedPricesMap, setCalculatedPricesMap] = useState<
+    Record<string, number>
+  >({})
+  const [error, setError] = useState<string | null>(null)
+  const [shippingMethodId, setShippingMethodId] = useState<string | null>(
+    cart.shipping_methods?.at(-1)?.shipping_option_id || null
+  )
+
+  const searchParams = useSearchParams()
+  const router = useRouter()
+  const pathname = usePathname()
+
+  const isOpen = searchParams.get("step") === "delivery"
+
+  const _shippingMethods = availableShippingMethods?.filter(
+    (sm) => (sm as ShippingOptionWithZone).service_zone?.fulfillment_set?.type !== "pickup"
+  )
+
+  const _pickupMethods = availableShippingMethods?.filter(
+    (sm) => (sm as ShippingOptionWithZone).service_zone?.fulfillment_set?.type === "pickup"
+  )
+
+  const hasPickupOptions = !!_pickupMethods?.length
+
+  useEffect(() => {
+    setIsLoadingPrices(true)
+
+    if (_shippingMethods?.length) {
+      const promises = _shippingMethods
+        .filter((sm) => sm.price_type === "calculated")
+        .map((sm) => calculatePriceForShippingOption(sm.id, cart.id))
+
+      if (promises.length) {
+        Promise.allSettled(promises).then((res) => {
+          const pricesMap: Record<string, number> = {}
+          res
+            .filter((r) => r.status === "fulfilled")
+            .forEach((p) => (pricesMap[p.value?.id || ""] = p.value?.amount!))
+
+          setCalculatedPricesMap(pricesMap)
+          setIsLoadingPrices(false)
+        })
+      }
+    }
+
+    if (_pickupMethods?.find((m) => m.id === shippingMethodId)) {
+      setShowPickupOptions(PICKUP_OPTION_ON)
+    }
+  }, [availableShippingMethods])
+
+  const handleEdit = () => {
+    router.push(pathname + "?step=delivery", { scroll: false })
+  }
+
+  const handleSubmit = () => {
+    router.push(pathname + "?step=payment", { scroll: false })
+  }
+
+  const handleSetShippingMethod = async (
+    id: string,
+    variant: "shipping" | "pickup"
+  ) => {
+    setError(null)
+
+    if (variant === "pickup") {
+      setShowPickupOptions(PICKUP_OPTION_ON)
+    } else {
+      setShowPickupOptions(PICKUP_OPTION_OFF)
+    }
+
+    let currentId: string | null = null
+    setIsLoading(true)
+    setShippingMethodId((prev) => {
+      currentId = prev
+      return id
+    })
+
+    await setShippingMethod({ cartId: cart.id, shippingMethodId: id })
+      .catch((err) => {
+        setShippingMethodId(currentId)
+
+        setError(err.message)
+      })
+      .finally(() => {
+        setIsLoading(false)
+      })
+  }
+
+  useEffect(() => {
+    setError(null)
+  }, [isOpen])
+
+  return (
+    <div className="bg-white">
+      <div className="flex flex-row items-center justify-between mb-6">
+        <Heading
+          level="h2"
+          className={clx(
+            "flex flex-row text-3xl-regular gap-x-2 items-baseline",
+            {
+              "opacity-50 pointer-events-none select-none":
+                !isOpen && cart.shipping_methods?.length === 0,
+            }
+          )}
+        >
+          <T k="checkout.delivery" />
+          {!isOpen && (cart.shipping_methods?.length ?? 0) > 0 && (
+            <CheckCircleSolid />
+          )}
+        </Heading>
+        {!isOpen &&
+          cart?.shipping_address &&
+          cart?.billing_address &&
+          cart?.email && (
+            <Text>
+              <button
+                onClick={handleEdit}
+                className="text-ui-fg-interactive hover:text-ui-fg-interactive-hover"
+                data-testid="edit-delivery-button"
+              >
+                <T k="form.edit" />
+              </button>
+            </Text>
+          )}
+      </div>
+      {isOpen ? (
+        <>
+          <div className="grid">
+            <div className="flex flex-col">
+              <span className="font-medium txt-medium text-ui-fg-base">
+                <T k="checkout.shippingMethod" />
+              </span>
+              <span className="mb-4 text-ui-fg-muted txt-medium">
+                <T k="checkout.shippingHow" />
+              </span>
+            </div>
+            <div data-testid="delivery-options-container">
+              <div className="pb-8 md:pt-0 pt-2">
+                {hasPickupOptions && (
+                  <RadioGroup
+                    value={showPickupOptions}
+                    onChange={(value) => {
+                      const id = _pickupMethods.find(
+                        (option) => !option.insufficient_inventory
+                      )?.id
+
+                      if (id) {
+                        handleSetShippingMethod(id, "pickup")
+                      }
+                    }}
+                  >
+                    <Radio
+                      value={PICKUP_OPTION_ON}
+                      data-testid="delivery-option-radio"
+                      className={clx(
+                        "flex items-center justify-between text-small-regular cursor-pointer py-4 border rounded-rounded px-8 mb-2 hover:shadow-borders-interactive-with-active",
+                        {
+                          "border-ui-border-interactive":
+                            showPickupOptions === PICKUP_OPTION_ON,
+                        }
+                      )}
+                    >
+                      <div className="flex items-center gap-x-4">
+                        <MedusaRadio
+                          checked={showPickupOptions === PICKUP_OPTION_ON}
+                        />
+                        <span className="text-base-regular">
+                          <T k="checkout.pickup" />
+                        </span>
+                      </div>
+                      <span className="justify-self-end text-ui-fg-base">
+                        -
+                      </span>
+                    </Radio>
+                  </RadioGroup>
+                )}
+                <RadioGroup
+                  value={shippingMethodId}
+                  onChange={(v) => {
+                    if (v) {
+                      return handleSetShippingMethod(v, "shipping")
+                    }
+                  }}
+                >
+                  {_shippingMethods?.map((option) => {
+                    const isDisabled =
+                      option.price_type === "calculated" &&
+                      !isLoadingPrices &&
+                      typeof calculatedPricesMap[option.id] !== "number"
+
+                    return (
+                      <Radio
+                        key={option.id}
+                        value={option.id}
+                        data-testid="delivery-option-radio"
+                        disabled={isDisabled}
+                        className={clx(
+                          "flex items-center justify-between text-small-regular cursor-pointer py-4 border rounded-rounded px-8 mb-2 hover:shadow-borders-interactive-with-active",
+                          {
+                            "border-ui-border-interactive":
+                              option.id === shippingMethodId,
+                            "hover:shadow-brders-none cursor-not-allowed":
+                              isDisabled,
+                          }
+                        )}
+                      >
+                        <div className="flex items-center gap-x-4">
+                          <MedusaRadio
+                            checked={option.id === shippingMethodId}
+                          />
+                          <span className="text-base-regular">
+                            {option.name}
+                          </span>
+                        </div>
+                        <span className="justify-self-end text-ui-fg-base">
+                          {option.price_type === "flat" ? (
+                            convertToLocale({
+                              amount: option.amount!,
+                              currency_code: cart?.currency_code,
+                            })
+                          ) : calculatedPricesMap[option.id] ? (
+                            convertToLocale({
+                              amount: calculatedPricesMap[option.id],
+                              currency_code: cart?.currency_code,
+                            })
+                          ) : isLoadingPrices ? (
+                            <Loader />
+                          ) : (
+                            "-"
+                          )}
+                        </span>
+                      </Radio>
+                    )
+                  })}
+                </RadioGroup>
+              </div>
+            </div>
+          </div>
+
+          {showPickupOptions === PICKUP_OPTION_ON && (
+            <div className="grid">
+              <div className="flex flex-col">
+                <span className="font-medium txt-medium text-ui-fg-base">
+                  <T k="checkout.store" />
+                </span>
+                <span className="mb-4 text-ui-fg-muted txt-medium">
+                  <T k="checkout.chooseStore" />
+                </span>
+              </div>
+              <div data-testid="delivery-options-container">
+                <div className="pb-8 md:pt-0 pt-2">
+                  <RadioGroup
+                    value={shippingMethodId}
+                    onChange={(v) => {
+                      if (v) {
+                        return handleSetShippingMethod(v, "pickup")
+                      }
+                    }}
+                  >
+                    {_pickupMethods?.map((option) => {
+                      return (
+                        <Radio
+                          key={option.id}
+                          value={option.id}
+                          disabled={option.insufficient_inventory}
+                          data-testid="delivery-option-radio"
+                          className={clx(
+                            "flex items-center justify-between text-small-regular cursor-pointer py-4 border rounded-rounded px-8 mb-2 hover:shadow-borders-interactive-with-active",
+                            {
+                              "border-ui-border-interactive":
+                                option.id === shippingMethodId,
+                              "hover:shadow-brders-none cursor-not-allowed":
+                                option.insufficient_inventory,
+                            }
+                          )}
+                        >
+                          <div className="flex items-start gap-x-4">
+                            <MedusaRadio
+                              checked={option.id === shippingMethodId}
+                            />
+                            <div className="flex flex-col">
+                              <span className="text-base-regular">
+                                {option.name}
+                              </span>
+                              <span className="text-base-regular text-ui-fg-muted">
+                                {formatAddress(
+                                  (option as ShippingOptionWithZone).service_zone?.fulfillment_set?.location
+                                    ?.address
+                                )}
+                              </span>
+                            </div>
+                          </div>
+                          <span className="justify-self-end text-ui-fg-base">
+                            {convertToLocale({
+                              amount: option.amount!,
+                              currency_code: cart?.currency_code,
+                            })}
+                          </span>
+                        </Radio>
+                      )
+                    })}
+                  </RadioGroup>
+                </div>
+              </div>
+            </div>
+          )}
+
+          <div>
+            <ErrorMessage
+              error={error}
+              data-testid="delivery-option-error-message"
+            />
+            <Button
+              size="large"
+              className="mt"
+              onClick={handleSubmit}
+              isLoading={isLoading}
+              disabled={!cart.shipping_methods?.[0]}
+              data-testid="submit-delivery-option-button"
+            >
+              <T k="checkout.continuePayment" />
+            </Button>
+          </div>
+        </>
+      ) : (
+        <div>
+          <div className="text-small-regular">
+            {cart && (cart.shipping_methods?.length ?? 0) > 0 && (
+              <div className="flex flex-col w-1/3">
+                <Text className="txt-medium-plus text-ui-fg-base mb-1">
+                  <T k="checkout.method" />
+                </Text>
+                <Text className="txt-medium text-ui-fg-subtle">
+                  {cart.shipping_methods!.at(-1)!.name}{" "}
+                  {convertToLocale({
+                    amount: cart.shipping_methods!.at(-1)!.amount!,
+                    currency_code: cart?.currency_code,
+                  })}
+                </Text>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+      <Divider className="mt-8" />
+    </div>
+  )
+}
+
+export default Shipping

package/templates/storefront/src/modules/checkout/components/shipping-address/index.tsx

@@ -0,0 +1,219 @@
+import { HttpTypes } from "@medusajs/types"
+import { Container } from "@medusajs/ui"
+import Checkbox from "@modules/common/components/checkbox"
+import Input from "@modules/common/components/input"
+import { mapKeys } from "lodash"
+import React, { useEffect, useMemo, useState } from "react"
+import AddressSelect from "../address-select"
+import CountrySelect from "../country-select"
+
+const ShippingAddress = ({
+  customer,
+  cart,
+  checked,
+  onChange,
+}: {
+  customer: HttpTypes.StoreCustomer | null
+  cart: HttpTypes.StoreCart | null
+  checked: boolean
+  onChange: () => void
+}) => {
+  const [formData, setFormData] = useState<Record<string, any>>({
+    "shipping_address.first_name": cart?.shipping_address?.first_name || "",
+    "shipping_address.last_name": cart?.shipping_address?.last_name || "",
+    "shipping_address.address_1": cart?.shipping_address?.address_1 || "",
+    "shipping_address.company": cart?.shipping_address?.company || "",
+    "shipping_address.postal_code": cart?.shipping_address?.postal_code || "",
+    "shipping_address.city": cart?.shipping_address?.city || "",
+    "shipping_address.country_code": cart?.shipping_address?.country_code || "",
+    "shipping_address.province": cart?.shipping_address?.province || "",
+    "shipping_address.phone": cart?.shipping_address?.phone || "",
+    email: cart?.email || "",
+  })
+
+  const countriesInRegion = useMemo(
+    () => cart?.region?.countries?.map((c) => c.iso_2),
+    [cart?.region]
+  )
+
+  // check if customer has saved addresses that are in the current region
+  const addressesInRegion = useMemo(
+    () =>
+      customer?.addresses.filter(
+        (a) => a.country_code && countriesInRegion?.includes(a.country_code)
+      ),
+    [customer?.addresses, countriesInRegion]
+  )
+
+  const setFormAddress = (
+    address?: HttpTypes.StoreCartAddress,
+    email?: string
+  ) => {
+    address &&
+      setFormData((prevState: Record<string, any>) => ({
+        ...prevState,
+        "shipping_address.first_name": address?.first_name || "",
+        "shipping_address.last_name": address?.last_name || "",
+        "shipping_address.address_1": address?.address_1 || "",
+        "shipping_address.company": address?.company || "",
+        "shipping_address.postal_code": address?.postal_code || "",
+        "shipping_address.city": address?.city || "",
+        "shipping_address.country_code": address?.country_code || "",
+        "shipping_address.province": address?.province || "",
+        "shipping_address.phone": address?.phone || "",
+      }))
+
+    email &&
+      setFormData((prevState: Record<string, any>) => ({
+        ...prevState,
+        email: email,
+      }))
+  }
+
+  useEffect(() => {
+    // Ensure cart is not null and has a shipping_address before setting form data
+    if (cart && cart.shipping_address) {
+      setFormAddress(cart?.shipping_address, cart?.email)
+    }
+
+    if (cart && !cart.email && customer?.email) {
+      setFormAddress(undefined, customer.email)
+    }
+  }, [cart]) // Add cart as a dependency
+
+  const handleChange = (
+    e: React.ChangeEvent<
+      HTMLInputElement | HTMLInputElement | HTMLSelectElement
+    >
+  ) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    })
+  }
+
+  return (
+    <>
+      {customer && (addressesInRegion?.length || 0) > 0 && (
+        <Container className="mb-6 flex flex-col gap-y-4 p-5">
+          <p className="text-small-regular">
+            {`Hi ${customer.first_name}, do you want to use one of your saved addresses?`}
+          </p>
+          <AddressSelect
+            addresses={customer.addresses}
+            addressInput={
+              mapKeys(formData, (_, key) =>
+                key.replace("shipping_address.", "")
+              ) as HttpTypes.StoreCartAddress
+            }
+            onSelect={setFormAddress}
+          />
+        </Container>
+      )}
+      <div className="grid grid-cols-2 gap-4">
+        <Input
+          label="form.firstName"
+          name="shipping_address.first_name"
+          autoComplete="given-name"
+          value={formData["shipping_address.first_name"]}
+          onChange={handleChange}
+          required
+          data-testid="shipping-first-name-input"
+        />
+        <Input
+          label="form.lastName"
+          name="shipping_address.last_name"
+          autoComplete="family-name"
+          value={formData["shipping_address.last_name"]}
+          onChange={handleChange}
+          required
+          data-testid="shipping-last-name-input"
+        />
+        <Input
+          label="form.address"
+          name="shipping_address.address_1"
+          autoComplete="address-line1"
+          value={formData["shipping_address.address_1"]}
+          onChange={handleChange}
+          required
+          data-testid="shipping-address-input"
+        />
+        <Input
+          label="form.company"
+          name="shipping_address.company"
+          value={formData["shipping_address.company"]}
+          onChange={handleChange}
+          autoComplete="organization"
+          data-testid="shipping-company-input"
+        />
+        <Input
+          label="form.postalCode"
+          name="shipping_address.postal_code"
+          autoComplete="postal-code"
+          value={formData["shipping_address.postal_code"]}
+          onChange={handleChange}
+          required
+          data-testid="shipping-postal-code-input"
+        />
+        <Input
+          label="form.city"
+          name="shipping_address.city"
+          autoComplete="address-level2"
+          value={formData["shipping_address.city"]}
+          onChange={handleChange}
+          required
+          data-testid="shipping-city-input"
+        />
+        <CountrySelect
+          name="shipping_address.country_code"
+          autoComplete="country"
+          region={cart?.region}
+          value={formData["shipping_address.country_code"]}
+          onChange={handleChange}
+          required
+          data-testid="shipping-country-select"
+        />
+        <Input
+          label="form.province"
+          name="shipping_address.province"
+          autoComplete="address-level1"
+          value={formData["shipping_address.province"]}
+          onChange={handleChange}
+          data-testid="shipping-province-input"
+        />
+      </div>
+      <div className="my-8">
+        <Checkbox
+          label="checkout.billingSame"
+          name="same_as_billing"
+          checked={checked}
+          onChange={onChange}
+          data-testid="billing-address-checkbox"
+        />
+      </div>
+      <div className="grid grid-cols-2 gap-4 mb-4">
+        <Input
+          label="form.email"
+          name="email"
+          type="email"
+          title="form.emailInvalid"
+          autoComplete="email"
+          value={formData.email}
+          onChange={handleChange}
+          required
+          data-testid="shipping-email-input"
+        />
+        <Input
+          label="form.phone"
+          name="shipping_address.phone"
+          autoComplete="tel"
+          value={formData["shipping_address.phone"]}
+          onChange={handleChange}
+          data-testid="shipping-phone-input"
+        />
+      </div>
+    </>
+  )
+}
+
+export default ShippingAddress