@alma/widgets 2.7.1 → 2.8.0

package/dist/raw/widgets.umd.js

@@ -18622,12 +18622,21 @@
     }))));
   };
 
+  var COLORS;
+
+  (function (COLORS) {
+    COLORS["ALMA"] = "#FF414D";
+    COLORS["MONOCHROME"] = "#00425D";
+  })(COLORS || (COLORS = {}));
+
   function LogoIcon(_ref) {
-    var _ref$color = _ref.color,
-        color = _ref$color === void 0 ? '#00425D' : _ref$color,
-        _ref$underlineColor = _ref.underlineColor,
-        underlineColor = _ref$underlineColor === void 0 ? '#00425D' : _ref$underlineColor,
-        className = _ref.className;
+    var className = _ref.className,
+        _ref$color = _ref.color,
+        color = _ref$color === void 0 ? COLORS.MONOCHROME : _ref$color,
+        _ref$monochrome = _ref.monochrome,
+        monochrome = _ref$monochrome === void 0 ? true : _ref$monochrome,
+        underlineColor = _ref.underlineColor;
+    var defaultUnderlineColor = monochrome ? COLORS.MONOCHROME : COLORS.ALMA;
     return /*#__PURE__*/react.createElement("svg", {
       className: className,
       width: "35",
@@ -18651,7 +18660,7 @@
       y: "20",
       width: "40",
       height: "3",
-      fill: underlineColor
+      fill: underlineColor || defaultUnderlineColor
     }));
   }
 
@@ -18902,7 +18911,7 @@
     activeOption: prefix$1 + '-active-option'
   };
 
-  var s$c = {"widgetButton":"_TSkFv","logo":"_LJ4nZ","primaryContainer":"_bMClc","paymentPlans":"_17c_S","plan":"_2Kqjn","active":"_3dG_J","notEligible":"_3O1bg","info":"_25GrF","loader":"_30j1O","error":"_R0YlN","errorText":"_2kGhu","errorButton":"_73d_Y","pending":"_1ZDMS","clickable":"_UksZa","unClickable":"_1lr-q"};
+  var s$c = {"widgetButton":"_TSkFv","logo":"_LJ4nZ","primaryContainer":"_bMClc","paymentPlans":"_17c_S","plan":"_2Kqjn","active":"_3dG_J","polychrome":"_2icEF","notEligible":"_3O1bg","info":"_25GrF","loader":"_30j1O","error":"_R0YlN","errorText":"_2kGhu","errorButton":"_73d_Y","pending":"_1ZDMS","clickable":"_UksZa","unClickable":"_1lr-q"};
 
   var VERY_LONG_TIME_IN_MS = 1000 * 3600 * 24 * 365;
   var DEFAULT_TRANSITION_TIME = 5500;
@@ -18910,13 +18919,14 @@
   var PaymentPlanWidget = function PaymentPlanWidget(_ref) {
     var _cx, _cx3;
 
-    var purchaseAmount = _ref.purchaseAmount,
-        apiData = _ref.apiData,
+    var apiData = _ref.apiData,
         configPlans = _ref.configPlans,
-        transitionDelay = _ref.transitionDelay,
         hideIfNotEligible = _ref.hideIfNotEligible,
+        monochrome = _ref.monochrome,
+        purchaseAmount = _ref.purchaseAmount,
         suggestedPaymentPlan = _ref.suggestedPaymentPlan,
-        cards = _ref.cards;
+        cards = _ref.cards,
+        transitionDelay = _ref.transitionDelay;
 
     var _useFetchEligibility = useFetchEligibility(purchaseAmount, apiData, configPlans),
         eligibilityPlans = _useFetchEligibility[0],
@@ -19019,19 +19029,21 @@
     }, /*#__PURE__*/react.createElement("div", {
       className: classnames(s$c.primaryContainer, STATIC_CUSTOMISATION_CLASSES$1.eligibilityLine)
     }, /*#__PURE__*/react.createElement(LogoIcon, {
-      className: s$c.logo
+      className: s$c.logo,
+      monochrome: monochrome
     }), /*#__PURE__*/react.createElement("div", {
       className: classnames(s$c.paymentPlans, STATIC_CUSTOMISATION_CLASSES$1.eligibilityOptions)
     }, eligibilityPlans.map(function (eligibilityPlan, key) {
       var _cx2;
 
+      var isCurrent = key === current;
       return /*#__PURE__*/react.createElement("div", {
         key: key,
         onMouseEnter: function onMouseEnter() {
           return onHover(key);
         },
         onMouseOut: onLeave,
-        className: classnames(s$c.plan, (_cx2 = {}, _cx2[classnames(s$c.active, STATIC_CUSTOMISATION_CLASSES$1.activeOption)] = current === key, _cx2[classnames(s$c.notEligible, STATIC_CUSTOMISATION_CLASSES$1.notEligibleOption)] = !eligibilityPlan.eligible, _cx2))
+        className: classnames(s$c.plan, (_cx2 = {}, _cx2[classnames(s$c.active, STATIC_CUSTOMISATION_CLASSES$1.activeOption)] = isCurrent, _cx2[s$c.polychrome] = !monochrome && isCurrent, _cx2[classnames(s$c.notEligible, STATIC_CUSTOMISATION_CLASSES$1.notEligibleOption)] = !eligibilityPlan.eligible, _cx2))
       }, paymentPlanShorthandName(eligibilityPlan));
     }))), /*#__PURE__*/react.createElement("div", {
       className: classnames(s$c.info, (_cx3 = {}, _cx3[classnames(s$c.notEligible, STATIC_CUSTOMISATION_CLASSES$1.notEligibleOption)] = eligibilityPlans[current] && !eligibilityPlans[current].eligible, _cx3), STATIC_CUSTOMISATION_CLASSES$1.paymentInfo)
@@ -19066,6 +19078,8 @@
             plans = options.plans,
             transitionDelay = options.transitionDelay,
             hideIfNotEligible = options.hideIfNotEligible,
+            _options$monochrome = options.monochrome,
+            monochrome = _options$monochrome === void 0 ? true : _options$monochrome,
             suggestedPaymentPlan = options.suggestedPaymentPlan,
             _options$locale = options.locale,
             locale = _options$locale === void 0 ? Locale.en : _options$locale,
@@ -19075,13 +19089,14 @@
           reactDom.render( /*#__PURE__*/react.createElement(Provider$1, {
             locale: locale
           }, /*#__PURE__*/react.createElement(PaymentPlanWidget, {
-            purchaseAmount: purchaseAmount,
             apiData: this.apiData,
             configPlans: plans,
-            transitionDelay: transitionDelay,
             hideIfNotEligible: hideIfNotEligible,
+            monochrome: monochrome,
+            purchaseAmount: purchaseAmount,
             suggestedPaymentPlan: suggestedPaymentPlan,
-            cards: cards
+            cards: cards,
+            transitionDelay: transitionDelay
           })), document.querySelector(container));
         }
       }