modules/checkout

Author: adambarath

src/locales/us.ts

@@ -1,5 +1,8 @@
 export default {
   "generic.somethingwrong": "Something went wrong",
+  "generic.edit": "Something went wrong",
+  "generic.apply": "Apply",
+  
   "nav.title": "Store",
   "nav.search": "Search",
   "nav.account": "Account",
@@ -24,6 +27,41 @@ export default {
   "cart.empty_prompt2": "Explore products",
   "cart.": "",
 
+  "checkout.inyourcart": "In your Cart",
+  "checkout.chooseaddress": "Choose an address",
+  "checkout.shipping_address": "Shipping Address",
+  "checkout.billing_address": "Billing address",
+  "checkout.continue": "Continue to delivery",
+  "checkout.same_as_billing": "Billing - and delivery address are the same.",
+  "checkout.shipping.free": "Free shipping",
+  "checkout.giftcards": "Gift card(s) applied:",
+  "checkout.code": "Code: ",
+  "checkout.removegift": "Remove gift card from order",
+  "checkout.discount": "Discount applied:",
+  "checkout.removediscount": "Remove discount code from order",
+  "checkout.addgift": "Add gift card or discount code",
+  "checkout.entercode": "Please enter code",
+  "checkout.payment.title": "Payment",
+  "checkout.payment.gift": "Gift card",
+  "checkout.payment.method": "Payment method",
+  "checkout.payment.anotherstep": "Another step will appear",
+  "checkout.payment.details": "Payment details",
+  "checkout.payment.continue": "Continue to review",
+  "checkout.payment.card_details": "Enter your card details:",
+  "checkout.payment.place_order": "Place order",
+  "checkout.payment.error": "An error occurred, please try again.",
+  "checkout.payment.error_unknown": "An unknown error occurred, please try again.",
+  "checkout.payment.error_params": "An error occurred, status",
+  "checkout.payment.stripe.error1": "Stripe key is missing. Set NEXT_PUBLIC_STRIPE_KEY environment variable.",
+  "checkout.payment.stripe.error2": "Stripe promise is missing. Make sure you have provided a valid Stripe key.",
+  "checkout.payment.stripe.error3": "Stripe client secret is missing. Cannot initialize Stripe.",
+  "checkout.payment.review.title": "Review",
+  "checkout.payment.review.aggrement": "By clicking the Place Order button, you confirm that you have read, understand and accept our Terms of Use, Terms of Sale and Returns Policy and acknowledge that you have read the Store's Privacy Policy.",
+  "checkout.shipping.title": "Delivery",
+  "checkout.shipping.edit": "Edit",
+  "checkout.shipping.continue": "Continue to payment",
+  "checkout.shipping.method": "Method",
+  "checkout.": "",
 
   "cart.dropdown.cart": "Cart ({count})",
   "cart.dropdown.quantity": "Quantity: ",

src/modules/checkout/components/address-select/index.tsx

@@ -5,6 +5,8 @@ import { clx } from "@medusajs/ui"
 import { omit } from "lodash"
 import { Fragment, useMemo } from "react"
 
+import { useScopedI18n } from '../../../../locales/client'
+
 import Radio from "@modules/common/components/radio"
 import { cartUpdate } from "@modules/checkout/actions"
 import compareAddresses from "@lib/util/compare-addresses"
@@ -15,6 +17,7 @@ type AddressSelectProps = {
 }
 
 const AddressSelect = ({ addresses, cart }: AddressSelectProps) => {
+  const t = useScopedI18n("checkout")
   const handleSelect = (id: string) => {
     const savedAddress = addresses.find((a) => a.id === id)
     if (savedAddress) {
@@ -47,7 +50,7 @@ const AddressSelect = ({ addresses, cart }: AddressSelectProps) => {
               <span className="block truncate">
                 {selectedAddress
                   ? selectedAddress.address_1
-                  : "Choose an address"}
+                  : t("chooseaddress") }
               </span>
               <ChevronUpDown
                 className={clx("transition-rotate duration-200", {

src/modules/checkout/components/addresses/index.tsx

@@ -10,6 +10,8 @@ import { Cart, Customer } from "@medusajs/medusa"
 import { CheckCircleSolid } from "@medusajs/icons"
 import { Heading, Text, useToggleState } from "@medusajs/ui"
 
+import { useI18n } from "../../../../locales/client"
+
 import Divider from "@modules/common/components/divider"
 import Spinner from "@modules/common/icons/spinner"
 
@@ -28,6 +30,7 @@ const Addresses = ({
   cart: Omit<Cart, "refundable_amount" | "refunded_total"> | null
   customer: Omit<Customer, "password_hash"> | null
 }) => {
+  const t = useI18n()
   const searchParams = useSearchParams()
   const router = useRouter()
   const pathname = usePathname()
@@ -56,7 +59,7 @@ const Addresses = ({
           level="h2"
           className="flex flex-row text-3xl-regular gap-x-2 items-baseline"
         >
-          Shipping Address
+          {t("checkout.shipping_address")}
           {!isOpen && <CheckCircleSolid />}
         </Heading>
         {!isOpen && cart?.shipping_address && (
@@ -66,7 +69,7 @@ const Addresses = ({
               className="text-ui-fg-interactive hover:text-ui-fg-interactive-hover"
               data-testid="edit-address-button"
             >
-              Edit
+              {t("generic.edit")}
             </button>
           </Text>
         )}
@@ -88,13 +91,15 @@ const Addresses = ({
                   level="h2"
                   className="text-3xl-regular gap-x-4 pb-6 pt-8"
                 >
-                  Billing address
+                  {t("checkout.billing_address")}
                 </Heading>
 
                 <BillingAddress cart={cart} countryCode={countryCode} />
               </div>
             )}
-            <SubmitButton className="mt-6" data-testid="submit-address-button">Continue to delivery</SubmitButton>
+            <SubmitButton className="mt-6" data-testid="submit-address-button">
+              {t("checkout.continue")}
+            </SubmitButton>
             <ErrorMessage error={message} data-testid="address-error-message" />
           </div>
         </form>
@@ -104,9 +109,12 @@ const Addresses = ({
             {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">
+                  <div
+                    className="flex flex-col w-1/3"
+                    data-testid="shipping-address-summary"
+                  >
                     <Text className="txt-medium-plus text-ui-fg-base mb-1">
-                      Shipping Address
+                      {t("checkout.shipping_address")}
                     </Text>
                     <Text className="txt-medium text-ui-fg-subtle">
                       {cart.shipping_address.first_name}{" "}
@@ -125,7 +133,10 @@ const Addresses = ({
                     </Text>
                   </div>
 
-                  <div className="flex flex-col w-1/3 " data-testid="shipping-contact-summary">
+                  <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>
@@ -137,14 +148,17 @@ const Addresses = ({
                     </Text>
                   </div>
 
-                  <div className="flex flex-col w-1/3" data-testid="billing-address-summary">
+                  <div
+                    className="flex flex-col w-1/3"
+                    data-testid="billing-address-summary"
+                  >
                     <Text className="txt-medium-plus text-ui-fg-base mb-1">
-                      Billing Address
+                      {t("checkout.billing_address")}
                     </Text>
 
                     {sameAsSBilling ? (
                       <Text className="txt-medium text-ui-fg-subtle">
-                        Billing- and delivery address are the same.
+                        {t("checkout.same_as_billing")}
                       </Text>
                     ) : (
                       <>

src/modules/checkout/components/country-select/index.tsx

@@ -2,6 +2,8 @@
 
 import { forwardRef, useImperativeHandle, useMemo, useRef } from "react"
 
+import { useI18n } from "../../../../locales/client"
+
 import NativeSelect, {
   NativeSelectProps,
 } from "@modules/common/components/native-select"
@@ -12,7 +14,10 @@ const CountrySelect = forwardRef<
   NativeSelectProps & {
     region?: Region
   }
->(({ placeholder = "Country", region, defaultValue, ...props }, ref) => {
+>(({ placeholder = null, region, defaultValue, ...props }, ref) => {
+  const t = useI18n()
+  placeholder = t("account.address.country_code")
+
   const innerRef = useRef<HTMLSelectElement>(null)
 
   useImperativeHandle<HTMLSelectElement | null, HTMLSelectElement | null>(

src/modules/checkout/components/discount-code/index.tsx

@@ -6,6 +6,8 @@ import { Heading, Label, Text, Tooltip } from "@medusajs/ui"
 import React, { useMemo } from "react"
 import { useFormState } from "react-dom"
 
+import { useI18n } from '../../../../locales/client'
+
 import Input from "@modules/common/components/input"
 import Trash from "@modules/common/icons/trash"
 import ErrorMessage from "@modules/checkout/components/error-message"
@@ -22,6 +24,7 @@ type DiscountCodeProps = {
 }
 
 const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
+  const t = useI18n()
   const [isOpen, setIsOpen] = React.useState(false)
 
   const { discounts, gift_cards, region } = cart
@@ -41,7 +44,7 @@ const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
         })}`
 
       default:
-        return "Free shipping"
+        return t("checkout.shipping.free")
     }
   }, [discounts, region])
 
@@ -60,15 +63,15 @@ const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
       <div className="txt-medium">
         {gift_cards.length > 0 && (
           <div className="flex flex-col mb-4">
-            <Heading className="txt-medium">Gift card(s) applied:</Heading>
+            <Heading className="txt-medium">{t("checkout.giftcards")}</Heading>
             {gift_cards?.map((gc) => (
               <div
                 className="flex items-center justify-between txt-small-plus"
                 key={gc.id}
                 data-testid="gift-card"
               >
                 <Text className="flex gap-x-1 items-baseline">
-                  <span>Code: </span>
+                  <span>{t("checkout.code")}</span>
                   <span className="truncate" data-testid="gift-card-code">
                     {gc.code}
                   </span>
@@ -90,7 +93,7 @@ const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
                   data-testid="remove-gift-card-button"
                 >
                   <Trash size={14} />
-                  <span className="sr-only">Remove gift card from order</span>
+                  <span className="sr-only">{t("checkout.removegift")}</span>
                 </button>
               </div>
             ))}
@@ -100,13 +103,13 @@ const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
         {appliedDiscount ? (
           <div className="w-full flex items-center">
             <div className="flex flex-col w-full">
-              <Heading className="txt-medium">Discount applied:</Heading>
+              <Heading className="txt-medium">{t("checkout.discount")}</Heading>
               <div
                 className="flex items-center justify-between w-full max-w-full"
                 data-testid="discount-row"
               >
                 <Text className="flex gap-x-1 items-baseline txt-small-plus w-4/5 pr-1">
-                  <span>Code:</span>
+                  <span>{t("checkout.code")}</span>
                   <span className="truncate" data-testid="discount-code">
                     {discounts[0].code}
                   </span>
@@ -125,7 +128,7 @@ const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
                 >
                   <Trash size={14} />
                   <span className="sr-only">
-                    Remove discount code from order
+                  {t("checkout.removediscount")}
                   </span>
                 </button>
               </div>
@@ -140,7 +143,7 @@ const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
                 className="txt-medium text-ui-fg-interactive hover:text-ui-fg-interactive-hover"
                 data-testid="add-discount-button"
               >
-                Add gift card or discount code
+                {t("checkout.addgift")}
               </button>
               <Tooltip content="You can add multiple gift cards, but only one discount code.">
                 <InformationCircleSolid color="var(--fg-muted)" />
@@ -150,7 +153,7 @@ const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
               <>
                 <div className="flex w-full gap-x-2 items-center">
                   <Input
-                    label="Please enter code----------------------------------------------------------------------------------------"
+                    label={t("checkout.entercode")}
                     name="code"
                     type="text"
                     autoFocus={false}
@@ -160,7 +163,7 @@ const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
                     variant="secondary"
                     data-testid="discount-apply-button"
                   >
-                    Apply
+                    {t("generic.apply")}
                   </SubmitButton>
                 </div>
                 <ErrorMessage

src/modules/checkout/components/payment-button/index.tsx

@@ -1,5 +1,7 @@
 "use client"
 
+import { useScopedI18n } from '../../../../locales/client'
+
 import { Cart, PaymentSession } from "@medusajs/medusa"
 import { Button } from "@medusajs/ui"
 import { OnApproveActions, OnApproveData } from "@paypal/paypal-js"
@@ -19,6 +21,7 @@ const PaymentButton: React.FC<PaymentButtonProps> = ({
   cart,
   "data-testid": dataTestId,
 }) => {
+
   const notReady =
     !cart ||
     !cart.shipping_address ||
@@ -66,6 +69,8 @@ const PaymentButton: React.FC<PaymentButtonProps> = ({
 const GiftCardPaymentButton = () => {
   const [submitting, setSubmitting] = useState(false)
 
+  const t = useScopedI18n("checkout.payment")
+
   const handleOrder = async () => {
     setSubmitting(true)
     await placeOrder()
@@ -77,7 +82,7 @@ const GiftCardPaymentButton = () => {
       isLoading={submitting}
       data-testid="submit-order-button"
     >
-      Place order
+      {t("place_order")}
     </Button>
   )
 }
@@ -94,9 +99,11 @@ const StripePaymentButton = ({
   const [submitting, setSubmitting] = useState(false)
   const [errorMessage, setErrorMessage] = useState<string | null>(null)
 
+  const t = useScopedI18n("checkout.payment")
+
   const onPaymentCompleted = async () => {
     await placeOrder().catch(() => {
-      setErrorMessage("An error occurred, please try again.")
+      setErrorMessage(t("error"))
       setSubmitting(false)
     })
   }
@@ -174,7 +181,7 @@ const StripePaymentButton = ({
         isLoading={submitting}
         data-testid={dataTestId}
       >
-        Place order
+        {t("place_order")}
       </Button>
       <ErrorMessage
         error={errorMessage}
@@ -196,9 +203,11 @@ const PayPalPaymentButton = ({
   const [submitting, setSubmitting] = useState(false)
   const [errorMessage, setErrorMessage] = useState<string | null>(null)
 
+  const t = useScopedI18n("checkout.payment")
+
   const onPaymentCompleted = async () => {
     await placeOrder().catch(() => {
-      setErrorMessage("An error occurred, please try again.")
+      setErrorMessage(t("error"))
       setSubmitting(false)
     })
   }
@@ -213,13 +222,13 @@ const PayPalPaymentButton = ({
       ?.authorize()
       .then((authorization) => {
         if (authorization.status !== "COMPLETED") {
-          setErrorMessage(`An error occurred, status: ${authorization.status}`)
+          setErrorMessage(t("error_params") + `: ${authorization.status}`)
           return
         }
         onPaymentCompleted()
       })
       .catch(() => {
-        setErrorMessage(`An unknown error occurred, please try again.`)
+        setErrorMessage(t("error_unknown"))
         setSubmitting(false)
       })
   }