@fat-zebra/sdk 1.5.4 → 1.5.5

package/dist/src/validation/validators/hpp-load-params-validator.js

@@ -0,0 +1,21 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateHppLoadParams = void 0;
+var ajv_1 = __importDefault(require("ajv"));
+var customer_json_1 = __importDefault(require("../schemas/customer.json"));
+var payment_intent_json_1 = __importDefault(require("../schemas/payment-intent.json"));
+var hpp_options_json_1 = __importDefault(require("../schemas/hpp-options.json"));
+var hpp_load_params_json_1 = __importDefault(require("../schemas/hpp-load-params.json"));
+var validator = new ajv_1.default({
+    allErrors: true,
+    jsonPointers: true,
+})
+    .addSchema(customer_json_1.default)
+    .addSchema(payment_intent_json_1.default)
+    .addSchema(hpp_options_json_1.default)
+    .compile(hpp_load_params_json_1.default);
+exports.validateHppLoadParams = validator;
+//# sourceMappingURL=hpp-load-params-validator.js.map

package/dist/src/validation/validators/hpp-load-params-validator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpp-load-params-validator.js","sourceRoot":"","sources":["../../../../src/validation/validators/hpp-load-params-validator.ts"],"names":[],"mappings":";;;;;;AAAA,4CAAqB;AACrB,2EAAqD;AACrD,uFAAgE;AAChE,iFAA0D;AAC1D,yFAAiE;AAEjE,IAAM,SAAS,GAAG,IAAI,aAAG,CAAC;IACxB,SAAS,EAAE,IAAI;IACf,YAAY,EAAE,IAAI;CACnB,CAAC;KACC,SAAS,CAAC,uBAAc,CAAC;KACzB,SAAS,CAAC,6BAAmB,CAAC;KAC9B,SAAS,CAAC,0BAAgB,CAAC;KAC3B,OAAO,CAAC,8BAAmB,CAAC,CAAA;AAGhB,0CAAqB"}

package/dist/src/validation/validators/hpp-load-params-validator.test.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var hpp_load_params_validator_1 = require("./hpp-load-params-validator");
+var customer = {
+    firstName: 'John',
+    lastName: 'Doe',
+    email: 'john.doe@gmail.com',
+    address: '123 Sesame St.',
+    city: 'Sin City',
+    postcode: '2000',
+    state: 'NSW',
+    country: 'Australia'
+};
+var paymentIntent = {
+    payment: {
+        amount: 100,
+        currency: 'AUD',
+        reference: 'ref123',
+        hide_card_holder: false,
+    },
+    verification: 'ver123'
+};
+var input;
+beforeEach(function () {
+    input = {
+        containerId: 'fz-iframe',
+        customer: customer,
+        paymentIntent: paymentIntent,
+        options: {
+            tokenizeOnly: false
+        }
+    };
+});
+describe('hppLoadParamsValidator', function () {
+    describe('hppOptions: tokenizeOnly', function () {
+        it('does not require customer object when true', function () {
+            delete input.customer;
+            input.options.tokenizeOnly = true;
+            var valid = (0, hpp_load_params_validator_1.validateHppLoadParams)(input);
+            expect(valid).toEqual(true);
+        });
+        it('require customer object when false', function () {
+            input.customer = customer;
+            input.options.tokenizeOnly = false;
+            var valid = (0, hpp_load_params_validator_1.validateHppLoadParams)(input);
+            expect(valid).toEqual(true);
+        });
+        it('require customer object when not set', function () {
+            input.customer = customer;
+            delete input.options.tokenizeOnly;
+            var valid = (0, hpp_load_params_validator_1.validateHppLoadParams)(input);
+            expect(valid).toEqual(true);
+        });
+    });
+});
+//# sourceMappingURL=hpp-load-params-validator.test.js.map

