<script type="text/javascript">
Moengage.personalize
  .fetchExperiences(['homepage-banner', 'cart-offers', 'listing-promo'])
  .then((result) => {
    // result.experiences - resolved content keyed by experience key
    // result.failures   - unresolved keys with structured reason codes
  })
  .catch((error) => {
    // SDK, network, or initialization error - render fallback content
  });
</script>

<script type="text/javascript">
Moengage.personalize
  .fetchExperiences(
    ['homepage-banner', 'cart-offers'],
    {
      "page_type": "cart",
      "locale": "en-US",
      "country": "US"
    }
  )
  .then((result) => {
    // result.experiences
    // result.failures
  })
  .catch((error) => {
    // Render fallback content
  });
</script>

<script type="text/javascript">
Moengage.personalize
  .fetchExperiences([])
  .then((result) => {
    // result.experiences - up to 25 eligible active experiences
    // result.failures
  })
  .catch((error) => {
    // Render fallback content
  });
</script>

<script type="text/javascript">
const experience = result.experiences?.['homepage-banner'];

const title          = experience?.payload?.title?.value;
const imageURL       = experience?.payload?.imageURL?.value;
const ctaText        = experience?.payload?.ctaText?.value;
const redirectionURL = experience?.payload?.redirectionURL?.value;
</script>

<script type="text/javascript">
const experience = result.experiences?.Homepage_offers_experience;
const rawValue   = experience?.payload?.promo_card?.value;
const offers     = JSON.parse(rawValue); // Array of ranked offer objects
</script>

<script type="text/javascript">
result.failures?.forEach(({ code, keys }) => {
  keys.forEach((key) => {
    if (['E004', 'E005', 'E006', 'E007'].includes(code)) {
      console.error(`MoEngage config error [${code}] for experience: ${key}`);
    } else {
      renderDefault(key); // Suppress or show fallback content
    }
  });
});
</script>

<script type="text/javascript">
Moengage.personalize
  .fetchExperiences(['homepage-banner'])
  .then((result) => {

    // Check if the experience was resolved
    const experience = result.experiences?.['homepage-banner'];
    if (!experience) {
      renderDefault('homepage-banner');
      return;
    }

    // Read payload field values directly
    const banner = {
      title:          experience.payload?.title?.value,
      imageURL:       experience.payload?.imageURL?.value,
      ctaText:        experience.payload?.ctaText?.value,
      redirectionURL: experience.payload?.redirectionURL?.value
    };

    // Validate required fields before rendering
    if (!banner.title || !banner.imageURL || !banner.ctaText || !banner.redirectionURL) {
      renderDefault('homepage-banner');
      return;
    }

    // Render using your own components
    renderBanner(banner);

    // Track experience impression — must be called for every resolved experience key.
    // Pass experience_context exactly as returned in the response. Do not modify its fields.
    Moengage.personalize.trackImpression(experience.experience_context);

    // Track experience click when the user interacts with the rendered content.
    // extraAttributes is optional — use it to pass additional context about the CTA clicked.
    attachClickHandler(() => {
      Moengage.personalize.trackClick(experience.experience_context, {
        button_name: banner.ctaText
      });
    });
  })
  .catch(() => {
    renderDefault('homepage-banner');
  });
</script>

<script type="text/javascript">
Moengage.personalize
  .fetchExperiences(['Homepage_offers_experience'])
  .then((result) => {

    const experience = result.experiences?.Homepage_offers_experience;
    if (!experience) {
      renderDefault('Homepage_offers_experience');
      return;
    }

    // Parse the serialized JSON offer array
    const offers = parseJsonArrayPayloadField(experience, 'promo_card');

    if (!offers.length) {
      renderDefault('Homepage_offers_experience');
      return;
    }

    // Render each offer and track its impression.
    // offering_context must be passed as-is from each offer object — do not modify its fields.
    offers.forEach((offer, index) => {
      renderOffer(offer.offering_content);
      Moengage.personalize.offeringShown(offer.offering_context);

      // On offer click — pass both offeringContext and experienceContext.
      // Passing both means MoEngage automatically tracks the click for the offering
      // AND the parent experience in a single call.
      attachClickHandler(offer, index, () => {
        Moengage.personalize.offeringClicked(
          offer.offering_context,
          experience.experience_context  // Optional — omit if tracking experience click separately
        );
      });
    });

    // Track experience impression — must be called once for the resolved experience key.
    // Pass experience_context exactly as returned in the response. Do not modify its fields.
    Moengage.personalize.trackImpression(experience.experience_context);
  })
  .catch(() => {
    renderDefault('Homepage_offers_experience');
  });
</script>