@justifi/webcomponents 4.0.5 → 4.0.6

package/dist/collection/components/business-info/business-info.js

@@ -0,0 +1,168 @@
+import { Host, h } from '@stencil/core';
+import { Api } from '../../api';
+import BusinessInfoSchema, { BusinessStructureOptions, BusinessTypeOptions } from './business-info-schema';
+/**
+ * @exportedPart label: Label for inputs
+ * @exportedPart input: The input fields
+ * @exportedPart input-invalid: Invalid state for inputfs
+ */
+export class BusinessInfo {
+  constructor() {
+    this.endpoint = 'entities/business';
+    this.authToken = undefined;
+    this.businessId = undefined;
+    this.businessInfoPrefillData = undefined;
+    this.businessInfo = {
+      legal_name: '',
+      website_url: '',
+      email: '',
+      phone: '',
+      doing_business_as: '',
+      business_type: '',
+      business_structure: '',
+      industry: '',
+      metadata: {}
+    };
+    this.businessInfoFieldsErrors = {};
+  }
+  componentDidMount() {
+    if (this.businessId) {
+      this.fetchBusinessInfo();
+    }
+  }
+  async fetchBusinessInfo() {
+    // fetch data and pre-fill form
+    this.businessInfoPrefillData = await Api(this.authToken).get(`${this.endpoint}/${this.businessId}`);
+  }
+  ;
+  async sendBusinessInfo(data) {
+    return Api(this.authToken).post(this.endpoint, data);
+  }
+  ;
+  setFormValue(event) {
+    const data = event.detail;
+    const businessInfoClone = Object.assign({}, this.businessInfo);
+    if (data.name) {
+      businessInfoClone[data.name] = data.value;
+      this.businessInfo = businessInfoClone;
+    }
+  }
+  async submit(event) {
+    event.preventDefault();
+    const newErrors = {};
+    let isValid = true;
+    try {
+      await BusinessInfoSchema.validate(this.businessInfo, { abortEarly: false });
+    }
+    catch (err) {
+      isValid = false;
+      err.inner.map((item) => {
+        newErrors[item.path] = item.message;
+      });
+    }
+    this.businessInfoFieldsErrors = newErrors;
+    if (!isValid)
+      return;
+    const response = await this.sendBusinessInfo(this.businessInfo);
+    return response;
+  }
+  ;
+  render() {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    return (h(Host, { exportparts: "label,input,input-invalid" }, h("h1", null, "Business Information"), h("form", { onSubmit: (event) => this.submit(event) }, h("div", { class: "row gy-3" }, h("div", { class: "col-12" }, h("text-input", { name: "legal_name", label: "Legal Name", defaultValue: (_a = this.businessInfoPrefillData) === null || _a === void 0 ? void 0 : _a.legal_name, error: this.businessInfoFieldsErrors.legal_name })), h("div", { class: "col-12" }, h("text-input", { name: "doing_business_as", label: "Doing Business As (DBA)", defaultValue: (_b = this.businessInfoPrefillData) === null || _b === void 0 ? void 0 : _b.doing_business_as, error: this.businessInfoFieldsErrors.doing_business_as })), h("div", { class: "col-12" }, h("select-input", { name: "business_type", label: "Business Type", options: BusinessTypeOptions, defaultValue: (_c = this.businessInfoPrefillData) === null || _c === void 0 ? void 0 : _c.business_type, error: this.businessInfoFieldsErrors.business_type })), h("div", { class: "col-12" }, h("select-input", { name: "business_structure", label: "Business Structure", options: BusinessStructureOptions, defaultValue: (_d = this.businessInfoPrefillData) === null || _d === void 0 ? void 0 : _d.business_structure, error: this.businessInfoFieldsErrors.business_structure })), h("div", { class: "col-12" }, h("text-input", { name: "industry", label: "Industry", defaultValue: (_e = this.businessInfoPrefillData) === null || _e === void 0 ? void 0 : _e.industry, error: this.businessInfoFieldsErrors.industry })), h("div", { class: "col-12" }, h("text-input", { name: "website_url", label: "Website URL", defaultValue: (_f = this.businessInfoPrefillData) === null || _f === void 0 ? void 0 : _f.website_url, error: this.businessInfoFieldsErrors.website_url })), h("div", { class: "col-12" }, h("text-input", { name: "email", label: "Email Address", defaultValue: (_g = this.businessInfoPrefillData) === null || _g === void 0 ? void 0 : _g.email, error: this.businessInfoFieldsErrors.email })), h("div", { class: "col-12" }, h("text-input", { name: "phone", label: "Phone", defaultValue: (_h = this.businessInfoPrefillData) === null || _h === void 0 ? void 0 : _h.phone, error: this.businessInfoFieldsErrors.phone })), h("div", { class: "col-12" }, h("button", { class: "btn btn-primary", type: "submit" }, "Submit"))))));
+  }
+  static get is() { return "justifi-business-info"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["business-info.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["business-info.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "authToken": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "auth-token",
+        "reflect": false
+      },
+      "businessId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "business-id",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "businessInfoPrefillData": {},
+      "businessInfo": {},
+      "businessInfoFieldsErrors": {}
+    };
+  }
+  static get methods() {
+    return {
+      "submit": {
+        "complexType": {
+          "signature": "(event: any) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "ValidationError": {
+              "location": "import",
+              "path": "yup"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
+  static get listeners() {
+    return [{
+        "name": "fieldReceivedInput",
+        "method": "setFormValue",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}
+//# sourceMappingURL=business-info.js.map

package/dist/collection/components/business-info/business-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"business-info.js","sourceRoot":"","sources":["../../../../src/components/business-info/business-info.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Listen, Method } from '@stencil/core';\nimport { ValidationError } from 'yup';\nimport { Api } from '../../api';\nimport BusinessInfoSchema, { BusinessStructureOptions, BusinessTypeOptions, IBusinessInfo } from './business-info-schema';\n\n\n/**\n * @exportedPart label: Label for inputs\n * @exportedPart input: The input fields\n * @exportedPart input-invalid: Invalid state for inputfs\n */\n@Component({\n  tag: 'justifi-business-info',\n  styleUrl: 'business-info.scss',\n  shadow: true,\n})\nexport class BusinessInfo {\n  @Prop() authToken: string;\n  @Prop() businessId?: string;\n  @State() businessInfoPrefillData: any;\n  @State() businessInfo: IBusinessInfo = {\n    legal_name: '',\n    website_url: '',\n    email: '',\n    phone: '',\n    doing_business_as: '',\n    business_type: '',\n    business_structure: '',\n    industry: '',\n    metadata: {}\n  };\n  @State() businessInfoFieldsErrors: any = {};\n\n  private endpoint: string = 'entities/business';\n\n  componentDidMount() {\n    if (this.businessId) {\n      this.fetchBusinessInfo();\n    }\n  }\n\n  async fetchBusinessInfo(): Promise<void> {\n    // fetch data and pre-fill form\n    this.businessInfoPrefillData = await Api(this.authToken).get(`${this.endpoint}/${this.businessId}`);\n  };\n\n  async sendBusinessInfo(data): Promise<void> {\n    return Api(this.authToken).post(this.endpoint, data);\n  };\n\n  @Listen('fieldReceivedInput')\n  setFormValue(event) {\n    const data = event.detail;\n    const businessInfoClone = { ...this.businessInfo };\n    if (data.name) {\n      businessInfoClone[data.name] = data.value;\n      this.businessInfo = businessInfoClone;\n    }\n  }\n\n  @Method()\n  async submit(event) {\n    event.preventDefault();\n\n    const newErrors = {};\n    let isValid: boolean = true;\n\n    try {\n      await BusinessInfoSchema.validate(this.businessInfo, { abortEarly: false });\n    } catch (err) {\n      isValid = false;\n      err.inner.map((item: ValidationError) => {\n        newErrors[item.path] = item.message;\n      });\n    }\n\n    this.businessInfoFieldsErrors = newErrors;\n\n    if (!isValid) return;\n\n    const response = await this.sendBusinessInfo(this.businessInfo);\n    return response;\n  };\n\n  render() {\n    return (\n      <Host exportparts=\"label,input,input-invalid\">\n        <h1>Business Information</h1>\n        <form onSubmit={(event) => this.submit(event)}>\n          <div class=\"row gy-3\">\n            <div class=\"col-12\">\n              <text-input\n                name=\"legal_name\"\n                label=\"Legal Name\"\n                defaultValue={this.businessInfoPrefillData?.legal_name}\n                error={this.businessInfoFieldsErrors.legal_name} />\n            </div>\n            <div class=\"col-12\">\n              <text-input\n                name=\"doing_business_as\"\n                label=\"Doing Business As (DBA)\"\n                defaultValue={this.businessInfoPrefillData?.doing_business_as}\n                error={this.businessInfoFieldsErrors.doing_business_as} />\n            </div>\n            <div class=\"col-12\">\n              <select-input\n                name=\"business_type\"\n                label=\"Business Type\"\n                options={BusinessTypeOptions}\n                defaultValue={this.businessInfoPrefillData?.business_type}\n                error={this.businessInfoFieldsErrors.business_type} />\n            </div>\n            <div class=\"col-12\">\n              <select-input\n                name=\"business_structure\"\n                label=\"Business Structure\"\n                options={BusinessStructureOptions}\n                defaultValue={this.businessInfoPrefillData?.business_structure}\n                error={this.businessInfoFieldsErrors.business_structure} />\n            </div>\n            <div class=\"col-12\">\n              <text-input\n                name=\"industry\"\n                label=\"Industry\"\n                defaultValue={this.businessInfoPrefillData?.industry}\n                error={this.businessInfoFieldsErrors.industry} />\n            </div>\n            <div class=\"col-12\">\n              <text-input\n                name=\"website_url\"\n                label=\"Website URL\"\n                defaultValue={this.businessInfoPrefillData?.website_url}\n                error={this.businessInfoFieldsErrors.website_url} />\n            </div>\n            <div class=\"col-12\">\n              <text-input\n                name=\"email\"\n                label=\"Email Address\"\n                defaultValue={this.businessInfoPrefillData?.email}\n                error={this.businessInfoFieldsErrors.email} />\n            </div>\n            <div class=\"col-12\">\n              <text-input\n                name=\"phone\"\n                label=\"Phone\"\n                defaultValue={this.businessInfoPrefillData?.phone}\n                error={this.businessInfoFieldsErrors.phone} />\n            </div>\n            <div class=\"col-12\">\n              <button\n                class=\"btn btn-primary\"\n                type=\"submit\">Submit</button>\n            </div>\n          </div>\n        </form>\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/card-form/card-form.js

@@ -230,3 +230,4 @@ export class CardForm {
       }];
   }
 }
+//# sourceMappingURL=card-form.js.map

package/dist/collection/components/card-form/card-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-form.js","sourceRoot":"","sources":["../../../../src/components/card-form/card-form.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,EAAgB,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQ/F,MAAM,OAAO,QAAQ;;;;sBAcW,KAAK;;;EAuBnC,YAAY,CAAC,KAAkB;IAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACjC,CAAC;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACpC,CAAC;EAGD,eAAe,CAAC,KAAoB;IAClC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;EACpC,CAAC;EAID;;KAEG;EAEH,KAAK,CAAC,QAAQ,CAAC,GAAG,IAAiE;IACjF,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,CAAC;EACzC,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,QAAQ;IACZ,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE;MAClB,MAAM,IAAI,KAAK,CAAC,sBAAsB,CAAC,CAAC;KACzC;IACD,OAAO,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,CAAC;EAClC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,mCACE,GAAG,EAAE,EAAE,CAAC,EAAE;QACR,IAAI,EAAE,EAAE;UACN,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;SACpB;MACH,CAAC,mBACc,IAAI,CAAC,YAAY,8BACP,MAAM,iBAClB,IAAI,CAAC,UAAU,+BACD,IAAI,CAAC,aAAa,kCACf,IAAI,CAAC,gBAAgB,yCACd,IAAI,CAAC,cAAc,IAAI,UAAU,GACtE,CACH,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, Prop, h, EventEmitter, Method, Listen, State } from '@stencil/core';\nimport { CreatePaymentMethodResponse } from '../payment-method-form/payment-method-responses';\nimport { Theme } from '../payment-method-form/theme';\n\n@Component({\n  tag: 'justifi-card-form',\n  shadow: false,\n})\nexport class CardForm {\n  /**\n   * When to trigger validation of the form.\n   */\n  @Prop({ mutable: true }) validationMode: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n\n  /**\n   * URL for the rendered iFrame. End-users need not use this.\n   */\n  @Prop({ mutable: true }) iframeOrigin?: string;\n\n  /**\n   * Boolean indicating if the Card Form should render in a single line\n   */\n  @Prop() singleLine: boolean = false;\n  @State() internalStyleOverrides: Theme;\n\n  /**\n   * Triggered when iframe has loaded\n   * @event justifi-card-form#cardFormReady\n   */\n\n  @Event() cardFormReady: EventEmitter;\n\n  /**\n   * Triggered when the tokenize method is called on the component\n   * @event justifi-card-form#cardFormTokenize\n   */\n  @Event() cardFormTokenize: EventEmitter<{ data: any }>;\n\n  /**\n   * Triggered when the validate method is called on the component\n   * @event justifi-card-form#cardFormTokenize\n   */\n  @Event() cardFormValidate: EventEmitter<{ data: { isValid: boolean } }>;\n\n  @Listen('paymentMethodFormReady')\n  readyHandler(event: CustomEvent) {\n    this.cardFormReady.emit(event);\n  }\n\n  @Listen('paymentMethodFormTokenize')\n  tokenizeHandler(event: { data: any }) {\n    this.cardFormTokenize.emit(event);\n  }\n\n  @Listen('paymentMethodFormValidate')\n  validateHandler(event: { data: any }) {\n    this.cardFormValidate.emit(event);\n  }\n\n  private childRef?: HTMLJustifiPaymentMethodFormElement;\n\n  /**\n   *  Makes a tokenization request to the iframe\n   */\n  @Method()\n  async tokenize(...args: Parameters<HTMLJustifiPaymentMethodFormElement['tokenize']>): Promise<CreatePaymentMethodResponse> {\n    if (!this.childRef) {\n      throw new Error('Cannot call tokenize');\n    }\n    return this.childRef.tokenize(...args);\n  }\n\n  /**\n   *  Runs a validation on the form and shows errors if any\n   */\n  @Method()\n  async validate(): Promise<{ isValid: boolean }> {\n    if (!this.childRef) {\n      throw new Error('Cannot call validate');\n    }\n    return this.childRef.validate();\n  }\n\n  render() {\n    return (\n      <justifi-payment-method-form\n        ref={el => {\n          if (el) {\n            this.childRef = el;\n          }\n        }}\n        iframe-origin={this.iframeOrigin}\n        payment-method-form-type=\"card\"\n        single-line={this.singleLine}\n        payment-method-form-ready={this.cardFormReady}\n        payment-method-form-tokenize={this.cardFormTokenize}\n        payment-method-form-validation-mode={this.validationMode || 'onSubmit'}\n      />\n    );\n  }\n}\n"]}

package/dist/collection/components/card-form/card-form.stories.js

@@ -122,3 +122,4 @@ export const Styled = Template.bind({});
 Styled.args = {
   'css-variables': styledVariables,
 };
+//# sourceMappingURL=card-form.stories.js.map

package/dist/collection/components/card-form/card-form.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-form.stories.js","sourceRoot":"","sources":["../../../../src/components/card-form/card-form.stories.ts"],"names":[],"mappings":"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","sourcesContent":["interface CardFormStoryArgs {\n  'iframe-origin': string;\n  'single-line': boolean;\n  'validation-mode': string;\n  'css-variables': string;\n}\n\nconst isDev = process.env.NODE_ENV === 'development';\n\nexport default {\n  title: 'Components/CardForm',\n  component: 'justifi-card-form',\n  argTypes: {\n    'iframe-origin': {\n      control: 'text',\n      table: {\n        disable: isDev ? false : true,\n        category: 'props',\n      },\n    },\n  },\n  decorators: [\n    story => `\n      ${story()}\n      <script>${addEvents()}</script>\n    `,\n  ],\n};\n\nconst handleValidateClick = async (cardForm: HTMLJustifiCardFormElement) => {\n  const valid = await cardForm.validate();\n  console.log(valid);\n};\nconst handleTokenizeClick = async (cardForm: HTMLJustifiCardFormElement, paymentMethodData) => {\n  const tokenizeResponse = await cardForm.tokenize('CLIENT_ID', paymentMethodData);\n  console.log(tokenizeResponse);\n};\nconst handleReady = () => {\n  console.log('card form is ready');\n  const cardForm = document.querySelector('justifi-card-form') as HTMLJustifiCardFormElement;\n  const validateBtn = document.querySelector('#validate-btn');\n  const tokenizeBtn = document.querySelector('#tokenize-btn');\n  validateBtn?.addEventListener('click', () => {\n    handleValidateClick(cardForm);\n  });\n  tokenizeBtn?.addEventListener('click', () => {\n    handleTokenizeClick(cardForm, {});\n  });\n};\n\nconst addEvents = () => {\n  addEventListener('cardFormReady', handleReady);\n};\n\nconst FormButtons = `\n  <style>\n    .button-bar {\n      display: flex;\n      aligin-items: center;\n      padding: 10px;\n    }\n    .button-bar button {\n      margin-right: 10px;\n      border-radius: 3px;\n      border: 1px solid black;\n    }\n  </style>\n  <div class=\"button-bar\">\n    <button id=\"validate-btn\">Validate</button>\n    <button id=\"tokenize-btn\">Tokenize</button>\n  </div>`;\n\nconst Template = (args: CardFormStoryArgs) => {\n  const includeButtons = true;\n\n  return `\n    <div>\n      <style>\n      :root {\n        ${args['css-variables'] || ''}\n      }\n      </style>\n      <justifi-card-form\n        data-testid=\"card-form-iframe\"\n        validation-mode='${args['validation-mode'] || 'onSubmit'}'\n        iframe-origin='${args['iframe-origin'] || ''}'\n        single-line='${args['single-line']}'\n      />\n    </div>\n    ${includeButtons ? FormButtons : ''}\n  `;\n};\n\nexport const Basic = Template.bind({});\nBasic.args = {\n  'validation-mode': 'onSubmit',\n  'single-line': false,\n};\n\nexport const SingleLine = Template.bind({});\nSingleLine.args = {\n  'single-line': true,\n};\n\nconst styledVariables = `\n--jfi-layout-padding: 0;\n  --jfi-layout-form-control-spacing-x: .5rem;\n  --jfi-layout-form-control-spacing-y: 1rem;\n  --jfi-form-label-font-weight: 700;\n  --jfi-form-label-font-family: sans-serif;\n  --jfi-form-label-margin: 0 0 .5rem 0;\n  --jfi-form-control-background-color: #F4F4F6;\n  --jfi-form-control-background-color-hover: #EEEEF5;\n  --jfi-form-control-border-color: rgba(0, 0, 0, 0.42);\n  --jfi-form-control-border-color-hover: rgba(0, 0, 0, 0.62);\n  --jfi-form-control-border-color-focus: #fccc32;\n  --jfi-form-control-border-color-error: #C12727;\n  --jfi-form-control-border-top-width: 0;\n  --jfi-form-control-border-left-width: 0;\n  --jfi-form-control-border-bottom-width: 1px;\n  --jfi-form-control-border-right-width: 0;\n  --jfi-form-control-border-radius: 4px 4px 0 0;\n  --jfi-form-control-border-style: solid;\n  --jfi-form-control-box-shadow-focus: none;\n  --jfi-form-control-box-shadow-error-focus: none;\n  --jfi-form-control-border-style: solid;\n  --jfi-form-control-color: #212529;\n  --jfi-form-control-font-size: 1rem;\n  --jfi-form-control-font-weight: 400;\n  --jfi-form-control-line-height: 2;\n  --jfi-form-control-margin: 0;\n  --jfi-form-control-padding: .5rem .875rem;\n  --jfi-error-message-color: #C12727;\n  --jfi-error-message-margin: .25rem 0 0 0;\n  --jfi-error-message-font-size: .875rem;\n`;\n\nexport const Styled = Template.bind({});\nStyled.args = {\n  'css-variables': styledVariables,\n};\n"]}

package/dist/collection/components/card-form/test/card-form.e2e.js

@@ -0,0 +1,14 @@
+import { newE2EPage } from '@stencil/core/testing';
+describe('justifi-card-form', () => {
+  it('should emit "cardFormReady" event when "paymentMethodFormReady" event is fired', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<justifi-card-form></justifi-card-form>');
+    const cardForm = await page.find('justifi-card-form');
+    const readyEventSpy = await cardForm.spyOnEvent('cardFormReady');
+    const paymentFormElement = await page.find('justifi-payment-method-form');
+    paymentFormElement.triggerEvent('paymentMethodFormReady');
+    await page.waitForChanges();
+    expect(readyEventSpy).toHaveReceivedEventTimes(1);
+  });
+});
+//# sourceMappingURL=card-form.e2e.js.map

package/dist/collection/components/card-form/test/card-form.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-form.e2e.js","sourceRoot":"","sources":["../../../../../src/components/card-form/test/card-form.e2e.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;EACjC,EAAE,CAAC,gFAAgF,EAAE,KAAK,IAAI,EAAE;IAC9F,MAAM,IAAI,GAAG,MAAM,UAAU,EAAE,CAAC;IAChC,MAAM,IAAI,CAAC,UAAU,CAAC,yCAAyC,CAAC,CAAC;IAEjE,MAAM,QAAQ,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC;IAEtD,MAAM,aAAa,GAAG,MAAM,QAAQ,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IAEjE,MAAM,kBAAkB,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,6BAA6B,CAAC,CAAC;IAC1E,kBAAkB,CAAC,YAAY,CAAC,wBAAwB,CAAC,CAAC;IAE1D,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,aAAa,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,CAAC;EACpD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { newE2EPage } from '@stencil/core/testing';\n\ndescribe('justifi-card-form', () => {\n  it('should emit \"cardFormReady\" event when \"paymentMethodFormReady\" event is fired', async () => {\n    const page = await newE2EPage();\n    await page.setContent('<justifi-card-form></justifi-card-form>');\n\n    const cardForm = await page.find('justifi-card-form');\n\n    const readyEventSpy = await cardForm.spyOnEvent('cardFormReady');\n\n    const paymentFormElement = await page.find('justifi-payment-method-form');\n    paymentFormElement.triggerEvent('paymentMethodFormReady');\n\n    await page.waitForChanges();\n\n    expect(readyEventSpy).toHaveReceivedEventTimes(1);\n  });\n});\n"]}

package/dist/collection/components/card-form/test/card-form.spec.js

@@ -0,0 +1,56 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { CardForm } from '../card-form';
+import { PaymentMethodForm } from '../../payment-method-form/payment-method-form';
+describe('justifi-card-form', () => {
+  it('should pass validationMode prop to justifi-payment-method-form', async () => {
+    const page = await newSpecPage({
+      components: [CardForm],
+      html: '<justifi-card-form validation-mode="onChange" />',
+    });
+    const paymentMethodForm = page.root.querySelector('justifi-payment-method-form');
+    expect(paymentMethodForm.getAttribute('payment-method-form-validation-mode')).toBe('onChange');
+  });
+  it('should pass iframeOrigin prop to justifi-payment-method-form', async () => {
+    const page = await newSpecPage({
+      components: [CardForm],
+      html: '<justifi-card-form iframe-origin="https://example.com" />',
+    });
+    const paymentMethodForm = page.root.querySelector('justifi-payment-method-form');
+    expect(paymentMethodForm.getAttribute('iframe-origin')).toBe('https://example.com');
+  });
+  it('should pass singleLine prop to justifi-payment-method-form', async () => {
+    const page = await newSpecPage({
+      components: [CardForm],
+      html: '<justifi-card-form single-line />',
+    });
+    const paymentMethodForm = page.root.querySelector('justifi-payment-method-form');
+    expect(paymentMethodForm.getAttribute('single-line')).toBe('');
+  });
+  it('should call the PaymentMethodForm validate method when invoked from the CardForm component', async () => {
+    const page = await newSpecPage({
+      components: [CardForm, PaymentMethodForm],
+      html: '<justifi-card-form></justifi-card-form>',
+    });
+    const component = page.rootInstance;
+    const validateMock = jest.fn();
+    component.childRef = { validate: validateMock };
+    await component.validate();
+    expect(validateMock).toHaveBeenCalled();
+  });
+  it('should call the PaymentMethodForm tokenize method with the right arguments when invoked from the CardForm component', async () => {
+    const page = await newSpecPage({
+      components: [CardForm, PaymentMethodForm],
+      html: '<justifi-card-form></justifi-card-form>',
+    });
+    const component = page.rootInstance;
+    const tokenizeMock = jest.fn();
+    component.childRef = { tokenize: tokenizeMock };
+    const clientId = 'clientId';
+    const paymentMethodMetadata = { paymentMethodType: 'card' };
+    const account = 'account';
+    const tokenizeArgs = [clientId, paymentMethodMetadata, account];
+    await component.tokenize(...tokenizeArgs);
+    expect(tokenizeMock).toHaveBeenCalledWith(...tokenizeArgs);
+  });
+});
+//# sourceMappingURL=card-form.spec.js.map

package/dist/collection/components/card-form/test/card-form.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-form.spec.js","sourceRoot":"","sources":["../../../../../src/components/card-form/test/card-form.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { newSpecPage } from '@stencil/core/testing';\nimport { CardForm } from '../card-form';\nimport { PaymentMethodForm } from '../../payment-method-form/payment-method-form';\n\ndescribe('justifi-card-form', () => {\n  it('should pass validationMode prop to justifi-payment-method-form', async () => {\n    const page = await newSpecPage({\n      components: [CardForm],\n      html: '<justifi-card-form validation-mode=\"onChange\" />',\n    });\n    const paymentMethodForm = page.root.querySelector('justifi-payment-method-form');\n    expect(paymentMethodForm.getAttribute('payment-method-form-validation-mode')).toBe('onChange');\n  });\n\n  it('should pass iframeOrigin prop to justifi-payment-method-form', async () => {\n    const page = await newSpecPage({\n      components: [CardForm],\n      html: '<justifi-card-form iframe-origin=\"https://example.com\" />',\n    });\n\n    const paymentMethodForm = page.root.querySelector('justifi-payment-method-form');\n    expect(paymentMethodForm.getAttribute('iframe-origin')).toBe('https://example.com');\n  });\n\n  it('should pass singleLine prop to justifi-payment-method-form', async () => {\n    const page = await newSpecPage({\n      components: [CardForm],\n      html: '<justifi-card-form single-line />',\n    });\n    const paymentMethodForm = page.root.querySelector('justifi-payment-method-form');\n    expect(paymentMethodForm.getAttribute('single-line')).toBe('');\n  });\n\n  it('should call the PaymentMethodForm validate method when invoked from the CardForm component', async () => {\n    const page = await newSpecPage({\n      components: [CardForm, PaymentMethodForm],\n      html: '<justifi-card-form></justifi-card-form>',\n    });\n\n    const component = page.rootInstance;\n\n    const validateMock = jest.fn();\n    component.childRef = { validate: validateMock } as any;\n\n    await component.validate();\n\n    expect(validateMock).toHaveBeenCalled();\n  });\n\n  it('should call the PaymentMethodForm tokenize method with the right arguments when invoked from the CardForm component', async () => {\n    const page = await newSpecPage({\n      components: [CardForm, PaymentMethodForm],\n      html: '<justifi-card-form></justifi-card-form>',\n    });\n\n    const component = page.rootInstance;\n\n    const tokenizeMock = jest.fn();\n    component.childRef = { tokenize: tokenizeMock } as any;\n\n    const clientId = 'clientId';\n    const paymentMethodMetadata = { paymentMethodType: 'card' };\n    const account = 'account';\n    const tokenizeArgs = [clientId, paymentMethodMetadata, account];\n\n    await component.tokenize(...tokenizeArgs);\n\n    expect(tokenizeMock).toHaveBeenCalledWith(...tokenizeArgs);\n  });\n});\n"]}