package/dist/src/validation/validators/hpp-load-params-validator.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpp-load-params-validator.test.js","sourceRoot":"","sources":["../../../../src/validation/validators/hpp-load-params-validator.test.ts"],"names":[],"mappings":";;AAAA,yEAAmE;AAGnE,IAAM,QAAQ,GAAG;IACf,SAAS,EAAE,MAAM;IACjB,QAAQ,EAAE,KAAK;IACf,KAAK,EAAE,oBAAoB;IAC3B,OAAO,EAAE,gBAAgB;IACzB,IAAI,EAAE,UAAU;IAChB,QAAQ,EAAE,MAAM;IAChB,KAAK,EAAE,KAAK;IACZ,OAAO,EAAE,WAAW;CACrB,CAAA;AAED,IAAM,aAAa,GAAG;IACpB,OAAO,EAAE;QACP,MAAM,EAAE,GAAG;QACX,QAAQ,EAAE,KAAK;QACf,SAAS,EAAE,QAAQ;QACnB,gBAAgB,EAAE,KAAK;KACxB;IACD,YAAY,EAAE,QAAQ;CACvB,CAAA;AAED,IAAI,KAAoB,CAAA;AAExB,UAAU,CAAC;IACT,KAAK,GAAG;QACN,WAAW,EAAE,WAAW;QACxB,QAAQ,UAAA;QACR,aAAa,eAAA;QACb,OAAO,EAAE;YACP,YAAY,EAAE,KAAK;SACpB;KACF,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,QAAQ,CAAC,wBAAwB,EAAE;IACjC,QAAQ,CAAC,0BAA0B,EAAE;QACnC,EAAE,CAAC,4CAA4C,EAAE;YAC/C,OAAO,KAAK,CAAC,QAAQ,CAAA;YACrB,KAAK,CAAC,OAAO,CAAC,YAAY,GAAG,IAAI,CAAA;YAEjC,IAAM,KAAK,GAAG,IAAA,iDAAqB,EAAC,KAAK,CAAC,CAAA;YAC1C,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;QAC7B,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,oCAAoC,EAAE;YACvC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAA;YACzB,KAAK,CAAC,OAAO,CAAC,YAAY,GAAG,KAAK,CAAA;YAElC,IAAM,KAAK,GAAG,IAAA,iDAAqB,EAAC,KAAK,CAAC,CAAA;YAC1C,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;QAC7B,CAAC,CAAC,CAAA;QAEF,EAAE,CAAC,sCAAsC,EAAE;YACzC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAA;YACzB,OAAO,KAAK,CAAC,OAAO,CAAC,YAAY,CAAA;YAEjC,IAAM,KAAK,GAAG,IAAA,iDAAqB,EAAC,KAAK,CAAC,CAAA;YAC1C,MAAM,CAAC,KAAK,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;QAC7B,CAAC,CAAC,CAAA;IACJ,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA"}

package/dist/src/validation/validators/verify-card-params-validator.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateVerifyCardParams = void 0;
+var ajv_1 = __importDefault(require("ajv"));
+var customer_json_1 = __importDefault(require("../schemas/customer.json"));
+var payment_intent_json_1 = __importDefault(require("../schemas/payment-intent.json"));
+var payment_method_json_1 = __importDefault(require("../schemas/payment-method.json"));
+var verify_card_options_json_1 = __importDefault(require("../schemas/verify-card-options.json"));
+var verify_card_params_json_1 = __importDefault(require("../schemas/verify-card-params.json"));
+var validator = new ajv_1.default({
+    allErrors: true,
+    jsonPointers: true,
+})
+    .addSchema(customer_json_1.default)
+    .addSchema(payment_intent_json_1.default)
+    .addSchema(payment_method_json_1.default)
+    .addSchema(verify_card_options_json_1.default)
+    .compile(verify_card_params_json_1.default);
+exports.validateVerifyCardParams = validator;
+//# sourceMappingURL=verify-card-params-validator.js.map

package/dist/src/validation/validators/verify-card-params-validator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"verify-card-params-validator.js","sourceRoot":"","sources":["../../../../src/validation/validators/verify-card-params-validator.ts"],"names":[],"mappings":";;;;;;AAAA,4CAAqB;AAErB,2EAAqD;AACrD,uFAAgE;AAChE,uFAAgE;AAChE,iGAAyE;AACzE,+FAAuE;AAEvE,IAAM,SAAS,GAAG,IAAI,aAAG,CAAC;IACxB,SAAS,EAAE,IAAI;IACf,YAAY,EAAE,IAAI;CACnB,CAAC;KACD,SAAS,CAAC,uBAAc,CAAC;KACzB,SAAS,CAAC,6BAAmB,CAAC;KAC9B,SAAS,CAAC,6BAAmB,CAAC;KAC9B,SAAS,CAAC,kCAAuB,CAAC;KAClC,OAAO,CAAC,iCAAsB,CAAC,CAAA;AAGlB,6CAAwB"}

