Untitled

class LoyaltyCampaigns extends HTMLElement {
  constructor() {
    super();

    this.campaignsEl = this.querySelector('[data-reward-campaigns]');
  }

  connectedCallback() {
    document.addEventListener('swell:initialized', () => {
      this.getCampaigns();
    });

    if (typeof window.swellAPI === 'undefined') {
      document.dispatchEvent(new Event('swell:initialized'));
    } else {
      this.getCampaigns();
    }
  }

  getCampaigns() {
    const activeCampaigns = window.swellAPI.getActiveCampaigns();

    this.renderCampaigns(activeCampaigns);
  }

  renderCampaigns(campaigns) {
    const icons = {
      TikTok: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><g fill="currentColor"><path d="M20.53,18.13v7.9A6.877,6.877,0,0,0,11.9,32.4c0,3.534,2.172,6.6,6.645,6.6,4.91,0,6.646-3.457,6.646-6.687V1h7.817c1.329,8.27,5.464,10.189,11,11.075V20s-6.572-.466-10.78-3.641V32.011C33.23,39.094,29.031,47,18.61,47,8.937,47,3.99,38.8,3.99,31.937A14.4,14.4,0,0,1,20.53,18.13Z"></path></g></svg>`,
      'Make a Purchase': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g fill="currentColor"><path d="M62,13H48.889A6.993,6.993,0,0,0,44,1c-6.807,0-10.432,6.225-12,9.981C30.432,7.225,26.807,1,20,1a6.993,6.993,0,0,0-4.889,12H2a1,1,0,0,0-1,1v8a1,1,0,0,0,1,1H62a1,1,0,0,0,1-1V14A1,1,0,0,0,62,13ZM44,3a5,5,0,0,1,0,10H33.371C34.423,10.067,37.621,3,44,3ZM15,8a5.006,5.006,0,0,1,5-5c6.364,0,9.57,7.066,10.626,10H20A5.006,5.006,0,0,1,15,8Z"></path><path d="M57,25H36V60H51a6,6,0,0,0,6-6Z"></path><path d="M28,25H7V54a6,6,0,0,0,6,6H28Z"></path></g></svg>`,
      'Create an Account': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g fill="currentColor"><path d="M38,37H26A19.021,19.021,0,0,0,7,56a1,1,0,0,0,.594.914C7.97,57.081,16.961,61,32,61s24.03-3.919,24.406-4.086A1,1,0,0,0,57,56,19.021,19.021,0,0,0,38,37Z"></path><path d="M32,32c8.013,0,14-8.412,14-15.933a14,14,0,1,0-28,0C18,23.588,23.987,32,32,32Z"></path></g></svg>`,
      'Follow us on Instagram': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><g fill="currentColor"><path d="M24,6.784c5.607,0,6.271.021,8.486.122a11.65,11.65,0,0,1,3.9.723,6.954,6.954,0,0,1,3.986,3.986,11.65,11.65,0,0,1,.723,3.9c.1,2.215.122,2.879.122,8.486s-.021,6.271-.122,8.486a11.65,11.65,0,0,1-.723,3.9,6.954,6.954,0,0,1-3.986,3.986,11.65,11.65,0,0,1-3.9.723c-2.214.1-2.878.122-8.486.122s-6.272-.021-8.486-.122a11.65,11.65,0,0,1-3.9-.723,6.954,6.954,0,0,1-3.986-3.986,11.65,11.65,0,0,1-.723-3.9c-.1-2.215-.122-2.879-.122-8.486s.021-6.271.122-8.486a11.65,11.65,0,0,1,.723-3.9,6.954,6.954,0,0,1,3.986-3.986,11.65,11.65,0,0,1,3.9-.723c2.215-.1,2.879-.122,8.486-.122M24,3c-5.7,0-6.418.024-8.658.126a15.418,15.418,0,0,0-5.1.976A10.287,10.287,0,0,0,6.525,6.525,10.287,10.287,0,0,0,4.1,10.244a15.418,15.418,0,0,0-.976,5.1C3.024,17.582,3,18.3,3,24s.024,6.418.126,8.658a15.418,15.418,0,0,0,.976,5.1,10.287,10.287,0,0,0,2.423,3.719A10.287,10.287,0,0,0,10.244,43.9a15.418,15.418,0,0,0,5.1.976c2.24.1,2.955.126,8.658.126s6.418-.024,8.658-.126a15.418,15.418,0,0,0,5.1-.976A10.749,10.749,0,0,0,43.9,37.756a15.418,15.418,0,0,0,.976-5.1C44.976,30.418,45,29.7,45,24s-.024-6.418-.126-8.658a15.418,15.418,0,0,0-.976-5.1,10.287,10.287,0,0,0-2.423-3.719A10.287,10.287,0,0,0,37.756,4.1a15.418,15.418,0,0,0-5.1-.976C30.418,3.024,29.7,3,24,3Z"></path><path d="M24,13.216A10.784,10.784,0,1,0,34.784,24,10.784,10.784,0,0,0,24,13.216ZM24,31a7,7,0,1,1,7-7A7,7,0,0,1,24,31Z"></path><circle cx="35.21" cy="12.79" r="2.52"></circle></g></svg>`,
      'Like on Facebook ': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><g fill="currentColor"><path d="M19.32924,46V25.92955h-6.75413v-7.82187h6.75413v-5.76839C19.32924,5.64511,23.41782,2,29.38949,2 c2.86049,0,5.31894,0.21297,6.03539,0.30816v6.99581l-4.14167,0.00188c-3.24773,0-3.87657,1.54327-3.87657,3.80792v4.99391h7.74553 l-1.0085,7.82187h-6.73704V46H19.32924z"></path></g></svg>`,
      'Add video in Review': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g fill="currentColor"><circle cx="12.5" cy="10.5" r="8.5"></circle><circle cx="35" cy="13" r="6"></circle><rect x="2" y="23" width="42" height="36" rx="6"></rect><path d="M61.5,26.132a1,1,0,0,0-1,.006L46,34.664V47.336l14.493,8.526A1,1,0,0,0,62,55V27A1,1,0,0,0,61.5,26.132Z"></path></g></svg>`,
      'Add photo in Review': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g fill="currentColor"><path d="M18,10H8V7A1,1,0,0,1,9,6h8a1,1,0,0,1,1,1Z"></path><path d="M25,36a1,1,0,0,1-1-1A10.011,10.011,0,0,1,34,25a1,1,0,0,1,0,2,8.009,8.009,0,0,0-8,8A1,1,0,0,1,25,36Z"></path><path d="M56,12H47.535l-5.7-8.555A1,1,0,0,0,41,3H27a1,1,0,0,0-.832.445L20.465,12H8a6.006,6.006,0,0,0-6,6V52a6.006,6.006,0,0,0,6,6H56a6.006,6.006,0,0,0,6-6V18A6.006,6.006,0,0,0,56,12ZM12.5,25A2.5,2.5,0,1,1,15,22.5,2.5,2.5,0,0,1,12.5,25ZM34,50A15,15,0,1,1,49,35,15,15,0,0,1,34,50Z"></path></g></svg>`,
      'Leave a Review': `<svg viewBox="0 0 67 54" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M34 0C15.973 0 1.38 11.014 1.38 24.623c0 5.331 2.246 10.312 6.104 14.31C5.94 42.022 3.555 46.23.679 49.528c-1.683 1.894 0 4.91 2.456 4.42 7.155-1.333 13.89-4.069 18.87-6.454a41.663 41.663 0 0011.996 1.754c18.029 0 32.62-11.014 32.62-24.623C66.621 11.014 52.03 0 34.001 0zM23.83 22.94l-2.455 2.384c-.07.07-.07.14-.07.21l.56 3.298c.07.35-.28.631-.63.491l-2.947-1.613c-.07-.07-.14-.07-.21 0l-2.947 1.543c-.35.14-.702-.07-.631-.491l.561-3.297c0-.07 0-.14-.07-.21l-2.385-2.316c-.28-.28-.14-.701.21-.771l3.368-.491c.07 0 .14-.07.21-.14l1.473-2.947c.14-.35.631-.35.772 0l1.473 3.017c.07.07.14.14.21.14l3.298.491c.35 0 .49.491.21.701zm15.783 0l-2.385 2.384c-.07.07-.07.14-.07.21l.562 3.298c.07.35-.28.631-.632.491l-3.016-1.613c-.07-.07-.14-.07-.21 0l-2.947 1.543c-.35.14-.702-.07-.631-.491l.561-3.297c0-.07 0-.14-.07-.21l-2.385-2.386c-.28-.28-.14-.701.21-.771l3.367-.491c.07 0 .14-.07.21-.14l1.474-2.947c.14-.351.631-.351.772 0l1.473 3.016c.07.07.14.14.21.14l3.298.492c.35.07.49.561.21.771zm15.854 0l-2.385 2.384c-.14.07-.14.14-.14.21l.561 3.298c.07.35-.28.631-.631.491l-2.947-1.613c-.07-.07-.14-.07-.21 0l-2.946 1.543c-.351.14-.702-.07-.632-.491l.562-3.297c0-.07 0-.14-.07-.21l-2.385-2.316c-.28-.28-.14-.701.21-.771l3.367-.491c.07 0 .14-.07.21-.14l1.403-2.947c.14-.35.632-.35.772 0l1.474 3.017c.07.07.14.14.21.14l3.297.491c.35 0 .49.491.28.701z" fill="currentColor"/></svg>`,
      'Birthday Reward': `<svg viewBox="0 0 57 60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M55.01 55.771h-3.049v-12.45a8.333 8.333 0 01-3.535-2.419c-.983-1.005-1.577-1.61-2.962-1.61-1.385 0-1.98.605-2.963 1.61-1.123 1.146-2.66 2.715-5.513 2.715-2.853 0-4.391-1.57-5.515-2.715-.983-1.005-1.578-1.61-2.963-1.61-1.388 0-1.982.605-2.967 1.61-1.123 1.146-2.662 2.715-5.515 2.715-2.852 0-4.39-1.57-5.513-2.715-.985-1.005-1.58-1.61-2.966-1.61-1.387 0-1.982.605-2.967 1.61a8.33 8.33 0 01-3.545 2.423v12.446H1.988c-.71 0-1.366.403-1.722 1.057a2.232 2.232 0 000 2.115C.622 59.597 1.278 60 1.988 60H55.01c.71 0 1.367-.403 1.722-1.057a2.232 2.232 0 000-2.115c-.355-.654-1.011-1.057-1.722-1.057zM28.508 8.458c.748 0 1.465-.316 1.994-.878a3.097 3.097 0 00.826-2.121c0-1.656-2.82-5.459-2.82-5.459s-2.82 3.803-2.82 5.459c0 .795.297 1.558.826 2.12a2.737 2.737 0 001.994.88zM14.457 8.458c.748 0 1.465-.316 1.994-.878a3.098 3.098 0 00.826-2.121c0-1.656-2.82-5.459-2.82-5.459s-2.82 3.803-2.82 5.459c0 .795.297 1.558.826 2.12a2.738 2.738 0 001.994.88zM42.293 8.458c.748 0 1.465-.316 1.994-.878a3.097 3.097 0 00.826-2.121c0-1.656-2.82-5.459-2.82-5.459s-2.82 3.803-2.82 5.459c0 .795.297 1.558.826 2.12a2.737 2.737 0 001.994.88z" fill="currentColor"/><path d="M11.55 35.063c2.853 0 4.39 1.569 5.515 2.714.983 1.005 1.577 1.611 2.963 1.611 1.388 0 1.981-.606 2.966-1.61 1.123-1.146 2.663-2.715 5.516-2.715 2.852 0 4.39 1.569 5.513 2.714.985 1.005 1.578 1.611 2.965 1.611 1.386 0 1.98-.606 2.962-1.61 1.123-1.146 2.661-2.715 5.514-2.715 2.852 0 4.39 1.569 5.514 2.714.31.325.638.63.983.911v-6.945c.042-1.824-.598-3.59-1.78-4.912-1.183-1.322-2.81-2.09-4.524-2.137h-1.375v-11.31c0-.756-.38-1.454-.995-1.832a1.887 1.887 0 00-1.988 0c-.615.378-.994 1.076-.994 1.832v11.31h-9.81v-11.31c0-.756-.378-1.454-.994-1.832a1.887 1.887 0 00-1.988 0c-.615.378-.994 1.076-.994 1.832v11.31H16.445v-11.31c0-.756-.378-1.454-.994-1.832a1.887 1.887 0 00-1.988 0c-.615.378-.994 1.076-.994 1.832v11.31h-1.127c-1.714.046-3.341.815-4.524 2.137-1.182 1.322-1.822 3.088-1.78 4.912v6.953c.349-.284.681-.591.994-.919 1.123-1.145 2.663-2.715 5.517-2.715z" fill="currentColor"/></svg>`,
      'Refer a friend': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g fill="currentColor"><path d="M62,1H28c-0.553,0-1,0.448-1,1v28c0,0.384,0.221,0.735,0.566,0.901 C27.705,30.967,27.853,31,28,31c0.223,0,0.444-0.075,0.625-0.219L38.351,23H62c0.553,0,1-0.448,1-1V2C63,1.448,62.553,1,62,1z"></path> <circle cx="50" cy="36" r="7"></circle> <circle cx="14" cy="36" r="7"></circle> <path d="M24.543,49.726C22.442,48.482,18.907,47,14,47c-4.972,0-8.489,1.478-10.564,2.717 C1.934,50.613,1,52.26,1,54.014V60c0,0.553,0.447,1,1,1h24c0.553,0,1-0.447,1-1v-5.965C27,52.272,26.059,50.621,24.543,49.726z"></path> <path d="M60.543,49.726C58.442,48.482,54.907,47,50,47c-4.972,0-8.489,1.478-10.564,2.717 C37.934,50.613,37,52.26,37,54.014V60c0,0.553,0.447,1,1,1h24c0.553,0,1-0.447,1-1v-5.965C63,52.272,62.059,50.621,60.543,49.726z"></path></g></svg>`,
      'Sign up for SMS': `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><g fill="currentColor"><path d="M58,1H32a5.006,5.006,0,0,0-5,5V33a1,1,0,0,0,.561.9,1,1,0,0,0,1.053-.109L37.343,27H58a5.006,5.006,0,0,0,5-5V6A5.006,5.006,0,0,0,58,1ZM45,19H36a1,1,0,0,1-1-1h0a1,1,0,0,1,1-1h9a1,1,0,0,1,1,1h0A1,1,0,0,1,45,19Zm9-8H36a1,1,0,0,1-1-1h0a1,1,0,0,1,1-1H54a1,1,0,0,1,1,1h0A1,1,0,0,1,54,11Z"></path><path d="M44,29V54a1,1,0,0,1-1,1H9a1,1,0,0,1-1-1V12a1,1,0,0,1,1-1H25V5H11a5,5,0,0,0-5,5V58a5,5,0,0,0,5,5H41a5,5,0,0,0,5-5V29Z"></path></g></svg>`
    };

    this.campaignsEl.innerHTML = `
      ${campaigns
        .map((campaign) => {
          let cta = '';

          if (campaign.cta_text && campaign.url) {
            cta = `
              <div class="md:max-h-0 md:opacity-0 transition-all md:group-hover:max-h-[38px] mt-4 group-hover:opacity-100 duration-500">
                <a href="${campaign.url}" class="btn-black" title="${campaign.cta_text}">${campaign.cta_text}</a>
              </div>
            `;
          }

          return `
            <a
              href="javascript:void(0)"
              data-campaign-id="${campaign.id}"
              data-display-mode="modal"
              class="swell-campaign-link aspect-square bg-[#F1F1F1] flex p-6 flex-col items-center justify-center text-center group rounded"
              data-sal="fade"
              data-sal-duration="500"
            >
              <div class="w-[40px] md:w-[62px] mb-3">
                ${icons[campaign.title]}
              </div>

              <h3 class="text-[32px] lg:text-[40px] leading-none mb-2">${
                campaign.rewardText
              }</h3>

              <p>${campaign.title}</p>

              ${cta}
            </a>
          `;
        })
        .join('')}
    `;

    window.sal.update();
  }
}

customElements.define('loyalty-campaigns', LoyaltyCampaigns);