From 42a70affe22a99b86bfff4045c65640d26bc1c02 Mon Sep 17 00:00:00 2001
From: Mohammed Al-yaseen <mohammed.o.alyaseen@gmail.com>
Date: Tue, 11 Nov 2025 15:47:07 +0300
Subject: [PATCH] Cart: show variant label

---
 .../ProCheckboxGroups/ProCheckboxGroups.tsx   | 43 +++++++++----------
 .../components/CartMobileTabletLayout.tsx     | 12 +++++-
 .../product/components/ProductFooter.tsx      |  2 +-
 src/utils/types/appTypes.ts                   |  2 +-
 4 files changed, 33 insertions(+), 26 deletions(-)

diff --git a/src/components/ProCheckboxGroups/ProCheckboxGroups.tsx b/src/components/ProCheckboxGroups/ProCheckboxGroups.tsx
index 999663e..83563ae 100644
--- a/src/components/ProCheckboxGroups/ProCheckboxGroups.tsx
+++ b/src/components/ProCheckboxGroups/ProCheckboxGroups.tsx
@@ -17,33 +17,30 @@ const ProCheckboxGroups = ({ options, ...props }: ProCheckboxGroupsProps) => {
     >
       <Space direction="vertical" style={{ width: "100%" }}>
         {options.map((option: any) => (
-          <>
-            <Checkbox
-              key={option.value}
-              value={option.value}
-              // style={{ width: 24, height: 24, borderRadius: 30 }}
+          <Checkbox
+            key={option.value}
+            value={option.value}
+            // style={{ width: 24, height: 24, borderRadius: 30 }}
+          >
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                justifyContent: "space-between",
+                width: "100%",
+                padding: "8px 0",
+              }}
             >
-              <div
+              <ProText
                 style={{
-                  display: "flex",
-                  flexDirection: "row",
-                  justifyContent: "space-between",
-                  width: "100%",
-                  padding: "8px 0",
+                  fontSize: "1rem",
                 }}
               >
-                <ProText
-                  style={{
-                    fontSize: "1rem",
-                  }}
-                >
-                  {option.label}
-                </ProText>
-                <ProText style={{ fontSize: "1rem" }}>{option.price}</ProText>
-              </div>
-            </Checkbox>
-            {/* {index !== options.length - 1 && <Divider style={{ margin: 0 }} />} */}
-          </>
+                {option.label}
+              </ProText>
+              <ProText style={{ fontSize: "1rem" }}>{option.price}</ProText>
+            </div>
+          </Checkbox>
         ))}
       </Space>
     </Checkbox.Group>
diff --git a/src/pages/cart/components/CartMobileTabletLayout.tsx b/src/pages/cart/components/CartMobileTabletLayout.tsx
index c7b814a..aa2f952 100644
--- a/src/pages/cart/components/CartMobileTabletLayout.tsx
+++ b/src/pages/cart/components/CartMobileTabletLayout.tsx
@@ -42,6 +42,7 @@ export default function CartMobileTabletLayout({
 }: CartMobileTabletLayoutProps) {
   const { t } = useTranslation();
   const { items, collectionMethod, orderType } = useAppSelector(selectCart);
+  const { isRTL } = useAppSelector((state) => state.locale);
   const { subdomain } = useParams();
   const { isMobile, isTablet } = useBreakPoint();
 
@@ -146,7 +147,16 @@ export default function CartMobileTabletLayout({
                               fontWeight: 600,
                             }}
                           >
-                            {item.name}
+                            {item.name}{" "}
+                            <span
+                              style={{
+                                fontWeight: 400,
+                              }}
+                            >
+                              {isRTL
+                                ? item.variant?.optionsAR[0].value
+                                : item.variant?.options[0].value}
+                            </span>
                           </ProText>
                           <br />
                           <ProText
diff --git a/src/pages/product/components/ProductFooter.tsx b/src/pages/product/components/ProductFooter.tsx
index ab0aaca..f200824 100644
--- a/src/pages/product/components/ProductFooter.tsx
+++ b/src/pages/product/components/ProductFooter.tsx
@@ -67,7 +67,7 @@ export default function ProductFooter({
             image: product?.image,
             description: product?.description,
             comment: specialRequest,
-            variant: selectedVariant?.id,
+            variant: selectedVariant,
             extras: selectedExtras,
             extrasgroup: selectedGroups,
             isHasLoyalty: product?.isHasLoyalty,
diff --git a/src/utils/types/appTypes.ts b/src/utils/types/appTypes.ts
index 2dd0838..dd47727 100644
--- a/src/utils/types/appTypes.ts
+++ b/src/utils/types/appTypes.ts
@@ -321,7 +321,7 @@ export interface CartItem {
   image: string;
   quantity: number;
   description: string;
-  variant?: string;
+  variant?: Variant;
   extras?: Extra[];
   extrasgroup?: Extra[];
   isHasLoyalty?: boolean;