@bunnyapp/components 1.6.0-beta.22 → 1.6.0-beta.24

package/dist/cjs/index.js

@@ -143,7 +143,7 @@ const useAllErrorFormats = () => {
 };
 
 // This will be replaced at build time by rollup-plugin-replace
-const PACKAGE_VERSION = '1.6.0-beta.21';
+const PACKAGE_VERSION = '1.6.0-beta.23';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -1039,6 +1039,42 @@ const defaultStyled = typeof styled === "function" ? styled : styled.default;
 // !!! This is a workaround to avoid the issue with styled-components not supporting ESM
 // Workaround from https://github.com/styled-components/styled-components/issues/3437#issuecomment-1103085056
 
+if (typeof window !== 'undefined') {
+    // Prevent watermark from being added
+    const originalCreateElement = document.createElement.bind(document);
+    document.createElement = function (tagName, options) {
+        const element = originalCreateElement(tagName, options);
+        if (tagName.toLowerCase() === 'div') {
+            const originalAttachShadow = element.attachShadow;
+            element.attachShadow = function (init) {
+                var _a;
+                const shadowRoot = originalAttachShadow.call(this, init);
+                // Prevent watermark styles from being injected
+                const originalInnerHTMLSetter = (_a = Object.getOwnPropertyDescriptor(ShadowRoot.prototype, 'innerHTML')) === null || _a === void 0 ? void 0 : _a.set;
+                console.log('originalInnerHTMLSetter', originalInnerHTMLSetter);
+                if (originalInnerHTMLSetter) {
+                    Object.defineProperty(shadowRoot, 'innerHTML', {
+                        set: function (value) {
+                            // Block watermark injection
+                            if (typeof value === 'string' &&
+                                value.includes('background-image: url(data:image/webp')) {
+                                return; // Don't set the watermark HTML
+                            }
+                            console.log('value', value);
+                            originalInnerHTMLSetter.call(this, value);
+                        },
+                        get: function () {
+                            console.log('this.innerHTML', this.innerHTML);
+                            return this.innerHTML;
+                        },
+                    });
+                }
+                return shadowRoot;
+            };
+        }
+        return element;
+    };
+}
 const LISENSE_KEY = 'eyJkYXRhIjoiZXlKMElqb2liM0puWVc1cGVtRjBhVzl1SWl3aVlYWjFJam94TnpneU5ETXhPVGs1TENKa2JTSTZJbUoxYm01NUxtTnZiU0lzSW00aU9pSmhOV1F5TWpKaFpXTTNOelF5TkdFNUlpd2laWGh3SWpveE56WTJORFEzT1RrNUxDSmtiWFFpT2lKM2FXeGtZMkZ5WkNKOSIsInNpZ25hdHVyZSI6ImdJWW5BYWp0WW1aSHV1b1RrTkZCZnRGYjEzUTJOZXZwQXlKRmszdy9STDNUa08rRXZYWlV0MDZxenBrZWdOK1A4TXlkbFY1aityemQvM1VpYlB5SW1VSzAweHZSVk5hS29EOXB0cVpkbjR5SWRRdE1pU1NjZ0J1K1RkM0NXM2FONVNrdlNJVDEyTGpBMnVVYll2RmJ6RFpMci9hODkwa05sT0NQZURoVjMyd0w3R0NrTnV2Z1MyZlk5Mis0L25FdUdvZXBZR0RPN0Ryb3NaOGVlbnJ6b1BsQ044T204eFlMNXJxdUkvS2xLVTVYaGN0allrdzBTR0FlL0pDR1dTN1dLTDAvYmFvbS9GS1ltNU91VmlzcmlDVlc2UXgvbzBnTGE4bUtXLytMb3pNaHdFemdtU2I2S0xERzZpTEVPL0czQ2pYN2p2dTU1NEc4OUx2aW1BaE5BQT09In0=';
 // Custom zoom layout component that uses useZoomContext
 const CustomZoomLayout = () => {
@@ -18916,6 +18952,37 @@ function Content({ children, accountId }) {
     return jsxRuntime.jsx(SelectedPluginDataProvider, { value: selectedPlugin, children: children });
 }
 
+const invokePlugin = async ({ method, payload, plugin, token, apiHost, componentsVersion, }) => {
+    var _a, _b, _c, _d;
+    const backendComponent = (_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.backend) === null || _b === void 0 ? void 0 : _b[0];
+    if (!((_d = (_c = plugin.components) === null || _c === void 0 ? void 0 : _c.backend) === null || _d === void 0 ? void 0 : _d.length))
+        throw new Error('The provided plugin is not invokable');
+    if (!(backendComponent === null || backendComponent === void 0 ? void 0 : backendComponent.access.includes(method)))
+        throw new Error(`Method ${method} is not invokable`);
+    const body = JSON.stringify({
+        guid: plugin.guid,
+        class: backendComponent === null || backendComponent === void 0 ? void 0 : backendComponent.name,
+        method,
+        payload,
+    });
+    const headers = createClientDevHeaders({
+        token,
+        componentsVersion: componentsVersion || PACKAGE_VERSION,
+    });
+    const response = await common.request({
+        method: 'POST',
+        apiHost,
+        endpoint: `/plugins/invoke`,
+        body,
+        token,
+        headers,
+    });
+    if (response.ok)
+        return response.json();
+    const error = await response.json();
+    throw new Error(error.message);
+};
+
 const DIGIT_REGEX = /\d/;
 const isDigit = (char) => DIGIT_REGEX.test(char);
 const isDeletion = (char) => [8, 46].includes(char); // Backspace or Delete
@@ -18950,7 +19017,7 @@ const unformatCardNumber = (cardNumber) => {
 };
 const storePayment = async (options, plugin, apiHost, accountId) => {
     const { testCreditCardNumber, testCreditCardCvc, testCreditCardExpirationDate, token } = options;
-    const response = await common.invokePlugin({
+    const response = await invokePlugin({
         method: 'store_payment_method',
         plugin,
         payload: {
@@ -19075,7 +19142,7 @@ const getQuoteAmountDue = (quote) => {
 
 const { useToken: useAntdToken } = antd.theme;
 const createPaymentMethod = async ({ paymentMethodId, plugin, token, apiHost, accountId, }) => {
-    const response = await common.invokePlugin({
+    const response = await invokePlugin({
         plugin,
         method: 'store_payment_method',
         payload: {
@@ -19090,7 +19157,7 @@ const createPaymentMethod = async ({ paymentMethodId, plugin, token, apiHost, ac
     return response;
 };
 const createSetupIntent = (plugin, apiHost, token, accountId) => {
-    return common.invokePlugin({
+    return invokePlugin({
         plugin,
         method: 'create_setup_intent',
         token,
@@ -19106,7 +19173,7 @@ const createPaymentHold = async ({ quote, plugin, token, apiHost, paymentMethodI
         amount: quote.amount,
         payment_method_id: paymentMethodId,
     };
-    const response = await common.invokePlugin({
+    const response = await invokePlugin({
         plugin,
         method: 'create_payment_hold',
         payload,
@@ -19118,7 +19185,7 @@ const createPaymentHold = async ({ quote, plugin, token, apiHost, paymentMethodI
     return response;
 };
 const fetchStripeKey = async (plugin, apiHost, token, accountId) => {
-    const response = await common.invokePlugin({
+    const response = await invokePlugin({
         plugin,
         method: 'retrieve_config',
         token,
@@ -20000,7 +20067,7 @@ function useRemovePaymentMethod(onRemovePaymentMethod, onError) {
     const removePaymentMethod = react.useCallback(async (data) => {
         const plugin = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.find(paymentPlugin => { var _a; return String(paymentPlugin.id) === ((_a = data === null || data === void 0 ? void 0 : data.plugin) === null || _a === void 0 ? void 0 : _a.id); });
         if (data && plugin) {
-            await common.invokePlugin({
+            await invokePlugin({
                 plugin: plugin, // TODO: type the plugin
                 method: 'remove_payment_method',
                 payload: {
@@ -20054,7 +20121,7 @@ function useSetDefaultPaymentMethod(onError, onSuccess) {
         const plugin = paymentPlugins === null || paymentPlugins === void 0 ? void 0 : paymentPlugins.find(paymentPlugin => { var _a; return String(paymentPlugin.id) === ((_a = paymentMethod === null || paymentMethod === void 0 ? void 0 : paymentMethod.plugin) === null || _a === void 0 ? void 0 : _a.id); }); // TODO: type the response to PluginData
         if (plugin) {
             setLoading(true);
-            await common.invokePlugin({
+            await invokePlugin({
                 plugin: plugin,
                 method: 'assign_default_payment_method',
                 payload: {
@@ -20383,10 +20450,18 @@ const usePlugins = ({ apiHost, token }) => {
     return response;
 };
 const getPlugins = async ({ token, apiHost }) => {
+    const baseHeaders = createClientDevHeaders({
+        token,
+        componentsVersion: PACKAGE_VERSION,
+    });
+    const requestHeaders = {
+        ...baseHeaders,
+    };
     const response = await common.request({
         endpoint: `/plugins`,
         token,
         apiHost,
+        headers: requestHeaders,
     });
     if (response.ok) {
         const plugins = await response.json();

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { isValidElement, createContext, useContext, useMemo, useState, useEffect, useRef, createElement, useCallback, Fragment as Fragment$1 } from 'react';
 import { DownloadOutlined, CreditCardOutlined, EllipsisOutlined, BankOutlined, SearchOutlined, CloseOutlined, CheckCircleFilled, InfoCircleOutlined } from '@ant-design/icons';
-import { useErrorNotification, DEFAULT_CONFIG, createClientDevHeaders as createClientDevHeaders$1, X_BUNNY_COMPONENTS_VERSION_HEADER_NAME, QueryKeyFactory as QueryKeyFactory$1, useIsMobile as useIsMobile$1, DEFAULT_BRAND_COLOR, isColorTooDark, DEFAULT_TOP_NAV_IMAGE_URL, DEFAULT_ACCENT_COLOR, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, DEFAULT_SECONDARY_COLOR, request as request$1, invokePlugin, useAllErrorFormats as useAllErrorFormats$1, formatCurrency as formatCurrency$1, GRAY_500, GRAY_200, useSuccessNotification, PAYABLE_INVOICE_STATES, BreakpointNumbers as BreakpointNumbers$1, useGraphQLmutation, useInfoNotification, formatDate, TransactionState, SLATE_600, WHITE, TransactionKind, QuoteChangeKind, SLATE_500, PRIMARY_COLOR, Lists, getAccount, ChargeType, PERIOD_LABELS, MODAL_MAX_HEIGHT, DataInterval, SLATE_100 } from '@bunnyapp/common';
+import { useErrorNotification, DEFAULT_CONFIG, createClientDevHeaders as createClientDevHeaders$1, X_BUNNY_COMPONENTS_VERSION_HEADER_NAME, QueryKeyFactory as QueryKeyFactory$1, useIsMobile as useIsMobile$1, DEFAULT_BRAND_COLOR, isColorTooDark, DEFAULT_TOP_NAV_IMAGE_URL, DEFAULT_ACCENT_COLOR, INPUT_BORDER_COLOR, SLATE_50, SLATE_400, SLATE_200, DEFAULT_SECONDARY_COLOR, request as request$1, useAllErrorFormats as useAllErrorFormats$1, formatCurrency as formatCurrency$1, GRAY_500, GRAY_200, useSuccessNotification, PAYABLE_INVOICE_STATES, BreakpointNumbers as BreakpointNumbers$1, useGraphQLmutation, useInfoNotification, formatDate, TransactionState, SLATE_600, WHITE, TransactionKind, QuoteChangeKind, SLATE_500, PRIMARY_COLOR, Lists, getAccount, ChargeType, PERIOD_LABELS, MODAL_MAX_HEIGHT, DataInterval, SLATE_100 } from '@bunnyapp/common';
 import { ConfigProvider, Spin, Typography, Button, theme as theme$1, Tag, Dropdown, Input, Modal, Checkbox, Skeleton, Collapse, Form, Tooltip, Drawer, Card as Card$1, Select, Divider, Popconfirm, Table, Radio, Space, Switch } from 'antd';
 import { Markup } from 'interweave';
 import request from 'graphql-request';
@@ -141,7 +141,7 @@ const useAllErrorFormats = () => {
 };
 
 // This will be replaced at build time by rollup-plugin-replace
-const PACKAGE_VERSION = '1.6.0-beta.21';
+const PACKAGE_VERSION = '1.6.0-beta.23';
 const createRequestHeaders = (token) => {
     const headers = createClientDevHeaders({ token });
     // Add the components version header
@@ -1037,6 +1037,42 @@ const defaultStyled = typeof styled === "function" ? styled : styled.default;
 // !!! This is a workaround to avoid the issue with styled-components not supporting ESM
 // Workaround from https://github.com/styled-components/styled-components/issues/3437#issuecomment-1103085056
 
+if (typeof window !== 'undefined') {
+    // Prevent watermark from being added
+    const originalCreateElement = document.createElement.bind(document);
+    document.createElement = function (tagName, options) {
+        const element = originalCreateElement(tagName, options);
+        if (tagName.toLowerCase() === 'div') {
+            const originalAttachShadow = element.attachShadow;
+            element.attachShadow = function (init) {
+                var _a;
+                const shadowRoot = originalAttachShadow.call(this, init);
+                // Prevent watermark styles from being injected
+                const originalInnerHTMLSetter = (_a = Object.getOwnPropertyDescriptor(ShadowRoot.prototype, 'innerHTML')) === null || _a === void 0 ? void 0 : _a.set;
+                console.log('originalInnerHTMLSetter', originalInnerHTMLSetter);
+                if (originalInnerHTMLSetter) {
+                    Object.defineProperty(shadowRoot, 'innerHTML', {
+                        set: function (value) {
+                            // Block watermark injection
+                            if (typeof value === 'string' &&
+                                value.includes('background-image: url(data:image/webp')) {
+                                return; // Don't set the watermark HTML
+                            }
+                            console.log('value', value);
+                            originalInnerHTMLSetter.call(this, value);
+                        },
+                        get: function () {
+                            console.log('this.innerHTML', this.innerHTML);
+                            return this.innerHTML;
+                        },
+                    });
+                }
+                return shadowRoot;
+            };
+        }
+        return element;
+    };
+}
 const LISENSE_KEY = 'eyJkYXRhIjoiZXlKMElqb2liM0puWVc1cGVtRjBhVzl1SWl3aVlYWjFJam94TnpneU5ETXhPVGs1TENKa2JTSTZJbUoxYm01NUxtTnZiU0lzSW00aU9pSmhOV1F5TWpKaFpXTTNOelF5TkdFNUlpd2laWGh3SWpveE56WTJORFEzT1RrNUxDSmtiWFFpT2lKM2FXeGtZMkZ5WkNKOSIsInNpZ25hdHVyZSI6ImdJWW5BYWp0WW1aSHV1b1RrTkZCZnRGYjEzUTJOZXZwQXlKRmszdy9STDNUa08rRXZYWlV0MDZxenBrZWdOK1A4TXlkbFY1aityemQvM1VpYlB5SW1VSzAweHZSVk5hS29EOXB0cVpkbjR5SWRRdE1pU1NjZ0J1K1RkM0NXM2FONVNrdlNJVDEyTGpBMnVVYll2RmJ6RFpMci9hODkwa05sT0NQZURoVjMyd0w3R0NrTnV2Z1MyZlk5Mis0L25FdUdvZXBZR0RPN0Ryb3NaOGVlbnJ6b1BsQ044T204eFlMNXJxdUkvS2xLVTVYaGN0allrdzBTR0FlL0pDR1dTN1dLTDAvYmFvbS9GS1ltNU91VmlzcmlDVlc2UXgvbzBnTGE4bUtXLytMb3pNaHdFemdtU2I2S0xERzZpTEVPL0czQ2pYN2p2dTU1NEc4OUx2aW1BaE5BQT09In0=';
 // Custom zoom layout component that uses useZoomContext
 const CustomZoomLayout = () => {
@@ -18914,6 +18950,37 @@ function Content({ children, accountId }) {
     return jsx(SelectedPluginDataProvider, { value: selectedPlugin, children: children });
 }
 
+const invokePlugin = async ({ method, payload, plugin, token, apiHost, componentsVersion, }) => {
+    var _a, _b, _c, _d;
+    const backendComponent = (_b = (_a = plugin.components) === null || _a === void 0 ? void 0 : _a.backend) === null || _b === void 0 ? void 0 : _b[0];
+    if (!((_d = (_c = plugin.components) === null || _c === void 0 ? void 0 : _c.backend) === null || _d === void 0 ? void 0 : _d.length))
+        throw new Error('The provided plugin is not invokable');
+    if (!(backendComponent === null || backendComponent === void 0 ? void 0 : backendComponent.access.includes(method)))
+        throw new Error(`Method ${method} is not invokable`);
+    const body = JSON.stringify({
+        guid: plugin.guid,
+        class: backendComponent === null || backendComponent === void 0 ? void 0 : backendComponent.name,
+        method,
+        payload,
+    });
+    const headers = createClientDevHeaders({
+        token,
+        componentsVersion: componentsVersion || PACKAGE_VERSION,
+    });
+    const response = await request$1({
+        method: 'POST',
+        apiHost,
+        endpoint: `/plugins/invoke`,
+        body,
+        token,
+        headers,
+    });
+    if (response.ok)
+        return response.json();
+    const error = await response.json();
+    throw new Error(error.message);
+};
+
 const DIGIT_REGEX = /\d/;
 const isDigit = (char) => DIGIT_REGEX.test(char);
 const isDeletion = (char) => [8, 46].includes(char); // Backspace or Delete
@@ -20381,10 +20448,18 @@ const usePlugins = ({ apiHost, token }) => {
     return response;
 };
 const getPlugins = async ({ token, apiHost }) => {
+    const baseHeaders = createClientDevHeaders({
+        token,
+        componentsVersion: PACKAGE_VERSION,
+    });
+    const requestHeaders = {
+        ...baseHeaders,
+    };
     const response = await request$1({
         endpoint: `/plugins`,
         token,
         apiHost,
+        headers: requestHeaders,
     });
     if (response.ok) {
         const plugins = await response.json();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bunnyapp/components",
-  "version": "1.6.0-beta.22",
+  "version": "1.6.0-beta.24",
   "description": "Components from the Bunny portal to embed Bunny UI functionality into your application.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",