tabexseriescomponents 0.2.1069 → 0.2.1071

package/srcbefore27-11/TabexComponents/Cards/Variants_J_Cards/Variants_J_Cards.jsx

@@ -0,0 +1,660 @@
+// import React, { useEffect, useState, useContext } from 'react';
+
+// const Variants_J_Cards = (props) => {
+//     const [item, setitem] = useState(props.actions.item);
+//     const [fetchingtypeprops, setfetchingtypeprops] = useState(props.actions.fetchingtypeprops);
+//     const [collectionid, setcollectionid] = useState(props.actions.collectionid);
+//     const cardonclickfunctionContext = props.actions.cardonclickfunctionContext;
+//     const [variants_iteminfo, setvariants_iteminfo] = useState({});
+//     const [options_w_values, setoptions_w_values] = useState([]);
+//     const [choosen_values, setchoosen_values] = useState([]);
+//     const [VariantCompletedObj, setVariantCompletedObj] = useState({});
+//     const sectionproperties = props.actions.sectionproperties;
+//     const lang = props.actions.lang;
+//     const langdetect = props.actions.langdetect;
+//     const foundMatchedVariantFunc = props.foundMatchedVariantFunc;
+//     const [index, setindex] = useState(props.cardinfoindexprops);
+//     const [VariantColorImageComObj, setVariantColorImageComObj] = useState({});
+//     const foundImageColorMatchingFunc = props.foundImageColorMatchingFunc;
+//     useEffect(() => {
+//         foundMatchedVariantFunc(VariantCompletedObj);
+//     }, [VariantCompletedObj]);
+//     useEffect(() => {
+//         let completedVariantObj = null;
+//         let variantimagematching = null;
+//         if (choosen_values.length > 0) {
+//             for (const variantitem of variants_iteminfo || []) {
+//                 const matchedValues = variantitem?.variantvalues_w_valueinfo?.filter((variantValue) => choosen_values.some((choosenValue) => choosenValue.valueid === variantValue.valueid));
+
+//                 if (matchedValues.length === choosen_values.length && matchedValues.length === variantitem.variantvalues_w_valueinfo.length) {
+//                     completedVariantObj = variantitem;
+//                     break;
+//                 }
+//             }
+//             choosen_values?.forEach(function (item, index) {
+//                 if (item?.option_info?.optionname == 'color' || item?.option_info?.optionname == 'Color') {
+//                     for (const variantitem of variants_iteminfo || []) {
+//                         const matchingValue = variantitem?.variantvalues_w_valueinfo?.find((value) => value?.valueid === item?.valueid);
+
+//                         if (matchingValue) {
+//                             variantimagematching = variantitem;
+//                         }
+//                     }
+//                 }
+//             });
+//         }
+
+//         setVariantColorImageComObj(variantimagematching || {});
+//         setVariantCompletedObj(completedVariantObj || {});
+//     }, [choosen_values]);
+//     useEffect(() => {
+//         var iteminfo = props.actions.item;
+//         var variants_iteminfo = props?.actions?.item?.variants_w_options;
+//         var options_w_values = [];
+//         variants_iteminfo?.forEach(function (item, index) {
+//             item?.variantvalues_w_valueinfo?.forEach(function (valitem) {
+//                 var isoptionexists = false;
+//                 var is_valitemexists = false;
+//                 var valitemtobeinsreted = { ...valitem };
+//                 valitemtobeinsreted.disabled = false;
+//                 options_w_values?.forEach(function (exopitem, exopindex) {
+//                     exopitem?.values?.forEach(function (valexistitem) {
+//                         if (valexistitem.valueid == valitemtobeinsreted.valueid) {
+//                             is_valitemexists = true;
+//                         }
+//                     });
+//                 });
+//                 options_w_values?.forEach(function (exopitem, exopindex) {
+//                     if (exopitem?.option_info?.optionid == valitemtobeinsreted?.option_info?.optionid) {
+//                         if (is_valitemexists == false) {
+//                             exopitem.values.push({ ...valitemtobeinsreted, valueindex: valitemtobeinsreted?.valueinfo?.valueindex });
+//                         }
+//                         isoptionexists = true;
+//                     }
+//                 });
+//                 if (isoptionexists == false) {
+//                     options_w_values.push({
+//                         option_info: valitem.option_info,
+//                         optionindex: valitem.option_info.optionindex,
+//                         values: [{ ...valitemtobeinsreted, valueindex: valitemtobeinsreted?.valueinfo?.valueindex }],
+//                     });
+//                 }
+//             });
+//         });
+//         options_w_values.forEach((option) => {
+//             option.values.sort((a, b) => a.valueindex - b.valueindex);
+//         });
+//         var Sortedoptions_w_values = options_w_values.sort((a, b) => a.optionindex - b.optionindex);
+
+//         setoptions_w_values([...Sortedoptions_w_values]);
+//         // setoptions_w_values([...options_w_values]);
+//         setvariants_iteminfo(variants_iteminfo);
+//         setitem(iteminfo);
+//     }, [props.actions.item]);
+//     const choose_valueFunc = (valitem, optioninfo) => {
+//         var tempchoosen_values = [...choosen_values];
+//         var isvalueexists = false;
+//         // var optionid = optioninfo.optionid
+//         tempchoosen_values?.forEach(function (choseitem, choseindex) {
+//             if (valitem.optionid == choseitem.optionid) {
+//                 tempchoosen_values.splice(choseindex, 1);
+//             }
+//             if (choseitem?.valueid == valitem?.valueid) {
+//                 tempchoosen_values.splice(choseindex, 1);
+//                 isvalueexists = true;
+//             }
+//         });
+//         if (isvalueexists == false) {
+//             tempchoosen_values.push(valitem);
+//         }
+//         var tempoptions_w_values = [...options_w_values];
+//         tempoptions_w_values?.forEach(function (item, index) {
+//             item?.values?.forEach(function (valitemex, valindex) {
+//                 if (tempchoosen_values.length == 0) {
+//                     valitemex.disabled = false;
+//                 } else {
+//                     valitemex.disabled = true;
+//                 }
+//             });
+//         });
+//         if (tempchoosen_values.length != 0) {
+//             tempoptions_w_values?.forEach(function (item, index) {
+//                 item?.values?.forEach(function (valitem, valindex) {
+//                     var isvaluedisabled = true;
+//                     tempchoosen_values.slice(0, 1)?.forEach(function (chosvalitem) {
+//                         variants_iteminfo?.forEach(function (variantitem) {
+//                             var is_Start_Variant_Found = false;
+//                             variantitem?.variantvalues_w_valueinfo?.forEach(function (variantoptionsitem) {
+//                                 if (variantoptionsitem.valueid == chosvalitem.valueid) {
+//                                     is_Start_Variant_Found = true;
+//                                 }
+//                             });
+//                             if (is_Start_Variant_Found) {
+//                                 variantitem?.variantvalues_w_valueinfo?.forEach(function (variantoptionsitem) {
+//                                     if (valitem.valueid == variantoptionsitem.valueid) {
+//                                         isvaluedisabled = false;
+//                                     }
+//                                 });
+//                             }
+//                         });
+//                     });
+//                     valitem.disabled = isvaluedisabled;
+//                 });
+//             });
+//             tempoptions_w_values?.forEach(function (item, index) {
+//                 item?.values?.forEach(function (valitem, valindex) {
+//                     if (valitem.optionid == tempchoosen_values[0].optionid) {
+//                         valitem.disabled = false;
+//                     }
+//                 });
+//             });
+
+//             tempoptions_w_values?.forEach(function (item, index) {
+//                 item?.values?.forEach(function (valitem, valindex) {
+//                     if (valitem.disabled == true) {
+//                         tempchoosen_values?.forEach(function (chosvalitem, choseindex) {
+//                             if (chosvalitem.valueid == valitem.valueid) {
+//                                 tempchoosen_values.splice(choseindex, 1);
+//                             }
+//                         });
+//                     }
+//                 });
+//             });
+//         }
+
+//         setoptions_w_values([...tempoptions_w_values]);
+//         setchoosen_values([...tempchoosen_values]);
+//     };
+//     useEffect(() => {
+//         foundImageColorMatchingFunc(VariantColorImageComObj);
+//     }, [VariantColorImageComObj]);
+//     useEffect(() => {
+//         let completedVariantObj = null;
+//         let variantimagematching = null;
+//         if (choosen_values.length > 0) {
+//             for (const variantitem of variants_iteminfo || []) {
+//                 const matchedValues = variantitem?.variantvalues_w_valueinfo?.filter((variantValue) => choosen_values.some((choosenValue) => choosenValue.valueid === variantValue.valueid));
+
+//                 if (matchedValues.length === choosen_values.length && matchedValues.length === variantitem.variantvalues_w_valueinfo.length) {
+//                     completedVariantObj = variantitem;
+//                     break;
+//                 }
+//             }
+//             choosen_values?.forEach(function (item, index) {
+//                 if (item?.option_info?.optionname == 'color' || item?.option_info?.optionname == 'Color') {
+//                     for (const variantitem of variants_iteminfo || []) {
+//                         const matchingValue = variantitem?.variantvalues_w_valueinfo?.find((value) => value?.valueid === item?.valueid);
+
+//                         if (matchingValue) {
+//                             variantimagematching = variantitem;
+//                         }
+//                     }
+//                 }
+//             });
+//         }
+
+//         setVariantColorImageComObj(variantimagematching || {});
+//         setVariantCompletedObj(completedVariantObj || {});
+//     }, [choosen_values]);
+
+//     // useEffect(() => {
+//     //     var completedVariantObj = {};
+//     //     var tempchoosen_values = [...choosen_values];
+//     //     if (choosen_values.length != 0) {
+//     //         variants_iteminfo?.forEach(function (variantitem) {
+//     //             var isVariantValuesAllSame = true;
+//     //             variantitem?.variantvalues_w_valueinfo?.forEach(function (variantvalues) {
+//     //                 tempchoosen_values?.forEach(function (item, index) {
+//     //                     if (variantvalues.valueid != item.valueid) {
+//     //                         isVariantValuesAllSame = false;
+//     //                     } else {
+//     //                     }
+//     //                 });
+//     //             });
+//     //             if (isVariantValuesAllSame == true) {
+//     //                 completedVariantObj = variantitem;
+//     //             }
+//     //         });
+//     //     }
+//     //     setVariantCompletedObj({ ...completedVariantObj });
+//     // }, [choosen_values]);
+
+//     return (
+//         <div class={' row m-0 w-100 mb-2 '}>
+//             {sectionproperties.length != 0 && (
+//                 <div class={' row m-0 w-100 '}>
+//                     {/* showonlycolorvariant */}
+//                     {/* Show All Variants */}
+//                     {/* Show Colors Only */}
+//                     {options_w_values?.map(function (item, index) {
+//                         return (
+//                             // scrollhorixontalcontainer
+//                             <div className="col-lg-12 col-md-12 d-flex mb-2 allcentered  p-sm-0">
+//                                 {/* 1 {JSON.stringify(item)} */}
+//                                 {item?.values?.map(function (valitem, valindex) {
+//                                     var isChoosedValueExists = false;
+//                                     choosen_values?.forEach(function (choseitem, choseindex) {
+//                                         if (choseitem != null) {
+//                                             if (choseitem?.valueid == valitem?.valueid) {
+//                                                 isChoosedValueExists = true;
+//                                             }
+//                                         }
+//                                     });
+//                                     if (valindex <= 3) {
+//                                         if (sectionproperties.typeofvariantstobeshownincard == 'Show Colors Only') {
+//                                             if (
+//                                                 item?.option_info?.optionname == 'Color' ||
+//                                                 item?.option_info?.optionname == 'Colour' ||
+//                                                 item?.option_info?.optionname == 'color' ||
+//                                                 item?.option_info?.optionname == 'colour'
+//                                             ) {
+//                                                 return (
+//                                                     <div style={{ textAlign: 'center' }} class="mx-1">
+//                                                         <button
+//                                                             onClick={() => {
+//                                                                 choose_valueFunc(valitem, item?.option_info);
+//                                                             }}
+//                                                             style={{
+//                                                                 // backgroundColor: isChoosedValueExists ? 'lightblue' : 'white',
+//                                                                 color: isChoosedValueExists ? '#ffffff' : '#000000',
+//                                                                 border: isChoosedValueExists
+//                                                                     ? '3px solid ' + sectionproperties.activeproductcolor
+//                                                                     : '1px solid ' + sectionproperties.variantcontainerbordercolor,
+//                                                                 padding: item?.option_info?.optionname == 'Color' ? '5px' : '5px 10px',
+//                                                                 cursor: valitem.disabled ? 'not-allowed' : 'pointer',
+//                                                                 fontSize: '13px',
+//                                                                 width: item?.option_info?.optionname == 'Color' ? 25 : '',
+//                                                                 height: item?.option_info?.optionname == 'Color' ? 25 : '',
+//                                                                 borderRadius: item?.option_info?.optionname == 'Color' ? 100 : 5,
+//                                                                 background:
+//                                                                     item?.option_info?.optionname == 'Color'
+//                                                                         ? valitem?.valueinfo?.valuename
+//                                                                         : isChoosedValueExists
+//                                                                         ? sectionproperties.activeproductcolor
+//                                                                         : '#ffffff',
+//                                                                 fontWeight: 500,
+//                                                             }}
+//                                                             disabled={valitem.disabled}
+//                                                         >
+//                                                             {item?.option_info?.optionname == 'Color' ? '' : valitem?.valueinfo?.valuename || 'Unnamed'}
+//                                                         </button>
+//                                                     </div>
+//                                                 );
+//                                             }
+//                                         } else {
+//                                             return (
+//                                                 <div style={{ textAlign: 'center' }} class="mx-1">
+//                                                     {item.optionname}
+//                                                     <button
+//                                                         onClick={() => {
+//                                                             choose_valueFunc(valitem, item?.option_info);
+//                                                         }}
+//                                                         style={{
+//                                                             // backgroundColor: isChoosedValueExists ? 'lightblue' : 'white',
+//                                                             color: isChoosedValueExists ? '#ffffff' : '#000000',
+//                                                             border: isChoosedValueExists
+//                                                                 ? '3px solid ' + sectionproperties.activeproductcolor
+//                                                                 : '1px solid ' + sectionproperties.variantcontainerbordercolor,
+//                                                             padding: item?.option_info?.optionname == 'Color' ? '5px' : '5px 10px',
+//                                                             cursor: valitem.disabled ? 'not-allowed' : 'pointer',
+//                                                             fontSize: '13px',
+//                                                             width: item?.option_info?.optionname == 'Color' ? 25 : '',
+//                                                             height: item?.option_info?.optionname == 'Color' ? 25 : '',
+//                                                             borderRadius: item?.option_info?.optionname == 'Color' ? 100 : 5,
+//                                                             background:
+//                                                                 item?.option_info?.optionname == 'Color'
+//                                                                     ? valitem?.valueinfo?.valuename
+//                                                                     : isChoosedValueExists
+//                                                                     ? sectionproperties.activeproductcolor
+//                                                                     : '#ffffff',
+//                                                             fontWeight: 500,
+//                                                         }}
+//                                                         disabled={valitem.disabled}
+//                                                     >
+//                                                         {item?.option_info?.optionname == 'Color' ? '' : valitem?.valueinfo?.valuename || 'Unnamed'}
+//                                                     </button>
+//                                                 </div>
+//                                             );
+//                                         }
+//                                     }
+//                                 })}
+//                                 {item?.values?.length > 4 && (
+//                                     <div
+//                                         className="mx-1 d-flex align-items-center justify-content-center"
+//                                         style={{
+//                                             width: 25,
+//                                             height: 25,
+//                                             borderRadius: 100,
+//                                             backgroundColor: sectionproperties.activeproductcolor,
+//                                             color: '#fff',
+//                                             fontSize: '13px',
+//                                             cursor: 'pointer',
+//                                         }}
+//                                         onClick={() => {
+//                                             cardonclickfunctionContext(sectionproperties?.onClickRoute, props.actions.item.productid, props.actions.fetchingtypeprops, null);
+//                                         }}
+//                                     >
+//                                         +{item?.values?.length - 4}
+//                                     </div>
+//                                 )}
+//                             </div>
+//                         );
+//                     })}
+
+//                     {/* {options_w_values>=4&&
+//                     <div>
+//                         <p class='m-0 p-0'>{}</p>
+//                         </div>
+//                     } */}
+//                 </div>
+//             )}
+//         </div>
+//     );
+// };
+// export default Variants_J_Cards;
+import React, { useEffect, useState, useContext } from 'react';
+
+const Variants_J_Cards = (props) => {
+    const [item, setitem] = useState(props.actions.item);
+    const [fetchingtypeprops, setfetchingtypeprops] = useState(props.actions.fetchingtypeprops);
+    const [collectionid, setcollectionid] = useState(props.actions.collectionid);
+    const cardonclickfunctionContext = props.actions.cardonclickfunctionContext;
+    const [variants_iteminfo, setvariants_iteminfo] = useState({});
+    const [options_w_values, setoptions_w_values] = useState([]);
+    const [choosen_values, setchoosen_values] = useState([]);
+    const [VariantCompletedObj, setVariantCompletedObj] = useState({});
+    const sectionproperties = props.actions.sectionproperties;
+    const lang = props.actions.lang;
+    const langdetect = props.actions.langdetect;
+    const foundMatchedVariantFunc = props.foundMatchedVariantFunc;
+    const [index, setindex] = useState(props.cardinfoindexprops);
+    const [VariantColorImageComObj, setVariantColorImageComObj] = useState({});
+    const foundImageColorMatchingFunc = props.foundImageColorMatchingFunc;
+    useEffect(() => {
+        foundMatchedVariantFunc(VariantCompletedObj);
+    }, [VariantCompletedObj]);
+    useEffect(() => {
+        let completedVariantObj = null;
+        let variantimagematching = null;
+        if (choosen_values.length > 0) {
+            for (const variantitem of variants_iteminfo || []) {
+                const matchedValues = variantitem?.variantvalues_w_valueinfo?.filter((variantValue) => choosen_values.some((choosenValue) => choosenValue.valueid === variantValue.valueid));
+
+                if (matchedValues.length === choosen_values.length && matchedValues.length === variantitem.variantvalues_w_valueinfo.length) {
+                    completedVariantObj = variantitem;
+                    break;
+                }
+            }
+            choosen_values?.forEach(function (item, index) {
+                if (item?.option_info?.optionname == 'color' || item?.option_info?.optionname == 'Color') {
+                    for (const variantitem of variants_iteminfo || []) {
+                        const matchingValue = variantitem?.variantvalues_w_valueinfo?.find((value) => value?.valueid === item?.valueid);
+
+                        if (matchingValue) {
+                            variantimagematching = variantitem;
+                        }
+                    }
+                }
+            });
+        }
+
+        setVariantColorImageComObj(variantimagematching || {});
+        setVariantCompletedObj(completedVariantObj || {});
+    }, [choosen_values]);
+    useEffect(() => {
+        var iteminfo = props.actions.item;
+        var variants_iteminfo = props?.actions?.item?.variants_w_options;
+        var options_w_values = [];
+        variants_iteminfo?.forEach(function (item, index) {
+            item?.variantvalues_w_valueinfo?.forEach(function (valitem) {
+                var isoptionexists = false;
+                var is_valitemexists = false;
+                var valitemtobeinsreted = { ...valitem };
+                valitemtobeinsreted.disabled = false;
+                options_w_values?.forEach(function (exopitem, exopindex) {
+                    exopitem?.values?.forEach(function (valexistitem) {
+                        if (valexistitem.valueid == valitemtobeinsreted.valueid) {
+                            is_valitemexists = true;
+                        }
+                    });
+                });
+                options_w_values?.forEach(function (exopitem, exopindex) {
+                    if (exopitem?.option_info?.optionid == valitemtobeinsreted?.option_info?.optionid) {
+                        if (is_valitemexists == false) {
+                            exopitem.values.push({ ...valitemtobeinsreted, valueindex: valitemtobeinsreted?.valueinfo?.valueindex });
+                        }
+                        isoptionexists = true;
+                    }
+                });
+                if (isoptionexists == false) {
+                    options_w_values.push({
+                        option_info: valitem.option_info,
+                        optionindex: valitem.option_info.optionindex,
+                        values: [{ ...valitemtobeinsreted, valueindex: valitemtobeinsreted?.valueinfo?.valueindex }],
+                    });
+                }
+            });
+        });
+        options_w_values.forEach((option) => {
+            option.values.sort((a, b) => a.valueindex - b.valueindex);
+        });
+        var Sortedoptions_w_values = options_w_values.sort((a, b) => a.optionindex - b.optionindex);
+
+        setoptions_w_values([...Sortedoptions_w_values]);
+        // setoptions_w_values([...options_w_values]);
+        setvariants_iteminfo(variants_iteminfo);
+        setitem(iteminfo);
+    }, [props.actions.item]);
+    const choose_valueFunc = (valitem, optioninfo) => {
+        var tempchoosen_values = [...choosen_values];
+        var isvalueexists = false;
+        // var optionid = optioninfo.optionid
+        tempchoosen_values?.forEach(function (choseitem, choseindex) {
+            if (valitem.optionid == choseitem.optionid) {
+                tempchoosen_values.splice(choseindex, 1);
+            }
+            if (choseitem?.valueid == valitem?.valueid) {
+                tempchoosen_values.splice(choseindex, 1);
+                isvalueexists = true;
+            }
+        });
+        if (isvalueexists == false) {
+            tempchoosen_values.push(valitem);
+        }
+        var tempoptions_w_values = [...options_w_values];
+        tempoptions_w_values?.forEach(function (item, index) {
+            item?.values?.forEach(function (valitemex, valindex) {
+                if (tempchoosen_values.length == 0) {
+                    valitemex.disabled = false;
+                } else {
+                    valitemex.disabled = true;
+                }
+            });
+        });
+        if (tempchoosen_values.length != 0) {
+            tempoptions_w_values?.forEach(function (item, index) {
+                item?.values?.forEach(function (valitem, valindex) {
+                    var isvaluedisabled = true;
+                    tempchoosen_values.slice(0, 1)?.forEach(function (chosvalitem) {
+                        variants_iteminfo?.forEach(function (variantitem) {
+                            var is_Start_Variant_Found = false;
+                            variantitem?.variantvalues_w_valueinfo?.forEach(function (variantoptionsitem) {
+                                if (variantoptionsitem.valueid == chosvalitem.valueid) {
+                                    is_Start_Variant_Found = true;
+                                }
+                            });
+                            if (is_Start_Variant_Found) {
+                                variantitem?.variantvalues_w_valueinfo?.forEach(function (variantoptionsitem) {
+                                    if (valitem.valueid == variantoptionsitem.valueid) {
+                                        isvaluedisabled = false;
+                                    }
+                                });
+                            }
+                        });
+                    });
+                    valitem.disabled = isvaluedisabled;
+                });
+            });
+            tempoptions_w_values?.forEach(function (item, index) {
+                item?.values?.forEach(function (valitem, valindex) {
+                    if (valitem.optionid == tempchoosen_values[0].optionid) {
+                        valitem.disabled = false;
+                    }
+                });
+            });
+
+            tempoptions_w_values?.forEach(function (item, index) {
+                item?.values?.forEach(function (valitem, valindex) {
+                    if (valitem.disabled == true) {
+                        tempchoosen_values?.forEach(function (chosvalitem, choseindex) {
+                            if (chosvalitem.valueid == valitem.valueid) {
+                                tempchoosen_values.splice(choseindex, 1);
+                            }
+                        });
+                    }
+                });
+            });
+        }
+
+        setoptions_w_values([...tempoptions_w_values]);
+        setchoosen_values([...tempchoosen_values]);
+    };
+    useEffect(() => {
+        foundImageColorMatchingFunc(VariantColorImageComObj);
+    }, [VariantColorImageComObj]);
+    useEffect(() => {
+        let completedVariantObj = null;
+        let variantimagematching = null;
+        if (choosen_values.length > 0) {
+            for (const variantitem of variants_iteminfo || []) {
+                const matchedValues = variantitem?.variantvalues_w_valueinfo?.filter((variantValue) => choosen_values.some((choosenValue) => choosenValue.valueid === variantValue.valueid));
+
+                if (matchedValues.length === choosen_values.length && matchedValues.length === variantitem.variantvalues_w_valueinfo.length) {
+                    completedVariantObj = variantitem;
+                    break;
+                }
+            }
+            choosen_values?.forEach(function (item, index) {
+                if (item?.option_info?.optionname == 'color' || item?.option_info?.optionname == 'Color') {
+                    for (const variantitem of variants_iteminfo || []) {
+                        const matchingValue = variantitem?.variantvalues_w_valueinfo?.find((value) => value?.valueid === item?.valueid);
+
+                        if (matchingValue) {
+                            variantimagematching = variantitem;
+                        }
+                    }
+                }
+            });
+        }
+
+        setVariantColorImageComObj(variantimagematching || {});
+        setVariantCompletedObj(completedVariantObj || {});
+    }, [choosen_values]);
+
+    // useEffect(() => {
+    //     var completedVariantObj = {};
+    //     var tempchoosen_values = [...choosen_values];
+    //     if (choosen_values.length != 0) {
+    //         variants_iteminfo?.forEach(function (variantitem) {
+    //             var isVariantValuesAllSame = true;
+    //             variantitem?.variantvalues_w_valueinfo?.forEach(function (variantvalues) {
+    //                 tempchoosen_values?.forEach(function (item, index) {
+    //                     if (variantvalues.valueid != item.valueid) {
+    //                         isVariantValuesAllSame = false;
+    //                     } else {
+    //                     }
+    //                 });
+    //             });
+    //             if (isVariantValuesAllSame == true) {
+    //                 completedVariantObj = variantitem;
+    //             }
+    //         });
+    //     }
+    //     setVariantCompletedObj({ ...completedVariantObj });
+    // }, [choosen_values]);
+
+    return (
+        <div class={' row m-0 w-100 mb-2 '}>
+            {sectionproperties.length != 0 && (
+                <div class={' row m-0 w-100 '}>
+                    {options_w_values?.map(function (item, index) {
+                        return (
+                            <div className="col-lg-12 col-md-12 d-flex mb-2 allcentered scrollhorixontalcontainer p-sm-0">
+                                {item?.values?.map(function (valitem, valindex) {
+                                    var isChoosedValueExists = false;
+                                    choosen_values?.forEach(function (choseitem, choseindex) {
+                                        if (choseitem != null) {
+                                            if (choseitem?.valueid == valitem?.valueid) {
+                                                isChoosedValueExists = true;
+                                            }
+                                        }
+                                    });
+                                    if (valindex <= 3) {
+                                        return (
+                                            <div style={{ textAlign: 'center' }} class="mx-1">
+                                                <button
+                                                    onClick={() => {
+                                                        choose_valueFunc(valitem, item?.option_info);
+                                                    }}
+                                                    style={{
+                                                        // backgroundColor: isChoosedValueExists ? 'lightblue' : 'white',
+                                                        color: isChoosedValueExists ? '#ffffff' : '#000000',
+                                                        border: isChoosedValueExists
+                                                            ? '3px solid ' + sectionproperties.activeproductcolor
+                                                            : '1px solid ' + sectionproperties.variantcontainerbordercolor,
+                                                        padding: item?.option_info?.optionname == 'Color' ? '5px' : '5px 10px',
+                                                        cursor: valitem.disabled ? 'not-allowed' : 'pointer',
+                                                        fontSize: '13px',
+                                                        width: item?.option_info?.optionname == 'Color' ? 25 : '',
+                                                        height: item?.option_info?.optionname == 'Color' ? 25 : '',
+                                                        borderRadius: item?.option_info?.optionname == 'Color' ? 100 : 5,
+                                                        background:
+                                                            item?.option_info?.optionname == 'Color'
+                                                                ? valitem?.valueinfo?.valuename
+                                                                : isChoosedValueExists
+                                                                ? sectionproperties.activeproductcolor
+                                                                : '#ffffff',
+                                                        fontWeight: 500,
+                                                    }}
+                                                    disabled={valitem.disabled}
+                                                >
+                                                    {item?.option_info?.optionname == 'Color' ? '' : valitem?.valueinfo?.valuename || 'Unnamed'}
+                                                </button>
+                                            </div>
+                                        );
+                                    }
+                                })}
+                                {item?.values?.length > 4 && (
+                                    <div
+                                        className="mx-1 d-flex align-items-center justify-content-center"
+                                        style={{
+                                            width: 25,
+                                            height: 25,
+                                            borderRadius: 100,
+                                            backgroundColor: sectionproperties.activeproductcolor,
+                                            color: '#fff',
+                                            fontSize: '13px',
+                                            cursor: 'pointer',
+                                        }}
+                                        onClick={() => {
+                                            cardonclickfunctionContext(sectionproperties?.onClickRoute, props.actions.item.productid, props.actions.fetchingtypeprops, null);
+                                        }}
+                                    >
+                                        +{item?.values?.length - 4}
+                                    </div>
+                                )}
+                            </div>
+                        );
+                    })}
+
+                    {/* {options_w_values>=4&&
+                    <div>
+                        <p class='m-0 p-0'>{}</p>
+                        </div>
+                    } */}
+                </div>
+            )}
+        </div>
+    );
+};
+export default Variants_J_Cards;