@wise/dynamic-flow-client 3.11.3 → 3.11.4-experiment-node20-aa45bc2

package/build/revamp/stories/dev-tools/RefreshOnChange.with.PersistAsync.story.js

@@ -0,0 +1,1004 @@
+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());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { action } from '@storybook/addon-actions';
+import { getMockHttpClient } from '../../../test-utils';
+import { abortableDelay, respondWith } from '../../../test-utils/fetch-utils';
+import DynamicFlowWise from '../../DynamicFlowWise';
+var getRespondWithDelay = function (delayMs) { return function (_, init) { return __awaiter(void 0, void 0, void 0, function () {
+    var _a;
+    return __generator(this, function (_b) {
+        switch (_b.label) {
+            case 0: return [4 /*yield*/, abortableDelay(delayMs, (_a = init === null || init === void 0 ? void 0 : init.signal) !== null && _a !== void 0 ? _a : null)];
+            case 1:
+                _b.sent();
+                return [2 /*return*/, respondWith(refreshedStep)];
+        }
+    });
+}); }; };
+var httpClient = getMockHttpClient({
+    '/refresh': getRespondWithDelay(500),
+    '/persist': function () { return __awaiter(void 0, void 0, void 0, function () { return __generator(this, function (_a) {
+        return [2 /*return*/, respondWith({ cardToken: 'X_njjb1uoi0j4jrqgr1pn69mtqrb' })];
+    }); }); },
+});
+export default {
+    component: DynamicFlowWise,
+    title: 'Revamp/Features/Refresh On Change with Persist Async',
+    parameters: {
+        chromatic: { disableSnapshot: true },
+    },
+};
+export function RefreshOnChange() {
+    return renderWithStep(initialStep);
+}
+var renderWithStep = function (step) { return (_jsx(DynamicFlowWise, { flowId: "new-df-flow-id", httpClient: function (input, init) { return __awaiter(void 0, void 0, void 0, function () {
+        return __generator(this, function (_a) {
+            action('httpClient')(input, init === null || init === void 0 ? void 0 : init.body);
+            return [2 /*return*/, httpClient(input, init)];
+        });
+    }); }, initialStep: step, onCompletion: action('onCompletion'), onEvent: action('onEvent'), onError: action('onEvent'), onLog: action('onLog') })); };
+var initialStep = {
+    key: 'account',
+    type: 'form',
+    title: 'Enter their account details',
+    actions: [
+        {
+            title: 'Confirm',
+            url: '/v2/contacts',
+            type: 'primary',
+            method: 'POST',
+            $id: 'submit',
+        },
+    ],
+    schemas: [
+        {
+            allOf: [
+                {
+                    type: 'object',
+                    displayOrder: ['currency'],
+                    properties: {
+                        currency: {
+                            title: 'Currency',
+                            type: 'string',
+                            analyticsId: 'currency-select',
+                            oneOf: [
+                                {
+                                    title: 'EUR',
+                                    analyticsId: 'EUR',
+                                    icon: { name: 'flag-eur', type: 'icon' },
+                                    description: 'Euro',
+                                    const: 'EUR',
+                                },
+                                {
+                                    title: 'GBP',
+                                    analyticsId: 'GBP',
+                                    icon: { name: 'flag-gbp', type: 'icon' },
+                                    description: 'British pound',
+                                    const: 'GBP',
+                                },
+                                {
+                                    title: 'USD',
+                                    analyticsId: 'USD',
+                                    icon: { name: 'flag-usd', type: 'icon' },
+                                    description: 'United States dollar',
+                                    const: 'USD',
+                                },
+                            ],
+                            default: 'USD',
+                        },
+                    },
+                    required: ['currency', 'legalEntityType'],
+                },
+                {
+                    title: 'Bank details',
+                    analyticsId: 'recipient-type',
+                    oneOf: [
+                        {
+                            title: 'ACH',
+                            type: 'object',
+                            analyticsId: 'Aba',
+                            icon: { name: 'bank', type: 'icon' },
+                            displayOrder: ['name', 'ownedByCustomer', 'details', 'address', 'type'],
+                            properties: {
+                                name: {
+                                    type: 'object',
+                                    displayOrder: ['fullName'],
+                                    properties: {
+                                        fullName: {
+                                            title: 'Full name of the account holder',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['fullName'],
+                                },
+                                ownedByCustomer: {
+                                    title: 'My own account',
+                                    type: 'boolean',
+                                    analyticsId: 'My own account',
+                                    hidden: true,
+                                    const: false,
+                                },
+                                details: {
+                                    type: 'object',
+                                    displayOrder: ['abartn', 'accountNumber', 'accountType'],
+                                    properties: {
+                                        abartn: {
+                                            title: 'ACH routing number',
+                                            type: 'string',
+                                            placeholder: '020123456',
+                                            refreshFormOnChange: true,
+                                            format: 'numeric',
+                                        },
+                                        accountNumber: {
+                                            title: 'Account number',
+                                            type: 'string',
+                                            placeholder: '12345678',
+                                            refreshFormOnChange: true,
+                                            format: 'numeric',
+                                        },
+                                        accountType: {
+                                            title: 'Account type',
+                                            type: 'string',
+                                            oneOf: [
+                                                { title: 'Checking', const: 'CHECKING' },
+                                                { title: 'Savings', const: 'SAVINGS' },
+                                            ],
+                                        },
+                                    },
+                                    required: ['abartn', 'accountNumber', 'accountType'],
+                                },
+                                address: {
+                                    title: 'Recipient address',
+                                    type: 'object',
+                                    displayOrder: ['country', 'city', 'firstLine', 'postCode'],
+                                    properties: {
+                                        country: {
+                                            title: 'Country',
+                                            type: 'string',
+                                            placeholder: 'Choose a country',
+                                            oneOf: [
+                                                { title: 'United States', const: 'US' },
+                                                { title: 'United Kingdom', const: 'GB' },
+                                            ],
+                                            refreshFormOnChange: true,
+                                        },
+                                        city: {
+                                            title: 'City',
+                                            type: 'string',
+                                        },
+                                        firstLine: {
+                                            title: 'Recipient address',
+                                            type: 'string',
+                                        },
+                                        postCode: {
+                                            title: 'Post code',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['country', 'city', 'firstLine', 'postCode'],
+                                },
+                                type: {
+                                    title: 'Type',
+                                    type: 'string',
+                                    analyticsId: 'Type',
+                                    hidden: true,
+                                    const: 'Aba',
+                                },
+                            },
+                            required: ['type', 'address', 'name', 'details'],
+                        },
+                        {
+                            title: 'Wire',
+                            type: 'object',
+                            analyticsId: 'FedWireLocal',
+                            icon: { name: 'bank', type: 'icon' },
+                            displayOrder: ['name', 'ownedByCustomer', 'details', 'address', 'type'],
+                            properties: {
+                                name: {
+                                    type: 'object',
+                                    displayOrder: ['fullName'],
+                                    properties: {
+                                        fullName: {
+                                            title: 'Full name of the account holder',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['fullName'],
+                                },
+                                ownedByCustomer: {
+                                    title: 'My own account',
+                                    type: 'boolean',
+                                    analyticsId: 'My own account',
+                                    hidden: true,
+                                    const: false,
+                                },
+                                details: {
+                                    type: 'object',
+                                    displayOrder: ['abartn', 'accountNumber', 'accountType'],
+                                    properties: {
+                                        abartn: {
+                                            title: 'Fedwire routing number',
+                                            type: 'string',
+                                            placeholder: '020123456',
+                                        },
+                                        accountNumber: {
+                                            title: 'Account number',
+                                            type: 'string',
+                                            placeholder: '12345678',
+                                            format: 'numeric',
+                                        },
+                                        accountType: {
+                                            title: 'Account type',
+                                            type: 'string',
+                                            oneOf: [
+                                                { title: 'Checking', const: 'CHECKING' },
+                                                { title: 'Savings', const: 'SAVINGS' },
+                                            ],
+                                        },
+                                    },
+                                    required: ['abartn', 'accountNumber', 'accountType'],
+                                },
+                                address: {
+                                    title: 'Recipient address',
+                                    type: 'object',
+                                    displayOrder: ['country', 'city', 'firstLine', 'postCode'],
+                                    properties: {
+                                        country: {
+                                            title: 'Country',
+                                            type: 'string',
+                                            placeholder: 'Choose a country',
+                                            oneOf: [
+                                                { title: 'United States', const: 'US' },
+                                                { title: 'United Kingdom', const: 'GB' },
+                                            ],
+                                            refreshFormOnChange: true,
+                                        },
+                                        city: {
+                                            title: 'City',
+                                            type: 'string',
+                                        },
+                                        firstLine: {
+                                            title: 'Recipient address',
+                                            type: 'string',
+                                        },
+                                        postCode: {
+                                            title: 'Post code',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['country', 'city', 'firstLine', 'postCode'],
+                                },
+                                type: {
+                                    title: 'Type',
+                                    type: 'string',
+                                    analyticsId: 'Type',
+                                    hidden: true,
+                                    const: 'FedWireLocal',
+                                },
+                            },
+                            required: ['type', 'address', 'name', 'details'],
+                        },
+                        {
+                            title: 'SWIFT',
+                            type: 'object',
+                            analyticsId: 'SwiftCode',
+                            icon: { name: 'bank', type: 'icon' },
+                            displayOrder: ['name', 'ownedByCustomer', 'details', 'address', 'type'],
+                            properties: {
+                                name: {
+                                    type: 'object',
+                                    displayOrder: ['fullName'],
+                                    properties: {
+                                        fullName: {
+                                            title: 'Full name of the account holder',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['fullName'],
+                                },
+                                ownedByCustomer: {
+                                    title: 'My own account',
+                                    type: 'boolean',
+                                    analyticsId: 'My own account',
+                                    hidden: true,
+                                    const: false,
+                                },
+                                details: {
+                                    type: 'object',
+                                    displayOrder: ['bic', 'accountNumber'],
+                                    properties: {
+                                        bic: {
+                                            title: 'SWIFT / BIC code',
+                                            type: 'string',
+                                            placeholder: 'BUKBGB22',
+                                        },
+                                        accountNumber: {
+                                            title: 'IBAN / Account number',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['bic', 'accountNumber'],
+                                },
+                                address: {
+                                    title: 'Recipient address',
+                                    type: 'object',
+                                    displayOrder: ['country', 'city', 'firstLine', 'postCode'],
+                                    properties: {
+                                        country: {
+                                            title: 'Country',
+                                            type: 'string',
+                                            placeholder: 'Choose a country',
+                                            oneOf: [
+                                                { title: 'United States', const: 'US' },
+                                                { title: 'United Kingdom', const: 'GB' },
+                                            ],
+                                            refreshFormOnChange: true,
+                                        },
+                                        city: {
+                                            title: 'City',
+                                            type: 'string',
+                                        },
+                                        firstLine: {
+                                            title: 'Recipient address',
+                                            type: 'string',
+                                        },
+                                        postCode: {
+                                            title: 'Post code',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['country', 'city', 'firstLine', 'postCode'],
+                                },
+                                type: {
+                                    title: 'Type',
+                                    type: 'string',
+                                    analyticsId: 'Type',
+                                    hidden: true,
+                                    const: 'SwiftCode',
+                                },
+                            },
+                            required: ['type', 'address', 'name', 'details'],
+                        },
+                        {
+                            title: 'US card',
+                            type: 'object',
+                            analyticsId: 'Card',
+                            image: {
+                                url: 'https://wise.com/public-resources/assets/recipients/unionpay.png',
+                                type: 'image',
+                            },
+                            displayOrder: ['name', 'ownedByCustomer', 'details', 'address', 'type'],
+                            properties: {
+                                name: {
+                                    type: 'object',
+                                    displayOrder: ['fullName'],
+                                    properties: {
+                                        fullName: {
+                                            title: 'Full name of the account holder',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['fullName'],
+                                },
+                                ownedByCustomer: {
+                                    title: 'My own account',
+                                    type: 'boolean',
+                                    analyticsId: 'My own account',
+                                    hidden: true,
+                                    const: false,
+                                },
+                                details: {
+                                    type: 'object',
+                                    displayOrder: ['expiryMonth', 'expiryYear', 'cardToken'],
+                                    properties: {
+                                        expiryMonth: {
+                                            title: 'Expiry month',
+                                            type: 'string',
+                                            hidden: true,
+                                            placeholder: '08',
+                                            format: 'numeric',
+                                        },
+                                        expiryYear: {
+                                            title: 'Expiry year',
+                                            type: 'string',
+                                            hidden: true,
+                                            placeholder: '2022',
+                                            format: 'numeric',
+                                        },
+                                        cardToken: {
+                                            title: 'Card token',
+                                            type: 'string',
+                                            hidden: true,
+                                            persistAsync: {
+                                                method: 'POST',
+                                                url: '/persist',
+                                                param: 'cardNumber',
+                                                idProperty: 'cardToken',
+                                                schema: {
+                                                    title: 'Card number',
+                                                    type: 'string',
+                                                    placeholder: '1234567890123456',
+                                                    format: 'numeric',
+                                                },
+                                            },
+                                        },
+                                    },
+                                    required: ['cardToken'],
+                                },
+                                address: {
+                                    title: 'Recipient address',
+                                    type: 'object',
+                                    displayOrder: ['country', 'city', 'firstLine'],
+                                    properties: {
+                                        country: {
+                                            title: 'Country',
+                                            type: 'string',
+                                            placeholder: 'Choose a country',
+                                            oneOf: [
+                                                { title: 'United States', const: 'US' },
+                                                { title: 'United Kingdom', const: 'GB' },
+                                            ],
+                                            refreshFormOnChange: true,
+                                        },
+                                        city: {
+                                            title: 'City',
+                                            type: 'string',
+                                        },
+                                        firstLine: {
+                                            title: 'Recipient address',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['country', 'city', 'firstLine'],
+                                },
+                                type: {
+                                    title: 'Type',
+                                    type: 'string',
+                                    analyticsId: 'Type',
+                                    hidden: true,
+                                    const: 'Card',
+                                },
+                            },
+                            required: ['type', 'address', 'name', 'details'],
+                        },
+                    ],
+                    control: 'tab',
+                    placeholder: 'Please select where you are sending to',
+                },
+            ],
+            $id: 'form',
+        },
+    ],
+    refreshFormUrl: '/refresh',
+    model: {
+        ownedByCustomer: false,
+        profileId: 14518756,
+        legalEntityType: 'PERSON',
+        name: {},
+        currency: 'USD',
+        details: {},
+    },
+    layout: [{ schemaId: 'form', type: 'form' }],
+};
+var refreshedStep = {
+    key: 'account',
+    type: 'form',
+    title: 'Enter their account details',
+    actions: [],
+    schemas: [
+        {
+            allOf: [
+                {
+                    type: 'object',
+                    displayOrder: ['profileId', 'currency', 'legalEntityType'],
+                    properties: {
+                        profileId: {
+                            title: 'Profile ID (optional)',
+                            type: 'number',
+                            analyticsId: 'Profile ID (optional)',
+                            hidden: true,
+                            const: 14518756,
+                        },
+                        currency: {
+                            title: 'Currency',
+                            type: 'string',
+                            analyticsId: 'currency-select',
+                            oneOf: [
+                                {
+                                    title: 'EUR',
+                                    analyticsId: 'EUR',
+                                    icon: { name: 'flag-eur', type: 'icon' },
+                                    description: 'Euro',
+                                    const: 'EUR',
+                                },
+                                {
+                                    title: 'GBP',
+                                    analyticsId: 'GBP',
+                                    icon: { name: 'flag-gbp', type: 'icon' },
+                                    description: 'British pound',
+                                    const: 'GBP',
+                                },
+                                {
+                                    title: 'USD',
+                                    analyticsId: 'USD',
+                                    icon: { name: 'flag-usd', type: 'icon' },
+                                    description: 'United States dollar',
+                                    const: 'USD',
+                                },
+                            ],
+                            default: 'USD',
+                        },
+                        legalEntityType: {
+                            title: 'Select recipient type',
+                            type: 'string',
+                            analyticsId: 'Select recipient type',
+                            hidden: true,
+                            const: 'PERSON',
+                        },
+                    },
+                    required: ['currency', 'legalEntityType'],
+                },
+                {
+                    title: 'Bank details',
+                    analyticsId: 'recipient-type',
+                    oneOf: [
+                        {
+                            title: 'ACH',
+                            type: 'object',
+                            analyticsId: 'Aba',
+                            icon: { name: 'bank', type: 'icon' },
+                            displayOrder: ['name', 'ownedByCustomer', 'details', 'address', 'type'],
+                            properties: {
+                                name: {
+                                    type: 'object',
+                                    displayOrder: ['fullName'],
+                                    properties: {
+                                        fullName: {
+                                            title: 'Full name of the account holder',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['fullName'],
+                                },
+                                ownedByCustomer: {
+                                    title: 'My own account',
+                                    type: 'boolean',
+                                    analyticsId: 'My own account',
+                                    hidden: true,
+                                    const: false,
+                                },
+                                details: {
+                                    type: 'object',
+                                    displayOrder: ['abartn', 'accountNumber', 'accountType'],
+                                    properties: {
+                                        abartn: {
+                                            title: 'ACH routing number',
+                                            type: 'string',
+                                            placeholder: '020123456',
+                                            format: 'numeric',
+                                        },
+                                        accountNumber: {
+                                            title: 'Account number',
+                                            type: 'string',
+                                            placeholder: '12345678',
+                                            format: 'numeric',
+                                        },
+                                        accountType: {
+                                            title: 'Account type',
+                                            type: 'string',
+                                            oneOf: [
+                                                { title: 'Checking', const: 'CHECKING' },
+                                                { title: 'Savings', const: 'SAVINGS' },
+                                            ],
+                                        },
+                                    },
+                                    required: ['abartn', 'accountNumber', 'accountType'],
+                                },
+                                address: {
+                                    title: 'Recipient address',
+                                    type: 'object',
+                                    displayOrder: ['country', 'city', 'firstLine', 'state', 'postCode'],
+                                    properties: {
+                                        country: {
+                                            title: 'Country',
+                                            type: 'string',
+                                            placeholder: 'Choose a country',
+                                            oneOf: [
+                                                { title: 'United States', const: 'US' },
+                                                { title: 'United Kingdom', const: 'GB' },
+                                            ],
+                                            refreshFormOnChange: true,
+                                        },
+                                        city: {
+                                            title: 'City',
+                                            type: 'string',
+                                        },
+                                        firstLine: {
+                                            title: 'Recipient address',
+                                            type: 'string',
+                                        },
+                                        state: {
+                                            title: 'State',
+                                            type: 'string',
+                                            oneOf: [
+                                                { title: 'Alabama', const: 'AL' },
+                                                { title: 'Alaska', const: 'AK' },
+                                            ],
+                                        },
+                                        postCode: {
+                                            title: 'ZIP code',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['country', 'city', 'firstLine', 'state', 'postCode'],
+                                },
+                                type: {
+                                    title: 'Type',
+                                    type: 'string',
+                                    analyticsId: 'Type',
+                                    hidden: true,
+                                    const: 'Aba',
+                                },
+                            },
+                            required: ['type', 'address', 'name', 'details'],
+                        },
+                        {
+                            title: 'Wire',
+                            type: 'object',
+                            analyticsId: 'FedWireLocal',
+                            icon: { name: 'bank', type: 'icon' },
+                            displayOrder: ['name', 'ownedByCustomer', 'details', 'address', 'type'],
+                            properties: {
+                                name: {
+                                    type: 'object',
+                                    displayOrder: ['fullName'],
+                                    properties: {
+                                        fullName: {
+                                            title: 'Full name of the account holder',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['fullName'],
+                                },
+                                ownedByCustomer: {
+                                    title: 'My own account',
+                                    type: 'boolean',
+                                    analyticsId: 'My own account',
+                                    hidden: true,
+                                    const: false,
+                                },
+                                details: {
+                                    type: 'object',
+                                    displayOrder: ['abartn', 'accountNumber', 'accountType'],
+                                    properties: {
+                                        abartn: {
+                                            title: 'Fedwire routing number',
+                                            type: 'string',
+                                            placeholder: '020123456',
+                                            format: 'numeric',
+                                        },
+                                        accountNumber: {
+                                            title: 'Account number',
+                                            type: 'string',
+                                            placeholder: '12345678',
+                                            format: 'numeric',
+                                        },
+                                        accountType: {
+                                            title: 'Account type',
+                                            type: 'string',
+                                            oneOf: [
+                                                { title: 'Checking', const: 'CHECKING' },
+                                                { title: 'Savings', const: 'SAVINGS' },
+                                            ],
+                                        },
+                                    },
+                                    required: ['abartn', 'accountNumber', 'accountType'],
+                                },
+                                address: {
+                                    title: 'Recipient address',
+                                    type: 'object',
+                                    displayOrder: ['country', 'city', 'firstLine', 'state', 'postCode'],
+                                    properties: {
+                                        country: {
+                                            title: 'Country',
+                                            type: 'string',
+                                            placeholder: 'Choose a country',
+                                            oneOf: [
+                                                { title: 'United States', const: 'US' },
+                                                { title: 'United Kingdom', const: 'GB' },
+                                            ],
+                                            refreshFormOnChange: true,
+                                        },
+                                        city: {
+                                            title: 'City',
+                                            type: 'string',
+                                        },
+                                        firstLine: {
+                                            title: 'Recipient address',
+                                            type: 'string',
+                                        },
+                                        state: {
+                                            title: 'State',
+                                            type: 'string',
+                                            oneOf: [
+                                                { title: 'Alabama', const: 'AL' },
+                                                { title: 'Alaska', const: 'AK' },
+                                                { title: 'Arizona', const: 'AZ' },
+                                            ],
+                                        },
+                                        postCode: {
+                                            title: 'ZIP code',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['country', 'city', 'firstLine', 'state', 'postCode'],
+                                },
+                                type: {
+                                    title: 'Type',
+                                    type: 'string',
+                                    analyticsId: 'Type',
+                                    hidden: true,
+                                    const: 'FedWireLocal',
+                                },
+                            },
+                            required: ['type', 'address', 'name', 'details'],
+                        },
+                        {
+                            title: 'SWIFT',
+                            type: 'object',
+                            analyticsId: 'SwiftCode',
+                            icon: { name: 'bank', type: 'icon' },
+                            displayOrder: ['name', 'ownedByCustomer', 'details', 'address', 'type'],
+                            properties: {
+                                name: {
+                                    type: 'object',
+                                    displayOrder: ['fullName'],
+                                    properties: {
+                                        fullName: {
+                                            title: 'Full name of the account holder',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['fullName'],
+                                },
+                                ownedByCustomer: {
+                                    title: 'My own account',
+                                    type: 'boolean',
+                                    analyticsId: 'My own account',
+                                    hidden: true,
+                                    const: false,
+                                },
+                                details: {
+                                    type: 'object',
+                                    displayOrder: ['bic', 'accountNumber'],
+                                    properties: {
+                                        bic: {
+                                            title: 'SWIFT / BIC code',
+                                            type: 'string',
+                                            placeholder: 'BUKBGB22',
+                                        },
+                                        accountNumber: {
+                                            title: 'IBAN / Account number',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['bic', 'accountNumber'],
+                                },
+                                address: {
+                                    title: 'Recipient address',
+                                    type: 'object',
+                                    displayOrder: ['country', 'city', 'firstLine', 'state', 'postCode'],
+                                    properties: {
+                                        country: {
+                                            title: 'Country',
+                                            type: 'string',
+                                            placeholder: 'Choose a country',
+                                            oneOf: [
+                                                { title: 'United States', const: 'US' },
+                                                { title: 'United Kingdom', const: 'GB' },
+                                            ],
+                                            refreshFormOnChange: true,
+                                        },
+                                        city: {
+                                            title: 'City',
+                                            type: 'string',
+                                        },
+                                        firstLine: {
+                                            title: 'Recipient address',
+                                            type: 'string',
+                                        },
+                                        state: {
+                                            title: 'State',
+                                            type: 'string',
+                                            oneOf: [
+                                                { title: 'Alabama', const: 'AL' },
+                                                { title: 'Alaska', const: 'AK' },
+                                            ],
+                                        },
+                                        postCode: {
+                                            title: 'ZIP code',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['country', 'city', 'firstLine', 'state', 'postCode'],
+                                },
+                                type: {
+                                    title: 'Type',
+                                    type: 'string',
+                                    analyticsId: 'Type',
+                                    hidden: true,
+                                    const: 'SwiftCode',
+                                },
+                            },
+                            required: ['type', 'address', 'name', 'details'],
+                        },
+                        {
+                            title: 'US card',
+                            type: 'object',
+                            analyticsId: 'Card',
+                            image: {
+                                url: 'https://wise.com/public-resources/assets/recipients/unionpay.png',
+                                type: 'image',
+                            },
+                            displayOrder: ['name', 'ownedByCustomer', 'details', 'address', 'type'],
+                            properties: {
+                                name: {
+                                    type: 'object',
+                                    displayOrder: ['fullName'],
+                                    properties: {
+                                        fullName: {
+                                            title: 'Full name of the account holder',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['fullName'],
+                                },
+                                ownedByCustomer: {
+                                    title: 'My own account',
+                                    type: 'boolean',
+                                    analyticsId: 'My own account',
+                                    hidden: true,
+                                    const: false,
+                                },
+                                details: {
+                                    type: 'object',
+                                    displayOrder: ['expiryMonth', 'expiryYear', 'cardToken'],
+                                    properties: {
+                                        expiryMonth: {
+                                            title: 'Expiry month',
+                                            type: 'string',
+                                            hidden: true,
+                                            placeholder: '08',
+                                            format: 'numeric',
+                                        },
+                                        expiryYear: {
+                                            title: 'Expiry year',
+                                            type: 'string',
+                                            hidden: true,
+                                            placeholder: '2022',
+                                            format: 'numeric',
+                                        },
+                                        cardToken: {
+                                            title: 'Card token',
+                                            type: 'string',
+                                            hidden: true,
+                                            persistAsync: {
+                                                method: 'POST',
+                                                url: '/persist',
+                                                param: 'cardNumber',
+                                                idProperty: 'cardToken',
+                                                schema: {
+                                                    title: 'Card number',
+                                                    type: 'string',
+                                                    placeholder: '1234567890123456',
+                                                    format: 'numeric',
+                                                },
+                                            },
+                                        },
+                                    },
+                                    required: ['cardToken'],
+                                },
+                                address: {
+                                    title: 'Recipient address',
+                                    type: 'object',
+                                    displayOrder: ['country', 'city', 'firstLine', 'state', 'postCode'],
+                                    properties: {
+                                        country: {
+                                            title: 'Country',
+                                            type: 'string',
+                                            placeholder: 'Choose a country',
+                                            oneOf: [
+                                                { title: 'United States', const: 'US' },
+                                                { title: 'United Kingdom', const: 'GB' },
+                                            ],
+                                            refreshFormOnChange: true,
+                                        },
+                                        city: {
+                                            title: 'City',
+                                            type: 'string',
+                                        },
+                                        firstLine: {
+                                            title: 'Recipient address',
+                                            type: 'string',
+                                        },
+                                        state: {
+                                            title: 'State',
+                                            type: 'string',
+                                            oneOf: [
+                                                { title: 'Alabama', const: 'AL' },
+                                                { title: 'Alaska', const: 'AK' },
+                                            ],
+                                        },
+                                        postCode: {
+                                            title: 'ZIP code',
+                                            type: 'string',
+                                        },
+                                    },
+                                    required: ['country', 'city', 'firstLine', 'state', 'postCode'],
+                                },
+                                type: {
+                                    title: 'Type',
+                                    type: 'string',
+                                    analyticsId: 'Type',
+                                    hidden: true,
+                                    const: 'Card',
+                                },
+                            },
+                            required: ['type', 'address', 'name', 'details'],
+                        },
+                    ],
+                    control: 'tab',
+                    placeholder: 'Please select where you are sending to',
+                },
+            ],
+            $id: 'form',
+        },
+    ],
+    refreshFormUrl: '/refresh',
+    model: {
+        ownedByCustomer: false,
+        address: { country: 'US' },
+        profileId: 14518756,
+        legalEntityType: 'PERSON',
+        name: {},
+        currency: 'USD',
+        details: { cardToken: 'X_njjb1uoi0j4jrqgr1pn69mtqrb' },
+        type: 'Card',
+    },
+    layout: [{ schemaId: 'form', type: 'form' }],
+};