@rebilly/instruments 9.51.0 → 9.53.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
-## [9.51.0](https://github.com/Rebilly/rebilly/compare/instruments/core-v9.50.1...instruments/core-v9.51.0) (2024-05-27)
+## [9.53.0](https://github.com/Rebilly/rebilly/compare/instruments/core-v9.52.0...instruments/core-v9.53.0) (2024-05-28)
 
 
 ### Features
 
-* **api-metadata, rebilly-js-sdk:** Update resources based on latest api definitions ([#5531](https://github.com/Rebilly/rebilly/issues/5531)) ([4ffa25f](https://github.com/Rebilly/rebilly/commit/4ffa25fad2998274d82dbe80fe8131c3532b811e))
+* **billing portal, instruments:** upgrade instruments management ([#5472](https://github.com/Rebilly/rebilly/issues/5472)) ([d8d886f](https://github.com/Rebilly/rebilly/commit/d8d886fca97bb034b1477ec72fe5c22aa908af22))

package/dist/index.d.ts

@@ -223,6 +223,7 @@ export interface PaymentInstrumentsOptionFlags {
 	allowDeactivate?: boolean;
 	allowUpdate?: boolean;
 	allowMakeDefault?: boolean;
+	allowCreate?: boolean;
 }
 export interface PaymentInstrumentsDisplayOptions extends PaymentInstrumentsOptionFlags {
 	address?: Address;
@@ -242,6 +243,7 @@ export interface Features {
 	hideResult?: boolean;
 	fullPageRedirect?: boolean;
 	showCoupons?: string[];
+	hideContinue?: boolean;
 }
 export interface DevProperties {
 	paymentMethodsUrl?: string;

package/dist/index.js

@@ -2709,7 +2709,8 @@ const events = {
   instrumentReady: new BaseEvent("instrument-ready"),
   payoutCompleted: new BaseEvent("payout-completed"),
   purchaseCompleted: new BaseEvent("purchase-completed"),
-  setupCompleted: new BaseEvent("setup-completed")
+  setupCompleted: new BaseEvent("setup-completed"),
+  instrumentManaged: new BaseEvent("instrument-managed")
 };
 const publicEventNames = Object.keys(events).map(
   (internalName) => kebabCase$1(internalName)
@@ -2860,6 +2861,69 @@ function stopLoaderHandler(iframe, data) {
     (_a = data.loader) == null ? void 0 : _a.stopLoading({ section, id: id2 });
   });
 }
+function showConfirmationModalHandler(iframe) {
+  iframe.component.on(
+    `${iframe.name}-show-confirmation-modal`,
+    async (params) => {
+      try {
+        const response = await showConfirmationModal(params);
+        iframe.component.call("update", {
+          data: { confirmModal: response.confirmed }
+        });
+      } catch (err) {
+        console.error(err);
+      }
+    }
+  );
+}
+function showConfirmationModal({ title: title2, message, confirmText, cancelText }) {
+  return new Promise((resolve2) => {
+    const modalElement = document.createElement("div");
+    modalElement.id = "confirmation-modal";
+    modalElement.classList.add(
+      "rebilly-instruments-modal-overlay",
+      "is-visible"
+    );
+    modalElement.innerHTML = `
+            <div class="rebilly-instruments-modal-container rebilly-instruments-confirmation-modal-container is-visible">
+                <div class="rebilly-instruments-modal-header rebilly-instruments-confirmation-modal-header">
+                    <b class="rebilly-instruments-modal-title rebilly-instruments-confirmation-modal-title">${title2}</b>
+                </div>
+                <div class="rebilly-instruments-modal-content rebilly-instruments-confirmation-modal-content">
+                    <p class="rebilly-instruments-modal-message rebilly-instruments-confirmation-modal-message">${message}</p>
+                </div>
+                <div class="rebilly-instruments-modal-actions rebilly-instruments-confirmation-modal-actions">
+                    <button class="rebilly-instruments-button-transparent rebilly-instruments-confirmation-modal-cancel">${cancelText}</button>
+                    <button class="rebilly-instruments-button rebilly-instruments-confirmation-modal-confirm">${confirmText}</button>
+                </div>
+            </div>
+        `;
+    document.body.appendChild(modalElement);
+    const modalOverlay = document.getElementById("confirmation-modal");
+    const confirmBtn = modalOverlay.querySelector(
+      ".rebilly-instruments-confirmation-modal-confirm"
+    );
+    const cancelBtn = modalOverlay.querySelector(
+      ".rebilly-instruments-confirmation-modal-cancel"
+    );
+    document.body.style.overflow = "hidden";
+    const closeModal = () => {
+      modalOverlay.classList.remove("is-visible");
+      setTimeout(() => {
+        document.body.style.overflow = "auto";
+        modalOverlay.remove();
+      }, 300);
+    };
+    confirmBtn.addEventListener("click", () => {
+      closeModal();
+      resolve2({ confirmed: true });
+    });
+    cancelBtn.addEventListener("click", () => {
+      closeModal();
+      resolve2({ confirmed: false });
+    });
+  });
+}
 let ViewIframe$1 = class ViewIframe extends BaseIframe {
   constructor(args = {}) {
     super(args);
@@ -2871,6 +2935,7 @@ let ViewIframe$1 = class ViewIframe extends BaseIframe {
     showErrorHandler(this);
     updateCouponsHandler(this);
     updateAddonsHandler(this);
+    showConfirmationModalHandler(this);
   }
 };
 function changeIframeSrcHandler(iframe) {
@@ -2893,6 +2958,7 @@ let ModalIframe$1 = class ModalIframe extends BaseIframe {
       id: this.name
     });
     showErrorHandler(this);
+    showConfirmationModalHandler(this);
     this.component.on(`${this.name}-close`, (...args) => {
       close(...args);
     });
@@ -25253,6 +25319,10 @@ const paymentInstrumentsDisplayOptionsSchema = {
       type: "boolean",
       default: false
     }),
+    allowCreate: optional({
+      type: "boolean",
+      default: true
+    }),
     address: optional(addressSchema),
     paypal: optional({
       type: "object",
@@ -25317,6 +25387,10 @@ const featuresSchema = {
         type: "string",
         enum: ["summary", "confirmation"]
       }
+    }),
+    hideContinue: optional({
+      type: "boolean",
+      default: false
     })
   },
   default: {}
@@ -27819,6 +27893,40 @@ const vars = (theme2) => `
   color: #000;
 }
 
+.rebilly-instruments-confirmation-modal-container {
+    width: 350px;
+    margin: var(--rebilly-spacingL) auto;
+    padding: var(--rebilly-spacingM);
+    font-size: var(--rebilly-fontSizeBase);
+    font-family: var(--rebilly-fontFamily);
+}
+
+.rebilly-instruments-confirmation-modal-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-weight: var(--rebilly-fontWeight600);
+    line-height: var(--rebilly-fontLineHeightBase);
+}
+
+.rebilly-instruments-confirmation-modal-content {
+    text-align: left !important;
+    padding: 0 !important;
+    line-height: var(--rebilly-fontLineHeightBase);
+}
+
+.rebilly-instruments-confirmation-modal-actions {
+    display: flex;
+    justify-content: flex-end;
+    align-items: baseline;
+    line-height: var(--rebilly-fontLineHeightBase);
+}
+
+.rebilly-instruments-confirmation-modal-actions .rebilly-instruments-confirmation-modal-confirm {
+    width: initial;
+    margin-left: var(--rebilly-spacingS);
+}
+
 @media screen and (max-width: 480px) {
   .rebilly-instruments-modal-container.is-redirect {
     max-width: 96vw;
@@ -28038,6 +28146,156 @@ const vars = (theme2) => `
   line-height: var(--rebilly-fontLineHeightBase);
 }
 
+/* Components. Button
+------------------------------------------------------------ */
+.rebilly-instruments-button {
+    font-size: var(--rebilly-buttonFontSize);
+    font-family: var(--rebilly-buttonFontFamily);
+    line-height: var(--rebilly-buttonFontLineHeight);
+    padding: var(--rebilly-spacingS);
+    box-sizing: border-box;
+    background: var(--rebilly-buttonColorBackground);
+    color: var(--rebilly-buttonColorText);
+    border-radius: var(--rebilly-buttonBorderRadius);
+    font-weight: var(--rebilly-buttonFontWeight);
+    border: var(--rebilly-buttonBorder);
+    box-shadow: var(--rebilly-buttonBoxShadow);
+    margin: calc(var(--rebilly-spacing2xs) + var(--rebilly-spacingS) / 2) 0;
+    width: 100%;
+    cursor: pointer;
+    min-height: 44px;
+    transition: all 0.2s ease;
+    outline: none;
+}
+
+.rebilly-instruments-button:not([disabled]):hover {
+    background: var(--rebilly-buttonHoverColorBackground);
+    color: var(--rebilly-buttonHoverColorText);
+    font-family: var(--rebilly-buttonHoverFontFamily);
+    font-size: var(--rebilly-buttonHoverFontSize);
+    line-height: var(--rebilly-buttonHoverFontLineHeight);
+    font-weight: var(--rebilly-buttonHoverFontWeight);
+    border: var(--rebilly-buttonHoverBorder);
+    border-radius: var(--rebilly-buttonHoverBorderRadius);
+    box-shadow: var(--rebilly-buttonHoverBoxShadow);
+}
+
+.rebilly-instruments-button:not([disabled]):active {
+    background: var(--rebilly-buttonActiveColorBackground);
+    color: var(--rebilly-buttonActiveColorText);
+    font-family: var(--rebilly-buttonActiveFontFamily);
+    font-size: var(--rebilly-buttonActiveFontSize);
+    line-height: var(--rebilly-buttonActiveFontLineHeight);
+    font-weight: var(--rebilly-buttonActiveFontWeight);
+    border: var(--rebilly-buttonActiveBorder);
+    border-radius: var(--rebilly-buttonActiveBorderRadius);
+    box-shadow: var(--rebilly-buttonActiveBoxShadow);
+}
+
+.rebilly-instruments-button.rebilly-instruments-button-secondary {
+    font-size: var(--rebilly-buttonSecondaryFontSize);
+    font-family: var(--rebilly-buttonSecondaryFontFamily);
+    line-height: var(--rebilly-buttonSecondaryFontLineHeight);
+    background: var(--rebilly-buttonSecondaryColorBackground);
+    color: var(--rebilly-buttonSecondaryColorText);
+    border: var(--rebilly-buttonSecondaryBorder);
+    box-shadow: var(--rebilly-buttonSecondaryBoxShadow);
+}
+
+.rebilly-instruments-button.rebilly-instruments-button-secondary:not(
+        [disabled]
+    ):hover {
+    font-size: var(--rebilly-buttonSecondaryHoverFontSize);
+    font-family: var(--rebilly-buttonSecondaryHoverFontFamily);
+    line-height: var(--rebilly-buttonSecondaryHoverFontLineHeight);
+    background: var(--rebilly-buttonSecondaryHoverColorBackground);
+    color: var(--rebilly-buttonSecondaryHoverColorText);
+    border: var(--rebilly-buttonSecondaryHoverBorder);
+    box-shadow: var(--rebilly-buttonSecondaryHoverBoxShadow);
+}
+
+.rebilly-instruments-button.rebilly-instruments-button-secondary:not(
+        [disabled]
+    ):active {
+    font-size: var(--rebilly-buttonSecondaryActiveFontSize);
+    font-family: var(--rebilly-buttonSecondaryActiveFontFamily);
+    line-height: var(--rebilly-buttonSecondaryActiveFontLineHeight);
+    background: var(--rebilly-buttonSecondaryActiveColorBackground);
+    color: var(--rebilly-buttonSecondaryActiveColorText);
+    border: var(--rebilly-buttonSecondaryActiveBorder);
+    box-shadow: var(--rebilly-buttonSecondaryActiveBoxShadow);
+}
+
+.rebilly-instruments-button:focus {
+    box-shadow: none;
+}
+
+.rebilly-instruments-button:disabled,
+.rebilly-instruments-button:disabled:hover {
+    cursor: not-allowed;
+    opacity: 0.6;
+}
+
+.rebilly-instruments-button::first-letter {
+    text-transform: uppercase;
+}
+
+.rebilly-instruments-button:first-of-type {
+    margin-top: var(--rebilly-spacingL);
+}
+
+.rebilly-instruments-button:last-of-type {
+    margin-bottom: 0;
+}
+
+.rebilly-instruments-button-group {
+    display: flex;
+    align-items: stretch;
+    margin-top: var(--rebilly-spacingL);
+}
+
+.rebilly-instruments-button-group .rebilly-instruments-button {
+    margin: 0 var(--rebilly-spacingXs);
+}
+
+.rebilly-instruments-button-group .rebilly-instruments-button:first-of-type {
+    margin-left: 0;
+}
+
+.rebilly-instruments-button-group .rebilly-instruments-button:last-of-type {
+    margin-right: 0;
+}
+
+@media screen and (max-width: 480px) {
+    .rebilly-instruments-button-group {
+        flex-direction: column-reverse;
+    }
+
+    .rebilly-instruments-button-group
+        .rebilly-instruments-button:first-of-type {
+        margin: 0;
+    }
+
+    .rebilly-instruments-button-group .rebilly-instruments-button:last-of-type {
+        margin: 0;
+    }
+
+    .rebilly-instruments-button-group
+        .rebilly-instruments-button
+        + .rebilly-instruments-button {
+        margin-bottom: var(--rebilly-spacingS);
+    }
+}
+
+.rebilly-instruments-button-transparent {
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    color: inherit;
+    font: inherit;
+}
+
+
 
 /* Bump offer
 ------------------------------------------------------------ */