@economist/web-apple-pay 1.7.5 → 1.7.7

package/dist/src/apple-pay-modal.js

@@ -71,7 +71,7 @@ function ensureApplePayLogoSymbol() {
     return;
   }
   const tmp = document.createElement("div");
-  tmp.innerHTML = `<svg aria-hidden="true" style="display:none" id="${LOGO_DEFS_ID}"><defs><symbol id="apple-pay-logo" viewBox="0 0 51 22"><path d="${LOGO_PATH}" fill="white"/></symbol></defs></svg>`;
+  tmp.innerHTML = `<svg aria-hidden="true" style="display:none" id="${LOGO_DEFS_ID}"><defs><symbol id="apple-pay-logo" viewBox="0 0 51 22"><path d="${LOGO_PATH}" fill="currentColor"/></symbol></defs></svg>`;
   document.body.prepend(tmp.firstElementChild);
 }
 
@@ -109,16 +109,32 @@ var apple_pay_modal_template_default = `<style>
     position: absolute;
     top: 1.5rem;
     right: 1.3125rem;
-    background: none;
+    background: transparent;
     border: none;
     cursor: pointer;
     padding: 0;
+    width: 1.5rem;
+    height: 1.5rem;
     display: flex;
     align-items: center;
     justify-content: center;
+    color: var(--mb-colour-greyscale-london-20, #1a1a1a);
+    transition:
+      background-color ease-in-out 0.2s,
+      color ease-in-out 0.2s;
+  }
+
+  .apm__close:hover {
+    color: var(--mb-colour-base-chicago-30, #333333);
+  }
+
+  .apm__close:active {
+    background-color: var(--mb-colour-base-chicago-90, #e6e6e6);
+    color: var(--mb-colour-base-chicago-30, #333333);
   }
 
   .apm__close:focus {
+    background-color: var(--mb-colour-base-chicago-90, #e6e6e6);
     outline: solid 0.125rem var(--focus-border-color, #121212);
     border-radius: 0.25rem;
   }
@@ -301,10 +317,6 @@ var apple_pay_modal_template_default = `<style>
     cursor: pointer;
     color: #fff;
     text-align: center;
-    font-family: var(
-      --mb-typeface-sans,
-      var(--wall-type-system-sans, system-ui, sans-serif)
-    );
     font-size: 1.25rem;
     font-style: normal;
     font-weight: 500;
@@ -320,28 +332,41 @@ var apple_pay_modal_template_default = `<style>
     cursor: not-allowed;
   }
 
-  .apm__cta[aria-busy="true"] > * {
-    visibility: hidden;
+  .apm__cta-content {
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
   }
 
-  .apm__cta[aria-busy="true"]::after {
+  .apm__cta-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+  }
+
+  .apm__cta-loading {
+    display: none;
+  }
+
+  .apm__cta[aria-busy="true"]::before {
     content: '';
     position: absolute;
-    left: 50%;
     top: 50%;
-    margin-left: -0.625rem;
-    margin-top: -0.625rem;
+    left: 50%;
     width: 1.25rem;
     height: 1.25rem;
-    border: 2px solid rgba(255, 255, 255, 0.2);
+    border: 2px solid rgba(255, 255, 255, 0.25);
     border-top-color: #fff;
     border-radius: 50%;
     animation: apm-cta-spinner 0.8s linear infinite;
   }
 
   @keyframes apm-cta-spinner {
+    from {
+      transform: translate(-50%, -50%) rotate(0deg);
+    }
     to {
-      transform: rotate(360deg);
+      transform: translate(-50%, -50%) rotate(360deg);
     }
   }
 
@@ -408,7 +433,7 @@ var apple_pay_modal_template_default = `<style>
             fill-rule="evenodd"
             clip-rule="evenodd"
             d="M18.75 6.60964L17.3904 5.25L12 10.6404L6.60964 5.25L5.25 6.60964L10.6404 12L5.25 17.3904L6.60964 18.75L12 13.3596L17.3904 18.75L18.75 17.3904L13.3596 12L18.75 6.60964Z"
-            fill="#333333"
+            fill="currentColor"
           />
         </g>
         <defs>
