tabexseriescomponents 0.2.1280 → 0.2.1281

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

@@ -1,660 +0,0 @@
-// 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;