tabexseriescomponents 0.0.831 → 0.0.832

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs.js CHANGED
@@ -82406,41 +82406,25 @@ var Variants_J_Cards = function Variants_J_Cards(props) {
82406
82406
  _useState12 = _slicedToArray__default["default"](_useState11, 2);
82407
82407
  _useState12[0];
82408
82408
  _useState12[1];
82409
-
82410
- // useEffect(() => {
82411
- // var completedVariantObj = {};
82412
- // var tempchoosen_values = [...choosen_values];
82413
- // if (choosen_values.length != 0) {
82414
- // variants_iteminfo?.forEach(function (variantitem) {
82415
- // var isVariantValuesAllSame = true;
82416
- // variantitem?.variantvalues_w_valueinfo?.forEach(function (variantvalues) {
82417
- // tempchoosen_values?.forEach(function (item, index) {
82418
- // if (variantvalues.valueid != item.valueid) {
82419
- // isVariantValuesAllSame = false;
82420
- // } else {
82421
- // }
82422
- // });
82423
- // });
82424
- // if (isVariantValuesAllSame == true) {
82425
- // completedVariantObj = variantitem;
82426
- // }
82427
- // });
82428
- // }
82429
- // setVariantCompletedObj({ ...completedVariantObj });
82430
- // }, [choosen_values]);
82409
+ var _useState13 = React.useState({}),
82410
+ _useState14 = _slicedToArray__default["default"](_useState13, 2),
82411
+ VariantColorImageComObj = _useState14[0],
82412
+ setVariantColorImageComObj = _useState14[1];
82413
+ var foundImageColorMatchingFunc = props.foundImageColorMatchingFunc;
82431
82414
  React.useEffect(function () {
82432
82415
  foundMatchedVariantFunc(VariantCompletedObj);
82433
82416
  }, [VariantCompletedObj]);
82434
82417
  React.useEffect(function () {
82435
82418
  var completedVariantObj = null;
82419
+ var variantimagematching = null;
82436
82420
  if (choosen_values.length > 0) {
82437
82421
  var _iterator = _createForOfIteratorHelper(variants_iteminfo || []),
82438
82422
  _step;
82439
82423
  try {
82440
82424
  for (_iterator.s(); !(_step = _iterator.n()).done;) {
82441
- var _variantitem$variantv;
82425
+ var _variantitem$variantv2;
82442
82426
  var variantitem = _step.value;
82443
- var matchedValues = variantitem === null || variantitem === void 0 || (_variantitem$variantv = variantitem.variantvalues_w_valueinfo) === null || _variantitem$variantv === void 0 ? void 0 : _variantitem$variantv.filter(function (variantValue) {
82427
+ var matchedValues = variantitem === null || variantitem === void 0 || (_variantitem$variantv2 = variantitem.variantvalues_w_valueinfo) === null || _variantitem$variantv2 === void 0 ? void 0 : _variantitem$variantv2.filter(function (variantValue) {
82444
82428
  return choosen_values.some(function (choosenValue) {
82445
82429
  return choosenValue.valueid === variantValue.valueid;
82446
82430
  });
@@ -82455,7 +82439,31 @@ var Variants_J_Cards = function Variants_J_Cards(props) {
82455
82439
  } finally {
82456
82440
  _iterator.f();
82457
82441
  }
82442
+ choosen_values === null || choosen_values === void 0 || choosen_values.forEach(function (item, index) {
82443
+ var _item$option_info, _item$option_info2;
82444
+ if ((item === null || item === void 0 || (_item$option_info = item.option_info) === null || _item$option_info === void 0 ? void 0 : _item$option_info.optionname) == 'color' || (item === null || item === void 0 || (_item$option_info2 = item.option_info) === null || _item$option_info2 === void 0 ? void 0 : _item$option_info2.optionname) == 'Color') {
82445
+ var _iterator2 = _createForOfIteratorHelper(variants_iteminfo || []),
82446
+ _step2;
82447
+ try {
82448
+ for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
82449
+ var _variantitem$variantv;
82450
+ var variantitem = _step2.value;
82451
+ var matchingValue = variantitem === null || variantitem === void 0 || (_variantitem$variantv = variantitem.variantvalues_w_valueinfo) === null || _variantitem$variantv === void 0 ? void 0 : _variantitem$variantv.find(function (value) {
82452
+ return (value === null || value === void 0 ? void 0 : value.valueid) === (item === null || item === void 0 ? void 0 : item.valueid);
82453
+ });
82454
+ if (matchingValue) {
82455
+ variantimagematching = variantitem;
82456
+ }
82457
+ }
82458
+ } catch (err) {
82459
+ _iterator2.e(err);
82460
+ } finally {
82461
+ _iterator2.f();
82462
+ }
82463
+ }
82464
+ });
82458
82465
  }
82466
+ setVariantColorImageComObj(variantimagematching || {});
82459
82467
  setVariantCompletedObj(completedVariantObj || {});
82460
82468
  }, [choosen_values]);
82461
82469
  React.useEffect(function () {
@@ -82550,16 +82558,16 @@ var Variants_J_Cards = function Variants_J_Cards(props) {
82550
82558
  var isvaluedisabled = true;
82551
82559
  (_tempchoosen_values$s = tempchoosen_values.slice(0, 1)) === null || _tempchoosen_values$s === void 0 || _tempchoosen_values$s.forEach(function (chosvalitem) {
82552
82560
  variants_iteminfo === null || variants_iteminfo === void 0 || variants_iteminfo.forEach(function (variantitem) {
82553
- var _variantitem$variantv2;
82561
+ var _variantitem$variantv3;
82554
82562
  var is_Start_Variant_Found = false;
82555
- variantitem === null || variantitem === void 0 || (_variantitem$variantv2 = variantitem.variantvalues_w_valueinfo) === null || _variantitem$variantv2 === void 0 || _variantitem$variantv2.forEach(function (variantoptionsitem) {
82563
+ variantitem === null || variantitem === void 0 || (_variantitem$variantv3 = variantitem.variantvalues_w_valueinfo) === null || _variantitem$variantv3 === void 0 || _variantitem$variantv3.forEach(function (variantoptionsitem) {
82556
82564
  if (variantoptionsitem.valueid == chosvalitem.valueid) {
82557
82565
  is_Start_Variant_Found = true;
82558
82566
  }
82559
82567
  });
82560
82568
  if (is_Start_Variant_Found) {
82561
- var _variantitem$variantv3;
82562
- variantitem === null || variantitem === void 0 || (_variantitem$variantv3 = variantitem.variantvalues_w_valueinfo) === null || _variantitem$variantv3 === void 0 || _variantitem$variantv3.forEach(function (variantoptionsitem) {
82569
+ var _variantitem$variantv4;
82570
+ variantitem === null || variantitem === void 0 || (_variantitem$variantv4 = variantitem.variantvalues_w_valueinfo) === null || _variantitem$variantv4 === void 0 || _variantitem$variantv4.forEach(function (variantoptionsitem) {
82563
82571
  if (valitem.valueid == variantoptionsitem.valueid) {
82564
82572
  isvaluedisabled = false;
82565
82573
  }
@@ -82594,6 +82602,84 @@ var Variants_J_Cards = function Variants_J_Cards(props) {
82594
82602
  setoptions_w_values(_toConsumableArray__default["default"](tempoptions_w_values));
82595
82603
  setchoosen_values(_toConsumableArray__default["default"](tempchoosen_values));
82596
82604
  };
82605
+ React.useEffect(function () {
82606
+ foundImageColorMatchingFunc(VariantColorImageComObj);
82607
+ }, [VariantColorImageComObj]);
82608
+ React.useEffect(function () {
82609
+ var completedVariantObj = null;
82610
+ var variantimagematching = null;
82611
+ if (choosen_values.length > 0) {
82612
+ var _iterator3 = _createForOfIteratorHelper(variants_iteminfo || []),
82613
+ _step3;
82614
+ try {
82615
+ for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
82616
+ var _variantitem$variantv6;
82617
+ var variantitem = _step3.value;
82618
+ var matchedValues = variantitem === null || variantitem === void 0 || (_variantitem$variantv6 = variantitem.variantvalues_w_valueinfo) === null || _variantitem$variantv6 === void 0 ? void 0 : _variantitem$variantv6.filter(function (variantValue) {
82619
+ return choosen_values.some(function (choosenValue) {
82620
+ return choosenValue.valueid === variantValue.valueid;
82621
+ });
82622
+ });
82623
+ if (matchedValues.length === choosen_values.length && matchedValues.length === variantitem.variantvalues_w_valueinfo.length) {
82624
+ completedVariantObj = variantitem;
82625
+ break;
82626
+ }
82627
+ }
82628
+ } catch (err) {
82629
+ _iterator3.e(err);
82630
+ } finally {
82631
+ _iterator3.f();
82632
+ }
82633
+ choosen_values === null || choosen_values === void 0 || choosen_values.forEach(function (item, index) {
82634
+ var _item$option_info3, _item$option_info4;
82635
+ if ((item === null || item === void 0 || (_item$option_info3 = item.option_info) === null || _item$option_info3 === void 0 ? void 0 : _item$option_info3.optionname) == 'color' || (item === null || item === void 0 || (_item$option_info4 = item.option_info) === null || _item$option_info4 === void 0 ? void 0 : _item$option_info4.optionname) == 'Color') {
82636
+ var _iterator4 = _createForOfIteratorHelper(variants_iteminfo || []),
82637
+ _step4;
82638
+ try {
82639
+ for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
82640
+ var _variantitem$variantv5;
82641
+ var variantitem = _step4.value;
82642
+ var matchingValue = variantitem === null || variantitem === void 0 || (_variantitem$variantv5 = variantitem.variantvalues_w_valueinfo) === null || _variantitem$variantv5 === void 0 ? void 0 : _variantitem$variantv5.find(function (value) {
82643
+ return (value === null || value === void 0 ? void 0 : value.valueid) === (item === null || item === void 0 ? void 0 : item.valueid);
82644
+ });
82645
+ if (matchingValue) {
82646
+ variantimagematching = variantitem;
82647
+ }
82648
+ }
82649
+ } catch (err) {
82650
+ _iterator4.e(err);
82651
+ } finally {
82652
+ _iterator4.f();
82653
+ }
82654
+ }
82655
+ });
82656
+ }
82657
+ setVariantColorImageComObj(variantimagematching || {});
82658
+ setVariantCompletedObj(completedVariantObj || {});
82659
+ }, [choosen_values]);
82660
+
82661
+ // useEffect(() => {
82662
+ // var completedVariantObj = {};
82663
+ // var tempchoosen_values = [...choosen_values];
82664
+ // if (choosen_values.length != 0) {
82665
+ // variants_iteminfo?.forEach(function (variantitem) {
82666
+ // var isVariantValuesAllSame = true;
82667
+ // variantitem?.variantvalues_w_valueinfo?.forEach(function (variantvalues) {
82668
+ // tempchoosen_values?.forEach(function (item, index) {
82669
+ // if (variantvalues.valueid != item.valueid) {
82670
+ // isVariantValuesAllSame = false;
82671
+ // } else {
82672
+ // }
82673
+ // });
82674
+ // });
82675
+ // if (isVariantValuesAllSame == true) {
82676
+ // completedVariantObj = variantitem;
82677
+ // }
82678
+ // });
82679
+ // }
82680
+ // setVariantCompletedObj({ ...completedVariantObj });
82681
+ // }, [choosen_values]);
82682
+
82597
82683
  return /*#__PURE__*/React__default["default"].createElement("div", {
82598
82684
  "class": ' row m-0 w-100 mb-2 '
82599
82685
  }, sectionproperties.length != 0 && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -82604,7 +82690,7 @@ var Variants_J_Cards = function Variants_J_Cards(props) {
82604
82690
  return /*#__PURE__*/React__default["default"].createElement("div", {
82605
82691
  className: "col-lg-12 col-md-12 d-flex mb-2 allcentered scrollhorixontalcontainer"
82606
82692
  }, item === null || item === void 0 || (_item$values5 = item.values) === null || _item$values5 === void 0 ? void 0 : _item$values5.map(function (valitem) {
82607
- var _item$option_info, _item$option_info2, _item$option_info3, _item$option_info4, _item$option_info5, _valitem$valueinfo, _item$option_info6, _valitem$valueinfo2;
82693
+ var _item$option_info5, _item$option_info6, _item$option_info7, _item$option_info8, _item$option_info9, _valitem$valueinfo, _item$option_info10, _valitem$valueinfo2;
82608
82694
  var isChoosedValueExists = false;
82609
82695
  choosen_values === null || choosen_values === void 0 || choosen_values.forEach(function (choseitem, choseindex) {
82610
82696
  if (choseitem != null) {
@@ -82626,17 +82712,17 @@ var Variants_J_Cards = function Variants_J_Cards(props) {
82626
82712
  // backgroundColor: isChoosedValueExists ? 'lightblue' : 'white',
82627
82713
  color: isChoosedValueExists ? '#ffffff' : '#000000',
82628
82714
  border: isChoosedValueExists ? '3px solid ' + sectionproperties.activeproductcolor : '1px solid ' + sectionproperties.variantcontainerbordercolor,
82629
- padding: (item === null || item === void 0 || (_item$option_info = item.option_info) === null || _item$option_info === void 0 ? void 0 : _item$option_info.optionname) == 'Color' ? '5px' : '5px 10px',
82715
+ padding: (item === null || item === void 0 || (_item$option_info5 = item.option_info) === null || _item$option_info5 === void 0 ? void 0 : _item$option_info5.optionname) == 'Color' ? '5px' : '5px 10px',
82630
82716
  cursor: valitem.disabled ? 'not-allowed' : 'pointer',
82631
82717
  fontSize: '13px',
82632
- width: (item === null || item === void 0 || (_item$option_info2 = item.option_info) === null || _item$option_info2 === void 0 ? void 0 : _item$option_info2.optionname) == 'Color' ? 25 : '',
82633
- height: (item === null || item === void 0 || (_item$option_info3 = item.option_info) === null || _item$option_info3 === void 0 ? void 0 : _item$option_info3.optionname) == 'Color' ? 25 : '',
82634
- borderRadius: (item === null || item === void 0 || (_item$option_info4 = item.option_info) === null || _item$option_info4 === void 0 ? void 0 : _item$option_info4.optionname) == 'Color' ? 100 : 5,
82635
- background: (item === null || item === void 0 || (_item$option_info5 = item.option_info) === null || _item$option_info5 === void 0 ? void 0 : _item$option_info5.optionname) == 'Color' ? valitem === null || valitem === void 0 || (_valitem$valueinfo = valitem.valueinfo) === null || _valitem$valueinfo === void 0 ? void 0 : _valitem$valueinfo.valuename : isChoosedValueExists ? sectionproperties.activeproductcolor : '#ffffff',
82718
+ width: (item === null || item === void 0 || (_item$option_info6 = item.option_info) === null || _item$option_info6 === void 0 ? void 0 : _item$option_info6.optionname) == 'Color' ? 25 : '',
82719
+ height: (item === null || item === void 0 || (_item$option_info7 = item.option_info) === null || _item$option_info7 === void 0 ? void 0 : _item$option_info7.optionname) == 'Color' ? 25 : '',
82720
+ borderRadius: (item === null || item === void 0 || (_item$option_info8 = item.option_info) === null || _item$option_info8 === void 0 ? void 0 : _item$option_info8.optionname) == 'Color' ? 100 : 5,
82721
+ background: (item === null || item === void 0 || (_item$option_info9 = item.option_info) === null || _item$option_info9 === void 0 ? void 0 : _item$option_info9.optionname) == 'Color' ? valitem === null || valitem === void 0 || (_valitem$valueinfo = valitem.valueinfo) === null || _valitem$valueinfo === void 0 ? void 0 : _valitem$valueinfo.valuename : isChoosedValueExists ? sectionproperties.activeproductcolor : '#ffffff',
82636
82722
  fontWeight: 500
82637
82723
  },
82638
82724
  disabled: valitem.disabled
82639
- }, (item === null || item === void 0 || (_item$option_info6 = item.option_info) === null || _item$option_info6 === void 0 ? void 0 : _item$option_info6.optionname) == 'Color' ? '' : (valitem === null || valitem === void 0 || (_valitem$valueinfo2 = valitem.valueinfo) === null || _valitem$valueinfo2 === void 0 ? void 0 : _valitem$valueinfo2.valuename) || 'Unnamed'));
82725
+ }, (item === null || item === void 0 || (_item$option_info10 = item.option_info) === null || _item$option_info10 === void 0 ? void 0 : _item$option_info10.optionname) == 'Color' ? '' : (valitem === null || valitem === void 0 || (_valitem$valueinfo2 = valitem.valueinfo) === null || _valitem$valueinfo2 === void 0 ? void 0 : _valitem$valueinfo2.valuename) || 'Unnamed'));
82640
82726
  }));
82641
82727
  // }
82642
82728
  })));
@@ -82673,6 +82759,10 @@ var Simpleproductcard = function Simpleproductcard(props) {
82673
82759
  _useState8 = _slicedToArray__default["default"](_useState7, 2);
82674
82760
  _useState8[0];
82675
82761
  _useState8[1];
82762
+ var _useState9 = React.useState(''),
82763
+ _useState10 = _slicedToArray__default["default"](_useState9, 2),
82764
+ Variant_Color_ImageObj = _useState10[0],
82765
+ setVariant_Color_ImageObj = _useState10[1];
82676
82766
  var plainString = function plainString(html) {
82677
82767
  var divContainer = document.createElement('div');
82678
82768
  divContainer.innerHTML = html;
@@ -82710,6 +82800,24 @@ var Simpleproductcard = function Simpleproductcard(props) {
82710
82800
  Tempitem.image = productImagetoBeSelected;
82711
82801
  setitem(_objectSpread$6({}, Tempitem));
82712
82802
  }, [variantObj]);
82803
+ React.useEffect(function () {
82804
+ var productImagetoBeSelected = '';
82805
+ var Tempitem = _objectSpread$6({}, item);
82806
+ productImagetoBeSelected = item.productmainimage;
82807
+ if (Variant_Color_ImageObj != undefined && Variant_Color_ImageObj != null && Object.keys(Variant_Color_ImageObj).length != 0 && Variant_Color_ImageObj != '') {
82808
+ var variatgalleryid = Variant_Color_ImageObj.variantgalleryid;
82809
+ if (variatgalleryid != undefined && variatgalleryid != null && variatgalleryid != '') {
82810
+ var _item$productimages2;
82811
+ item === null || item === void 0 || (_item$productimages2 = item.productimages) === null || _item$productimages2 === void 0 || _item$productimages2.forEach(function (item, index) {
82812
+ if (item.galleryid == variatgalleryid) {
82813
+ productImagetoBeSelected = item.path;
82814
+ }
82815
+ });
82816
+ }
82817
+ }
82818
+ Tempitem.image = productImagetoBeSelected;
82819
+ setitem(_objectSpread$6({}, Tempitem));
82820
+ }, [Variant_Color_ImageObj]);
82713
82821
  var card_cssstyles = {
82714
82822
  innersection: glamor.css({
82715
82823
  paddingLeft: sectionproperties.innersectionpaddinghorizontal + 'px',
@@ -82890,10 +82998,10 @@ var Simpleproductcard = function Simpleproductcard(props) {
82890
82998
  transform: "translateX(0px)"
82891
82999
  })
82892
83000
  };
82893
- var _useState9 = React.useState(''),
82894
- _useState10 = _slicedToArray__default["default"](_useState9, 2),
82895
- secondimage = _useState10[0],
82896
- setsecondimage = _useState10[1];
83001
+ var _useState11 = React.useState(''),
83002
+ _useState12 = _slicedToArray__default["default"](_useState11, 2),
83003
+ secondimage = _useState12[0],
83004
+ setsecondimage = _useState12[1];
82897
83005
  React.useEffect(function () {
82898
83006
  var _props$cardinfoitempr;
82899
83007
  setitem(props.cardinfoitemprops);
@@ -83053,10 +83161,10 @@ var Simpleproductcard = function Simpleproductcard(props) {
83053
83161
  }
83054
83162
  }));
83055
83163
  };
83056
- var _useState11 = React.useState(0),
83057
- _useState12 = _slicedToArray__default["default"](_useState11, 2),
83058
- clickCount = _useState12[0],
83059
- setClickCount = _useState12[1];
83164
+ var _useState13 = React.useState(0),
83165
+ _useState14 = _slicedToArray__default["default"](_useState13, 2),
83166
+ clickCount = _useState14[0],
83167
+ setClickCount = _useState14[1];
83060
83168
  var handleClick = function handleClick() {
83061
83169
  // Increase the click count by 1
83062
83170
  setClickCount(function (prevCount) {
@@ -83399,6 +83507,9 @@ var Simpleproductcard = function Simpleproductcard(props) {
83399
83507
  },
83400
83508
  foundMatchedVariantFunc: function foundMatchedVariantFunc(variantCompletedObj) {
83401
83509
  setvariantObj(variantCompletedObj);
83510
+ },
83511
+ foundImageColorMatchingFunc: function foundImageColorMatchingFunc(variantIMAGECompletedObj) {
83512
+ setVariant_Color_ImageObj(variantIMAGECompletedObj);
83402
83513
  }
83403
83514
  })), sectionproperties.showprofitcontainer == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
83404
83515
  "class": "col-lg-12 p-0",
package/dist/index.esm.js CHANGED
@@ -82357,41 +82357,25 @@ var Variants_J_Cards = function Variants_J_Cards(props) {
82357
82357
  _useState12 = _slicedToArray(_useState11, 2);
82358
82358
  _useState12[0];
82359
82359
  _useState12[1];
82360
-
82361
- // useEffect(() => {
82362
- // var completedVariantObj = {};
82363
- // var tempchoosen_values = [...choosen_values];
82364
- // if (choosen_values.length != 0) {
82365
- // variants_iteminfo?.forEach(function (variantitem) {
82366
- // var isVariantValuesAllSame = true;
82367
- // variantitem?.variantvalues_w_valueinfo?.forEach(function (variantvalues) {
82368
- // tempchoosen_values?.forEach(function (item, index) {
82369
- // if (variantvalues.valueid != item.valueid) {
82370
- // isVariantValuesAllSame = false;
82371
- // } else {
82372
- // }
82373
- // });
82374
- // });
82375
- // if (isVariantValuesAllSame == true) {
82376
- // completedVariantObj = variantitem;
82377
- // }
82378
- // });
82379
- // }
82380
- // setVariantCompletedObj({ ...completedVariantObj });
82381
- // }, [choosen_values]);
82360
+ var _useState13 = useState({}),
82361
+ _useState14 = _slicedToArray(_useState13, 2),
82362
+ VariantColorImageComObj = _useState14[0],
82363
+ setVariantColorImageComObj = _useState14[1];
82364
+ var foundImageColorMatchingFunc = props.foundImageColorMatchingFunc;
82382
82365
  useEffect(function () {
82383
82366
  foundMatchedVariantFunc(VariantCompletedObj);
82384
82367
  }, [VariantCompletedObj]);
82385
82368
  useEffect(function () {
82386
82369
  var completedVariantObj = null;
82370
+ var variantimagematching = null;
82387
82371
  if (choosen_values.length > 0) {
82388
82372
  var _iterator = _createForOfIteratorHelper(variants_iteminfo || []),
82389
82373
  _step;
82390
82374
  try {
82391
82375
  for (_iterator.s(); !(_step = _iterator.n()).done;) {
82392
- var _variantitem$variantv;
82376
+ var _variantitem$variantv2;
82393
82377
  var variantitem = _step.value;
82394
- var matchedValues = variantitem === null || variantitem === void 0 || (_variantitem$variantv = variantitem.variantvalues_w_valueinfo) === null || _variantitem$variantv === void 0 ? void 0 : _variantitem$variantv.filter(function (variantValue) {
82378
+ var matchedValues = variantitem === null || variantitem === void 0 || (_variantitem$variantv2 = variantitem.variantvalues_w_valueinfo) === null || _variantitem$variantv2 === void 0 ? void 0 : _variantitem$variantv2.filter(function (variantValue) {
82395
82379
  return choosen_values.some(function (choosenValue) {
82396
82380
  return choosenValue.valueid === variantValue.valueid;
82397
82381
  });
@@ -82406,7 +82390,31 @@ var Variants_J_Cards = function Variants_J_Cards(props) {
82406
82390
  } finally {
82407
82391
  _iterator.f();
82408
82392
  }
82393
+ choosen_values === null || choosen_values === void 0 || choosen_values.forEach(function (item, index) {
82394
+ var _item$option_info, _item$option_info2;
82395
+ if ((item === null || item === void 0 || (_item$option_info = item.option_info) === null || _item$option_info === void 0 ? void 0 : _item$option_info.optionname) == 'color' || (item === null || item === void 0 || (_item$option_info2 = item.option_info) === null || _item$option_info2 === void 0 ? void 0 : _item$option_info2.optionname) == 'Color') {
82396
+ var _iterator2 = _createForOfIteratorHelper(variants_iteminfo || []),
82397
+ _step2;
82398
+ try {
82399
+ for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
82400
+ var _variantitem$variantv;
82401
+ var variantitem = _step2.value;
82402
+ var matchingValue = variantitem === null || variantitem === void 0 || (_variantitem$variantv = variantitem.variantvalues_w_valueinfo) === null || _variantitem$variantv === void 0 ? void 0 : _variantitem$variantv.find(function (value) {
82403
+ return (value === null || value === void 0 ? void 0 : value.valueid) === (item === null || item === void 0 ? void 0 : item.valueid);
82404
+ });
82405
+ if (matchingValue) {
82406
+ variantimagematching = variantitem;
82407
+ }
82408
+ }
82409
+ } catch (err) {
82410
+ _iterator2.e(err);
82411
+ } finally {
82412
+ _iterator2.f();
82413
+ }
82414
+ }
82415
+ });
82409
82416
  }
82417
+ setVariantColorImageComObj(variantimagematching || {});
82410
82418
  setVariantCompletedObj(completedVariantObj || {});
82411
82419
  }, [choosen_values]);
82412
82420
  useEffect(function () {
@@ -82501,16 +82509,16 @@ var Variants_J_Cards = function Variants_J_Cards(props) {
82501
82509
  var isvaluedisabled = true;
82502
82510
  (_tempchoosen_values$s = tempchoosen_values.slice(0, 1)) === null || _tempchoosen_values$s === void 0 || _tempchoosen_values$s.forEach(function (chosvalitem) {
82503
82511
  variants_iteminfo === null || variants_iteminfo === void 0 || variants_iteminfo.forEach(function (variantitem) {
82504
- var _variantitem$variantv2;
82512
+ var _variantitem$variantv3;
82505
82513
  var is_Start_Variant_Found = false;
82506
- variantitem === null || variantitem === void 0 || (_variantitem$variantv2 = variantitem.variantvalues_w_valueinfo) === null || _variantitem$variantv2 === void 0 || _variantitem$variantv2.forEach(function (variantoptionsitem) {
82514
+ variantitem === null || variantitem === void 0 || (_variantitem$variantv3 = variantitem.variantvalues_w_valueinfo) === null || _variantitem$variantv3 === void 0 || _variantitem$variantv3.forEach(function (variantoptionsitem) {
82507
82515
  if (variantoptionsitem.valueid == chosvalitem.valueid) {
82508
82516
  is_Start_Variant_Found = true;
82509
82517
  }
82510
82518
  });
82511
82519
  if (is_Start_Variant_Found) {
82512
- var _variantitem$variantv3;
82513
- variantitem === null || variantitem === void 0 || (_variantitem$variantv3 = variantitem.variantvalues_w_valueinfo) === null || _variantitem$variantv3 === void 0 || _variantitem$variantv3.forEach(function (variantoptionsitem) {
82520
+ var _variantitem$variantv4;
82521
+ variantitem === null || variantitem === void 0 || (_variantitem$variantv4 = variantitem.variantvalues_w_valueinfo) === null || _variantitem$variantv4 === void 0 || _variantitem$variantv4.forEach(function (variantoptionsitem) {
82514
82522
  if (valitem.valueid == variantoptionsitem.valueid) {
82515
82523
  isvaluedisabled = false;
82516
82524
  }
@@ -82545,6 +82553,84 @@ var Variants_J_Cards = function Variants_J_Cards(props) {
82545
82553
  setoptions_w_values(_toConsumableArray(tempoptions_w_values));
82546
82554
  setchoosen_values(_toConsumableArray(tempchoosen_values));
82547
82555
  };
82556
+ useEffect(function () {
82557
+ foundImageColorMatchingFunc(VariantColorImageComObj);
82558
+ }, [VariantColorImageComObj]);
82559
+ useEffect(function () {
82560
+ var completedVariantObj = null;
82561
+ var variantimagematching = null;
82562
+ if (choosen_values.length > 0) {
82563
+ var _iterator3 = _createForOfIteratorHelper(variants_iteminfo || []),
82564
+ _step3;
82565
+ try {
82566
+ for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
82567
+ var _variantitem$variantv6;
82568
+ var variantitem = _step3.value;
82569
+ var matchedValues = variantitem === null || variantitem === void 0 || (_variantitem$variantv6 = variantitem.variantvalues_w_valueinfo) === null || _variantitem$variantv6 === void 0 ? void 0 : _variantitem$variantv6.filter(function (variantValue) {
82570
+ return choosen_values.some(function (choosenValue) {
82571
+ return choosenValue.valueid === variantValue.valueid;
82572
+ });
82573
+ });
82574
+ if (matchedValues.length === choosen_values.length && matchedValues.length === variantitem.variantvalues_w_valueinfo.length) {
82575
+ completedVariantObj = variantitem;
82576
+ break;
82577
+ }
82578
+ }
82579
+ } catch (err) {
82580
+ _iterator3.e(err);
82581
+ } finally {
82582
+ _iterator3.f();
82583
+ }
82584
+ choosen_values === null || choosen_values === void 0 || choosen_values.forEach(function (item, index) {
82585
+ var _item$option_info3, _item$option_info4;
82586
+ if ((item === null || item === void 0 || (_item$option_info3 = item.option_info) === null || _item$option_info3 === void 0 ? void 0 : _item$option_info3.optionname) == 'color' || (item === null || item === void 0 || (_item$option_info4 = item.option_info) === null || _item$option_info4 === void 0 ? void 0 : _item$option_info4.optionname) == 'Color') {
82587
+ var _iterator4 = _createForOfIteratorHelper(variants_iteminfo || []),
82588
+ _step4;
82589
+ try {
82590
+ for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
82591
+ var _variantitem$variantv5;
82592
+ var variantitem = _step4.value;
82593
+ var matchingValue = variantitem === null || variantitem === void 0 || (_variantitem$variantv5 = variantitem.variantvalues_w_valueinfo) === null || _variantitem$variantv5 === void 0 ? void 0 : _variantitem$variantv5.find(function (value) {
82594
+ return (value === null || value === void 0 ? void 0 : value.valueid) === (item === null || item === void 0 ? void 0 : item.valueid);
82595
+ });
82596
+ if (matchingValue) {
82597
+ variantimagematching = variantitem;
82598
+ }
82599
+ }
82600
+ } catch (err) {
82601
+ _iterator4.e(err);
82602
+ } finally {
82603
+ _iterator4.f();
82604
+ }
82605
+ }
82606
+ });
82607
+ }
82608
+ setVariantColorImageComObj(variantimagematching || {});
82609
+ setVariantCompletedObj(completedVariantObj || {});
82610
+ }, [choosen_values]);
82611
+
82612
+ // useEffect(() => {
82613
+ // var completedVariantObj = {};
82614
+ // var tempchoosen_values = [...choosen_values];
82615
+ // if (choosen_values.length != 0) {
82616
+ // variants_iteminfo?.forEach(function (variantitem) {
82617
+ // var isVariantValuesAllSame = true;
82618
+ // variantitem?.variantvalues_w_valueinfo?.forEach(function (variantvalues) {
82619
+ // tempchoosen_values?.forEach(function (item, index) {
82620
+ // if (variantvalues.valueid != item.valueid) {
82621
+ // isVariantValuesAllSame = false;
82622
+ // } else {
82623
+ // }
82624
+ // });
82625
+ // });
82626
+ // if (isVariantValuesAllSame == true) {
82627
+ // completedVariantObj = variantitem;
82628
+ // }
82629
+ // });
82630
+ // }
82631
+ // setVariantCompletedObj({ ...completedVariantObj });
82632
+ // }, [choosen_values]);
82633
+
82548
82634
  return /*#__PURE__*/React.createElement("div", {
82549
82635
  "class": ' row m-0 w-100 mb-2 '
82550
82636
  }, sectionproperties.length != 0 && /*#__PURE__*/React.createElement("div", {
@@ -82555,7 +82641,7 @@ var Variants_J_Cards = function Variants_J_Cards(props) {
82555
82641
  return /*#__PURE__*/React.createElement("div", {
82556
82642
  className: "col-lg-12 col-md-12 d-flex mb-2 allcentered scrollhorixontalcontainer"
82557
82643
  }, item === null || item === void 0 || (_item$values5 = item.values) === null || _item$values5 === void 0 ? void 0 : _item$values5.map(function (valitem) {
82558
- var _item$option_info, _item$option_info2, _item$option_info3, _item$option_info4, _item$option_info5, _valitem$valueinfo, _item$option_info6, _valitem$valueinfo2;
82644
+ var _item$option_info5, _item$option_info6, _item$option_info7, _item$option_info8, _item$option_info9, _valitem$valueinfo, _item$option_info10, _valitem$valueinfo2;
82559
82645
  var isChoosedValueExists = false;
82560
82646
  choosen_values === null || choosen_values === void 0 || choosen_values.forEach(function (choseitem, choseindex) {
82561
82647
  if (choseitem != null) {
@@ -82577,17 +82663,17 @@ var Variants_J_Cards = function Variants_J_Cards(props) {
82577
82663
  // backgroundColor: isChoosedValueExists ? 'lightblue' : 'white',
82578
82664
  color: isChoosedValueExists ? '#ffffff' : '#000000',
82579
82665
  border: isChoosedValueExists ? '3px solid ' + sectionproperties.activeproductcolor : '1px solid ' + sectionproperties.variantcontainerbordercolor,
82580
- padding: (item === null || item === void 0 || (_item$option_info = item.option_info) === null || _item$option_info === void 0 ? void 0 : _item$option_info.optionname) == 'Color' ? '5px' : '5px 10px',
82666
+ padding: (item === null || item === void 0 || (_item$option_info5 = item.option_info) === null || _item$option_info5 === void 0 ? void 0 : _item$option_info5.optionname) == 'Color' ? '5px' : '5px 10px',
82581
82667
  cursor: valitem.disabled ? 'not-allowed' : 'pointer',
82582
82668
  fontSize: '13px',
82583
- width: (item === null || item === void 0 || (_item$option_info2 = item.option_info) === null || _item$option_info2 === void 0 ? void 0 : _item$option_info2.optionname) == 'Color' ? 25 : '',
82584
- height: (item === null || item === void 0 || (_item$option_info3 = item.option_info) === null || _item$option_info3 === void 0 ? void 0 : _item$option_info3.optionname) == 'Color' ? 25 : '',
82585
- borderRadius: (item === null || item === void 0 || (_item$option_info4 = item.option_info) === null || _item$option_info4 === void 0 ? void 0 : _item$option_info4.optionname) == 'Color' ? 100 : 5,
82586
- background: (item === null || item === void 0 || (_item$option_info5 = item.option_info) === null || _item$option_info5 === void 0 ? void 0 : _item$option_info5.optionname) == 'Color' ? valitem === null || valitem === void 0 || (_valitem$valueinfo = valitem.valueinfo) === null || _valitem$valueinfo === void 0 ? void 0 : _valitem$valueinfo.valuename : isChoosedValueExists ? sectionproperties.activeproductcolor : '#ffffff',
82669
+ width: (item === null || item === void 0 || (_item$option_info6 = item.option_info) === null || _item$option_info6 === void 0 ? void 0 : _item$option_info6.optionname) == 'Color' ? 25 : '',
82670
+ height: (item === null || item === void 0 || (_item$option_info7 = item.option_info) === null || _item$option_info7 === void 0 ? void 0 : _item$option_info7.optionname) == 'Color' ? 25 : '',
82671
+ borderRadius: (item === null || item === void 0 || (_item$option_info8 = item.option_info) === null || _item$option_info8 === void 0 ? void 0 : _item$option_info8.optionname) == 'Color' ? 100 : 5,
82672
+ background: (item === null || item === void 0 || (_item$option_info9 = item.option_info) === null || _item$option_info9 === void 0 ? void 0 : _item$option_info9.optionname) == 'Color' ? valitem === null || valitem === void 0 || (_valitem$valueinfo = valitem.valueinfo) === null || _valitem$valueinfo === void 0 ? void 0 : _valitem$valueinfo.valuename : isChoosedValueExists ? sectionproperties.activeproductcolor : '#ffffff',
82587
82673
  fontWeight: 500
82588
82674
  },
82589
82675
  disabled: valitem.disabled
82590
- }, (item === null || item === void 0 || (_item$option_info6 = item.option_info) === null || _item$option_info6 === void 0 ? void 0 : _item$option_info6.optionname) == 'Color' ? '' : (valitem === null || valitem === void 0 || (_valitem$valueinfo2 = valitem.valueinfo) === null || _valitem$valueinfo2 === void 0 ? void 0 : _valitem$valueinfo2.valuename) || 'Unnamed'));
82676
+ }, (item === null || item === void 0 || (_item$option_info10 = item.option_info) === null || _item$option_info10 === void 0 ? void 0 : _item$option_info10.optionname) == 'Color' ? '' : (valitem === null || valitem === void 0 || (_valitem$valueinfo2 = valitem.valueinfo) === null || _valitem$valueinfo2 === void 0 ? void 0 : _valitem$valueinfo2.valuename) || 'Unnamed'));
82591
82677
  }));
82592
82678
  // }
82593
82679
  })));
@@ -82624,6 +82710,10 @@ var Simpleproductcard = function Simpleproductcard(props) {
82624
82710
  _useState8 = _slicedToArray(_useState7, 2);
82625
82711
  _useState8[0];
82626
82712
  _useState8[1];
82713
+ var _useState9 = useState(''),
82714
+ _useState10 = _slicedToArray(_useState9, 2),
82715
+ Variant_Color_ImageObj = _useState10[0],
82716
+ setVariant_Color_ImageObj = _useState10[1];
82627
82717
  var plainString = function plainString(html) {
82628
82718
  var divContainer = document.createElement('div');
82629
82719
  divContainer.innerHTML = html;
@@ -82661,6 +82751,24 @@ var Simpleproductcard = function Simpleproductcard(props) {
82661
82751
  Tempitem.image = productImagetoBeSelected;
82662
82752
  setitem(_objectSpread$6({}, Tempitem));
82663
82753
  }, [variantObj]);
82754
+ useEffect(function () {
82755
+ var productImagetoBeSelected = '';
82756
+ var Tempitem = _objectSpread$6({}, item);
82757
+ productImagetoBeSelected = item.productmainimage;
82758
+ if (Variant_Color_ImageObj != undefined && Variant_Color_ImageObj != null && Object.keys(Variant_Color_ImageObj).length != 0 && Variant_Color_ImageObj != '') {
82759
+ var variatgalleryid = Variant_Color_ImageObj.variantgalleryid;
82760
+ if (variatgalleryid != undefined && variatgalleryid != null && variatgalleryid != '') {
82761
+ var _item$productimages2;
82762
+ item === null || item === void 0 || (_item$productimages2 = item.productimages) === null || _item$productimages2 === void 0 || _item$productimages2.forEach(function (item, index) {
82763
+ if (item.galleryid == variatgalleryid) {
82764
+ productImagetoBeSelected = item.path;
82765
+ }
82766
+ });
82767
+ }
82768
+ }
82769
+ Tempitem.image = productImagetoBeSelected;
82770
+ setitem(_objectSpread$6({}, Tempitem));
82771
+ }, [Variant_Color_ImageObj]);
82664
82772
  var card_cssstyles = {
82665
82773
  innersection: css({
82666
82774
  paddingLeft: sectionproperties.innersectionpaddinghorizontal + 'px',
@@ -82841,10 +82949,10 @@ var Simpleproductcard = function Simpleproductcard(props) {
82841
82949
  transform: "translateX(0px)"
82842
82950
  })
82843
82951
  };
82844
- var _useState9 = useState(''),
82845
- _useState10 = _slicedToArray(_useState9, 2),
82846
- secondimage = _useState10[0],
82847
- setsecondimage = _useState10[1];
82952
+ var _useState11 = useState(''),
82953
+ _useState12 = _slicedToArray(_useState11, 2),
82954
+ secondimage = _useState12[0],
82955
+ setsecondimage = _useState12[1];
82848
82956
  useEffect(function () {
82849
82957
  var _props$cardinfoitempr;
82850
82958
  setitem(props.cardinfoitemprops);
@@ -83004,10 +83112,10 @@ var Simpleproductcard = function Simpleproductcard(props) {
83004
83112
  }
83005
83113
  }));
83006
83114
  };
83007
- var _useState11 = useState(0),
83008
- _useState12 = _slicedToArray(_useState11, 2),
83009
- clickCount = _useState12[0],
83010
- setClickCount = _useState12[1];
83115
+ var _useState13 = useState(0),
83116
+ _useState14 = _slicedToArray(_useState13, 2),
83117
+ clickCount = _useState14[0],
83118
+ setClickCount = _useState14[1];
83011
83119
  var handleClick = function handleClick() {
83012
83120
  // Increase the click count by 1
83013
83121
  setClickCount(function (prevCount) {
@@ -83350,6 +83458,9 @@ var Simpleproductcard = function Simpleproductcard(props) {
83350
83458
  },
83351
83459
  foundMatchedVariantFunc: function foundMatchedVariantFunc(variantCompletedObj) {
83352
83460
  setvariantObj(variantCompletedObj);
83461
+ },
83462
+ foundImageColorMatchingFunc: function foundImageColorMatchingFunc(variantIMAGECompletedObj) {
83463
+ setVariant_Color_ImageObj(variantIMAGECompletedObj);
83353
83464
  }
83354
83465
  })), sectionproperties.showprofitcontainer == 'Show' && /*#__PURE__*/React.createElement("div", {
83355
83466
  "class": "col-lg-12 p-0",
package/dist/index.umd.js CHANGED
@@ -82222,41 +82222,25 @@
82222
82222
  _useState12 = _slicedToArray__default["default"](_useState11, 2);
82223
82223
  _useState12[0];
82224
82224
  _useState12[1];
82225
-
82226
- // useEffect(() => {
82227
- // var completedVariantObj = {};
82228
- // var tempchoosen_values = [...choosen_values];
82229
- // if (choosen_values.length != 0) {
82230
- // variants_iteminfo?.forEach(function (variantitem) {
82231
- // var isVariantValuesAllSame = true;
82232
- // variantitem?.variantvalues_w_valueinfo?.forEach(function (variantvalues) {
82233
- // tempchoosen_values?.forEach(function (item, index) {
82234
- // if (variantvalues.valueid != item.valueid) {
82235
- // isVariantValuesAllSame = false;
82236
- // } else {
82237
- // }
82238
- // });
82239
- // });
82240
- // if (isVariantValuesAllSame == true) {
82241
- // completedVariantObj = variantitem;
82242
- // }
82243
- // });
82244
- // }
82245
- // setVariantCompletedObj({ ...completedVariantObj });
82246
- // }, [choosen_values]);
82225
+ var _useState13 = React.useState({}),
82226
+ _useState14 = _slicedToArray__default["default"](_useState13, 2),
82227
+ VariantColorImageComObj = _useState14[0],
82228
+ setVariantColorImageComObj = _useState14[1];
82229
+ var foundImageColorMatchingFunc = props.foundImageColorMatchingFunc;
82247
82230
  React.useEffect(function () {
82248
82231
  foundMatchedVariantFunc(VariantCompletedObj);
82249
82232
  }, [VariantCompletedObj]);
82250
82233
  React.useEffect(function () {
82251
82234
  var completedVariantObj = null;
82235
+ var variantimagematching = null;
82252
82236
  if (choosen_values.length > 0) {
82253
82237
  var _iterator = _createForOfIteratorHelper(variants_iteminfo || []),
82254
82238
  _step;
82255
82239
  try {
82256
82240
  for (_iterator.s(); !(_step = _iterator.n()).done;) {
82257
- var _variantitem$variantv;
82241
+ var _variantitem$variantv2;
82258
82242
  var variantitem = _step.value;
82259
- var matchedValues = variantitem === null || variantitem === void 0 || (_variantitem$variantv = variantitem.variantvalues_w_valueinfo) === null || _variantitem$variantv === void 0 ? void 0 : _variantitem$variantv.filter(function (variantValue) {
82243
+ var matchedValues = variantitem === null || variantitem === void 0 || (_variantitem$variantv2 = variantitem.variantvalues_w_valueinfo) === null || _variantitem$variantv2 === void 0 ? void 0 : _variantitem$variantv2.filter(function (variantValue) {
82260
82244
  return choosen_values.some(function (choosenValue) {
82261
82245
  return choosenValue.valueid === variantValue.valueid;
82262
82246
  });
@@ -82271,7 +82255,31 @@
82271
82255
  } finally {
82272
82256
  _iterator.f();
82273
82257
  }
82258
+ choosen_values === null || choosen_values === void 0 || choosen_values.forEach(function (item, index) {
82259
+ var _item$option_info, _item$option_info2;
82260
+ if ((item === null || item === void 0 || (_item$option_info = item.option_info) === null || _item$option_info === void 0 ? void 0 : _item$option_info.optionname) == 'color' || (item === null || item === void 0 || (_item$option_info2 = item.option_info) === null || _item$option_info2 === void 0 ? void 0 : _item$option_info2.optionname) == 'Color') {
82261
+ var _iterator2 = _createForOfIteratorHelper(variants_iteminfo || []),
82262
+ _step2;
82263
+ try {
82264
+ for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
82265
+ var _variantitem$variantv;
82266
+ var variantitem = _step2.value;
82267
+ var matchingValue = variantitem === null || variantitem === void 0 || (_variantitem$variantv = variantitem.variantvalues_w_valueinfo) === null || _variantitem$variantv === void 0 ? void 0 : _variantitem$variantv.find(function (value) {
82268
+ return (value === null || value === void 0 ? void 0 : value.valueid) === (item === null || item === void 0 ? void 0 : item.valueid);
82269
+ });
82270
+ if (matchingValue) {
82271
+ variantimagematching = variantitem;
82272
+ }
82273
+ }
82274
+ } catch (err) {
82275
+ _iterator2.e(err);
82276
+ } finally {
82277
+ _iterator2.f();
82278
+ }
82279
+ }
82280
+ });
82274
82281
  }
82282
+ setVariantColorImageComObj(variantimagematching || {});
82275
82283
  setVariantCompletedObj(completedVariantObj || {});
82276
82284
  }, [choosen_values]);
82277
82285
  React.useEffect(function () {
@@ -82366,16 +82374,16 @@
82366
82374
  var isvaluedisabled = true;
82367
82375
  (_tempchoosen_values$s = tempchoosen_values.slice(0, 1)) === null || _tempchoosen_values$s === void 0 || _tempchoosen_values$s.forEach(function (chosvalitem) {
82368
82376
  variants_iteminfo === null || variants_iteminfo === void 0 || variants_iteminfo.forEach(function (variantitem) {
82369
- var _variantitem$variantv2;
82377
+ var _variantitem$variantv3;
82370
82378
  var is_Start_Variant_Found = false;
82371
- variantitem === null || variantitem === void 0 || (_variantitem$variantv2 = variantitem.variantvalues_w_valueinfo) === null || _variantitem$variantv2 === void 0 || _variantitem$variantv2.forEach(function (variantoptionsitem) {
82379
+ variantitem === null || variantitem === void 0 || (_variantitem$variantv3 = variantitem.variantvalues_w_valueinfo) === null || _variantitem$variantv3 === void 0 || _variantitem$variantv3.forEach(function (variantoptionsitem) {
82372
82380
  if (variantoptionsitem.valueid == chosvalitem.valueid) {
82373
82381
  is_Start_Variant_Found = true;
82374
82382
  }
82375
82383
  });
82376
82384
  if (is_Start_Variant_Found) {
82377
- var _variantitem$variantv3;
82378
- variantitem === null || variantitem === void 0 || (_variantitem$variantv3 = variantitem.variantvalues_w_valueinfo) === null || _variantitem$variantv3 === void 0 || _variantitem$variantv3.forEach(function (variantoptionsitem) {
82385
+ var _variantitem$variantv4;
82386
+ variantitem === null || variantitem === void 0 || (_variantitem$variantv4 = variantitem.variantvalues_w_valueinfo) === null || _variantitem$variantv4 === void 0 || _variantitem$variantv4.forEach(function (variantoptionsitem) {
82379
82387
  if (valitem.valueid == variantoptionsitem.valueid) {
82380
82388
  isvaluedisabled = false;
82381
82389
  }
@@ -82410,6 +82418,84 @@
82410
82418
  setoptions_w_values(_toConsumableArray__default["default"](tempoptions_w_values));
82411
82419
  setchoosen_values(_toConsumableArray__default["default"](tempchoosen_values));
82412
82420
  };
82421
+ React.useEffect(function () {
82422
+ foundImageColorMatchingFunc(VariantColorImageComObj);
82423
+ }, [VariantColorImageComObj]);
82424
+ React.useEffect(function () {
82425
+ var completedVariantObj = null;
82426
+ var variantimagematching = null;
82427
+ if (choosen_values.length > 0) {
82428
+ var _iterator3 = _createForOfIteratorHelper(variants_iteminfo || []),
82429
+ _step3;
82430
+ try {
82431
+ for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
82432
+ var _variantitem$variantv6;
82433
+ var variantitem = _step3.value;
82434
+ var matchedValues = variantitem === null || variantitem === void 0 || (_variantitem$variantv6 = variantitem.variantvalues_w_valueinfo) === null || _variantitem$variantv6 === void 0 ? void 0 : _variantitem$variantv6.filter(function (variantValue) {
82435
+ return choosen_values.some(function (choosenValue) {
82436
+ return choosenValue.valueid === variantValue.valueid;
82437
+ });
82438
+ });
82439
+ if (matchedValues.length === choosen_values.length && matchedValues.length === variantitem.variantvalues_w_valueinfo.length) {
82440
+ completedVariantObj = variantitem;
82441
+ break;
82442
+ }
82443
+ }
82444
+ } catch (err) {
82445
+ _iterator3.e(err);
82446
+ } finally {
82447
+ _iterator3.f();
82448
+ }
82449
+ choosen_values === null || choosen_values === void 0 || choosen_values.forEach(function (item, index) {
82450
+ var _item$option_info3, _item$option_info4;
82451
+ if ((item === null || item === void 0 || (_item$option_info3 = item.option_info) === null || _item$option_info3 === void 0 ? void 0 : _item$option_info3.optionname) == 'color' || (item === null || item === void 0 || (_item$option_info4 = item.option_info) === null || _item$option_info4 === void 0 ? void 0 : _item$option_info4.optionname) == 'Color') {
82452
+ var _iterator4 = _createForOfIteratorHelper(variants_iteminfo || []),
82453
+ _step4;
82454
+ try {
82455
+ for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
82456
+ var _variantitem$variantv5;
82457
+ var variantitem = _step4.value;
82458
+ var matchingValue = variantitem === null || variantitem === void 0 || (_variantitem$variantv5 = variantitem.variantvalues_w_valueinfo) === null || _variantitem$variantv5 === void 0 ? void 0 : _variantitem$variantv5.find(function (value) {
82459
+ return (value === null || value === void 0 ? void 0 : value.valueid) === (item === null || item === void 0 ? void 0 : item.valueid);
82460
+ });
82461
+ if (matchingValue) {
82462
+ variantimagematching = variantitem;
82463
+ }
82464
+ }
82465
+ } catch (err) {
82466
+ _iterator4.e(err);
82467
+ } finally {
82468
+ _iterator4.f();
82469
+ }
82470
+ }
82471
+ });
82472
+ }
82473
+ setVariantColorImageComObj(variantimagematching || {});
82474
+ setVariantCompletedObj(completedVariantObj || {});
82475
+ }, [choosen_values]);
82476
+
82477
+ // useEffect(() => {
82478
+ // var completedVariantObj = {};
82479
+ // var tempchoosen_values = [...choosen_values];
82480
+ // if (choosen_values.length != 0) {
82481
+ // variants_iteminfo?.forEach(function (variantitem) {
82482
+ // var isVariantValuesAllSame = true;
82483
+ // variantitem?.variantvalues_w_valueinfo?.forEach(function (variantvalues) {
82484
+ // tempchoosen_values?.forEach(function (item, index) {
82485
+ // if (variantvalues.valueid != item.valueid) {
82486
+ // isVariantValuesAllSame = false;
82487
+ // } else {
82488
+ // }
82489
+ // });
82490
+ // });
82491
+ // if (isVariantValuesAllSame == true) {
82492
+ // completedVariantObj = variantitem;
82493
+ // }
82494
+ // });
82495
+ // }
82496
+ // setVariantCompletedObj({ ...completedVariantObj });
82497
+ // }, [choosen_values]);
82498
+
82413
82499
  return /*#__PURE__*/React__default["default"].createElement("div", {
82414
82500
  "class": ' row m-0 w-100 mb-2 '
82415
82501
  }, sectionproperties.length != 0 && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -82420,7 +82506,7 @@
82420
82506
  return /*#__PURE__*/React__default["default"].createElement("div", {
82421
82507
  className: "col-lg-12 col-md-12 d-flex mb-2 allcentered scrollhorixontalcontainer"
82422
82508
  }, item === null || item === void 0 || (_item$values5 = item.values) === null || _item$values5 === void 0 ? void 0 : _item$values5.map(function (valitem) {
82423
- var _item$option_info, _item$option_info2, _item$option_info3, _item$option_info4, _item$option_info5, _valitem$valueinfo, _item$option_info6, _valitem$valueinfo2;
82509
+ var _item$option_info5, _item$option_info6, _item$option_info7, _item$option_info8, _item$option_info9, _valitem$valueinfo, _item$option_info10, _valitem$valueinfo2;
82424
82510
  var isChoosedValueExists = false;
82425
82511
  choosen_values === null || choosen_values === void 0 || choosen_values.forEach(function (choseitem, choseindex) {
82426
82512
  if (choseitem != null) {
@@ -82442,17 +82528,17 @@
82442
82528
  // backgroundColor: isChoosedValueExists ? 'lightblue' : 'white',
82443
82529
  color: isChoosedValueExists ? '#ffffff' : '#000000',
82444
82530
  border: isChoosedValueExists ? '3px solid ' + sectionproperties.activeproductcolor : '1px solid ' + sectionproperties.variantcontainerbordercolor,
82445
- padding: (item === null || item === void 0 || (_item$option_info = item.option_info) === null || _item$option_info === void 0 ? void 0 : _item$option_info.optionname) == 'Color' ? '5px' : '5px 10px',
82531
+ padding: (item === null || item === void 0 || (_item$option_info5 = item.option_info) === null || _item$option_info5 === void 0 ? void 0 : _item$option_info5.optionname) == 'Color' ? '5px' : '5px 10px',
82446
82532
  cursor: valitem.disabled ? 'not-allowed' : 'pointer',
82447
82533
  fontSize: '13px',
82448
- width: (item === null || item === void 0 || (_item$option_info2 = item.option_info) === null || _item$option_info2 === void 0 ? void 0 : _item$option_info2.optionname) == 'Color' ? 25 : '',
82449
- height: (item === null || item === void 0 || (_item$option_info3 = item.option_info) === null || _item$option_info3 === void 0 ? void 0 : _item$option_info3.optionname) == 'Color' ? 25 : '',
82450
- borderRadius: (item === null || item === void 0 || (_item$option_info4 = item.option_info) === null || _item$option_info4 === void 0 ? void 0 : _item$option_info4.optionname) == 'Color' ? 100 : 5,
82451
- background: (item === null || item === void 0 || (_item$option_info5 = item.option_info) === null || _item$option_info5 === void 0 ? void 0 : _item$option_info5.optionname) == 'Color' ? valitem === null || valitem === void 0 || (_valitem$valueinfo = valitem.valueinfo) === null || _valitem$valueinfo === void 0 ? void 0 : _valitem$valueinfo.valuename : isChoosedValueExists ? sectionproperties.activeproductcolor : '#ffffff',
82534
+ width: (item === null || item === void 0 || (_item$option_info6 = item.option_info) === null || _item$option_info6 === void 0 ? void 0 : _item$option_info6.optionname) == 'Color' ? 25 : '',
82535
+ height: (item === null || item === void 0 || (_item$option_info7 = item.option_info) === null || _item$option_info7 === void 0 ? void 0 : _item$option_info7.optionname) == 'Color' ? 25 : '',
82536
+ borderRadius: (item === null || item === void 0 || (_item$option_info8 = item.option_info) === null || _item$option_info8 === void 0 ? void 0 : _item$option_info8.optionname) == 'Color' ? 100 : 5,
82537
+ background: (item === null || item === void 0 || (_item$option_info9 = item.option_info) === null || _item$option_info9 === void 0 ? void 0 : _item$option_info9.optionname) == 'Color' ? valitem === null || valitem === void 0 || (_valitem$valueinfo = valitem.valueinfo) === null || _valitem$valueinfo === void 0 ? void 0 : _valitem$valueinfo.valuename : isChoosedValueExists ? sectionproperties.activeproductcolor : '#ffffff',
82452
82538
  fontWeight: 500
82453
82539
  },
82454
82540
  disabled: valitem.disabled
82455
- }, (item === null || item === void 0 || (_item$option_info6 = item.option_info) === null || _item$option_info6 === void 0 ? void 0 : _item$option_info6.optionname) == 'Color' ? '' : (valitem === null || valitem === void 0 || (_valitem$valueinfo2 = valitem.valueinfo) === null || _valitem$valueinfo2 === void 0 ? void 0 : _valitem$valueinfo2.valuename) || 'Unnamed'));
82541
+ }, (item === null || item === void 0 || (_item$option_info10 = item.option_info) === null || _item$option_info10 === void 0 ? void 0 : _item$option_info10.optionname) == 'Color' ? '' : (valitem === null || valitem === void 0 || (_valitem$valueinfo2 = valitem.valueinfo) === null || _valitem$valueinfo2 === void 0 ? void 0 : _valitem$valueinfo2.valuename) || 'Unnamed'));
82456
82542
  }));
82457
82543
  // }
82458
82544
  })));
@@ -82489,6 +82575,10 @@
82489
82575
  _useState8 = _slicedToArray__default["default"](_useState7, 2);
82490
82576
  _useState8[0];
82491
82577
  _useState8[1];
82578
+ var _useState9 = React.useState(''),
82579
+ _useState10 = _slicedToArray__default["default"](_useState9, 2),
82580
+ Variant_Color_ImageObj = _useState10[0],
82581
+ setVariant_Color_ImageObj = _useState10[1];
82492
82582
  var plainString = function plainString(html) {
82493
82583
  var divContainer = document.createElement('div');
82494
82584
  divContainer.innerHTML = html;
@@ -82526,6 +82616,24 @@
82526
82616
  Tempitem.image = productImagetoBeSelected;
82527
82617
  setitem(_objectSpread$6({}, Tempitem));
82528
82618
  }, [variantObj]);
82619
+ React.useEffect(function () {
82620
+ var productImagetoBeSelected = '';
82621
+ var Tempitem = _objectSpread$6({}, item);
82622
+ productImagetoBeSelected = item.productmainimage;
82623
+ if (Variant_Color_ImageObj != undefined && Variant_Color_ImageObj != null && Object.keys(Variant_Color_ImageObj).length != 0 && Variant_Color_ImageObj != '') {
82624
+ var variatgalleryid = Variant_Color_ImageObj.variantgalleryid;
82625
+ if (variatgalleryid != undefined && variatgalleryid != null && variatgalleryid != '') {
82626
+ var _item$productimages2;
82627
+ item === null || item === void 0 || (_item$productimages2 = item.productimages) === null || _item$productimages2 === void 0 || _item$productimages2.forEach(function (item, index) {
82628
+ if (item.galleryid == variatgalleryid) {
82629
+ productImagetoBeSelected = item.path;
82630
+ }
82631
+ });
82632
+ }
82633
+ }
82634
+ Tempitem.image = productImagetoBeSelected;
82635
+ setitem(_objectSpread$6({}, Tempitem));
82636
+ }, [Variant_Color_ImageObj]);
82529
82637
  var card_cssstyles = {
82530
82638
  innersection: glamor.css({
82531
82639
  paddingLeft: sectionproperties.innersectionpaddinghorizontal + 'px',
@@ -82706,10 +82814,10 @@
82706
82814
  transform: "translateX(0px)"
82707
82815
  })
82708
82816
  };
82709
- var _useState9 = React.useState(''),
82710
- _useState10 = _slicedToArray__default["default"](_useState9, 2),
82711
- secondimage = _useState10[0],
82712
- setsecondimage = _useState10[1];
82817
+ var _useState11 = React.useState(''),
82818
+ _useState12 = _slicedToArray__default["default"](_useState11, 2),
82819
+ secondimage = _useState12[0],
82820
+ setsecondimage = _useState12[1];
82713
82821
  React.useEffect(function () {
82714
82822
  var _props$cardinfoitempr;
82715
82823
  setitem(props.cardinfoitemprops);
@@ -82869,10 +82977,10 @@
82869
82977
  }
82870
82978
  }));
82871
82979
  };
82872
- var _useState11 = React.useState(0),
82873
- _useState12 = _slicedToArray__default["default"](_useState11, 2),
82874
- clickCount = _useState12[0],
82875
- setClickCount = _useState12[1];
82980
+ var _useState13 = React.useState(0),
82981
+ _useState14 = _slicedToArray__default["default"](_useState13, 2),
82982
+ clickCount = _useState14[0],
82983
+ setClickCount = _useState14[1];
82876
82984
  var handleClick = function handleClick() {
82877
82985
  // Increase the click count by 1
82878
82986
  setClickCount(function (prevCount) {
@@ -83215,6 +83323,9 @@
83215
83323
  },
83216
83324
  foundMatchedVariantFunc: function foundMatchedVariantFunc(variantCompletedObj) {
83217
83325
  setvariantObj(variantCompletedObj);
83326
+ },
83327
+ foundImageColorMatchingFunc: function foundImageColorMatchingFunc(variantIMAGECompletedObj) {
83328
+ setVariant_Color_ImageObj(variantIMAGECompletedObj);
83218
83329
  }
83219
83330
  })), sectionproperties.showprofitcontainer == 'Show' && /*#__PURE__*/React__default["default"].createElement("div", {
83220
83331
  "class": "col-lg-12 p-0",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "tabexseriescomponents",
3
- "version": "0.0.831",
3
+ "version": "0.0.832",
4
4
  "description": "your description",
5
5
  "main": "dist/index.cjs.js",
6
6
  "scripts": {