make CheckoutSummary client component

Author: adambarath

src/app/[countryCode]/(checkout)/checkout/page.tsx

@@ -47,7 +47,7 @@ export default async function Checkout() {
       <Wrapper cart={cart}>
         <CheckoutForm />
       </Wrapper>
-      <CheckoutSummary />
+      <CheckoutSummary cart={cart} />
     </div>
   )
 }

src/modules/checkout/templates/checkout-form/index.tsx

@@ -1,3 +1,5 @@
+"use server"
+
 import {
   createPaymentSessions,
   getCustomer,

src/modules/checkout/templates/checkout-summary/index.tsx

@@ -1,23 +1,21 @@
+"use client"
+
 import { Heading } from "@medusajs/ui"
 
-import { getScopedI18n } from "../../../../locales/server"
+import { useScopedI18n } from "../../../../locales/client"
 
 import ItemsPreviewTemplate from "@modules/cart/templates/preview"
 import DiscountCode from "@modules/checkout/components/discount-code"
 import CartTotals from "@modules/common/components/cart-totals"
 import Divider from "@modules/common/components/divider"
-import { cookies } from "next/headers"
-import { getCart } from "@lib/data"
-
-const CheckoutSummary = async () => {
-  const t = await getScopedI18n("checkout")
-  const cartId = cookies().get("_medusa_cart_id")?.value
+import { Cart } from "medusa-react"
 
-  if (!cartId) {
-    return null
-  }
+type CheckoutSummaryProps = {
+  cart: Omit<Cart, "refundable_amount" | "refunded_total">
+}
 
-  const cart = await getCart(cartId).then((cart) => cart)
+const CheckoutSummary: React.FC<CheckoutSummaryProps> = ({ cart }) => {
+  const t = useScopedI18n("checkout")
 
   if (!cart) {
     return null