package/dist/src/version.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.version = void 0;
+exports.version = '1.5.4';
+//# sourceMappingURL=version.js.map

package/dist/src/version.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"version.js","sourceRoot":"","sources":["../../src/version.ts"],"names":[],"mappings":";;;AAAa,QAAA,OAAO,GAAG,OAAO,CAAC"}

package/dist/tests/helpers/api-gateway-mock.js

@@ -0,0 +1,37 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mockCustomRequest = exports.mockRequest = void 0;
+var nock_1 = __importDefault(require("nock"));
+var env_1 = __importDefault(require("../../src/shared/env"));
+var apiGatewayUrl = env_1.default.sandbox.apiUrl;
+var mockRequest = function (config) {
+    (0, nock_1.default)(apiGatewayUrl)
+        .defaultReplyHeaders({
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Headers': 'Authorization, FZ-SDK-Version, fz-merchant-username',
+        "Content-Type": "application:json"
+    })
+        .options(config.request.path)
+        .reply(200, null)
+        .post(config.request.path, config.request.body)
+        .reply(config.response.status, config.response.body);
+};
+exports.mockRequest = mockRequest;
+var mockCustomRequest = function (config) {
+    (0, nock_1.default)(apiGatewayUrl)
+        .log(console.log)
+        .defaultReplyHeaders({
+        'Access-Control-Allow-Origin': '*',
+        'Access-Control-Allow-Headers': 'Authorization',
+        "Content-Type": "application:json"
+    })
+        .options(config.request.path)
+        .reply(200, null)
+        .intercept(config.request.path, config.request.action, config.request.body)
+        .reply(config.response.status, config.response.body);
+};
+exports.mockCustomRequest = mockCustomRequest;
+//# sourceMappingURL=api-gateway-mock.js.map

package/dist/tests/helpers/api-gateway-mock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"api-gateway-mock.js","sourceRoot":"","sources":["../../../tests/helpers/api-gateway-mock.ts"],"names":[],"mappings":";;;;;;AAAA,8CAAuB;AACvB,6DAAsC;AAEtC,IAAM,aAAa,GAAG,aAAG,CAAC,OAAO,CAAC,MAAM,CAAA;AAcxC,IAAM,WAAW,GAAG,UAAC,MAAyB;IAC5C,IAAA,cAAI,EAAC,aAAa,CAAC;SAClB,mBAAmB,CAAC;QACnB,6BAA6B,EAAE,GAAG;QAClC,8BAA8B,EAAE,qDAAqD;QACrF,cAAc,EAAE,kBAAkB;KACnC,CAAC;SACD,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC;SAC5B,KAAK,CAAC,GAAG,EAAE,IAAI,CAAC;SAChB,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC;SAC9C,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;AACtD,CAAC,CAAA;AAiBC,kCAAW;AAfb,IAAM,iBAAiB,GAAG,UAAC,MAAyB;IAClD,IAAA,cAAI,EAAC,aAAa,CAAC;SAClB,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC;SAChB,mBAAmB,CAAC;QACnB,6BAA6B,EAAE,GAAG;QAClC,8BAA8B,EAAE,eAAe;QAC/C,cAAc,EAAE,kBAAkB;KACnC,CAAC;SACD,OAAO,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC;SAC5B,KAAK,CAAC,GAAG,EAAE,IAAI,CAAC;SAChB,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,EAAE,MAAM,CAAC,OAAO,CAAC,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC;SAC1E,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA;AACtD,CAAC,CAAA;AAIC,8CAAiB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fat-zebra/sdk",
-  "version": "1.5.4",
+  "version": "1.5.5",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -23,6 +23,10 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/ajv": "^1.0.0",
     "@types/axios": "^0.14.0",
     "@types/dotenv": "^8.2.0",
@@ -36,16 +40,21 @@
     "dotenv-webpack": "^8.0.0",
     "ejs": "^3.0.1",
     "html-webpack-plugin": "^5.3.1",
+    "inquirer": "^10.0.1",
     "jest": "^29.6.1",
     "jest-environment-jsdom": "^29.6.1",
     "jest-localstorage-mock": "^2.4.22",
     "jsdom": "^16.2.1",
     "jsonwebtoken": "^9.0.0",
     "nock": "^12.0.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "simple-git": "^3.25.0",
     "source-map-loader": "^0.2.4",
     "terser-webpack-plugin": "^4.1.0",
     "ts-jest": "^29.1.1",
     "ts-loader": "^9.4.4",
