@pradip1995/create-storefront 1.0.1

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

@@ -0,0 +1,60 @@
+import { convertToLocale } from "@core/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>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>Discount</span>
+              <span>- {getAmount(order.discount_total)}</span>
+            </div>
+          )}
+          {order.gift_card_total > 0 && (
+            <div className="flex items-center justify-between">
+              <span>Discount</span>
+              <span>- {getAmount(order.gift_card_total)}</span>
+            </div>
+          )}
+          <div className="flex items-center justify-between">
+            <span>Shipping</span>
+            <span>{getAmount(order.shipping_total)}</span>
+          </div>
+          <div className="flex items-center justify-between">
+            <span>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>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,63 @@
+import { Container, Heading, Text } from "@medusajs/ui"
+
+import { isStripeLike, paymentInfoMap } from "@core/constants"
+import Divider from "@modules/common/components/divider"
+import { convertToLocale } from "@core/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">
+        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">
+                Payment method
+              </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">
+                Payment details
+              </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

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

@@ -0,0 +1,73 @@
+import { convertToLocale } from "@core/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">
+        Delivery
+      </Heading>
+      <div className="flex flex-col small:flex-row items-start gap-8">
+        <div
+          className="flex flex-col w-full small:w-1/3"
+          data-testid="shipping-address-summary"
+        >
+          <Text className="txt-medium-plus text-ui-fg-base mb-1">
+            Shipping Address
+          </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-full small: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 ? (order.shipping_address.phone.startsWith("+") ? order.shipping_address.phone : `+${order.shipping_address.phone}`) : ""}
+          </Text>
+          <Text className="txt-medium text-ui-fg-subtle">{order.email}</Text>
+        </div>
+
+        <div
+          className="flex flex-col w-full small: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.shipping_methods?.[0] as any)?.name || (order.shipping_methods?.[0] as any)?.shipping_option?.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,81 @@
+"use client"
+
+import { acceptTransferRequest, declineTransferRequest } from "@core/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">
+          Order transferred successfully!
+        </Text>
+      )}
+      {status?.decline === "success" && (
+        <Text className="text-emerald-500">
+          Order transfer declined successfully!
+        </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"
+            }
+          >
+            Accept transfer
+          </Button>
+          <Button
+            size="large"
+            variant="secondary"
+            onClick={declineTransfer}
+            isLoading={status?.decline === "pending"}
+            disabled={
+              status?.accept === "pending" || status?.decline === "pending"
+            }
+          >
+            Decline transfer
+          </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