@salifbiaye/create-boutique 0.1.1

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

@@ -0,0 +1,74 @@
+import { T } from "@lib/boutique/i18n-client"
+import { convertToLocale } from "@lib/util/money"
+import { HttpTypes } from "@medusajs/types"
+import { Heading, Text } from "@medusajs/ui"
+
+import Divider from "@modules/common/components/divider"
+
+type ShippingDetailsProps = {
+  order: HttpTypes.StoreOrder
+}
+
+const ShippingDetails = ({ order }: ShippingDetailsProps) => {
+  return (
+    <div>
+      <Heading level="h2" className="flex flex-row text-3xl-regular my-6">
+        <T k="order.delivery" />
+      </Heading>
+      <div className="flex items-start gap-x-8">
+        <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="order.shippingAddress" />
+          </Text>
+          <Text className="txt-medium text-ui-fg-subtle">
+            {order.shipping_address?.first_name}{" "}
+            {order.shipping_address?.last_name}
+          </Text>
+          <Text className="txt-medium text-ui-fg-subtle">
+            {order.shipping_address?.address_1}{" "}
+            {order.shipping_address?.address_2}
+          </Text>
+          <Text className="txt-medium text-ui-fg-subtle">
+            {order.shipping_address?.postal_code},{" "}
+            {order.shipping_address?.city}
+          </Text>
+          <Text className="txt-medium text-ui-fg-subtle">
+            {order.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">Contact</Text>
+          <Text className="txt-medium text-ui-fg-subtle">
+            {order.shipping_address?.phone}
+          </Text>
+          <Text className="txt-medium text-ui-fg-subtle">{order.email}</Text>
+        </div>
+
+        <div
+          className="flex flex-col w-1/3"
+          data-testid="shipping-method-summary"
+        >
+          <Text className="txt-medium-plus text-ui-fg-base mb-1">Method</Text>
+          <Text className="txt-medium text-ui-fg-subtle">
+            {(order as any).shipping_methods[0]?.name} (
+            {convertToLocale({
+              amount: order.shipping_methods?.[0].total ?? 0,
+              currency_code: order.currency_code,
+            })}
+            )
+          </Text>
+        </div>
+      </div>
+      <Divider className="mt-8" />
+    </div>
+  )
+}
+
+export default ShippingDetails

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

@@ -0,0 +1,83 @@
+"use client"
+
+
+import { T } from "@lib/boutique/i18n-client"
+import { acceptTransferRequest, declineTransferRequest } from "@lib/data/orders"
+import { Button, Text } from "@medusajs/ui"
+import { useState } from "react"
+
+type TransferStatus = "pending" | "success" | "error"
+
+const TransferActions = ({ id, token }: { id: string; token: string }) => {
+  const [errorMessage, setErrorMessage] = useState<string | null>(null)
+  const [status, setStatus] = useState<{
+    accept: TransferStatus | null
+    decline: TransferStatus | null
+  } | null>({
+    accept: null,
+    decline: null,
+  })
+
+  const acceptTransfer = async () => {
+    setStatus({ accept: "pending", decline: null })
+    setErrorMessage(null)
+
+    const { success, error } = await acceptTransferRequest(id, token)
+
+    if (error) setErrorMessage(error)
+    setStatus({ accept: success ? "success" : "error", decline: null })
+  }
+
+  const declineTransfer = async () => {
+    setStatus({ accept: null, decline: "pending" })
+    setErrorMessage(null)
+
+    const { success, error } = await declineTransferRequest(id, token)
+
+    if (error) setErrorMessage(error)
+    setStatus({ accept: null, decline: success ? "success" : "error" })
+  }
+
+  return (
+    <div className="flex flex-col gap-y-4">
+      {status?.accept === "success" && (
+        <Text className="text-emerald-500">
+          <T k="order.transferOk" />
+        </Text>
+      )}
+      {status?.decline === "success" && (
+        <Text className="text-emerald-500">
+          <T k="order.transferDeclinedOk" />
+        </Text>
+      )}
+      {status?.accept !== "success" && status?.decline !== "success" && (
+        <div className="flex gap-x-4">
+          <Button
+            size="large"
+            onClick={acceptTransfer}
+            isLoading={status?.accept === "pending"}
+            disabled={
+              status?.accept === "pending" || status?.decline === "pending"
+            }
+          >
+            <T k="order.acceptTransfer" />
+          </Button>
+          <Button
+            size="large"
+            variant="secondary"
+            onClick={declineTransfer}
+            isLoading={status?.decline === "pending"}
+            disabled={
+              status?.accept === "pending" || status?.decline === "pending"
+            }
+          >
+            <T k="order.declineTransfer" />
+          </Button>
+        </div>
+      )}
+      {errorMessage && <Text className="text-red-500">{errorMessage}</Text>}
+    </div>
+  )
+}
+
+export default TransferActions

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

@@ -0,0 +1,275 @@
+import { SVGProps } from "react"
+
+const TransferImage = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="280"
+    height="181"
+    viewBox="0 0 280 181"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <rect
+      x="0.00428286"
+      y="-0.742904"
+      width="33.5"
+      height="65.5"
+      rx="6.75"
+      transform="matrix(0.865865 0.500278 -0.871576 0.490261 189.756 88.938)"
+      fill="#D4D4D8"
+      stroke="#52525B"
+      strokeWidth="1.5"
+    />
+    <rect
+      x="0.00428286"
+      y="-0.742904"
+      width="33.5"
+      height="65.5"
+      rx="6.75"
+      transform="matrix(0.865865 0.500278 -0.871576 0.490261 189.756 85.938)"
+      fill="white"
+      stroke="#52525B"
+      strokeWidth="1.5"
+    />
+    <path
+      d="M180.579 107.642L179.126 108.459"
+      stroke="#52525B"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      opacity="0.88"
+      d="M182.305 110.046L180.257 110.034"
+      stroke="#52525B"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      opacity="0.75"
+      d="M180.551 112.429L179.108 111.596"
+      stroke="#52525B"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      opacity="0.63"
+      d="M176.347 113.397L176.354 112.23"
+      stroke="#52525B"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      opacity="0.5"
+      d="M172.154 112.381L173.606 111.564"
+      stroke="#52525B"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      opacity="0.38"
+      d="M170.428 109.977L172.476 109.989"
+      stroke="#52525B"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      opacity="0.25"
+      d="M172.181 107.594L173.624 108.428"
+      stroke="#52525B"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      opacity="0.13"
+      d="M176.386 106.626L176.379 107.793"
+      stroke="#52525B"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <rect
+      width="12"
+      height="3"
+      rx="1.5"
+      transform="matrix(0.865865 0.500278 -0.871576 0.490261 196.447 92.7925)"
+      fill="#D4D4D8"
+    />
+    <rect
+      x="0.00428286"
+      y="-0.742904"
+      width="33.5"
+      height="65.5"
+      rx="6.75"
+      transform="matrix(0.865865 0.500278 -0.871576 0.490261 117.023 46.9146)"
+      fill="#D4D4D8"
+      stroke="#52525B"
+      strokeWidth="1.5"
+    />
+    <rect
+      x="0.00428286"
+      y="-0.742904"
+      width="33.5"
+      height="65.5"
+      rx="6.75"
+      transform="matrix(0.865865 0.500278 -0.871576 0.490261 117.023 43.9146)"
+      fill="white"
+      stroke="#52525B"
+      strokeWidth="1.5"
+    />
+    <rect
+      width="12"
+      height="3"
+      rx="1.5"
+      transform="matrix(0.865865 0.500278 -0.871576 0.490261 123.714 50.769)"
+      fill="#D4D4D8"
+    />
+    <rect
+      width="17"
+      height="3"
+      rx="1.5"
+      transform="matrix(0.865865 0.500278 -0.871576 0.490261 97.5555 67.458)"
+      fill="#D4D4D8"
+    />
+    <rect
+      width="12"
+      height="3"
+      rx="1.5"
+      transform="matrix(0.865865 0.500278 -0.871576 0.490261 93.1976 69.9092)"
+      fill="#D4D4D8"
+    />
+    <path
+      d="M92.3603 64.4564C90.9277 63.6287 88.59 63.6152 87.148 64.4264C85.7059 65.2375 85.6983 66.5703 87.1308 67.398C88.5634 68.2257 90.9011 68.2392 92.3432 67.428C93.7852 66.6169 93.7929 65.2841 92.3603 64.4564ZM88.4382 66.6626C87.7221 66.2488 87.726 65.5822 88.4468 65.1768C89.1676 64.7713 90.3369 64.7781 91.0529 65.1918C91.769 65.6055 91.7652 66.2722 91.0444 66.6776C90.3236 67.083 89.1543 67.0763 88.4382 66.6626Z"
+      fill="#A1A1AA"
+    />
+    <rect
+      width="17"
+      height="3"
+      rx="1.5"
+      transform="matrix(0.865865 0.500278 -0.871576 0.490261 109.758 60.5942)"
+      fill="#D4D4D8"
+    />
+    <rect
+      width="12"
+      height="3"
+      rx="1.5"
+      transform="matrix(0.865865 0.500278 -0.871576 0.490261 105.4 63.0454)"
+      fill="#D4D4D8"
+    />
+    <path
+      d="M104.562 57.5926C103.13 56.7649 100.792 56.7514 99.35 57.5626C97.908 58.3737 97.9003 59.7065 99.3329 60.5342C100.765 61.3619 103.103 61.3754 104.545 60.5642C105.987 59.7531 105.995 58.4203 104.562 57.5926ZM103.858 59.3971L100.815 59.6265C100.683 59.6366 100.55 59.6133 100.449 59.5629C100.44 59.5584 100.432 59.5544 100.424 59.5499C100.339 59.5004 100.29 59.4335 100.29 59.3637L100.293 58.62C100.294 58.4751 100.501 58.3585 100.756 58.3599C101.01 58.3614 101.216 58.48 101.216 58.6256L101.214 59.0669L103.732 58.8768C103.983 58.8577 104.217 58.9584 104.251 59.1029C104.286 59.2468 104.11 59.3787 103.858 59.3976L103.858 59.3971Z"
+      fill="#A1A1AA"
+    />
+    <g clip-path="url(#clip0_20786_38285)">
+      <path
+        d="M133.106 82.3025L140.49 82.345L140.514 78.1353"
+        stroke="#A1A1AA"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <g clip-path="url(#clip1_20786_38285)">
+      <path
+        d="M143.496 88.3059L150.88 88.3485L150.905 84.1387"
+        stroke="#A1A1AA"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <g clip-path="url(#clip2_20786_38285)">
+      <path
+        d="M153.887 94.3093L161.271 94.3519L161.295 90.1421"
+        stroke="#A1A1AA"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <g clip-path="url(#clip3_20786_38285)">
+      <path
+        d="M126.113 89.6911L118.729 89.6486L118.705 93.8583"
+        stroke="#A1A1AA"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <g clip-path="url(#clip4_20786_38285)">
+      <path
+        d="M136.504 95.6945L129.12 95.652L129.095 99.8618"
+        stroke="#A1A1AA"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <g clip-path="url(#clip5_20786_38285)">
+      <path
+        d="M146.894 101.698L139.51 101.655L139.486 105.865"
+        stroke="#A1A1AA"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_20786_38285">
+        <rect
+          width="12"
+          height="12"
+          fill="white"
+          transform="matrix(0.865865 0.500278 -0.871576 0.490261 138.36 75.1509)"
+        />
+      </clipPath>
+      <clipPath id="clip1_20786_38285">
+        <rect
+          width="12"
+          height="12"
+          fill="white"
+          transform="matrix(0.865865 0.500278 -0.871576 0.490261 148.75 81.1543)"
+        />
+      </clipPath>
+      <clipPath id="clip2_20786_38285">
+        <rect
+          width="12"
+          height="12"
+          fill="white"
+          transform="matrix(0.865865 0.500278 -0.871576 0.490261 159.14 87.1577)"
+        />
+      </clipPath>
+      <clipPath id="clip3_20786_38285">
+        <rect
+          width="12"
+          height="12"
+          fill="white"
+          transform="matrix(0.865865 0.500278 -0.871576 0.490261 120.928 84.9561)"
+        />
+      </clipPath>
+      <clipPath id="clip4_20786_38285">
+        <rect
+          width="12"
+          height="12"
+          fill="white"
+          transform="matrix(0.865865 0.500278 -0.871576 0.490261 131.318 90.9595)"
+        />
+      </clipPath>
+      <clipPath id="clip5_20786_38285">
+        <rect
+          width="12"
+          height="12"
+          fill="white"
+          transform="matrix(0.865865 0.500278 -0.871576 0.490261 141.709 96.9629)"
+        />
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+export default TransferImage

package/templates/storefront/src/modules/order/templates/order-completed-template.tsx

@@ -0,0 +1,53 @@
+import { T } from "@lib/boutique/i18n-client"
+import { Heading } from "@medusajs/ui"
+import { cookies as nextCookies } from "next/headers"
+
+import CartTotals from "@modules/common/components/cart-totals"
+import Help from "@modules/order/components/help"
+import Items from "@modules/order/components/items"
+import OnboardingCta from "@modules/order/components/onboarding-cta"
+import OrderDetails from "@modules/order/components/order-details"
+import ShippingDetails from "@modules/order/components/shipping-details"
+import PaymentDetails from "@modules/order/components/payment-details"
+import { HttpTypes } from "@medusajs/types"
+
+type OrderCompletedTemplateProps = {
+  order: HttpTypes.StoreOrder
+}
+
+export default async function OrderCompletedTemplate({
+  order,
+}: OrderCompletedTemplateProps) {
+  const cookies = await nextCookies()
+
+  const isOnboarding = cookies.get("_medusa_onboarding")?.value === "true"
+
+  return (
+    <div className="py-6 min-h-[calc(100vh-64px)]">
+      <div className="content-container flex flex-col justify-center items-center gap-y-10 max-w-4xl h-full w-full">
+        {isOnboarding && <OnboardingCta orderId={order.id} />}
+        <div
+          className="flex flex-col gap-4 max-w-4xl h-full bg-white w-full py-10"
+          data-testid="order-complete-container"
+        >
+          <Heading
+            level="h1"
+            className="flex flex-col gap-y-3 text-ui-fg-base text-3xl mb-4"
+          >
+            <span><T k="order.thanks" /></span>
+            <span><T k="order.placed" /></span>
+          </Heading>
+          <OrderDetails order={order} />
+          <Heading level="h2" className="flex flex-row text-3xl-regular">
+            <T k="order.summary" />
+          </Heading>
+          <Items order={order} />
+          <CartTotals totals={order} />
+          <ShippingDetails order={order} />
+          <PaymentDetails order={order} />
+          <Help />
+        </div>
+      </div>
+    </div>
+  )
+}

package/templates/storefront/src/modules/order/templates/order-details-template.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import { XMark } from "@medusajs/icons"
+import { HttpTypes } from "@medusajs/types"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+import Help from "@modules/order/components/help"
+import Items from "@modules/order/components/items"
+import OrderDetails from "@modules/order/components/order-details"
+import OrderSummary from "@modules/order/components/order-summary"
+import ShippingDetails from "@modules/order/components/shipping-details"
+import React from "react"
+
+type OrderDetailsTemplateProps = {
+  order: HttpTypes.StoreOrder
+}
+
+const OrderDetailsTemplate: React.FC<OrderDetailsTemplateProps> = ({
+  order,
+}) => {
+  return (
+    <div className="flex flex-col justify-center gap-y-4">
+      <div className="flex gap-2 justify-between items-center">
+        <h1 className="text-2xl-semi">Order details</h1>
+        <LocalizedClientLink
+          href="/account/orders"
+          className="flex gap-2 items-center text-ui-fg-subtle hover:text-ui-fg-base"
+          data-testid="back-to-overview-button"
+        >
+          <XMark /> Back to overview
+        </LocalizedClientLink>
+      </div>
+      <div
+        className="flex flex-col gap-4 h-full bg-white w-full"
+        data-testid="order-details-container"
+      >
+        <OrderDetails order={order} showStatus />
+        <Items order={order} />
+        <ShippingDetails order={order} />
+        <OrderSummary order={order} />
+        <Help />
+      </div>
+    </div>
+  )
+}
+
+export default OrderDetailsTemplate

package/templates/storefront/src/modules/products/components/thumbnail/index.tsx

@@ -0,0 +1,70 @@
+import { Container, clx } from "@medusajs/ui"
+import Image from "next/image"
+import React from "react"
+
+import PlaceholderImage from "@modules/common/icons/placeholder-image"
+
+type ThumbnailProps = {
+  thumbnail?: string | null
+  // TODO: Fix image typings
+  images?: any[] | null
+  size?: "small" | "medium" | "large" | "full" | "square"
+  isFeatured?: boolean
+  className?: string
+  "data-testid"?: string
+}
+
+const Thumbnail: React.FC<ThumbnailProps> = ({
+  thumbnail,
+  images,
+  size = "small",
+  isFeatured,
+  className,
+  "data-testid": dataTestid,
+}) => {
+  const initialImage = thumbnail || images?.[0]?.url
+
+  return (
+    <Container
+      className={clx(
+        "relative w-full overflow-hidden p-4 bg-ui-bg-subtle shadow-elevation-card-rest rounded-large group-hover:shadow-elevation-card-hover transition-shadow ease-in-out duration-150",
+        className,
+        {
+          "aspect-[11/14]": isFeatured,
+          "aspect-[9/16]": !isFeatured && size !== "square",
+          "aspect-[1/1]": size === "square",
+          "w-[180px]": size === "small",
+          "w-[290px]": size === "medium",
+          "w-[440px]": size === "large",
+          "w-full": size === "full",
+        }
+      )}
+      data-testid={dataTestid}
+    >
+      <ImageOrPlaceholder image={initialImage} size={size} />
+    </Container>
+  )
+}
+
+const ImageOrPlaceholder = ({
+  image,
+  size,
+}: Pick<ThumbnailProps, "size"> & { image?: string }) => {
+  return image ? (
+    <Image
+      src={image}
+      alt="Thumbnail"
+      className="absolute inset-0 object-cover object-center"
+      draggable={false}
+      quality={50}
+      sizes="(max-width: 576px) 280px, (max-width: 768px) 360px, (max-width: 992px) 480px, 800px"
+      fill
+    />
+  ) : (
+    <div className="w-full h-full absolute inset-0 flex items-center justify-center">
+      <PlaceholderImage size={size === "small" ? 16 : 24} />
+    </div>
+  )
+}
+
+export default Thumbnail