@rebilly/instruments 3.40.0 → 3.41.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rebilly/instruments",
-  "version": "3.40.0",
+  "version": "3.41.0",
   "author": "Rebilly",
   "license": "MIT",
   "main": "dist/index.js",

package/src/data/options-schema/schemas/options-schema.js

@@ -205,7 +205,18 @@ export default {
               default: [],
               items: {
                 type: 'string',
-                enum: ['email', 'organization', 'phoneNumber', 'city', 'country', 'region', 'postalCode']
+                enum: [
+                  'all',
+                  'email',
+                  'organization',
+                  'phoneNumber',
+                  'city',
+                  'country',
+                  'region',
+                  'postalCode',
+                  'address',
+                  'address2'
+                ]
               }
             },
             hide: {
@@ -213,7 +224,18 @@ export default {
               default: [],
               items: {
                 type: 'string',
-                enum: ['address2']
+                enum: [
+                  'all',
+                  'email',
+                  'organization',
+                  'phoneNumber',
+                  'city',
+                  'country',
+                  'region',
+                  'postalCode',
+                  'address',
+                  'address2'
+                ]
               }
             },
             require: {

package/src/functions/mount/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 import state from '../../state';
 import { mountSummary } from '../../views/summary';
-import { mountForm, determineFirstView } from '../../views/form';
+import { mountForm, determineFirstView, removeForm } from '../../views/form';
 import { fetchData } from './fetch-data';
 import Events from '../../events';
 import setupElement from './setup-element';
@@ -77,6 +77,13 @@ export async function mount({
     state.i18n({state});
     state.hasMounted = true;
 
+    const invoiceId = state.options?.invoiceId || state.data?.transaction?.invoiceId;
+    if(invoiceId && state.data.invoice.isPaid) {
+      state.loader.stopLoading({id: 'rebilly-instruments-form'});
+      removeForm();
+      showError(state.translate.getTranslation('form.error.invoiceIsPaid'), false);
+    }
+
     if (!data.readyToPay?.length) {
       state.loader.stopLoading({id: 'rebilly-instruments-form'});
       showError(state.translate.getTranslation('form.error.noPaymentMethods'))

package/src/i18n/en.json

@@ -16,7 +16,8 @@
       "popupOverlayText": "Click here to show popup window",
       "andMore": "and more",
       "error": {
-        "noPaymentMethods": "No payment methods available for this transaction, please contact support."
+        "noPaymentMethods": "No payment methods available for this transaction, please contact support.",
+        "invoiceIsPaid": "The invoice has been fully paid."
       },
       "loaderMessages": {
         "processingPayment": "Processing payment instrument."

package/src/i18n/es.json

@@ -16,7 +16,8 @@
       "andMore": "y más",
       "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."
+        "noPaymentMethods": "No hay métodos de pago disponibles para esta transacción, por favor, póngase en contacto con el servicio de asistencia.",
+        "invoiceIsPaid": "La factura ha sido completamente pagada."
       },
       "bumpOffer": {
         "title": "¡Sí, me gustaría actualizar!",

package/src/storefront/models/invoice-model.js

@@ -1,3 +1,20 @@
 import BaseModel from './base-model';
 
-export default class InvoiceModel extends BaseModel {}
+export default class InvoiceModel extends BaseModel {
+  static Status = {
+    draft: 'draft',
+    unpaid: 'unpaid',
+    paid: 'paid',
+    partiallyPaid: 'partially-paid',
+    pastDue: 'past-due',
+    abandoned: 'abandoned',
+    voided: 'voided',
+    partiallyRefunded: 'partially-refunded',
+    refunded: 'refunded',
+    disputed: 'disputed',
+  }
+
+  get isPaid() {
+    return this.status === InvoiceModel.Status.paid;
+  }
+}

package/src/style/base/index.js

@@ -552,6 +552,9 @@ export const vars = (theme) => `
   padding: var(--rebilly-spacingS);
   margin-bottom: var(--rebilly-spacingL);
 }
+.rebilly-instruments-error-card.not-closeable {
+  margin-bottom: 0;
+}
 
 .rebilly-instruments-error-card-header {
   display: -webkit-box;

package/src/views/errors.js

@@ -59,16 +59,13 @@ export function clearError() {
   errorContainer.innerHTML = '';
 }
 
-export function showError(error) {
+export function showError(error, isCloseable = true) {
   if (!error) return;
   const errorContainer = document.querySelector('#rebilly-instruments-error');
   if (!errorContainer) return ;
 
   errorContainer.innerHTML = errorTemplate(error);
 
-  const closeButton = document.querySelector('.rebilly-instruments-error-card-close-button');
-  closeButton.addEventListener('click', clearError);
-
   function clickOutsideError(e) {
     if (errorContainer.contains(e.target)) return;
 
@@ -85,8 +82,18 @@ export function showError(error) {
     });
   }
 
-  window.addEventListener('click', clickOutsideError);
-  window.addEventListener('blur', windowBlur, { once: true });
+  const closeButton = document.querySelector('.rebilly-instruments-error-card-close-button');
+
+  if(isCloseable) {
+    closeButton.addEventListener('click', clearError);
+
+    window.addEventListener('click', clickOutsideError);
+    window.addEventListener('blur', windowBlur, { once: true });
+  } else {
+    const errorBox = document.querySelector('.rebilly-instruments-error-card');
+    errorBox.classList.add('not-closeable');
+    closeButton.remove();
+  }
 
   errorContainer.scrollIntoView({behavior: 'smooth', block: 'end', inline: 'nearest'});
   console.error('Rebilly Instruments Error', error);

package/src/views/form.js

@@ -49,4 +49,9 @@ export function determineFirstView() {
   } else {
     mountMethodSelector();
   }
+}
+
+export function removeForm() {
+  const container = document.querySelector('[data-rebilly-instruments="form"]');
+  container.remove();
 }