Cart: show variant label

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
-            <Checkbox
+            key={option.value}
-              key={option.value}
+            value={option.value}
-              value={option.value}
+            // style={{ width: 24, height: 24, borderRadius: 30 }}
-              // 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",
+                  fontSize: "1rem",
-                  flexDirection: "row",
-                  justifyContent: "space-between",
-                  width: "100%",
-                  padding: "8px 0",
                 }}
               >
-                <ProText
+                {option.label}
-                  style={{
+              </ProText>
-                    fontSize: "1rem",
+              <ProText style={{ fontSize: "1rem" }}>{option.price}</ProText>
-                  }}
+            </div>
-                >
+          </Checkbox>
-                  {option.label}
-                </ProText>
-                <ProText style={{ fontSize: "1rem" }}>{option.price}</ProText>
-              </div>
-            </Checkbox>
-            {/* {index !== options.length - 1 && <Divider style={{ margin: 0 }} />} */}
-          </>
         ))}
       </Space>
     </Checkbox.Group>

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

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,

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;