@@ -518,11 +543,14 @@ var apple_pay_modal_template_default = `<style>
     </div>
     <button class="apm__cta" id="apple-pay-modal-cta" aria-label="Continue with Apple Pay">
       <span class="apm__cta-content">
-        Continue with
-        <svg width="51" height="22" aria-hidden="true" role="img">
-          <use href="#apple-pay-logo" />
-        </svg>
+        <span class="apm__cta-label">
+          Continue with
+          <svg width="51" height="22" aria-hidden="true" role="img">
+            <use href="#apple-pay-logo" />
+          </svg>
+        </span>
       </span>
+      <span class="apm__cta-loading" aria-hidden="true">Loading...</span>
     </button>
   </div>
 </div>
@@ -663,6 +691,8 @@ function renewalPeriodText(unit, duration) {
       return "";
   }
 }
+var LI_SEPARATOR = "\0LI_SEP\0";
+var P_SEPARATOR = "\0P_SEP\0";
 function buildTermsContext(offer, country) {
   const isUS = country === "US";
   const isCA = country === "CA";
@@ -699,19 +729,19 @@ function freeTrialTerms(offer, ctx) {
   const trialDuration = offer.subscription_options?.trial_period?.duration ?? 1;
   const trialDateStr = `on ${getRenewalDateText(trialUnit, trialDuration)}${ctx.verificationText}`;
   if (ctx.isUS) {
-    return `Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${trialDateStr} when your free trial ends, until cancelled{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal until cancelled. ${ctx.usCancelNote}${ctx.taxFootnote}`;
+    return `Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${trialDateStr} when your free trial ends, until cancelled${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal until cancelled. ${ctx.usCancelNote}${ctx.taxFootnote}`;
   }
-  return `Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${trialDateStr} when your free trial ends, until cancelled{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}${ctx.taxFootnote}`;
+  return `Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${trialDateStr} when your free trial ends, until cancelled${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}${ctx.taxFootnote}`;
 }
 function nytTerms(ctx) {
   const nytAccessText = "Your complimentary access to The New York Times is for one year only and does not auto-renew. We will send your instructions on how to redeem access to The New York Times by email.";
   if (ctx.isUS) {
-    return `Your subscription to <em>The Economist</em> auto-renews ${ctx.periodText} until cancelled{{liSeparator}}Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.renewalDateStr}{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal until cancelled. ${ctx.usCancelNote}${ctx.taxFootnote}{{pSeparator}}${nytAccessText}`;
+    return `Your subscription to <em>The Economist</em> auto-renews ${ctx.periodText} until cancelled${LI_SEPARATOR}Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.renewalDateStr}${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal until cancelled. ${ctx.usCancelNote}${ctx.taxFootnote}${P_SEPARATOR}${nytAccessText}`;
   }
   if (ctx.isCA) {
-    return `Your subscription to <em>The Economist</em> auto-renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.periodText} ${ctx.renewalDateStr} until cancelled.{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}${ctx.taxFootnote}{{pSeparator}}${nytAccessText}`;
+    return `Your subscription to <em>The Economist</em> auto-renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.periodText} ${ctx.renewalDateStr} until cancelled.${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}${ctx.taxFootnote}${P_SEPARATOR}${nytAccessText}`;
   }
-  return `Your subscription to <em>The Economist</em> auto-renews at ${ctx.renewalPriceText} ${ctx.periodText} ${ctx.renewalDateStr} until cancelled{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime} ${nytAccessText}`;
+  return `Your subscription to <em>The Economist</em> auto-renews at ${ctx.renewalPriceText} ${ctx.periodText} ${ctx.renewalDateStr} until cancelled${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime} ${nytAccessText}`;
 }
 function minTermContractTerms(offer, ctx) {
   const duePrice = formatPrice(offer.price.purchase, offer.price.currency_code);
@@ -721,28 +751,28 @@ function minTermContractTerms(offer, ctx) {
   const contractLength = mtDuration && mtUnit ? `${mtDuration} ${mtUnit}` : "";
   const initialContractText = contractLength ? `your initial ${contractLength} contract` : "your initial contract";
   const mtRenewalDateText = mtUnit && mtDuration ? getRenewalDateText(mtUnit, Number(mtDuration)) : ctx.renewalDateText;
-  return `You\u2019ll be charged ${duePrice} a month for the duration of ${initialContractText}{{liSeparator}}Your subscription auto-renews annually at ${ctx.renewalPriceText} a month on ${mtRenewalDateText} until cancelled{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}`;
+  return `You\u2019ll be charged ${duePrice} a month for the duration of ${initialContractText}${LI_SEPARATOR}Your subscription auto-renews annually at ${ctx.renewalPriceText} a month on ${mtRenewalDateText} until cancelled${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}`;
 }
 function paidTrialTerms(offer, ctx) {
   const trialUnit = offer.subscription_options?.trial_period?.unit ?? ctx.unit;
   const trialDuration = offer.subscription_options?.trial_period?.duration ?? ctx.duration;
   const trialDateText = getRenewalDateText(trialUnit, trialDuration);
   if (ctx.isUS) {
-    return `Your subscription auto-renews ${ctx.periodText} until cancelled{{liSeparator}}Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} on ${trialDateText} when your paid trial ends{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal. ${ctx.usCancelNote}${ctx.taxFootnote}`;
+    return `Your subscription auto-renews ${ctx.periodText} until cancelled${LI_SEPARATOR}Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} on ${trialDateText} when your paid trial ends${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal. ${ctx.usCancelNote}${ctx.taxFootnote}`;
   }
-  return `Your subscription auto-renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.periodText} on ${trialDateText} when your paid trial ends, until cancelled{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}${ctx.taxFootnote}`;
+  return `Your subscription auto-renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.periodText} on ${trialDateText} when your paid trial ends, until cancelled${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}${ctx.taxFootnote}`;
 }
 function autoRenewalTerms(ctx) {
   if (ctx.isUS) {
-    return `Your subscription auto-renews ${ctx.periodText} until cancelled{{liSeparator}}Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.renewalDateStr}{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal until cancelled. ${ctx.usCancelNote}${ctx.taxFootnote}`;
+    return `Your subscription auto-renews ${ctx.periodText} until cancelled${LI_SEPARATOR}Your subscription renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.renewalDateStr}${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal until cancelled. ${ctx.usCancelNote}${ctx.taxFootnote}`;
   }
-  return `Your subscription auto-renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.periodText} ${ctx.renewalDateStr} until cancelled{{liSeparator}}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}${ctx.taxFootnote}`;
+  return `Your subscription auto-renews at ${ctx.renewalPriceText}${ctx.taxSuffix} ${ctx.periodText} ${ctx.renewalDateStr} until cancelled${LI_SEPARATOR}You\u2019ll be charged the rate in effect at each renewal. ${ctx.cancelAnytime}${ctx.taxFootnote}`;
 }
 function noAutoRenewalTerms(ctx) {
   if (ctx.isUS || ctx.isCA) {
-    return `Your subscription does not renew automatically${ctx.taxFootnote}{{liSeparator}}`;
+    return `Your subscription does not renew automatically${ctx.taxFootnote}${LI_SEPARATOR}`;
   }
-  return `Your subscription does not renew automatically{{liSeparator}}`;
+  return `Your subscription does not renew automatically${LI_SEPARATOR}`;
 }
 function generateApplePayModalTerms(offer, country) {
   const ctx = buildTermsContext(offer, country);
@@ -765,9 +795,9 @@ function generateApplePayModalTerms(offer, country) {
   return noAutoRenewalTerms(ctx);
 }
 function renderTermsHtml(termsText) {
-  const renewalTextLists = termsText.split("{{liSeparator}}");
+  const renewalTextLists = termsText.split(LI_SEPARATOR);
   const lastPart = renewalTextLists.pop() || "";
-  const renewalTextParagraphs = lastPart.split("{{pSeparator}}");
+  const renewalTextParagraphs = lastPart.split(P_SEPARATOR);
   const ulHtml = `<ul class="apm__terms-bullets">${renewalTextLists.map((value) => `<li>${value}</li>`).join("")}</ul>`;
   const paragraphHtml = renewalTextParagraphs.filter(Boolean).map((value) => `<p class="apm__terms-legal">${value}</p>`).join("");
   return ulHtml + paragraphHtml;