medusa-ui-common 2.0.0

package/src/common/components/cart-totals/index.tsx

@@ -0,0 +1,562 @@
+"use client"
+
+import { convertToLocale } from "medusa-ui-common/util/money"
+import { syncCheckoutAddressFromDom } from "medusa-ui-common/util/checkout-dom"
+import React from "react"
+import { HttpTypes } from "@medusajs/types"
+import { clx } from "@medusajs/ui"
+import LocalizedClientLink from "medusa-ui-common/common/components/localized-client-link"
+import { useRouter, usePathname, useSearchParams } from "next/navigation"
+import ProcessingOverlay from "medusa-ui-common/common/components/processing-overlay"
+import { useSiteCompany } from "medusa-storefront-core"
+
+type CartTotalsProps = {
+  totals: {
+    total?: number | null
+    subtotal?: number | null
+    tax_total?: number | null
+    currency_code: string
+    item_subtotal?: number | null
+    shipping_subtotal?: number | null
+    discount_subtotal?: number | null
+  }
+  items?: HttpTypes.StoreCartLineItem[]
+  checkoutStep?: string
+  customer?: HttpTypes.StoreCustomer | null
+}
+
+const CartTotals: React.FC<CartTotalsProps> = ({ totals, items = [], checkoutStep, customer }) => {
+  const company = useSiteCompany()
+  const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const activeStep = searchParams.get("step")
+
+  // Check if we're on the payment page, order page, or cart page
+  const isOnPaymentPage = pathname.includes("/checkout/payment")
+  const isOnOrderPage = pathname.includes("/order/")
+  const isOnCartPage = pathname.includes("/cart")
+
+  const {
+    currency_code,
+    total,
+    tax_total,
+    item_subtotal,
+    shipping_subtotal,
+    discount_subtotal,
+  } = totals
+
+  // Calculate Total MRP (sum of original_total from all items)
+  const totalMRP = items.reduce((sum, item) => {
+    return sum + (item.original_total || item.total || 0)
+  }, 0)
+
+  // Calculate total discount (difference between MRP and current subtotal)
+  const calculatedDiscount = totalMRP > (item_subtotal || 0)
+    ? totalMRP - (item_subtotal || 0)
+    : (discount_subtotal || 0)
+
+  // Use GST label for taxes (as shown in the image)
+  const gstAmount = tax_total || 0
+  const shippingAmount = shipping_subtotal || 0
+  const finalTotal = total || 0
+  const itemCount = items.length
+
+  const [isRedirecting, setIsRedirecting] = React.useState(false)
+  const [showOverlay, setShowOverlay] = React.useState(false)
+  const [processingVariant, setProcessingVariant] = React.useState<"payment" | "order">("payment")
+  const [isAutoSettingShipping, setIsAutoSettingShipping] = React.useState(false)
+
+  // Auto-set shipping method if on payment step and none is selected
+  const hasAutoSet = React.useRef<string | null>(null)
+  
+  // Listen for real-time shipping updates
+  React.useEffect(() => {
+    const handlePostalUpdate = () => {
+       // Show loading state in totals
+       setIsAutoSettingShipping(true)
+       // Reset auto-set ref to allow re-selection of shipping for new pincode
+       hasAutoSet.current = ""
+       // Trigger a single router refresh as a safeguard
+       router.refresh()
+    }
+
+    window.addEventListener('postal-code-updated', handlePostalUpdate)
+    window.addEventListener('address-updated-silent', () => {
+       setIsAutoSettingShipping(true)
+       // Reset auto-set ref
+       hasAutoSet.current = ""
+    })
+    return () => {
+      window.removeEventListener('postal-code-updated', handlePostalUpdate)
+      window.removeEventListener('address-updated-silent', () => {})
+    }
+  }, [router])
+
+  // Safety reset for Calculating state
+  React.useEffect(() => {
+    const cart = totals as any
+    if (cart?.shipping_methods && cart.shipping_methods.length > 0) {
+      if (isAutoSettingShipping) {
+        setIsAutoSettingShipping(false)
+      }
+    }
+  }, [totals, isAutoSettingShipping])
+
+  React.useEffect(() => {
+    autoSetShipping()
+  }, [activeStep, totals, router])
+
+
+  const isSetting = React.useRef(false)
+
+  const autoSetShipping = async (retryCount = 0) => {
+    const cart = totals as any
+    if (!cart?.id || isSetting.current) return
+
+    // If shipping methods already exist, we are done
+    if (cart?.shipping_methods && cart.shipping_methods.length > 0) {
+      setIsAutoSettingShipping(false)
+      return
+    }
+
+    const { listCartOptions, setShippingMethod } = await import("medusa-storefront-data/cart")
+    const currentKey = cart.id + cart.shipping_address?.postal_code
+
+    const isCheckoutPage = pathname.includes("/checkout")
+    const shouldAutoSet = (activeStep === "payment" || isCheckoutPage) && cart?.shipping_address?.postal_code?.length === 6
+
+    if (shouldAutoSet && hasAutoSet.current !== currentKey) {
+      
+      isSetting.current = true
+      setIsAutoSettingShipping(true)
+
+      try {
+        const { shipping_options } = await listCartOptions()
+        
+        if (shipping_options && shipping_options.length > 0) {
+          await setShippingMethod({ cartId: cart.id, shippingMethodId: shipping_options[0].id })
+          hasAutoSet.current = currentKey // Mark as done for this pincode
+          router.refresh()
+          // Final unlock delay
+          setTimeout(() => {
+            setIsAutoSettingShipping(false)
+            isSetting.current = false
+          }, 1500)
+        } else if (retryCount < 6) {
+          // Keep trying if no options yet
+          setTimeout(() => {
+            isSetting.current = false
+            autoSetShipping(retryCount + 1)
+          }, 1500)
+        } else {
+           setIsAutoSettingShipping(false)
+           isSetting.current = false
+        }
+      } catch (e) {
+        setIsAutoSettingShipping(false)
+        isSetting.current = false
+      }
+    } else {
+       setIsAutoSettingShipping(false)
+       isSetting.current = false
+    }
+  }
+
+  React.useEffect(() => {
+    autoSetShipping()
+  }, [activeStep, totals, router])
+
+  const syncLastEtdToCart = async () => {
+    try {
+      const cart = totals as any
+      const cookiesArr = document.cookie.split('; ')
+      const etdCookie = cookiesArr.find(row => row.startsWith('_medusa_last_etd='))
+      const lastEtdValue = etdCookie ? etdCookie.split('=')[1] : null
+
+      if (lastEtdValue && cart?.id && cart.metadata?.estimated_delivery !== lastEtdValue) {
+        const { updateCartMetadataSilently } = await import("medusa-storefront-data/cart")
+        await updateCartMetadataSilently({
+          ...cart.metadata,
+          estimated_delivery: lastEtdValue
+        })
+      }
+    } catch (e) {
+      // Ignore sync failure as it's non-critical
+    }
+  }
+
+  const trackCheckoutAnalytics = async (cart: HttpTypes.StoreCart) => {
+    try {
+      const { cartToEcommercePayload, trackInitiateCheckoutFromCart } = await import(
+        "medusa-storefront-analytics"
+      )
+      const checkoutPayload = cartToEcommercePayload(cart)
+      if (checkoutPayload) {
+        trackInitiateCheckoutFromCart(checkoutPayload, cart?.id)
+      }
+    } catch {
+      // Analytics must never block checkout navigation.
+    }
+  }
+
+  const trackPaymentMethodClick = async (paymentType: "cod" | "razorpay") => {
+    try {
+      const { cartToEcommercePayload, trackAddPaymentInfo } = await import(
+        "medusa-storefront-analytics"
+      )
+      const payload = cartToEcommercePayload(totals as HttpTypes.StoreCart)
+      if (payload) {
+        trackAddPaymentInfo(payload, { payment_type: paymentType })
+      }
+    } catch {
+      // Analytics must never block payment.
+    }
+  }
+
+  const handleProceedToCheckout = async () => {
+    if (isRedirecting) return
+
+    const countryCode = pathname.split("/")[1] || "in"
+    const cart = totals as HttpTypes.StoreCart
+    const savedAddresses = customer?.addresses ?? []
+    const checkoutStep = savedAddresses.length > 0 ? "payment" : "address"
+
+    setIsRedirecting(true)
+
+    try {
+      await trackCheckoutAnalytics(cart)
+
+      if (savedAddresses.length > 0) {
+        const defaultAddress =
+          savedAddresses.find(
+            (a) =>
+              a.is_default_shipping ||
+              a.metadata?.is_default === "true" ||
+              a.metadata?.is_default === true
+          ) || savedAddresses[0]
+
+        if (defaultAddress) {
+          const formData = new FormData()
+          formData.append("shipping_address.first_name", defaultAddress.first_name || "")
+          formData.append("shipping_address.last_name", defaultAddress.last_name || "")
+          formData.append("shipping_address.address_1", defaultAddress.address_1 || "")
+          formData.append("shipping_address.address_2", defaultAddress.address_2 || "")
+          formData.append("shipping_address.company", defaultAddress.company || "")
+          formData.append("shipping_address.postal_code", defaultAddress.postal_code || "")
+          formData.append("shipping_address.city", defaultAddress.city || "")
+          formData.append("shipping_address.country_code", defaultAddress.country_code || "")
+          formData.append("shipping_address.province", defaultAddress.province || "")
+          formData.append("shipping_address.phone", defaultAddress.phone || "")
+          formData.append("email", customer?.email || "")
+          formData.append("same_as_billing", "on")
+
+          const { setAddresses } = await import("medusa-storefront-data/cart")
+          await setAddresses(null, formData)
+        }
+      }
+
+      if (isOnCartPage) {
+        router.push(`/${countryCode}/checkout?step=${checkoutStep}`)
+      }
+    } catch (error) {
+      console.error("Proceed to checkout failed:", error)
+      if (isOnCartPage) {
+        router.push(`/${countryCode}/checkout?step=address`)
+      }
+    } finally {
+      setIsRedirecting(false)
+    }
+  }
+
+  return (
+    <div className="bg-[#FFFAFE] rounded-lg p-3 min-[550px]:p-4 sm:p-5 md:p-6 min-[1023px]:p-4 min-[1150px]:p-5 min-[1360px]:p-6 border shadow-sm w-full" style={{ borderColor: '#C0C0C0' }}>
+      <ProcessingOverlay isOpen={showOverlay} variant={processingVariant} />
+      <h3 className="text-sm min-[550px]:text-base sm:text-lg min-[1023px]:text-base min-[1150px]:text-lg min-[1360px]:text-lg font-bold text-gray-900 mb-2.5 min-[550px]:mb-3 sm:mb-4 min-[1023px]:mb-3 min-[1150px]:mb-4 min-[1360px]:mb-4">
+        PRICE SUMMARY ({itemCount} {itemCount === 1 ? "ITEM" : "ITEMS"})
+      </h3>
+
+      <div className="flex flex-col gap-y-2 min-[550px]:gap-y-2.5 sm:gap-y-3 min-[1023px]:gap-y-2 min-[1150px]:gap-y-3 min-[1360px]:gap-y-3 text-xs min-[550px]:text-sm sm:text-base min-[1023px]:text-sm min-[1150px]:text-base min-[1360px]:text-base text-gray-900">
+        <div className="flex items-center justify-between">
+          <span>Total MRP</span>
+          <span data-testid="cart-mrp" data-value={totalMRP}>
+            {convertToLocale({ amount: totalMRP, currency_code })}
+          </span>
+        </div>
+
+        {calculatedDiscount > 0 && (
+          <div className="flex items-center justify-between">
+            <span>Discount</span>
+            <span
+              className="text-gray-900"
+              data-testid="cart-discount"
+              data-value={calculatedDiscount}
+            >
+              {convertToLocale({
+                amount: -calculatedDiscount,
+                currency_code,
+              })}
+            </span>
+          </div>
+        )}
+
+        <div className="flex items-center justify-between">
+          <span>GST</span>
+          <span data-testid="cart-taxes" data-value={gstAmount}>
+            {convertToLocale({ amount: gstAmount, currency_code })}
+          </span>
+        </div>
+
+        <div className="flex items-center justify-between">
+          <span>Shipping</span>
+          <span data-testid="cart-shipping" data-value={shippingAmount} className="flex items-center gap-x-2">
+            {isAutoSettingShipping && (
+              <span className="w-4 h-4 border-2 border-[#8B5AB1] border-t-transparent rounded-full animate-spin"></span>
+            )}
+            {convertToLocale({ amount: shippingAmount, currency_code })}
+          </span>
+        </div>
+      </div>
+
+      <div className="h-px w-full border-b border-gray-200 my-3 min-[550px]:my-4" />
+
+      <div className="flex items-center justify-between text-xs min-[550px]:text-sm sm:text-base min-[1023px]:text-sm min-[1150px]:text-base min-[1360px]:text-base font-bold text-gray-900 mb-2.5 min-[550px]:mb-3 sm:mb-4 min-[1023px]:mb-3 min-[1150px]:mb-4 min-[1360px]:mb-4">
+        <span>Total</span>
+        <span
+          className="text-sm min-[550px]:text-base sm:text-lg min-[1023px]:text-base min-[1150px]:text-lg min-[1360px]:text-lg"
+          data-testid="cart-total"
+          data-value={finalTotal}
+        >
+          {convertToLocale({ amount: finalTotal, currency_code })}
+        </span>
+      </div>
+
+      {calculatedDiscount > 0 && (
+        <>
+          <div className="h-px w-full border-b border-dashed border-gray-300 my-2.5 min-[550px]:my-3 sm:my-4 min-[1023px]:my-3 min-[1150px]:my-4 min-[1360px]:my-4" />
+          <div className="text-center">
+            <p className="text-green-600 font-medium text-xs min-[550px]:text-sm sm:text-base min-[1023px]:text-sm min-[1150px]:text-base min-[1360px]:text-base">
+              🎉 Yayy!!! You've saved {convertToLocale({ amount: calculatedDiscount, currency_code })}
+            </p>
+          </div>
+        </>
+      )}
+
+      {/* No manual continue button needed as we are in one-step mode */}
+      {isOnCartPage && (
+        <button
+          onClick={handleProceedToCheckout}
+          disabled={isRedirecting}
+          data-ga-event="proceed_to_checkout_click"
+          data-meta-event="InitiateCheckout"
+          data-meta-action="proceed_to_checkout"
+          data-ga-label={convertToLocale({ amount: finalTotal, currency_code })}
+          className="w-full h-10 min-[550px]:h-11 sm:h-12 min-[1023px]:h-11 min-[1150px]:h-12 min-[1360px]:h-12 text-xs min-[550px]:text-sm sm:text-base min-[1023px]:text-sm min-[1150px]:text-base min-[1360px]:text-base text-white font-medium transition-colors duration-200 hover:opacity-90 mt-3 min-[550px]:mt-4 sm:mt-6 min-[1023px]:mt-5 min-[1150px]:mt-6 min-[1360px]:mt-6 disabled:opacity-50"
+          style={{
+            backgroundColor: '#8B5AB1',
+            borderRadius: '30px'
+          }}
+          data-testid="checkout-button"
+        >
+          {isRedirecting ? "Loading..." : "Proceed to Checkout"}
+        </button>
+      )}
+      {!isOnCartPage && (
+        <div className="w-full">
+          {activeStep === "delivery" || activeStep === "payment" || !((totals as any)?.shipping_address?.address_1) || pathname.includes("/checkout") ? (
+            <div className="flex flex-col gap-3 mt-3 min-[550px]:mt-4 sm:mt-6 min-[1023px]:mt-5 min-[1150px]:mt-6 min-[1360px]:mt-6">
+              {!isRedirecting ? (
+                (() => {
+                  const isCheckoutReady = 
+                    ((totals as any).shipping_methods?.length > 0) && 
+                    !!((totals as any).shipping_address?.address_1) && 
+                    ((totals as any).shipping_address?.postal_code?.length >= 6);
+                  const isPaymentDisabled = isAutoSettingShipping || !isCheckoutReady;
+                  
+                  return (
+                    <>
+                  <button
+                    onClick={async () => {
+                      trackPaymentMethodClick("cod")
+                      setProcessingVariant("order")
+                      setShowOverlay(true)
+                      setIsRedirecting(true)
+                      try {
+                        await syncCheckoutAddressFromDom({
+                          email: (totals as any)?.email,
+                          shipping_address: (totals as any)?.shipping_address,
+                        })
+                        await syncLastEtdToCart()
+                        const { initiatePaymentSession, placeOrder } = await import("medusa-storefront-data/cart")
+                        await initiatePaymentSession(totals as any, { provider_id: "pp_system_default" })
+                        await placeOrder()
+                      } catch (err: any) {
+                        if (err.message === "NEXT_REDIRECT") {
+                          throw err // Next.js needs this error to perform the redirect
+                        }
+                        setIsRedirecting(false)
+                        setShowOverlay(false)
+                        alert("Oops! Something went wrong with Cash on Delivery. " + err.message)
+                      }
+                    }}
+                    disabled={isPaymentDisabled}
+                    data-ga-event="cod_payment_click"
+                    data-meta-event="AddPaymentInfo"
+                    data-meta-action="select_payment_method"
+                    data-meta-payment-type="cod"
+                    className={clx(
+                      "w-full py-2.5 min-[550px]:py-3 text-xs min-[550px]:text-sm sm:text-base text-gray-900 bg-white border-2 font-bold rounded-lg transition-colors border-[#8B5AB1]",
+                      {
+                        "hover:bg-purple-50": !isPaymentDisabled,
+                        "opacity-50 cursor-not-allowed": isPaymentDisabled
+                      }
+                    )}
+                    style={{ borderRadius: '30px' }}
+                  >
+                    Cash on Delivery
+                  </button>
+                  <button
+                    onClick={async () => {
+                      trackPaymentMethodClick("razorpay")
+                      setProcessingVariant("payment")
+                      setShowOverlay(true)
+                      setIsRedirecting(true)
+                      try {
+                        const synced = await syncCheckoutAddressFromDom({
+                          email: (totals as any)?.email,
+                          shipping_address: (totals as any)?.shipping_address,
+                        })
+                        await syncLastEtdToCart()
+                        const { initiatePaymentSession, placeOrder } = await import("medusa-storefront-data/cart")
+                        const updatedCart: any = await initiatePaymentSession(totals as any, { provider_id: "pp_razorpay_razorpay" }).catch(() => initiatePaymentSession(totals as any, { provider_id: "razorpay" }))
+
+                        const razorpaySession = updatedCart?.payment_collection?.payment_sessions?.find(
+                          (s: any) => s.provider_id.includes("razorpay")
+                        )
+                        if (!razorpaySession?.data?.id) throw new Error("Could not initialize Razorpay")
+
+                        const paymentEmail = synced.email || (updatedCart as any)?.email || (totals as any)?.email
+                        const paymentPhone =
+                          synced.shipping_address.phone ||
+                          (updatedCart as any)?.shipping_address?.phone ||
+                          (totals as any)?.shipping_address?.phone
+
+                        // Load loadRazorpay dynamically so it resolves window.Razorpay
+                        const useRazorpayMod = await import("react-razorpay")
+                        const useRazorpay = useRazorpayMod.useRazorpay || useRazorpayMod.default?.useRazorpay || (globalThis as any).useRazorpay
+
+                        // We must load via script if hook isn't directly invocable in this async context
+                        // The safest pure JS way:
+                        const script = document.createElement("script")
+                        script.src = "https://checkout.razorpay.com/v1/checkout.js"
+                        script.onload = () => {
+                          const options = {
+                            key: process.env.NEXT_PUBLIC_RAZORPAY_KEY ?? "",
+                            amount: razorpaySession.amount,
+                            order_id: razorpaySession.data.id,
+                            currency: currency_code.toUpperCase(),
+                            name: company.name,
+                            description: `Secure checkout for your order`,
+                            handler: async function (response: any) {
+                              await placeOrder().catch((err: any) => {
+                                if (err.message === "NEXT_REDIRECT") throw err;
+                                alert("Error placing order: " + err.message);
+                              })
+                            },
+                            prefill: {
+                              name: `${(totals as any).billing_address?.first_name || synced.shipping_address.first_name || ""} ${(totals as any).billing_address?.last_name || synced.shipping_address.last_name || ""}`.trim(),
+                              email: paymentEmail,
+                              contact: paymentPhone || undefined,
+                            },
+                            theme: {
+                              color: "#8B5AB1"
+                            },
+                            modal: {
+                              ondismiss: () => {
+                                setIsRedirecting(false)
+                                setShowOverlay(false)
+                              }
+                            }
+                          }
+                          const rzp = new (window as any).Razorpay(options)
+                          rzp.on("payment.failed", function (response: any) {
+                            setIsRedirecting(false)
+                            setShowOverlay(false)
+                          })
+                          rzp.open()
+                        }
+                        document.body.appendChild(script)
+
+                      } catch (err: any) {
+                        setIsRedirecting(false)
+                        setShowOverlay(false)
+                        alert("Oops! Something went wrong with Razorpay. " + err.message)
+                      }
+                    }}
+                    disabled={isPaymentDisabled}
+                    data-ga-event="razorpay_payment_click"
+                    data-meta-event="AddPaymentInfo"
+                    data-meta-action="select_payment_method"
+                    data-meta-payment-type="razorpay"
+                    className={clx(
+                      "w-full py-2.5 min-[550px]:py-3 text-xs min-[550px]:text-sm sm:text-base text-white font-bold rounded-lg transition-colors bg-[#8B5AB1]",
+                      {
+                        "hover:opacity-90": !isPaymentDisabled,
+                        "opacity-50 cursor-not-allowed": isPaymentDisabled
+                      }
+                    )}
+                    style={{ borderRadius: '30px' }}
+                  >
+                    Pay with Razorpay
+                  </button>
+                </>
+              ); })()
+              ) : (
+                <button
+                  disabled
+                  className="w-full py-2.5 min-[550px]:py-3 text-xs min-[550px]:text-sm sm:text-base text-white font-bold rounded-lg bg-gray-400 opacity-50 cursor-not-allowed"
+                  style={{ borderRadius: '30px' }}
+                >
+                  Processing...
+                </button>
+              )}
+            </div>
+          ) : activeStep === "address" ? (
+            <button
+              onClick={() => {
+                window.dispatchEvent(new CustomEvent('trigger-checkout-step'))
+              }}
+              className="w-full py-2.5 min-[550px]:py-3 sm:py-4 min-[1023px]:py-3 min-[1150px]:py-4 min-[1360px]:py-4 text-xs min-[550px]:text-sm sm:text-base min-[1023px]:text-sm min-[1150px]:text-base min-[1360px]:text-base text-white font-medium mt-3 min-[550px]:mt-4 sm:mt-6 min-[1023px]:mt-5 min-[1150px]:mt-6 min-[1360px]:mt-6 rounded-lg transition-colors duration-200 hover:opacity-90"
+              style={{
+                backgroundColor: '#8B5AB1',
+                borderRadius: '30px'
+              }}
+              data-testid="checkout-button-address"
+            >
+              Continue to delivery
+            </button>
+          ) : (
+            <button
+              onClick={handleProceedToCheckout}
+              disabled={isRedirecting}
+              data-ga-event="proceed_to_checkout_click"
+              data-meta-event="InitiateCheckout"
+              data-meta-action="proceed_to_checkout"
+              data-ga-label={convertToLocale({ amount: finalTotal, currency_code })}
+              className="w-full h-10 min-[550px]:h-11 sm:h-12 min-[1023px]:h-11 min-[1150px]:h-12 min-[1360px]:h-12 text-xs min-[550px]:text-sm sm:text-base min-[1023px]:text-sm min-[1150px]:text-base min-[1360px]:text-base text-white font-medium transition-colors duration-200 hover:opacity-90 mt-3 min-[550px]:mt-4 sm:mt-6 min-[1023px]:mt-5 min-[1150px]:mt-6 min-[1360px]:mt-6 disabled:opacity-50"
+              style={{
+                backgroundColor: '#8B5AB1',
+                borderRadius: '30px'
+              }}
+              data-testid="checkout-button"
+            >
+              {isRedirecting ? "Loading..." : "Proceed to Checkout"}
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default CartTotals

package/src/common/components/checkbox/index.tsx

@@ -0,0 +1,98 @@
+import { Label } from "@medusajs/ui"
+import React from "react"
+import Color from "color"
+
+type CheckboxProps = {
+  checked?: boolean
+  onChange?: () => void
+  label: string
+  name?: string
+  color?: string
+  hex?: string
+  'data-testid'?: string
+  'data-ga-event'?: string
+  'data-ga-label'?: string
+}
+
+const CheckboxWithLabel: React.FC<CheckboxProps> = ({
+  checked = true,
+  onChange,
+  label,
+  name,
+  color,
+  hex,
+  'data-testid': dataTestId,
+  'data-ga-event': dataGaEvent,
+  'data-ga-label': dataGaLabel
+}) => {
+  const colorHex = React.useMemo(() => {
+    if (hex) return hex
+    if (!color) return null
+
+    try {
+      // Try parsing the original color name (handles things like "darkgreen")
+      return Color(color.toLowerCase().replace(/\s+/g, '')).hex()
+    } catch (e) {
+      try {
+        // Try parsing without modification (handles things like "rgb(0,0,0)")
+        return Color(color).hex()
+      } catch (e2) {
+        // Final fallback to the color string itself (might be a valid CSS name or hex already)
+        return color
+      }
+    }
+  }, [hex, color])
+
+  return (
+    <div className="flex items-center space-x-2 px-1 py-0.5">
+      <button
+        type="button"
+        role="checkbox"
+        aria-checked={checked}
+        onClick={onChange}
+        name={name}
+        data-testid={dataTestId}
+        data-ga-event={dataGaEvent}
+        data-ga-label={dataGaLabel}
+        className="w-5 h-5 rounded-md border-2 flex items-center justify-center transition-all focus:outline-none focus:ring-2 focus:ring-offset-2"
+        style={checked ? {
+          backgroundColor: '#8B5AB1',
+          borderColor: '#8B5AB1'
+        } : {
+          backgroundColor: 'white',
+          borderColor: '#C0C0C0'
+        }}
+      >
+        {checked && (
+          <svg
+            className="w-3 h-3 text-white"
+            fill="none"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path d="M5 13l4 4L19 7"></path>
+          </svg>
+        )}
+      </button>
+      <Label
+        htmlFor={name || "checkbox"}
+        className="!transform-none !txt-medium cursor-pointer flex items-center gap-2"
+        size="large"
+        onClick={onChange}
+      >
+        {colorHex && (
+          <div
+            className="w-4 h-4 rounded-full border border-gray-100 shadow-sm"
+            style={{ backgroundColor: colorHex }}
+          />
+        )}
+        {label}
+      </Label>
+    </div>
+  )
+}
+
+export default CheckboxWithLabel