+    "ts-node": "^10.9.2",
     "typescript": "^5.1.6",
     "webpack": "^5.76.0",
     "webpack-cli": "^4.10.0",
@@ -55,9 +64,6 @@
     "ajv": "^6.12.3",
     "axios": "^1.6.4",
     "custom-event-polyfill": "^1.0.7",
-    "inquirer": "^10.0.1",
-    "simple-git": "^3.25.0",
-    "ts-node": "^10.9.2",
     "ts-polyfill": "^3.8.2",
     "url-template": "^3.1.0"
   },
@@ -65,4 +71,4 @@
     "react": ">= 16",
     "react-dom": ">= 16"
   }
-}
+}

package/tsconfig.json

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "outDir": "./dist/",
     "sourceMap": true,
+    "skipLibCheck": true,
     "noImplicitAny": true,
     "module": "commonjs",
     "esModuleInterop": true,

package/.idea/fatzebra-js.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/fatzebra-js.iml" filepath="$PROJECT_DIR$/.idea/fatzebra-js.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="" vcs="Git" />
-  </component>
-</project>

package/dist/applepay/applepaymanager.d.ts

@@ -1,28 +0,0 @@
-import { PaymentRequest } from './clients/apple-pay-client';
-import * as payNow from './clients/paynow-client';
-import { PostMessage } from '../shared/post-message-client';
-declare class ApplePayManager {
-    private merchantId;
-    private canMakePayments;
-    private iframe;
-    private applePaySession;
-    private postMessageClient;
-    private fzPayNowDomain;
-    private username?;
-    private token?;
-    constructor(config: {
-        iframe: HTMLIFrameElement;
-        fzPayNowDomain: string;
-        username?: string;
-        token?: string;
-    });
-    initialize(): Promise<void>;
-    checkApplePayEligibility(): void;
-    notifyApplePayEligibility(): void;
-    registerEventListener(): Promise<void>;
-    purchase(request: PaymentRequest): Promise<void>;
-    extractApplePaymentRequestParams(payload: any): PaymentRequest;
-    extractPayNowPaymentAttributes(payload: any): payNow.PaymentAttributes;
-    sendMessage(payload: PostMessage): void;
-}
-export default ApplePayManager;

package/dist/applepay/applepaymanager.js

