@salifbiaye/create-boutique 0.1.1

package/templates/storefront/src/modules/common/icons/refresh.tsx

@@ -0,0 +1,51 @@
+import React from "react"
+
+import { IconProps } from "types/icon"
+
+const Refresh: React.FC<IconProps> = ({
+  size = "16",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M19.8007 3.33301V8.53308H14.6006"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.2002 12C4.20157 10.4949 4.63839 9.02228 5.45797 7.75984C6.27755 6.4974 7.44488 5.49905 8.81917 4.8852C10.1935 4.27135 11.716 4.06823 13.2031 4.30034C14.6903 4.53244 16.0785 5.18986 17.2004 6.19329L19.8004 8.53332"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M4.2002 20.6669V15.4668H9.40027"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M19.8004 12C19.799 13.5051 19.3622 14.9778 18.5426 16.2402C17.7231 17.5026 16.5557 18.501 15.1814 19.1148C13.8072 19.7287 12.2846 19.9318 10.7975 19.6997C9.31033 19.4676 7.9221 18.8102 6.80023 17.8067L4.2002 15.4667"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default Refresh

package/templates/storefront/src/modules/common/icons/spinner.tsx

@@ -0,0 +1,37 @@
+import React from "react"
+
+import { IconProps } from "types/icon"
+
+const Spinner: React.FC<IconProps> = ({
+  size = "16",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      className="animate-spin"
+      width={size}
+      height={size}
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      {...attributes}
+    >
+      <circle
+        className="opacity-25"
+        cx="12"
+        cy="12"
+        r="10"
+        stroke={color}
+        strokeWidth="4"
+      ></circle>
+      <path
+        className="opacity-75"
+        fill={color}
+        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+      ></path>
+    </svg>
+  )
+}
+
+export default Spinner

package/templates/storefront/src/modules/common/icons/trash.tsx

@@ -0,0 +1,51 @@
+import React from "react"
+
+import { IconProps } from "types/icon"
+
+const Trash: React.FC<IconProps> = ({
+  size = "16",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M3.33301 5.49054H4.81449H16.6663"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.14286 5.5V4C7.14286 3.60218 7.29337 3.22064 7.56128 2.93934C7.82919 2.65804 8.19255 2.5 8.57143 2.5H11.4286C11.8075 2.5 12.1708 2.65804 12.4387 2.93934C12.7066 3.22064 12.8571 3.60218 12.8571 4V5.5M15 5.5V16C15 16.3978 14.8495 16.7794 14.5816 17.0607C14.3137 17.342 13.9503 17.5 13.5714 17.5H6.42857C6.04969 17.5 5.68633 17.342 5.41842 17.0607C5.15051 16.7794 5 16.3978 5 16V5.5H15Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.33203 9.23724V13.4039"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11.666 9.23724V13.4039"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default Trash

package/templates/storefront/src/modules/common/icons/user.tsx

@@ -0,0 +1,37 @@
+import React from "react"
+
+import { IconProps } from "types/icon"
+
+const User: React.FC<IconProps> = ({
+  size = "16",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M16.6663 18V16.3333C16.6663 15.4493 16.3152 14.6014 15.69 13.9763C15.0649 13.3512 14.2171 13 13.333 13H6.66634C5.78229 13 4.93444 13.3512 4.30932 13.9763C3.6842 14.6014 3.33301 15.4493 3.33301 16.3333V18"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10.0003 9.66667C11.8413 9.66667 13.3337 8.17428 13.3337 6.33333C13.3337 4.49238 11.8413 3 10.0003 3C8.15938 3 6.66699 4.49238 6.66699 6.33333C6.66699 8.17428 8.15938 9.66667 10.0003 9.66667Z"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default User

package/templates/storefront/src/modules/common/icons/x.tsx

@@ -0,0 +1,37 @@
+import React from "react"
+
+import { IconProps } from "types/icon"
+
+const X: React.FC<IconProps> = ({
+  size = "20",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M15 5L5 15"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M5 5L15 15"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default X

package/templates/storefront/src/modules/layout/components/cart-mismatch-banner/index.tsx

@@ -0,0 +1,59 @@
+"use client"
+
+
+import { T } from "@lib/boutique/i18n-client"
+import { transferCart } from "@lib/data/customer"
+import { ExclamationCircleSolid } from "@medusajs/icons"
+import { StoreCart, StoreCustomer } from "@medusajs/types"
+import { Button } from "@medusajs/ui"
+import { useState } from "react"
+
+function CartMismatchBanner(props: {
+  customer: StoreCustomer
+  cart: StoreCart
+}) {
+  const { customer, cart } = props
+  const [isPending, setIsPending] = useState(false)
+  const [actionText, setActionText] = useState("Run transfer again")
+
+  if (!customer || !!cart.customer_id) {
+    return
+  }
+
+  const handleSubmit = async () => {
+    try {
+      setIsPending(true)
+      setActionText("Transferring..")
+
+      await transferCart()
+    } catch {
+      setActionText("Run transfer again")
+      setIsPending(false)
+    }
+  }
+
+  return (
+    <div className="flex items-center justify-center small:p-4 p-2 text-center bg-orange-300 small:gap-2 gap-1 text-sm mt-2 text-orange-800">
+      <div className="flex flex-col small:flex-row small:gap-2 gap-1 items-center">
+        <span className="flex items-center gap-1">
+          <ExclamationCircleSolid className="inline" />
+          <T k="cart.transferFailed" />
+        </span>
+
+        <span>·</span>
+
+        <Button
+          variant="transparent"
+          className="hover:bg-transparent active:bg-transparent focus:bg-transparent disabled:text-orange-500 text-orange-950 p-0 bg-transparent"
+          size="base"
+          disabled={isPending}
+          onClick={handleSubmit}
+        >
+          {actionText}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default CartMismatchBanner

package/templates/storefront/src/modules/order/components/help/index.tsx

@@ -0,0 +1,26 @@
+import { T } from "@lib/boutique/i18n-client"
+import { Heading } from "@medusajs/ui"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import React from "react"
+
+const Help = () => {
+  return (
+    <div className="mt-6">
+      <Heading className="text-base-semi"><T k="order.help" /></Heading>
+      <div className="text-base-regular my-2">
+        <ul className="gap-y-2 flex flex-col">
+          <li>
+            <LocalizedClientLink href="/legal/contact"><T k="legal.contact" /></LocalizedClientLink>
+          </li>
+          <li>
+            <LocalizedClientLink href="/legal/returns">
+              <T k="order.returns" />
+            </LocalizedClientLink>
+          </li>
+        </ul>
+      </div>
+    </div>
+  )
+}
+
+export default Help

package/templates/storefront/src/modules/order/components/item/index.tsx

@@ -0,0 +1,57 @@
+import { HttpTypes } from "@medusajs/types"
+import { Table, Text } from "@medusajs/ui"
+
+import LineItemOptions from "@modules/common/components/line-item-options"
+import LineItemPrice from "@modules/common/components/line-item-price"
+import LineItemUnitPrice from "@modules/common/components/line-item-unit-price"
+import Thumbnail from "@modules/products/components/thumbnail"
+
+type ItemProps = {
+  item: HttpTypes.StoreCartLineItem | HttpTypes.StoreOrderLineItem
+  currencyCode: string
+}
+
+const Item = ({ item, currencyCode }: ItemProps) => {
+  return (
+    <Table.Row className="w-full" data-testid="product-row">
+      <Table.Cell className="!pl-0 p-4 w-24">
+        <div className="flex w-16">
+          <Thumbnail thumbnail={item.thumbnail} size="square" />
+        </div>
+      </Table.Cell>
+
+      <Table.Cell className="text-left">
+        <Text
+          className="txt-medium-plus text-ui-fg-base"
+          data-testid="product-name"
+        >
+          {item.product_title}
+        </Text>
+        <LineItemOptions variant={item.variant} data-testid="product-variant" />
+      </Table.Cell>
+
+      <Table.Cell className="!pr-0">
+        <span className="!pr-0 flex flex-col items-end h-full justify-center">
+          <span className="flex gap-x-1 ">
+            <Text className="text-ui-fg-muted">
+              <span data-testid="product-quantity">{item.quantity}</span>x{" "}
+            </Text>
+            <LineItemUnitPrice
+              item={item}
+              style="tight"
+              currencyCode={currencyCode}
+            />
+          </span>
+
+          <LineItemPrice
+            item={item}
+            style="tight"
+            currencyCode={currencyCode}
+          />
+        </span>
+      </Table.Cell>
+    </Table.Row>
+  )
+}
+
+export default Item

package/templates/storefront/src/modules/order/components/items/index.tsx

@@ -0,0 +1,44 @@
+import repeat from "@lib/util/repeat"
+import { HttpTypes } from "@medusajs/types"
+import { Table } from "@medusajs/ui"
+
+import Divider from "@modules/common/components/divider"
+import Item from "@modules/order/components/item"
+import SkeletonLineItem from "@modules/skeletons/components/skeleton-line-item"
+
+type ItemsProps = {
+  order: HttpTypes.StoreOrder
+}
+
+const Items = ({ order }: ItemsProps) => {
+  const items = order.items
+
+  return (
+    <div className="flex flex-col">
+      <Divider className="!mb-0" />
+      <Table>
+        <Table.Body data-testid="products-table">
+          {items?.length
+            ? items
+                .sort((a, b) => {
+                  return (a.created_at ?? "") > (b.created_at ?? "") ? -1 : 1
+                })
+                .map((item) => {
+                  return (
+                    <Item
+                      key={item.id}
+                      item={item}
+                      currencyCode={order.currency_code}
+                    />
+                  )
+                })
+            : repeat(5).map((i) => {
+                return <SkeletonLineItem key={i} />
+              })}
+        </Table.Body>
+      </Table>
+    </div>
+  )
+}
+
+export default Items

package/templates/storefront/src/modules/order/components/onboarding-cta/index.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import { resetOnboardingState } from "@lib/data/onboarding"
+import { Button, Container, Text } from "@medusajs/ui"
+
+const OnboardingCta = ({ orderId }: { orderId: string }) => {
+  return (
+    <Container className="max-w-4xl h-full bg-ui-bg-subtle w-full">
+      <div className="flex flex-col gap-y-4 center p-4 md:items-center">
+        <Text className="text-ui-fg-base text-xl">
+          Your test order was successfully created! 🎉
+        </Text>
+        <Text className="text-ui-fg-subtle text-small-regular">
+          You can now complete setting up your store in the admin.
+        </Text>
+        <Button
+          className="w-fit"
+          size="xlarge"
+          onClick={() => resetOnboardingState(orderId)}
+        >
+          Complete setup in admin
+        </Button>
+      </div>
+    </Container>
+  )
+}
+
+export default OnboardingCta

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

@@ -0,0 +1,64 @@
+import { T } from "@lib/boutique/i18n-client"
+import { HttpTypes } from "@medusajs/types"
+import { Text } from "@medusajs/ui"
+
+type OrderDetailsProps = {
+  order: HttpTypes.StoreOrder
+  showStatus?: boolean
+}
+
+const OrderDetails = ({ order, showStatus }: OrderDetailsProps) => {
+  const formatStatus = (str: string) => {
+    const formatted = str.split("_").join(" ")
+
+    return formatted.slice(0, 1).toUpperCase() + formatted.slice(1)
+  }
+
+  return (
+    <div>
+      <Text>
+        <T k="order.emailSent" />{" "}
+        <span
+          className="text-ui-fg-medium-plus font-semibold"
+          data-testid="order-email"
+        >
+          {order.email}
+        </span>
+        .
+      </Text>
+      <Text className="mt-2">
+        <T k="order.date" />{" "}
+        <span data-testid="order-date">
+          {new Date(order.created_at).toLocaleDateString(undefined, { dateStyle: "long" })}
+        </span>
+      </Text>
+      <Text className="mt-2 text-ui-fg-interactive">
+        <T k="order.number" /> <span data-testid="order-id">{order.display_id}</span>
+      </Text>
+
+      <div className="flex items-center text-compact-small gap-x-4 mt-4">
+        {showStatus && (
+          <>
+            <Text>
+              <T k="order.status" />{" "}
+              <span className="text-ui-fg-subtle " data-testid="order-status">
+                {formatStatus(order.fulfillment_status)}
+              </span>
+            </Text>
+            <Text>
+              <T k="order.paymentStatus" />{" "}
+              <span
+                className="text-ui-fg-subtle "
+                sata-testid="order-payment-status"
+              >
+                {formatStatus(order.payment_status)}
+              </span>
+            </Text>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default OrderDetails

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

@@ -0,0 +1,61 @@
+import { T } from "@lib/boutique/i18n-client"
+import { convertToLocale } from "@lib/util/money"
+import { HttpTypes } from "@medusajs/types"
+
+type OrderSummaryProps = {
+  order: HttpTypes.StoreOrder
+}
+
+const OrderSummary = ({ order }: OrderSummaryProps) => {
+  const getAmount = (amount?: number | null) => {
+    if (!amount) {
+      return
+    }
+
+    return convertToLocale({
+      amount,
+      currency_code: order.currency_code,
+    })
+  }
+
+  return (
+    <div>
+      <h2 className="text-base-semi">Order Summary</h2>
+      <div className="text-small-regular text-ui-fg-base my-2">
+        <div className="flex items-center justify-between text-base-regular text-ui-fg-base mb-2">
+          <span><T k="cart.subtotal" /></span>
+          <span>{getAmount(order.subtotal)}</span>
+        </div>
+        <div className="flex flex-col gap-y-1">
+          {order.discount_total > 0 && (
+            <div className="flex items-center justify-between">
+              <span><T k="cart.discount" /></span>
+              <span>- {getAmount(order.discount_total)}</span>
+            </div>
+          )}
+          {order.gift_card_total > 0 && (
+            <div className="flex items-center justify-between">
+              <span><T k="cart.discount" /></span>
+              <span>- {getAmount(order.gift_card_total)}</span>
+            </div>
+          )}
+          <div className="flex items-center justify-between">
+            <span><T k="cart.shipping" /></span>
+            <span>{getAmount(order.shipping_total)}</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span><T k="cart.taxes" /></span>
+            <span>{getAmount(order.tax_total)}</span>
+          </div>
+        </div>
+        <div className="h-px w-full border-b border-gray-200 border-dashed my-4" />
+        <div className="flex items-center justify-between text-base-regular text-ui-fg-base mb-2">
+          <span><T k="cart.total" /></span>
+          <span>{getAmount(order.total)}</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default OrderSummary

package/templates/storefront/src/modules/order/components/payment-details/index.tsx

@@ -0,0 +1,64 @@
+import { T } from "@lib/boutique/i18n-client"
+import { Container, Heading, Text } from "@medusajs/ui"
+
+import { isStripeLike, paymentInfoMap } from "@lib/constants"
+import Divider from "@modules/common/components/divider"
+import { convertToLocale } from "@lib/util/money"
+import { HttpTypes } from "@medusajs/types"
+
+type PaymentDetailsProps = {
+  order: HttpTypes.StoreOrder
+}
+
+const PaymentDetails = ({ order }: PaymentDetailsProps) => {
+  const payment = order.payment_collections?.[0].payments?.[0]
+
+  return (
+    <div>
+      <Heading level="h2" className="flex flex-row text-3xl-regular my-6">
+        <T k="order.payment" />
+      </Heading>
+      <div>
+        {payment && (
+          <div className="flex items-start gap-x-1 w-full">
+            <div className="flex flex-col w-1/3">
+              <Text className="txt-medium-plus text-ui-fg-base mb-1">
+                <T k="order.paymentMethod" />
+              </Text>
+              <Text
+                className="txt-medium text-ui-fg-subtle"
+                data-testid="payment-method"
+              >
+                {paymentInfoMap[payment.provider_id].title}
+              </Text>
+            </div>
+            <div className="flex flex-col w-2/3">
+              <Text className="txt-medium-plus text-ui-fg-base mb-1">
+                <T k="order.paymentDetails" />
+              </Text>
+              <div className="flex gap-2 txt-medium text-ui-fg-subtle items-center">
+                <Container className="flex items-center h-7 w-fit p-2 bg-ui-button-neutral-hover">
+                  {paymentInfoMap[payment.provider_id].icon}
+                </Container>
+                <Text data-testid="payment-amount">
+                  {isStripeLike(payment.provider_id) && payment.data?.card_last4
+                    ? `**** **** **** ${payment.data.card_last4}`
+                    : `${convertToLocale({
+                        amount: payment.amount,
+                        currency_code: order.currency_code,
+                      })} paid at ${new Date(
+                        payment.created_at ?? ""
+                      ).toLocaleString()}`}
+                </Text>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+
+      <Divider className="mt-8" />
+    </div>
+  )
+}
+
+export default PaymentDetails