@rebilly/instruments 3.24.0-beta.0 → 3.24.2-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rebilly/instruments",
-  "version": "3.24.0-beta.0",
+  "version": "3.24.2-beta.0",
   "author": "Rebilly",
   "license": "MIT",
   "main": "dist/index.js",

package/src/i18n/en.json

@@ -17,6 +17,10 @@
       },
       "loaderMessages": {
         "processingPayment": "Processing payment instrument."
+      },
+      "bumpOffer": {
+        "title": "Yes, I want to upgrade!",
+        "startingAt": "Starting at {basePrice}"
       }
     },
     "paymentMethods": {

package/src/i18n/es.json

@@ -14,6 +14,10 @@
       "popupOverlayText": "Haga clic aquí para mostrar la ventana emergente",
       "error": {
         "noPaymentMethods": "No hay métodos de pago disponibles para esta transacción, por favor, póngase en contacto con el servicio de asistencia."
+      },
+      "bumpOffer": {
+        "title": "¡Sí! Me gustaría actualizar!",
+        "startingAt": "A partir de {basePrice}"
       }
     },
     "paymentMethods": {

package/src/style/base/index.js

@@ -200,6 +200,14 @@ export const vars = (theme) => `
   display: inline-block;
 }
 
+/* Components. Icons
+------------------------------------------------------------ */
+.rebilly-instruments-icon {
+  width: var(--rebilly-fontLineHeightBase);
+  height: var(--rebilly-fontLineHeightBase);
+  fill: var(--rebilly-colorText);
+}
+
 /* Components. Forms. Checkboxes
 ------------------------------------------------------------ */
 .rebilly-instruments-form-field-checkbox {
@@ -665,82 +673,4 @@ export const vars = (theme) => `
 .rebilly-instruments-bump-offer-line-item-price-breakdown-unit-price {
   color: var(--rebilly-colorText);
 }
-
-.rebilly-instruments-bump-offer-breakdown {
-  padding: var(--rebilly-spacingS) 0;
-  border-bottom: 2px solid var(--rebilly-colorMutedBorder);
-}
-
-.rebilly-instruments-bump-offer-breakdown table {
-  width: 100%;
-  color: inherit;
-}
-
-.rebilly-instruments-bump-offer-breakdown table colgroup col:first-child {
-  width: 85%;
-}
-
-.rebilly-instruments-bump-offer-breakdown table colgroup col {
-  width: 15%;
-}
-
-.rebilly-instruments-bump-offer-breakdown table tr td {
-  text-align: right;
-}
-
-.rebilly-instruments-bump-offer-breakdown table tr td:first-child {
-  padding-right: var(--rebilly-spacingS);
-  font-weight: 500;
-}
-
-.rebilly-instruments-bump-offer-breakdown-total {
-  padding-top: var(--rebilly-spacingXs);
-  margin: var(--rebilly-spacingS) 0 0;
-  display: flex;
-  align-items: center;
-}
-
-.rebilly-instruments-bump-offer-breakdown-total-amount {
-  flex: 1 2 80%;
-  font-size: var(--rebilly-fontSizeL);
-  font-weight: var(--rebilly-headingFontWeight);
-  text-align: right;
-  letter-spacing: -0.8px;
-  line-height: 1;
-}
-
-.rebilly-instruments-bump-offer-breakdown-total-amount-has-due {
-  text-decoration: line-through;
-  font-weight: var(--rebilly-fontWeightBase);
-}
-
-.rebilly-instruments-bump-offer-breakdown-total-amount-currency {
-  font-size: var(--rebilly-fontSizeS);
-  color: var(--rebilly-colorMutedText);
-  margin-right: var(--rebilly-spacingXs);
-  font-weight: var(--rebilly-fontWeightBase);
-}
-
-.rebilly-instruments-bump-offer-breakdown-amount-due {
-  padding-top: var(--rebilly-spacingXs);
-  margin: var(--rebilly-spacingS) 0 0;
-  display: flex;
-  align-items: center;
-}
-
-.rebilly-instruments-bump-offer-breakdown-amount-due-amount {
-  flex: 1 2 80%;
-  font-size: var(--rebilly-fontSizeL);
-  font-weight: var(--rebilly-headingFontWeight);
-  text-align: right;
-  letter-spacing: -0.8px;
-  line-height: 1;
-}
-
-.rebilly-instruments-bump-offer-breakdown-amount-due-amount-currency {
-  font-size: var(--rebilly-fontSizeS);
-  color: var(--rebilly-colorMutedText);
-  margin-right: var(--rebilly-spacingXs);
-  font-weight: var(--rebilly-fontWeightBase);
-}
 `;

package/src/views/method-selector/mount-bump-offer.js

@@ -14,7 +14,10 @@ function lineItem({offer}) {
       : plan.pricing.price;
 
     const basePrice = formatCurrency(planPricing, plan.currency);
-    return plan.pricing.isBracket ? `Starting at ${basePrice}` : basePrice;
+    return plan.pricing.isBracket
+      ? state.translate.getTranslation('form.bumpOffer.startingAt')
+        .replace('{basePrice}', basePrice)
+      : basePrice;
   }
 
   const thumbnail = (item) => rif(item.thumbnail, `
@@ -72,7 +75,9 @@ function lineItem({offer}) {
 export function mountBumpOffer ({container}) {
   container.insertAdjacentHTML('beforeEnd', `
     <label for="rebilly-instruments-bump-offer" class="rebilly-instruments-form-field-checkbox">
-      <div class="rebilly-instruments-bump-offer-label">Yes, I want to upgrade!</div>
+      <div class="rebilly-instruments-bump-offer-label" data-rebilly-i18n="form.bumpOffer.title">
+        ${state.translate.getTranslation('form.bumpOffer.title')}
+      </div>
       <input
         type="checkbox"
         id="rebilly-instruments-bump-offer"