@@ -1,115 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-import { createSession, getEligibilty, } from './clients/apple-pay-client';
-import * as payNow from './clients/paynow-client';
-import { PostMessageClient } from '../shared/post-message-client';
-// import * as process from "process";
-const channel = 'applepay';
-// const fzPayNowDomain = process.env.PAYNOW_BASE_URL
-// do the domain handling stuff better
-const paynowDomain = 'https://paynow.test';
-const merchantSessionPath = '/v2/apple_pay/payment_session';
-const purchaseTokenPath = '/v2/apple_pay/token';
-class ApplePayManager {
-    constructor(config) {
-        // if (!config.fzPayNowDomain) {
-        //   console.log('hitting i here')
-        //   this.fzPayNowDomain = process?.env?.PAYNOW_BASE_URL;
-        // } else {
-        this.fzPayNowDomain = config.fzPayNowDomain;
-        this.username = config.username;
-        this.token = config.token;
-        // }
-        this.iframe = config.iframe;
-        this.postMessageClient = new PostMessageClient({
-            channel: 'applepay',
-            target: this.iframe
-        });
-        this.initialize();
-    }
-    initialize() {
-        return __awaiter(this, void 0, void 0, function* () {
-            yield this.registerEventListener();
-            this.checkApplePayEligibility();
-            this.notifyApplePayEligibility();
-        });
-    }
-    checkApplePayEligibility() {
-        if (getEligibilty()) {
-            this.canMakePayments = true;
-        }
-    }
-    notifyApplePayEligibility() {
-        const message = {
-            channel,
-            subject: 'eligibility',
-            data: {
-                canMakePayments: this.canMakePayments
-            }
-        };
-        this.postMessageClient.send(message);
-    }
-    registerEventListener() {
-        return new Promise((resolve, reject) => {
-            this.postMessageClient.setEventListeners({
-                'paymentrequest': (data) => __awaiter(this, void 0, void 0, function* () {
-                    yield this.purchase(data);
-                })
-            });
-            resolve();
-        });
-    }
-    purchase(request) {
-        return __awaiter(this, void 0, void 0, function* () {
-            const applePayPaymentRequest = this.extractApplePaymentRequestParams(request);
-            const payNowPaymentAttributes = this.extractPayNowPaymentAttributes(request);
-            this.applePaySession = yield createSession(applePayPaymentRequest);
-            this.applePaySession.onvalidatemerchant = (event) => __awaiter(this, void 0, void 0, function* () {
-                let merchantSession;
-                try {
-                    merchantSession = yield payNow.getMerchantSession(event.validationURL, Object.assign(Object.assign({}, payNowPaymentAttributes), { merchant: this.username, domain_name: window.location.hostname, display_name: this.username }), `${paynowDomain}${merchantSessionPath}`, this.username, this.token);
-                }
-                catch (e) {
-                    console.log('Unable to establish new merchant session');
-                    return;
-                }
-                this.applePaySession.completeMerchantValidation(merchantSession);
-            });
-            this.applePaySession.onpaymentauthorized = (event) => __awaiter(this, void 0, void 0, function* () {
-                try {
-                    yield payNow.authorizePayment(Object.assign(Object.assign({}, payNowPaymentAttributes), { merchant: this.username, token: event.payment.token }), `${paynowDomain}${purchaseTokenPath}`);
-                    this.applePaySession.completePayment(window.ApplePaySession.STATUS_SUCCESS);
-                }
-                catch (e) {
-                    this.applePaySession.completePayment(window.ApplePaySession.STATUS_FAILURE);
-                }
-            });
-            this.applePaySession.begin();
-        });
-    }
-    extractApplePaymentRequestParams(payload) {
-        const { countryCode, currencyCode, merchantCapabilities, supportedNetworks, total, } = payload;
-        return {
-            countryCode,
-            currencyCode,
-            merchantCapabilities,
-            supportedNetworks,
-            total,
-        };
-    }
-    extractPayNowPaymentAttributes(payload) {
-        const { paymentAttributes } = payload;
-        return paymentAttributes;
-    }
-    sendMessage(payload) {
-        this.iframe.contentWindow.postMessage(payload, this.fzPayNowDomain);
-    }
-}
-export default ApplePayManager;

package/dist/fatzebra.css

@@ -1,91 +0,0 @@
-.checkout-button-wrapper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 200px;
-}
-
-.iframe-checkout {
-    flex: 1;
-    border: none;
-    width: 100%;
-    height: 100%;
-    min-height: 0;
-    overflow: auto;
-    -webkit-overflow-scrolling: touch;
-}
-
-.iframe-foreground,
-.iframe-background {
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    flex-direction: column;
-}
-
-.iframe-foreground,
-.iframe-background {
-    position: fixed;
-}
-
-.iframe-foreground {
-    z-index: -1;
-}
-
-.iframe-background {
-    background: rgba(0, 0, 0, 0.5);
-}
-
-.iframe-foreground {
-    flex-grow: 1;
-    top: auto;
-    width: 100%;
-    max-width: 480px;
-    height: 80vh;
-    background-color: #ffffff;
-    border-radius: 25px 25px 0 0;
-}
-
-.slide-in .iframe-foreground {
-    transform: translateY(100vh);
-    transition: transform 0.4s ease, z-index 0.3s ease 0.4s;
-    z-index: -1;
-}
-
-.slide-in .iframe-background {
-    opacity: 0;
-    z-index: -1;
-    transition: opacity 0.3s ease, z-index 0.3s ease 0.3s;
-}
-
-.slide-in.show .iframe-foreground {
-    transform: none;
-    transition: transform 0.4s ease;
-    z-index: 100;
-}
-
-.slide-in.show .iframe-background {
-    opacity: 1;
-    z-index: 0;
-    transition: opacity 0.3s ease;
-}
-
-@media only screen and (min-width: 480px) {
-    .iframe-foreground {
-        margin: 0 auto;
-    }
-}
-
-@media only screen and (min-width: 768px) {
-    .iframe-foreground {
-        margin: 0;
-        width: 400px;
-        height: 100vh;
-        left: 0;
-    }
-
-    .slide-in .iframe-foreground {
-        transform: translateX(-400px);
-    }
-}