let gfgShippingDiscountV2 = {
  state: {
    isFirstRenderForShippingDiscount: true,
    productFound: {},
    productVariantFrount: {},
    collectionFound: {},
    appBlockKeyMap: {
      tBarHeadingFontSize: "titleBarHeadingFontSize",
      tBarHeadingFontWt: "titleBarHeadingFontWeight",
      tBarSubHeadingFontSize: "titleBarSubHeadingFontSize",
      tBarSubHeadingFontWt: "titleBarSubHeadingFontWeight",
      tBarTextColor: "titleBarTextColor",
      tBarBackgroundColor: "titleBarBackgroundColor",
      widgetBodyFontSize: "widgetBodyFontSize",
      widgetBodyFontWt: "widgetBodyFontWeight",
      widgetBodyBackgroundColor: "widgetBodyBackgroundColor",
      widgetBodyBorderColor: "widgetBodyBorderColor",
    },
  },
  init: function () {
    try {
      let settings = gfg.settings;
      let _shippingDiscountData = settings.shippingDiscount;

      const page_type = gfg.f.getPageType();
      if (page_type === "product") {
        gfgShippingDiscountV2.productPage.init(_shippingDiscountData);
      }

      if (page_type === "cart") {
        gfgShippingDiscountV2.cartPage.init(_shippingDiscountData);
      }

      if (page_type !== "cart") {
        gfgShippingDiscountV2.sideCart.init(_shippingDiscountData);
      }
    } catch (error) {
      gfg.utility.debugConsole("Error inside gfgShippingDiscountV2 init fn", error);
    }
  },
  productPage: {
    init: function (shippingDiscountData) {
      try {
        gfgShippingDiscountV2.initialize(shippingDiscountData, "PRODUCT_PAGE");
      } catch (error) {
        gfg.utility.debugConsole("Error inside productPage.init fn", error);
      }
    },
  },
  cartPage: {
    init: function (shippingDiscountData) {
      try {
        gfgShippingDiscountV2.initialize(shippingDiscountData, "CART_PAGE");
      } catch (error) {
        gfg.utility.debugConsole("Error inside cartPage.init fn", error);
      }
    },
  },
  sideCart: {
    init: function (shippingDiscountData) {
      try {
        gfgShippingDiscountV2.initialize(shippingDiscountData, "SIDE_CART");
      } catch (error) {
        gfg.utility.debugConsole("Error inside cartPage.init fn", error);
      }
    },
  },
  initialize: async function (shippingDiscountData, pageType) {
    try {
      const enabledShipingDiscountData = shippingDiscountData.filter((discount) => discount.isEnabled);
      let shippingDiscountWidgets = [];
      let cartData = null;
      if (gfgShippingDiscountV2.state.isFirstRenderForShippingDiscount) {
        cartData = await gfg.utility.getFirstRenderCartData();
        gfgShippingDiscountV2.state.isFirstRenderForShippingDiscount = false;
      } else {
        cartData = await gfg.utility.getCart();
      }

      for (let shippingDiscount of enabledShipingDiscountData) {
        const isShippingDiscountExists = shippingDiscount;
        if (!isShippingDiscountExists) {
          continue;
        }

        const isActiveCampaign = gfg.customDiscountValidationFunctions .checkForActiveCampaign(shippingDiscount);
        if (!isActiveCampaign) {
          continue;
        }

        const isRelevantToCurrentPage = await gfg.customDiscountValidationFunctions.checkCustomDiscountWidgetIsRelevantToCurrentPage(
          shippingDiscount,
          pageType
        );
        if (!isRelevantToCurrentPage) {
          continue;
        }

        await gfg.customDiscountValidationFunctions.verifyCustomDiscountRules(shippingDiscount, cartData);
        gfgShippingDiscountV2.f.checkIfShippingDiscountAppBlockIsAdded(shippingDiscount, pageType);
        const preparedShippingDiscountWidget = gfgShippingDiscountV2.f.prepareShippingDiscountUI(shippingDiscount);
        shippingDiscountWidgets.push({ generatedUI: preparedShippingDiscountWidget, offer: shippingDiscount });
      }

      gfgShippingDiscountV2.f.insertIntoPageWrapper(shippingDiscountWidgets, pageType);
    } catch (error) {
      gfg.utility.debugConsole("Error inside gfgShippingDiscountV2 initialize fn", error);
    }
  },
  f: {
    verifyIndividualRule: async function (ruleData, cartData) {
      try {
        const ruleType = ruleData.ruleType;
        const ruleValue = ruleData.ruleValue;
        const type = ruleData.type;
      } catch (error) {
        gfg.utility.debugConsole("Error inside gfgShippingDiscountV2 verifyIndividualRule fn", error);
      }
    },
    renderTitleBarUI: function (titleIcon, titleBarHeading, titleBarSubHeading, styleSettings) {
      try {
        const {
          titleBarHeadingFontSize,
          titleBarSubHeadingFontSize,
          titleBarHeadingFontWeight,
          titleBarSubHeadingFontWeight,
          titleBarTextColor,
        } = styleSettings;
        const headingFontWeightValue = gfg.utility.getFontWeightValue(titleBarHeadingFontWeight);
        const subHeadingFontWeightValue = gfg.utility.getFontWeightValue(titleBarSubHeadingFontWeight);
        if (titleIcon) {
          return `
          <div class="titleIconWrapper">
            <img class="titleIcon" src='${titleIcon}' alt='icon-img'></img>
          </div>
          <div class="titleBarTextContainer">
            <div 
              class="titleBarMainHeading" 
              style="font-size:${titleBarHeadingFontSize}px; font-weight:${headingFontWeightValue}; color:${titleBarTextColor};">
              ${titleBarHeading}
            </div>
            <div 
              class="titleBarSubHeading" 
              style="font-size:${titleBarSubHeadingFontSize}px; font-weight:${subHeadingFontWeightValue}; color:${titleBarTextColor};">
              ${titleBarSubHeading}
            </div>
          </div>
        `;
        }
        return `
          <div class="titleBarTextContainer" style="width:100%; align-items: center;">
            <div 
              class="titleBarMainHeading" 
              style="font-size:${titleBarHeadingFontSize}px; font-weight:${headingFontWeightValue}; color:${titleBarTextColor}; text-align:center;">
              ${titleBarHeading}
            </div>
            <div 
              class="titleBarSubHeading" 
              style="font-size:${titleBarSubHeadingFontSize}px; font-weight:${subHeadingFontWeightValue}; color:${titleBarTextColor}; text-align:center;">
              ${titleBarSubHeading}
            </div>
          </div>
        `;
      } catch (error) {
        gfg.utility.debugConsole("Error inside gfgShippingDiscountV2 renderTitleBarUI fn", error);
      }
    },
    replaceTextDynamicVariables: function (text, currRule, discountValue) {
      try {
        const { ruleType } = currRule;
        const currencySymbol = gfg.utility.getCurrencySymbol();
        text = text.replace("{{CURRENCY}}", currencySymbol);
        text = text.replace("{{DISCOUNT_VALUE}}", discountValue);
        if (!ruleType) {
          return text;
        }

        let valueToBeReplaced = "";
        switch (ruleType) {
          case "cartSubtotal":
            valueToBeReplaced = currRule.ruleValue.remainingSubtotalValue || currRule.ruleValue.value;
            text = text.replace("{{AMOUNT}}", currRule.ruleValue.value + "");
            text = text.replace("{{REMAINING_AMOUNT}}", valueToBeReplaced + "");
            break;

          case "cartQuantity":
            valueToBeReplaced = currRule.ruleValue.remainingQuantityValue || currRule.ruleValue.value;
            text = text.replace("{{QUANTITY}}", currRule.ruleValue.value + "");
            text = text.replace("{{REMAINING_QUANTITY}}", valueToBeReplaced + "");
            break;

          case "products":
          case "productVariants":
            const productTitle = currRule.ruleValue.qualifiedProductObj.title;
            const productHandle = currRule.ruleValue.qualifiedProductObj.handle;
            const variantTitle = currRule.ruleValue.qualifiedProductObj.variantTitle;
            const qualifierQuantityForProduct = currRule.ruleValue.qualifierValue;
            const productLinkHTMLMarkup = `<a href='/products/${productHandle}' target='__blank'>${productTitle}</a>`;
            text = text.replace("{{PRODUCT}}", productTitle);
            text = text.replace("{{PRODUCT_VARIANT}}", variantTitle);
            text = text.replace("{{QUANTITY}}", qualifierQuantityForProduct);
            text = text.replace("{{REMAINING_QUANTITY}}", currRule.ruleValue.remainingValue);
            text = text.replace("{{AMOUNT}}", qualifierQuantityForProduct);
            text = text.replace("{{REMAINING_AMOUNT}}", currRule.ruleValue.remainingValue);
            text = text.replace("{{PRODUCT_LINK}}", productLinkHTMLMarkup);
            break;

          case "collections":
            const collectionTitle = currRule.ruleValue.qualifiedCollectionObj.title;
            const collectionHandle = currRule.ruleValue.qualifiedCollectionObj.handle;
            const qualifierQuantityForCollection = currRule.ruleValue.qualifierValue;
            const collectionLinkHTMLMarkup = `<a href='/collections/${collectionHandle}' target='__blank'>${collectionTitle}</a>`;
            text = text.replace("{{COLLECTION}}", collectionTitle);
            text = text.replace("{{QUANTITY}}", qualifierQuantityForCollection);
            text = text.replace("{{REMAINING_QUANTITY}}", currRule.ruleValue.remainingValue);
            text = text.replace("{{AMOUNT}}", qualifierQuantityForCollection);
            text = text.replace("{{REMAINING_AMOUNT}}", currRule.ruleValue.remainingValue);
            text = text.replace("{{COLLECTION_LINK}}", collectionLinkHTMLMarkup);
            break;

          case "shippingCountry":
            const country = currRule.ruleValue.qualifiedCountry;
            text = text.replace("{{COUNTRY}}", country);
            break;
          case "customerTags":
            const tag = currRule.ruleValue.qualifiedTag;
            text = text.replace("{{CUSTOMER_TAG}}", tag);
            break;
          case "productHasSubscription":
            const qualifierQuantityForSubscriptionProduct = currRule.ruleValue.qualifierValue;
            text = text.replace("{{QUANTITY}}", qualifierQuantityForSubscriptionProduct);
            text = text.replace("{{REMAINING_QUANTITY}}", currRule.ruleValue.remainingValue);
            text = text.replace("{{AMOUNT}}", qualifierQuantityForSubscriptionProduct);
            text = text.replace("{{REMAINING_AMOUNT}}", currRule.ruleValue.remainingValue);
            break;

          case "lineAttributes":
            const lineValue = currRule.ruleValue.qualifiedLineValue;
            const lineProperty = currRule.ruleValue.qualifiedLineProperty;
            const lineAttributesQualifierValue = currRule.ruleValue.qualifierValue;
            text = text.replace("{{LINE_VALUE}}", lineValue);
            text = text.replace("{{LINE_PROPERTY}}", lineProperty);
            text = text.replace("{{QUANTITY}}", lineAttributesQualifierValue);
            text = text.replace("{{REMAINING_QUANTITY}}", currRule.ruleValue.remainingValue);
            text = text.replace("{{AMOUNT}}", lineAttributesQualifierValue);
            text = text.replace("{{REMAINING_AMOUNT}}", currRule.ruleValue.remainingValue);
            break;

          case "cartAttributes":
            const cartValue = currRule.ruleValue.qualifiedCartValue;
            const cartProperty = currRule.ruleValue.qualifiedCartKey;
            text = text.replace("{{CART_VALUE}}", cartValue);
            text = text.replace("{{CART_PROPERTY}}", cartProperty);
            break;

          case "productTags":
            const tagName = currRule.ruleValue.tagName;
            const tagsRemainingQuantity = currRule.ruleValue.remainingValue;
            const tagsQualifierQuantity = currRule.ruleValue.qualifierValue;
            text = text.replace("{{PRODUCT_TAG}}", tagName);
            text = text.replace("{{QUANTITY}}", tagsQualifierQuantity);
            text = text.replace("{{REMAINING_QUANTITY}}", tagsRemainingQuantity);
            text = text.replace("{{AMOUNT}}", tagsQualifierQuantity);
            text = text.replace("{{REMAINING_AMOUNT}}", tagsRemainingQuantity);
            break;

          case "productTypes":
            const productType = currRule.ruleValue.productType;
            const typeRemainingQuantity = currRule.ruleValue.remainingValue;
            const typeQualifierQuantity = currRule.ruleValue.qualifierValue;
            text = text.replace("{{PRODUCT_TYPE}}", productType);
            text = text.replace("{{QUANTITY}}", typeQualifierQuantity);
            text = text.replace("{{REMAINING_QUANTITY}}", typeRemainingQuantity);
            text = text.replace("{{AMOUNT}}", typeQualifierQuantity);
            text = text.replace("{{REMAINING_AMOUNT}}", typeRemainingQuantity);
            break;
        }

        return text;
      } catch (error) {
        gfg.utility.debugConsole("Error inside gfgShippingDiscountV2 replaceTextDynamicVariables fn", error);
      }
    },
    renderVerticalStepperProgressBarUI: function (ruleData) {
      try {
        const currLocale = gfgShippingDiscountV2.f.checkMultipleLanguagePresent(
          ruleData.widgetSettings.rulesData.rulesGlobalList[0].rulesList[0].ruleText
        )
          ? gfg.utility.getLocale()
          : "en";
        const styleSettings = ruleData.widgetSettings.styleSettings;
        const { widgetBodyFontSize, widgetBodyFontWeight, widgetBodyTextColor } = styleSettings;
        const fontWeightValue = gfg.utility.getFontWeightValue(widgetBodyFontWeight);
        const discountValue = gfgShippingDiscountV2.f.getDiscountValue(ruleData);
        const rulesList = ruleData.widgetSettings.rulesData.rulesGlobalList[0].rulesList.filter((curr) => curr.showOnWidget);
        const finalCheckBox = ruleData.widgetSettings.rulesData.rulesGlobalList[0].finalCheckBox;
        const mergedList = [...rulesList, finalCheckBox].filter((curr) => curr.showOnWidget);
        const ruleIconAndTextArr = mergedList.map((curr, index) => {
          const isTrue = curr.conditionMet || false;
          const iconKey = isTrue ? "conditionMetIconUrl" : "conditionNotMetIconUrl";
          const textKey = isTrue ? "conditionMetText" : "conditionNotMetText";
          const icon = curr[iconKey];
          let text =
            index < mergedList.length - 1 || !finalCheckBox.showOnWidget
              ? curr?.["ruleText"]?.[currLocale]?.[textKey] || curr["ruleText"]["en"][textKey]
              : curr?.[currLocale]?.[textKey] || curr["en"][textKey];

          text = gfgShippingDiscountV2.f.replaceTextDynamicVariables(text, curr, discountValue);
          return { icon, text, isTrue };
        });

        const gfgVerticalStepperProgressBarContainer = document.createElement("div");
        gfgVerticalStepperProgressBarContainer.classList.add("gfgVerticalStepperProgressBarContainer");
        const gfgVerticalProgressBar = document.createElement("div");
        gfgVerticalProgressBar.classList.add("gfgVerticalProgressBar");
        gfgVerticalStepperProgressBarContainer.appendChild(gfgVerticalProgressBar);
        const eligibleForShippingDiscount = finalCheckBox.conditionMet || false;
        const progressBarSuccessFillColor = ruleData.widgetSettings.styleSettings.progressBarSuccessFillColor || "#00BA00";
        const progressBarInProgressFillColor = ruleData.widgetSettings.styleSettings.progressBarInProgressFillColor || "#B9B9B9";
        const progressBarColor = eligibleForShippingDiscount ? progressBarSuccessFillColor : progressBarInProgressFillColor;
        gfgVerticalProgressBar.style.backgroundColor = progressBarColor;
        for (ruleIconText of ruleIconAndTextArr) {
          const gfgVerticalStepperProgressBarItem = document.createElement("div");
          gfgVerticalStepperProgressBarItem.classList.add("gfgVerticalStepperProgressBarItem");
          gfgVerticalStepperProgressBarItem.innerHTML = `
          <div class="gfgVerticalStepperProgressBarIconWrapper" style="border:2px solid ${
            ruleIconText.isTrue ? progressBarSuccessFillColor : progressBarInProgressFillColor
          }">
            <img class="gfgVerticalStepperProgressBarIcon" src="${ruleIconText.icon}" alt="icon-img">
          </div>
          <div class="gfgVerticalStepperProgressBarText" style="font-size: ${widgetBodyFontSize}px; font-weight: ${fontWeightValue}; color:${widgetBodyTextColor};">
            ${ruleIconText.text}
          </div>
        `;

          gfgVerticalStepperProgressBarContainer.appendChild(gfgVerticalStepperProgressBarItem);
        }

        return gfgVerticalStepperProgressBarContainer;
      } catch (error) {
        gfg.utility.debugConsole("Error inside gfgShippingDiscountV2 renderStepperProgressBarUI fn", error);
      }
    },
    renderHorizontalStepperProgressBarUI: function (ruleData) {
      try {
        const currLocale = gfgShippingDiscountV2.f.checkMultipleLanguagePresent(
          ruleData.widgetSettings.rulesData.rulesGlobalList[0].rulesList[0].ruleText
        )
          ? gfg.utility.getLocale()
          : "en";
        const styleSettings = ruleData.widgetSettings.styleSettings;
        const { widgetBodyFontSize, widgetBodyFontWeight, widgetBodyTextColor } = styleSettings;
        const fontWeightValue = gfg.utility.getFontWeightValue(widgetBodyFontWeight);
        const discountValue = gfgShippingDiscountV2.f.getDiscountValue(ruleData);
        const rulesList = ruleData.widgetSettings.rulesData.rulesGlobalList[0].rulesList.filter((curr) => curr.showOnWidget);
        const finalCheckBox = ruleData.widgetSettings.rulesData.rulesGlobalList[0].finalCheckBox;
        const mergedList = [...rulesList, finalCheckBox].filter((curr) => curr.showOnWidget);
        const ruleIconAndTextArr = mergedList.map((curr, index) => {
          const isTrue = curr.conditionMet || false;
          const iconKey = isTrue ? "conditionMetIconUrl" : "conditionNotMetIconUrl";
          const textKey = isTrue ? "conditionMetText" : "conditionNotMetText";
          const icon = curr[iconKey];
          let text =
            index < mergedList.length - 1 || !finalCheckBox.showOnWidget
              ? curr?.["ruleText"]?.[currLocale]?.[textKey] || curr["ruleText"]["en"][textKey]
              : curr?.[currLocale]?.[textKey] || curr["en"][textKey];
          text = gfgShippingDiscountV2.f.replaceTextDynamicVariables(text, curr, discountValue);
          return { icon, text, isTrue };
        });
        const gfgHorizontalStepperProgressBarContainer = document.createElement("div");
        gfgHorizontalStepperProgressBarContainer.classList.add("gfgHorizontalStepperProgressBarContainer");
        const gfgHorizontalProgressBar = document.createElement("div");
        gfgHorizontalProgressBar.classList.add("gfgHorizontalProgressBar");
        gfgHorizontalStepperProgressBarContainer.appendChild(gfgHorizontalProgressBar);
        const eligibleForShippingDiscount = finalCheckBox.conditionMet || false;
        const progressBarSuccessFillColor = ruleData.widgetSettings.styleSettings.progressBarSuccessFillColor || "#00BA00";
        const progressBarInProgressFillColor = ruleData.widgetSettings.styleSettings.progressBarInProgressFillColor || "#B9B9B9";
        gfgHorizontalProgressBar.style.backgroundColor = eligibleForShippingDiscount
          ? progressBarSuccessFillColor
          : progressBarInProgressFillColor;
        let cnt = 0;
        for (ruleIconText of ruleIconAndTextArr) {
          const gfgHorizontalStepperProgressBarItem = document.createElement("div");
          gfgHorizontalStepperProgressBarItem.classList.add("gfgHorizontalStepperProgressBarItem");
          gfgHorizontalStepperProgressBarItem.innerHTML = `
            <div class="gfgHorizontalStepperProgressBarIconWrapper" style="border:2px solid ${
              ruleIconText.isTrue ? progressBarSuccessFillColor : progressBarInProgressFillColor
            }">
              <img class="gfgHorizontalStepperProgressBarIcon" id='horizontalStepper-${cnt++}' src='${ruleIconText.icon}' alt='icon-img'>
            </div>
            <div class="gfgHorizontalStepperProgressBarText" style="font-size: ${widgetBodyFontSize}px; font-weight: ${fontWeightValue}; color:${widgetBodyTextColor};">${
            ruleIconText.text
          }</div>
          `;
          gfgHorizontalStepperProgressBarContainer.appendChild(gfgHorizontalStepperProgressBarItem);
        }
        return gfgHorizontalStepperProgressBarContainer;
      } catch (error) {
        gfg.utility.debugConsole("Error inside gfgShippingDiscountV2 renderHorizontalStepperProgressBarUI fn", error);
      }
    },
    renderSingleRuleProgressBarUI: function (ruleData) {
      try {
        const currLocale = gfgShippingDiscountV2.f.checkMultipleLanguagePresent(
          ruleData.widgetSettings.rulesData.rulesGlobalList[0].rulesList[0].ruleText
        )
          ? gfg.utility.getLocale()
          : "en";
        const styleSettings = ruleData.widgetSettings.styleSettings;
        const { widgetBodyFontSize, widgetBodyFontWeight, widgetBodyTextColor } = styleSettings;
        const fontWeightValue = gfg.utility.getFontWeightValue(widgetBodyFontWeight);
        const discountValue = gfgShippingDiscountV2.f.getDiscountValue(ruleData);
        const rulesList = ruleData.widgetSettings.rulesData.rulesGlobalList[0].rulesList.filter((curr) => curr.showOnWidget);
        const finalCheckBox = ruleData.widgetSettings.rulesData.rulesGlobalList[0].finalCheckBox;
        const mergedList = [...rulesList, finalCheckBox].filter((curr) => curr.showOnWidget);
        const ruleIconAndTextArr = mergedList.map((curr, index) => {
          const isTrue = curr.conditionMet || false;
          const iconKey = isTrue ? "conditionMetIconUrl" : "conditionNotMetIconUrl";
          const textKey = isTrue ? "conditionMetText" : "conditionNotMetText";
          const icon = curr[iconKey];
          let text =
            index < mergedList.length - 1 || !finalCheckBox.showOnWidget
              ? curr?.["ruleText"]?.[currLocale]?.[textKey] || curr["ruleText"]["en"][textKey]
              : curr?.[currLocale]?.[textKey] || curr["en"][textKey];
          text = gfgShippingDiscountV2.f.replaceTextDynamicVariables(text, curr, discountValue);
          return { icon, text, isTrue };
        });

        const gfgDynamicProgressBarAndTextMessageWrapper = document.createElement("div");
        const gfgDynamicProgressBarWrapper = document.createElement("div");
        const gfgDynamicProgressBar = document.createElement("div");
        const gfgDynamicProgressBarIndicator = document.createElement("div");
        const gfgDynamicProgressBarInnerIndicator = document.createElement("div");
        const gfgDynamicTextMessageAndIconWrapper = document.createElement("div");
        const gfgDynamicProgressBarTextMessage = document.createElement("div");
        const gfgDynamicProgressBarIconWrapper = document.createElement("div");
        const gfgDynamicProgressBarIcon = document.createElement("img");

        gfgDynamicProgressBarAndTextMessageWrapper.classList.add("gfgDynamicProgressBarAndTextMessageWrapper");
        gfgDynamicProgressBarWrapper.classList.add("gfgDynamicProgressBarWrapper");
        gfgDynamicProgressBar.classList.add("gfgDynamicProgressBar");
        gfgDynamicProgressBarIndicator.classList.add("gfgDynamicProgressBarIndicator");
        gfgDynamicProgressBarInnerIndicator.classList.add("gfgDynamicProgressBarInnerIndicator");
        gfgDynamicTextMessageAndIconWrapper.classList.add("gfgDynamicTextMessageAndIconWrapper");
        gfgDynamicProgressBarTextMessage.classList.add("gfgDynamicProgressBarTextMessage");
        gfgDynamicProgressBarIconWrapper.classList.add("gfgDynamicProgressBarIconWrapper");
        gfgDynamicProgressBarIcon.classList.add("gfgDynamicProgressBarIcon");

        const progressBarSuccessFillColor = ruleData.widgetSettings.styleSettings.progressBarSuccessFillColor || "#00BA00";
        const progressBarInProgressFillColor = ruleData.widgetSettings.styleSettings.progressBarInProgressFillColor || "#B9B9B9";
        const dynamicProgressBarWidth = rulesList[0].ruleValue.dynamicProgressBarWidth || 0;
        const isConditionSatisfied = dynamicProgressBarWidth == 100 ? true : false;
        gfgDynamicProgressBarTextMessage.innerHTML = isConditionSatisfied
          ? ruleIconAndTextArr[ruleIconAndTextArr.length - 1].text
          : ruleIconAndTextArr[0].text;
        gfgDynamicProgressBarTextMessage.style.fontSize = `${widgetBodyFontSize}px`;
        gfgDynamicProgressBarTextMessage.style.fontWeight = fontWeightValue;
        gfgDynamicProgressBarTextMessage.style.color = widgetBodyTextColor;
        gfgDynamicProgressBarIcon.src = isConditionSatisfied
          ? ruleIconAndTextArr[ruleIconAndTextArr.length - 1].icon
          : ruleIconAndTextArr[0].icon;
        if (gfgDynamicProgressBarIcon.src === "") {
          gfgDynamicProgressBarIcon.style.display = "none";
        }
        gfgDynamicProgressBarIcon.alt = "icon-image";
        gfgDynamicProgressBarWrapper.appendChild(gfgDynamicProgressBar);
        gfgDynamicProgressBarIndicator.appendChild(gfgDynamicProgressBarInnerIndicator);
        gfgDynamicProgressBarWrapper.appendChild(gfgDynamicProgressBarIndicator);
        gfgDynamicProgressBar.style.width = `${rulesList[0].ruleValue.dynamicProgressBarWidth}%`;
        gfgDynamicProgressBarIndicator.style.left =
          dynamicProgressBarWidth > 0 ? `calc(${rulesList[0].ruleValue.dynamicProgressBarWidth}% - 16px)` : "0px";
        gfgDynamicProgressBarInnerIndicator.style.backgroundColor = progressBarSuccessFillColor;
        gfgDynamicProgressBar.style.backgroundColor = progressBarSuccessFillColor;
        gfgDynamicProgressBarWrapper.style.backgroundColor = progressBarInProgressFillColor;
        gfgDynamicProgressBarIconWrapper.appendChild(gfgDynamicProgressBarIcon);
        gfgDynamicTextMessageAndIconWrapper.appendChild(gfgDynamicProgressBarIconWrapper);
        gfgDynamicTextMessageAndIconWrapper.appendChild(gfgDynamicProgressBarTextMessage);

        gfgDynamicProgressBarAndTextMessageWrapper.appendChild(gfgDynamicProgressBarWrapper);
        gfgDynamicProgressBarAndTextMessageWrapper.appendChild(gfgDynamicTextMessageAndIconWrapper);

        return gfgDynamicProgressBarAndTextMessageWrapper;
      } catch (error) {
        gfg.utility.debugConsole("Error inside gfgShippingDiscountV2 renderSingleRuleProgressBarUI fn", error);
      }
    },
    checkMultipleLanguagePresent: function (data) {
      try {
        let keysArr = data ? Object.keys(data) : [];
        const keysToSkip = ["conditionMetIconUrl", "conditionNotMetIconUrl", "conditionMet" , "showOnWidget"];
        keysArr = keysArr.filter((curr) => !keysToSkip.includes(curr));
        return keysArr.length > 1;
      } catch (error) {
        gfg.utility.debugConsole("Error inside gfgShippingDiscountV2 checkMultipleLanguagePresent fn", error);
      }
    },
    getDiscountValue: function (ruleData) {
      try {
        const currencyRate = gfg.utility.getActiveCurrencyRate();
        const value = ruleData.discountSettings.value;
        let discountValue = ruleData.discountSettings.type === "PERCENTAGE" ? value : (value * currencyRate).toFixed(2);
        const formattedDiscountValue = discountValue.endsWith(".00") ? discountValue.slice(0, -3) : discountValue;
        return formattedDiscountValue;
      } catch (error) {
        gfg.utility.debugConsole("Error inside gfgShippingDiscountV2 getDiscountValue fn", error);
      }
    },
    prepareShippingDiscountUI: function (ruleData) {
      try {
        const gfgShippingDiscountParentContainer = document.createElement("div");
        const gfgShippingDiscountTopSectionContainer = document.createElement("div");
        const gfgShippingDiscountBottomSectionContainer = document.createElement("div");
        gfgShippingDiscountParentContainer.classList.add("gfgShippingDiscountParentContainer");
        gfgShippingDiscountTopSectionContainer.classList.add("gfgShippingDiscountTopSectionContainer");
        gfgShippingDiscountBottomSectionContainer.classList.add("gfgShippingDiscountBottomSectionContainer");

        const { widgetSettings } = ruleData;
        const styleSettings = widgetSettings.styleSettings;
        gfgShippingDiscountParentContainer.style.backgroundColor = styleSettings.widgetBodyBackgroundColor;
        gfgShippingDiscountParentContainer.style.border = ` 1.8px solid ${styleSettings.widgetBodyBorderColor}`;
        gfgShippingDiscountBottomSectionContainer.style.backgroundColor = styleSettings.widgetBodyBackgroundColor;

        const currLocale = gfgShippingDiscountV2.f.checkMultipleLanguagePresent(widgetSettings.titleBar) ? gfg.utility.getLocale() : "en";
        const isTrue = widgetSettings.titleBar.conditionMet || false;
        const iconKey = isTrue ? "conditionMetIconUrl" : "conditionNotMetIconUrl";
        const titleBarHeadingTextKey = isTrue ? "conditionMetHeadingText" : "conditionNotMetHeadingText";
        const titleBarSubHeadingTextKey = isTrue ? "conditionMetSubheadingText" : "conditionNotMetSubheadingText";

        const titleIcon = widgetSettings.titleBar[iconKey];
        let titleBarHeading = widgetSettings.titleBar?.[currLocale]?.[titleBarHeadingTextKey] || widgetSettings.titleBar["en"][titleBarHeadingTextKey];
        let titleBarSubHeading = widgetSettings.titleBar?.[currLocale]?.[titleBarSubHeadingTextKey] || widgetSettings.titleBar["en"][titleBarSubHeadingTextKey];
        const discountValue = gfgShippingDiscountV2.f.getDiscountValue(ruleData);
        const currencySymbol = gfg.utility.getCurrencySymbol();
        titleBarHeading = titleBarHeading.replace("{{CURRENCY}}", currencySymbol);
        titleBarSubHeading = titleBarSubHeading.replace("{{CURRENCY}}", currencySymbol);
        titleBarHeading = titleBarHeading.replace("{{DISCOUNT_VALUE}}", discountValue);
        titleBarSubHeading = titleBarSubHeading.replace("{{DISCOUNT_VALUE}}", discountValue);
        const titleBarUI = gfgShippingDiscountV2.f.renderTitleBarUI(titleIcon, titleBarHeading, titleBarSubHeading, styleSettings);
        gfgShippingDiscountTopSectionContainer.style.backgroundColor = styleSettings.titleBarBackgroundColor;
        gfgShippingDiscountTopSectionContainer.style.display = widgetSettings.titleBar.showOnWidget ? "flex" : "none";
        gfgShippingDiscountTopSectionContainer.innerHTML = titleBarUI;

        let layoutType = styleSettings.templateType;
        // const rulesList = ruleData.widgetSettings.rulesData.rulesGlobalList[0].rulesList.filter((curr) => curr.showOnWidget);
        // if(rulesList.length == 1){
        //   layoutType = "SINGLE_RULE_LAYOUT";
        // }

        let stepperBarGeneratedUI = null;
        switch (layoutType) {
          case "SINGLE_RULE_LAYOUT":
            stepperBarGeneratedUI = gfgShippingDiscountV2.f.renderSingleRuleProgressBarUI(ruleData);
            break;
          case "VERTICAL_CHECKPOINT":
            stepperBarGeneratedUI = gfgShippingDiscountV2.f.renderVerticalStepperProgressBarUI(ruleData);
            break;
          case "HORIZONTAL_CHECKPOINT":
            stepperBarGeneratedUI = gfgShippingDiscountV2.f.renderHorizontalStepperProgressBarUI(ruleData);
        }

        gfgShippingDiscountBottomSectionContainer.appendChild(stepperBarGeneratedUI);
        gfgShippingDiscountParentContainer.appendChild(gfgShippingDiscountTopSectionContainer);
        gfgShippingDiscountParentContainer.appendChild(gfgShippingDiscountBottomSectionContainer);
        return gfgShippingDiscountParentContainer;
      } catch (error) {
        gfg.utility.debugConsole("Error inside gfgShippingDiscountV2 prepareShippingDiscountUI fn", error);
      }
    },
    clearExistingContent: function (elements) {
      try {
        elements.forEach((element) => {
          element.innerHTML = "";
        });
      } catch (error) {
        gfg.utility.debugConsole("Error inside gfgShippingDiscountV2 clearExistingContent fn", error);
      }
    },
    appendNewUI: function (elements, uiArray, existingBlocks) {
      try {

        // If no elements are found, then we should re-init the shipping discount to handle widget updates.
        // no elements mean that gfgCartPageWrapperV2 is not present likely.
        if(elements?.length === 0 && !gfg.f.cutOffshouldInitAgainConditionsForUnifiedAndShipping()){
          gfg.state.shouldInitShippingDiscountAgain = true;
          return;
        }

        elements.forEach((element) => {
          // Append each generated UI element
          uiArray.forEach((uiElement) => {
            if (existingBlocks.length > 0) {
              const id = element.id;
              const isIdPresentInOffer = uiElement.offer._id == id;
              if (!isIdPresentInOffer && uiArray.length > 1) {
                return;
              }
            }
            const clone = uiElement.generatedUI.cloneNode(true);
            element.appendChild(clone);
          });
        });
      } catch (error) {
        gfg.utility.debugConsole("Error inside gfgShippingDiscountV2 appendNewUI fn", error);
      }
    },
    insertIntoPageWrapper: function (preparedUiArray, page_type) {
      try {
        if (preparedUiArray.length === 0) {
          return;
        }

        const gfgShippingDiscountWrapperProductEle = gfg.utility.findWrapperElement("SHIPPING_DISCOUNT", page_type, null, 'JS');

        // let selector = page_type === "PRODUCT_PAGE" ? ".gfgProductPageWrapperV2" : ".gfgCartPageWrapperV2";
        // let gfgShippingDiscountWrapperProductEle = document.querySelectorAll(selector + " .gfgShippingDiscountWrapper");

        let gfgShippingBlockV2Added = document.querySelectorAll(".gfgShippingDiscountWrapperV2");
        // if (gfgShippingBlockV2Added.length > 0 && page_type !== "SIDE_CART") {
        //   gfgShippingDiscountWrapperProductEle = gfgShippingBlockV2Added;
        // }

        gfgShippingDiscountV2.f.clearExistingContent(gfgShippingDiscountWrapperProductEle);
        gfgShippingDiscountV2.f.appendNewUI(gfgShippingDiscountWrapperProductEle, preparedUiArray, gfgShippingBlockV2Added);
      } catch (error) {
        gfg.utility.debugConsole("Error inside gfgShippingDiscountV2 insertIntoPageWrapper fn", error);
      }
    },
    checkIfShippingDiscountAppBlockIsAdded: function (shippingDiscount, pageType) {
      try {
        const shippingDiscountBlocks = document.querySelectorAll(".gfgShippingDiscountWrapperV2");

        for (shippingDiscountBlock of shippingDiscountBlocks) {
          if (shippingDiscountBlock.id === shippingDiscount._id) {
            shippingDiscount.widgetSettings.styleSettings.isThemeEditorSettings = true;
            const shippingDiscountStyleObj = shippingDiscountBlock.getAttribute("data-setting") || {};
            const shippingDiscountObj = JSON.parse(shippingDiscountStyleObj);
            for (const [key, value] of Object.entries(shippingDiscountObj)) {
              const keysToSkip = ["blockId", "sideCartEnabled"];
              if (keysToSkip.includes(key)) continue;
              if (pageType === "SIDE_CART" && !shippingDiscountObj.sideCartEnabled) {
                continue;
              }

              shippingDiscount.widgetSettings.styleSettings[gfgShippingDiscountV2.state.appBlockKeyMap[key]] = value;
            }
          }
        }
      } catch (error) {
        gfg.utility.debugConsole("Error inside gfgShippingDiscountV2 checkIfShippingDiscountAppBlockIsAdded fn", error);
        return false;
      }
    },
  },
};

let count = 0;
let isInitFnExecuted = false;

const maxAttempts = 400;
const intervalTime = 200;


const intervalId = setInterval(() => {
  try {
    
    if (!window.gfg) {
      count++;
    }
  
    if (count >= maxAttempts) {
      gfg.utility.debugConsole("Something went wrong in loading gfg script...");
      clearInterval(intervalId);
      return;
    }
  
    const isSettingsDataPresentAndGfgPresent = window.gfg && gfg.settings && Object.keys(gfg.settings).length > 0;
    if (!isInitFnExecuted && isSettingsDataPresentAndGfgPresent) {
      gfg.utility.debugConsole("Initializing gfgShippingDiscountV2...");
      isInitFnExecuted = true;
      gfgShippingDiscountV2.init();
    }
  } catch (error) {
     gfg.utility.debugConsole("Error inside gfgShippingDiscountV2 interval fn", error);
  }
}, intervalTime);