@alma/widgets 3.2.3 → 3.3.0

package/dist/raw/widgets.css

@@ -14,11 +14,11 @@
   --soft-yellow: #fff5cc;
   --alma-green: #4bb543;
   --soft-green: #e2f3e1;
-  --alma-red: #f00;
+  --alma-red: #CF2020;
   --soft-red: #ffecec;
   --off-white: #f9f9f9;
-  --light-gray: #d4d4d4;
-  --dark-gray: #8c8c8c;
+  --light-gray: #F0F0F0;
+  --dark-gray: #6C6C6C;
   --off-black: #1a1a1a;
   --white: #fff;
   --black: #000;
@@ -27,18 +27,18 @@
 /** Venn **/
 @font-face {
   font-family: Venn;
-  src: url('./assets/fonts/Venn-Bold.eot') format('embedded-opentype'),
-    url('./assets/fonts/Venn-Bold.woff') format('woff'),
-    url('./assets/fonts/Venn-Bold.ttf') format('truetype');
+  src: url('https://cdn.almapay.com/fonts/Venn/Venn-Bold.eot') format('embedded-opentype'),
+  url('https://cdn.almapay.com/fonts/Venn/Venn-Bold.woff') format('woff'),
+  url('https://cdn.almapay.com/fonts/Venn/Venn-Bold.ttf') format('truetype');
   font-weight: 700;
   font-style: normal;
   font-display: swap;
 }
 @font-face {
   font-family: Venn;
-  src: url('./assets/fonts/Venn-Regular.eot?#iefix') format('embedded-opentype'),
-    url('./assets/fonts/Venn-Regular.woff') format('woff'),
-    url('./assets/fonts/Venn-Regular.ttf') format('truetype');
+  src: url('https://cdn.almapay.com/fonts/Venn/Venn-Regular.eot?#iefix') format('embedded-opentype'),
+  url('https://cdn.almapay.com/fonts/Venn/Venn-Regular.woff') format('woff'),
+  url('https://cdn.almapay.com/fonts/Venn/Venn-Regular.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
@@ -46,10 +46,10 @@
 
 /** Argent **/
 @font-face {
-  font-family: 'Argent CF';
-  src: url('./assets/fonts/ArgentCF-DemiBold.eot') format('embedded-opentype'),
-    url('./assets/fonts/ArgentCF-DemiBold.woff') format('woff'),
-    url('./assets/fonts/ArgentCF-DemiBold.ttf') format('truetype');
+  font-family: Argent;
+  src: url('https://cdn.almapay.com/fonts/Argent/ArgentCF-DemiBold.eot') format('embedded-opentype'),
+  url('https://cdn.almapay.com/fonts/Argent/ArgentCF-DemiBold.woff') format('woff'),
+  url('https://cdn.almapay.com/fonts/Argent/ArgentCF-DemiBold.ttf') format('truetype');
   font-weight: 600;
   font-style: normal;
   font-display: swap;
@@ -57,7 +57,7 @@
 
 ._GTTk7 {
   margin: 16px 0;
-  font-family: 'Argent CF', sans-serif;
+  font-family: 'Argent', sans-serif;
   background-color: var(--off-white);
   border-radius: 20px;
   padding: 24px;
@@ -225,12 +225,13 @@
 }
 
 ._1l2Oa > button {
+  display: initial;
   height: 50px;
   min-width: 50px;
   border: 1px solid var(--dark-gray);
   text-transform: lowercase;
   border-radius: 16px;
-  font-family: 'Argent CF', sans-serif;
+  font-family: 'Argent', sans-serif;
   font-size: 20px;
   line-height: 120%;
   font-weight: 600;
@@ -340,7 +341,7 @@
 }
 
 ._3B8wx {
-  font-family: 'Argent CF', sans-serif;
+  font-family: 'Argent', sans-serif;
   font-weight: 600;
   font-size: 32px;
   min-width: 20px;
@@ -364,7 +365,7 @@
 }
 
 ._3ERx- {
-  font-family: 'Argent CF', sans-serif;
+  font-family: 'Argent', sans-serif;
   font-weight: 600;
   font-size: 20px;
   line-height: 130%;

package/dist/raw/widgets.js

@@ -1889,7 +1889,7 @@ var messagesDE = {
 	"credit-features.total-credit-cost": "Davon Kreditkosten",
 	"eligibility-modal.bullet-1": "Wählen Sie <strong>Alma</strong> beim Check-out. ",
 	"eligibility-modal.bullet-2": "Lassen Sie sich führen und bestätigen Sie Ihre Zahlung in <strong>2 Minuten.</strong>",
-	"eligibility-modal.bullet-3": "</strong>Verlieren Sie nicht die Kontrolle,</strong> indem Sie Ihre Fälligkeitstermine nach Ihrem eigenen Tempo vor- oder zurückverlegen.",
+	"eligibility-modal.bullet-3": "<strong>Verlieren Sie nicht die Kontrolle,</strong> indem Sie Ihre Fälligkeitstermine nach Ihrem eigenen Tempo vor- oder zurückverlegen.",
 	"eligibility-modal.no-eligibility": "Ups, die Prüfung hat anscheinend nicht funktioniert.",
 	"eligibility-modal.p1x-bullet-1": "Wählen Sie <strong>Alma - 1X</strong> beim Check-out.",
 	"eligibility-modal.p1x-bullet-2": "Tragen Sie Ihre <strong>Kreditkarteninformationen ein.</strong>",
@@ -2025,17 +2025,17 @@ var messagesIT = {
 
 var messagesNL = {
 	"credit-features.credit-cost-display": "{creditCost} (gemiddeld rente percentage {taegPercentage})",
-	"credit-features.information": "Een lening bindt je en moet worden terugbetaald. Ga na of u kunt terugbetalen voordat u zich vastlegt.",
-	"credit-features.total-credit-cost": "Waarvan kosten van krediet",
+	"credit-features.information": "Een lening is bindend en moet worden terugbetaald. Ga na of je het kunt terugbetalen voordat je jezelf vastlegt.",
+	"credit-features.total-credit-cost": "Waarvan kredietkosten",
 	"eligibility-modal.bullet-1": "Kies <strong>Alma</strong> bij het afrekenen.",
-	"eligibility-modal.bullet-2": "Laat ons u begeleiden en uw betaling valideren in <strong>2 minuten.</strong>",
-	"eligibility-modal.bullet-3": "<strong>Houd de controle op</strong> door uw deadlines in uw eigen tempo vooruit of achteruit te schuiven.",
+	"eligibility-modal.bullet-2": "Laat ons je begeleiden en jouw betaling valideren in <strong>2 minuten.</strong>",
+	"eligibility-modal.bullet-3": "<strong>Behoudt de controle</strong> door jouw deadlines op je eigen tempo vooruit of achteruit te schuiven.",
 	"eligibility-modal.no-eligibility": "Oeps, het lijkt erop dat de simulatie niet werkte.",
 	"eligibility-modal.p1x-bullet-1": "Kies <strong>Alma - 1X</strong> bij het afrekenen.",
-	"eligibility-modal.p1x-bullet-2": "Vul uw <strong>creditcardgegevens in.</strong>",
-	"eligibility-modal.p1x-bullet-3": "<strong>De validatie </strong> van uw betaling is onmiddellijk!",
-	"eligibility-modal.title-deferred-plan": "Betaal in termijnen of later per creditcard met Alma.",
-	"eligibility-modal.title-normal": "Betaal in termijnen met een creditcard bij Alma.",
+	"eligibility-modal.p1x-bullet-2": "Vul jouw <strong>creditcardgegevens </strong> in.",
+	"eligibility-modal.p1x-bullet-3": "<strong>De bevestiging </strong> van jouw betaling is onmiddellijk!",
+	"eligibility-modal.title-deferred-plan": "Betaal in termijnen of later via iDEAL of per creditcard met Alma.",
+	"eligibility-modal.title-normal": "Betaal in termijnen met iDEAL of creditcard bij Alma.",
 	"installments.today": "Tegenwoordig",
 	"installments.total-amount": "Totaal",
 	"installments.total-fees": "Waarvan kosten (incl. BTW)",
@@ -2260,7 +2260,8 @@ var useFetchEligibility = function useFetchEligibility(purchaseAmount, _ref, pla
         billing_address: billing_address,
         shipping_address: shipping_address
       }, {
-        Authorization: "Alma-Merchant-Auth " + merchantId
+        Authorization: "Alma-Merchant-Auth " + merchantId,
+        'X-Alma-Agent': 'Alma Widget'
       }).then(function (res) {
         setEligibility(res);
         setStatus(apiStatus.SUCCESS);
@@ -3206,7 +3207,8 @@ var PaymentPlanWidget = function PaymentPlanWidget(_ref) {
       customerShippingCountry = _ref.customerShippingCountry,
       transitionDelay = _ref.transitionDelay,
       _ref$hideBorder = _ref.hideBorder,
-      hideBorder = _ref$hideBorder === void 0 ? false : _ref$hideBorder;
+      hideBorder = _ref$hideBorder === void 0 ? false : _ref$hideBorder,
+      onModalClose = _ref.onModalClose;
 
   var _useFetchEligibility = useFetchEligibility(purchaseAmount, apiData, configPlans, customerBillingCountry, customerShippingCountry),
       eligibilityPlans = _useFetchEligibility[0],
@@ -3231,8 +3233,9 @@ var PaymentPlanWidget = function PaymentPlanWidget(_ref) {
     return setIsOpen(true);
   };
 
-  var closeModal = function closeModal() {
-    return setIsOpen(false);
+  var closeModal = function closeModal(event) {
+    setIsOpen(false);
+    onModalClose && onModalClose(event);
   };
 
   var eligiblePlanKeys = eligibilityPlans.reduce(function (acc, plan, index) {
@@ -3371,7 +3374,8 @@ var WidgetsController = /*#__PURE__*/function () {
           customerShippingCountry = options.customerShippingCountry,
           _options$locale = options.locale,
           locale = _options$locale === void 0 ? Locale.en : _options$locale,
-          cards = options.cards;
+          cards = options.cards,
+          onModalClose = options.onModalClose;
 
       if (containerDiv) {
         reactDom.render( /*#__PURE__*/React__default.createElement(Provider, {
@@ -3387,7 +3391,8 @@ var WidgetsController = /*#__PURE__*/function () {
           customerBillingCountry: customerBillingCountry,
           customerShippingCountry: customerShippingCountry,
           transitionDelay: transitionDelay,
-          hideBorder: hideBorder
+          hideBorder: hideBorder,
+          onModalClose: onModalClose
         })), document.querySelector(container));
       }
     }
@@ -3401,10 +3406,13 @@ var WidgetsController = /*#__PURE__*/function () {
           _locale = _options$locale2 === void 0 ? Locale.en : _options$locale2,
           _customerBillingCountry = options.customerBillingCountry,
           _customerShippingCountry = options.customerShippingCountry,
-          _cards = options.cards;
+          _cards = options.cards,
+          onClose = options.onClose;
 
-      var close = function close() {
-        return containerDiv && reactDom.unmountComponentAtNode(containerDiv);
+      var close = function close(event) {
+        if (!containerDiv) return;
+        reactDom.unmountComponentAtNode(containerDiv);
+        onClose && onClose(event);
       };
 
       var renderModal = function renderModal() {