modules/cart

Author: adambarath

src/locales/us.ts

@@ -10,8 +10,21 @@ export default {
   "cart.shipping": "Shipping",
   "cart.giftcard": "Gift card",
   "cart.total": "Total",
+  "cart.summary": "Summary",
+  "cart.checkout": "Go to checkout",
+  "cart.cart": "Cart",
+  "cart.item": "Item",
+  "cart.price": "Price",
+  "cart.quantity": "Quantity",
+  "cart.signin.prompt1": "Already have an account?",
+  "cart.signin.prompt2": "Sign in for a better experience.",
+  "cart.signin.signin": "Sign in",
+  "cart.select": "Select...",
+  "cart.empty_prompt1": "You don't have anything in your cart. Let's change that, use the link below to start browsing our products.",
+  "cart.empty_prompt2": "Explore products",
   "cart.": "",
 
+  
   "cart.dropdown.cart": "Cart ({count})",
   "cart.dropdown.quantity": "Quantity: ",
   "cart.dropdown.remove": "Remove",

src/modules/cart/components/cart-item-select/index.tsx

@@ -10,6 +10,8 @@ import {
   useState,
 } from "react"
 
+import { useScopedI18n } from "../../../../locales/client"
+
 import ChevronDown from "@modules/common/icons/chevron-down"
 
 type NativeSelectProps = {
@@ -19,7 +21,10 @@ type NativeSelectProps = {
 } & Omit<SelectHTMLAttributes<HTMLSelectElement>, "size">
 
 const CartItemSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
-  ({ placeholder = "Select...", className, children, ...props }, ref) => {
+  ({ placeholder = null, className, children, ...props }, ref) => {
+    const t = useScopedI18n("cart")
+    placeholder = placeholder || t("select")
+
     const innerRef = useRef<HTMLSelectElement>(null)
     const [isPlaceholder, setIsPlaceholder] = useState(false)
 

src/modules/cart/components/empty-cart-message/index.tsx

@@ -1,22 +1,28 @@
-import { Heading, Text } from "@medusajs/ui"
+"use client"
 
+import { Heading, Text } from "@medusajs/ui"
 import InteractiveLink from "@modules/common/components/interactive-link"
+import { useScopedI18n } from "../../../../locales/client"
 
 const EmptyCartMessage = () => {
+  const t = useScopedI18n("cart")
+
   return (
-    <div className="py-48 px-2 flex flex-col justify-center items-start" data-testid="empty-cart-message">
+    <div
+      className="py-48 px-2 flex flex-col justify-center items-start"
+      data-testid="empty-cart-message"
+    >
       <Heading
         level="h1"
         className="flex flex-row text-3xl-regular gap-x-2 items-baseline"
       >
-        Cart
+        {t("cart")}
       </Heading>
       <Text className="text-base-regular mt-4 mb-6 max-w-[32rem]">
-        You don&apos;t have anything in your cart. Let&apos;s change that, use
-        the link below to start browsing our products.
+        {t("empty_prompt1")}
       </Text>
       <div>
-        <InteractiveLink href="/store">Explore products</InteractiveLink>
+        <InteractiveLink href="/store">{t("empty_prompt2")}</InteractiveLink>
       </div>
     </div>
   )

src/modules/cart/components/sign-in-prompt/index.tsx

@@ -1,21 +1,31 @@
+"use client"
+
+import { useScopedI18n } from "../../../../locales/client"
+
 import { Button, Heading, Text } from "@medusajs/ui"
 import LocalizedClientLink from "@modules/common/components/localized-client-link"
 
 const SignInPrompt = () => {
+  const t = useScopedI18n("cart.signin")
+
   return (
     <div className="bg-white flex items-center justify-between">
       <div>
         <Heading level="h2" className="txt-xlarge">
-          Already have an account?
+          {t("prompt1")}
         </Heading>
         <Text className="txt-medium text-ui-fg-subtle mt-2">
-          Sign in for a better experience.
+          {t("prompt2")}
         </Text>
       </div>
       <div>
         <LocalizedClientLink href="/account">
-          <Button variant="secondary" className="h-10" data-testid="sign-in-button">
-            Sign in
+          <Button
+            variant="secondary"
+            className="h-10"
+            data-testid="sign-in-button"
+          >
+            {t("signin")}
           </Button>
         </LocalizedClientLink>
       </div>

src/modules/cart/templates/items.tsx

@@ -1,6 +1,10 @@
+"use client"
+
 import { LineItem, Region } from "@medusajs/medusa"
 import { Heading, Table } from "@medusajs/ui"
 
+import { useScopedI18n } from "../../../locales/client"
+
 import Item from "@modules/cart/components/item"
 import SkeletonLineItem from "@modules/skeletons/components/skeleton-line-item"
 
@@ -10,22 +14,24 @@ type ItemsTemplateProps = {
 }
 
 const ItemsTemplate = ({ items, region }: ItemsTemplateProps) => {
+  const t = useScopedI18n("cart")
+
   return (
     <div>
       <div className="pb-3 flex items-center">
-        <Heading className="text-[2rem] leading-[2.75rem]">Cart</Heading>
+        <Heading className="text-[2rem] leading-[2.75rem]">{t("cart")}</Heading>
       </div>
       <Table>
         <Table.Header className="border-t-0">
           <Table.Row className="text-ui-fg-subtle txt-medium-plus">
-            <Table.HeaderCell className="!pl-0">Item</Table.HeaderCell>
+            <Table.HeaderCell className="!pl-0">{t("item")}</Table.HeaderCell>
             <Table.HeaderCell></Table.HeaderCell>
-            <Table.HeaderCell>Quantity</Table.HeaderCell>
+            <Table.HeaderCell>{t("quantity")}</Table.HeaderCell>
             <Table.HeaderCell className="hidden small:table-cell">
-              Price
+              {t("price")}
             </Table.HeaderCell>
             <Table.HeaderCell className="!pr-0 text-right">
-              Total
+              {t("total")}
             </Table.HeaderCell>
           </Table.Row>
         </Table.Header>

src/modules/cart/templates/summary.tsx

@@ -2,6 +2,8 @@
 
 import { Button, Heading } from "@medusajs/ui"
 
+import { useScopedI18n } from '../../../locales/client'
+
 import CartTotals from "@modules/common/components/cart-totals"
 import Divider from "@modules/common/components/divider"
 import { CartWithCheckoutStep } from "types/global"
@@ -13,16 +15,17 @@ type SummaryProps = {
 }
 
 const Summary = ({ cart }: SummaryProps) => {
+  const t = useScopedI18n("cart")
   return (
     <div className="flex flex-col gap-y-4">
       <Heading level="h2" className="text-[2rem] leading-[2.75rem]">
-        Summary
+      {t("summary")}
       </Heading>
       <DiscountCode cart={cart} />
       <Divider />
       <CartTotals data={cart} />
       <LocalizedClientLink href={"/checkout?step=" + cart.checkout_step} data-testid="checkout-button">
-        <Button className="w-full h-10">Go to checkout</Button>
+        <Button className="w-full h-10">{t("checkout")}</Button>
       </LocalizedClientLink>
     </div>
   )

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

@@ -150,7 +150,7 @@ const DiscountCode: React.FC<DiscountCodeProps> = ({ cart }) => {
               <>
                 <div className="flex w-full gap-x-2 items-center">
                   <Input
-                    label="Please enter code"
+                    label="Please enter code----------------------------------------------------------------------------------------"
                     name="code"
                     type="text"
                     autoFocus={false}

src/modules/common/components/native-select/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useI18n } from '../../../../locales/client'
+import { useI18n } from "../../../../locales/client"
 import { ChevronUpDown } from "@medusajs/icons"
 import { clx } from "@medusajs/ui"
 import {
@@ -11,6 +11,7 @@ import {
   useRef,
   useState,
 } from "react"
+import { useScopedI18n } from "../../../../locales/client"
 
 export type NativeSelectProps = {
   placeholder?: string
@@ -20,12 +21,14 @@ export type NativeSelectProps = {
 
 const NativeSelect = forwardRef<HTMLSelectElement, NativeSelectProps>(
   (
-    { placeholder = "Select...", defaultValue, className, children, ...props },
+    { placeholder = null, defaultValue, className, children, ...props },
     ref
   ) => {
+    const t = useI18n()
+    placeholder = placeholder || t("cart.select")
+
     const innerRef = useRef<HTMLSelectElement>(null)
     const [isPlaceholder, setIsPlaceholder] = useState(false)
-    const t = useI18n()
 
     useImperativeHandle<HTMLSelectElement | null, HTMLSelectElement | null>(
       ref,