@justifi/webcomponents 4.2.1-rc.4 → 4.2.2

package/CHANGELOG.md

@@ -4,11 +4,23 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### 4.2.2
+
+> 03 July 2023
+
+- Hardcode production fallback `iframeOrigin` as it is not being set as intended via environment variables
+
+#### 4.2.1
+
+> 30 June 2023
+
+- Use environment variables to set `iframeOrigin` in production build
+
 #### 4.2.0
 
 > 27 June 2023
 
-- Add `resize` method to `CardForm` and `BankAccount` form
+- Add `resize` method to `CardForm` and `BankAccountForm`
 
 #### 4.1.6
 

package/dist/cjs/justifi-payment-method-form.cjs.entry.js

@@ -22,7 +22,7 @@ const MessageEventType = {
 };
 
 const name = "@justifi/webcomponents";
-const version = "4.2.1-rc.4";
+const version = "4.2.2";
 const description = "JustiFi Web Components";
 const main = "dist/index.cjs.js";
 const module$1 = "dist/components/index.js";

package/dist/components/payment-method-form.js

@@ -18,7 +18,7 @@ const MessageEventType = {
 };
 
 const name = "@justifi/webcomponents";
-const version = "4.2.1-rc.4";
+const version = "4.2.2";
 const description = "JustiFi Web Components";
 const main = "dist/index.cjs.js";
 const module = "dist/components/index.js";

package/dist/esm/justifi-payment-method-form.entry.js

@@ -18,7 +18,7 @@ const MessageEventType = {
 };
 
 const name = "@justifi/webcomponents";
-const version = "4.2.1-rc.4";
+const version = "4.2.2";
 const description = "JustiFi Web Components";
 const main = "dist/index.cjs.js";
 const module = "dist/components/index.js";

package/dist/webcomponents/p-4ecc9860.entry.js

@@ -0,0 +1,2 @@
+import{r as o,c as t,h as e,H as r}from"./p-3aa91155.js";const i={card:{ready:"justifi.card.ready",tokenize:"justifi.card.tokenize",validate:"justifi.card.validate",resize:"justifi.card.resize",styleOverrides:"justifi.card.styleOverrides"},bankAccount:{ready:"justifi.bankAccount.ready",tokenize:"justifi.bankAccount.tokenize",validate:"justifi.bankAccount.validate",resize:"justifi.bankAccount.resize",styleOverrides:"justifi.bankAccount.styleOverrides"}};const s="@justifi/webcomponents";const n="4.2.2";const c="JustiFi Web Components";const d="dist/index.cjs.js";const a="dist/components/index.js";const l="dist/esm/index.mjs";const f="dist/esm/index.mjs";const h="dist/types/index.d.ts";const m="dist/collection/collection-manifest.json";const u={type:"git",url:"git+https://github.com/justifi-tech/web-component-library.git"};const b={registry:"https://registry.npmjs.org"};const p=["dist/","loader/"];const g={"auto-changelog":"auto-changelog","build:dev":"NODE_ENV=dev stencil build --docs","build:staging":"NODE_ENV=staging stencil build --docs","build:prod":"NODE_ENV=prod stencil build --docs",start:'NODE_ENV=dev concurrently -c "bgBlue.bold,bgMagenta.bold,bgGreen.bold" "yarn run start-stencil" "yarn run storybook"',"start-stencil":"stencil build --watch --serve --no-open",test:"stencil test --spec","test:watch":"stencil test --spec --watchAll","test:e2e":"stencil test --e2e",generate:"stencil generate",storybook:"storybook dev -p 6006 --quiet","build-storybook":"storybook build -o ../docs"};const y={"@stencil/core":"^3.3.0","@stencil/react-output-target":"^0.3.1",bootstrap:"^5.2.3","date-fns":"^2.29.3","dinero.js":"^1.9.1","ts-dedent":"^2.2.0",uuid:"^9.0.0",yup:"^1.0.0"};const j={"@babel/preset-env":"^7.21.5","@babel/preset-react":"^7.18.6","@babel/preset-typescript":"^7.21.5","@pxtrn/storybook-addon-docs-stencil":"^6.4.1","@stencil/sass":"^3.0.1","@storybook/addon-actions":"^7.0.4","@storybook/addon-essentials":"^7.0.4","@storybook/addon-interactions":"^7.0.4","@storybook/addon-links":"^7.0.4","@storybook/html":"^7.0.4","@storybook/html-webpack5":"^7.0.4","@storybook/jest":"^0.1.0","@storybook/testing-library":"^0.1.0","@types/jest":"27.0.3","@types/node":"^20.1.4","@types/react":"^18.0.37","@types/react-dom":"^18.0.11","auto-changelog":"^2.4.0",concurrently:"^7.6.0",jest:"^27.4.5","jest-cli":"^27.4.5",puppeteer:"^10.0.0",react:"^18.2.0","react-dom":"^18.2.0","release-it":"^15.6.0","rollup-plugin-replace":"^2.2.0",storybook:"^7.0.4"};const k="MIT";const w={name:s,version:n,description:c,main:d,module:a,es2015:l,es2017:f,types:h,collection:m,"collection:main":"dist/collection/index.js",repository:u,publishConfig:b,files:p,scripts:g,"auto-changelog":{output:"../CHANGELOG.md",hideCredtis:"true",commitLimit:"true"},dependencies:y,devDependencies:j,license:k};const v=()=>{const o=getComputedStyle(document.body);const t={layout:{padding:o.getPropertyValue("--jfi-layout-padding"),formControlSpacingHorizontal:o.getPropertyValue("--jfi-layout-form-control-spacing-x"),formControlSpacingVertical:o.getPropertyValue("--jfi-layout-form-control-spacing-y")},formControl:{backgroundColor:o.getPropertyValue("--jfi-form-control-background-color"),borderColor:o.getPropertyValue("--jfi-form-control-border-color"),borderColorFocus:o.getPropertyValue("--jfi-form-control-border-color-focus"),borderColorError:o.getPropertyValue("--jfi-form-control-border-color-error"),borderWidth:o.getPropertyValue("--jfi-form-control-border-width"),borderBottomWidth:o.getPropertyValue("--jfi-form-control-border-bottom-width"),borderLeftWidth:o.getPropertyValue("--jfi-form-control-border-left-width"),borderRightWidth:o.getPropertyValue("--jfi-form-control-border-right-width"),borderTopWidth:o.getPropertyValue("--jfi-form-control-border-top-width"),borderRadius:o.getPropertyValue("--jfi-form-control-border-radius"),borderStyle:o.getPropertyValue("--jfi-form-control-border-style"),boxShadow:o.getPropertyValue("--jfi-form-control-box-shadow"),boxShadowError:o.getPropertyValue("--jfi-form-control-box-shadow-error"),boxShadowErrorFocus:o.getPropertyValue("--jfi-form-control-box-shadow-error-focus"),boxShadowFocus:o.getPropertyValue("--jfi-form-control-box-shadow-focus"),color:o.getPropertyValue("--jfi-form-control-color"),colorFocus:o.getPropertyValue("--jfi-form-control-color-focus"),fontSize:o.getPropertyValue("--jfi-form-control-font-size"),fontWeight:o.getPropertyValue("--jfi-form-control-font-weight"),lineHeight:o.getPropertyValue("--jfi-form-control-line-height"),margin:o.getPropertyValue("--jfi-form-control-margin"),padding:o.getPropertyValue("--jfi-form-control-padding")},formLabel:{color:o.getPropertyValue("--jfi-form-label-color"),fontFamily:o.getPropertyValue("--jfi-form-label-font-family"),fontSize:o.getPropertyValue("--jfi-form-label-font-size"),fontWeight:o.getPropertyValue("--jfi-form-label-font-weight"),margin:o.getPropertyValue("--jfi-form-label-margin")},errorMessage:{color:o.getPropertyValue("--jfi-error-message-color"),margin:o.getPropertyValue("--jfi-error-message-margin"),fontSize:o.getPropertyValue("--jfi-error-message-font-size")}};return t};const z=":host{display:block}justifi-payment-method-form iframe{border:none;width:100%}";const x=class{constructor(e){o(this,e);this.paymentMethodFormReady=t(this,"paymentMethodFormReady",7);this.paymentMethodFormTokenize=t(this,"paymentMethodFormTokenize",7);this.computedTheme=v();this.paymentMethodFormType=undefined;this.paymentMethodFormValidationMode=undefined;this.iframeOrigin=undefined;this.singleLine=undefined;this.height=55}connectedCallback(){window.addEventListener("message",this.dispatchMessageEvent.bind(this))}disconnectedCallback(){window.removeEventListener("message",this.dispatchMessageEvent.bind(this))}componentShouldUpdate(){this.sendStyleOverrides()}sendStyleOverrides(){if(this.computedTheme){this.postMessage(i[this.paymentMethodFormType].styleOverrides,{styleOverrides:this.computedTheme})}}dispatchMessageEvent(o){const t=o.data;const e=t.eventType;const r=t.data;if(e===i[this.paymentMethodFormType].ready){this.paymentMethodFormReady.emit(r)}if(e===i[this.paymentMethodFormType].resize){this.height=r.height}}postMessage(o,t){var e,r;(r=(e=this.iframeElement)===null||e===void 0?void 0:e.contentWindow)===null||r===void 0?void 0:r.postMessage(Object.assign({eventType:o},t),"*")}async postMessageWithResponseListener(o,t){return new Promise((e=>{const r=t=>{if(t.data.eventType!==o)return;window.removeEventListener("message",r);e(t.data.data)};window.addEventListener("message",r);this.postMessage(o,t)}))}async tokenize(o,t,e){const r=i[this.paymentMethodFormType].tokenize;const s={clientId:o,componentVersion:w.version,paymentMethodMetadata:t,account:e};return this.postMessageWithResponseListener(r,s)}async validate(){return this.postMessageWithResponseListener(i[this.paymentMethodFormType].validate)}async resize(){this.postMessage(i[this.paymentMethodFormType].resize)}composeQueryParams(o){const t=o.map((t=>{if(t===o[0]){return t=`?${t}`}else{return t=`&${t}`}}));return t.join("")}getIframeSrc(){const o=this.iframeOrigin||"https://js.justifi.ai/v2";let t=`${o}/${this.paymentMethodFormType}`;let e=[];if(this.paymentMethodFormValidationMode){e.push(`validationMode=${this.paymentMethodFormValidationMode}`)}if(this.singleLine){e.push(`singleLine=${this.singleLine}`)}return t.concat(this.composeQueryParams(e))}render(){return e(r,null,e("iframe",{id:`justifi-payment-method-form-${this.paymentMethodFormType}`,src:this.getIframeSrc(),ref:o=>this.iframeElement=o,height:this.height}))}};x.style=z;export{x as justifi_payment_method_form};
+//# sourceMappingURL=p-4ecc9860.entry.js.map

package/dist/webcomponents/{p-2b8c281e.entry.js.map → p-4ecc9860.entry.js.map}

@@ -1 +1 @@
-{"version":3,"names":["MessageEventType","card","ready","tokenize","validate","resize","styleOverrides","bankAccount","getComputedTheme","computedStyles","getComputedStyle","document","body","computedTheme","layout","padding","getPropertyValue","formControlSpacingHorizontal","formControlSpacingVertical","formControl","backgroundColor","borderColor","borderColorFocus","borderColorError","borderWidth","borderBottomWidth","borderLeftWidth","borderRightWidth","borderTopWidth","borderRadius","borderStyle","boxShadow","boxShadowError","boxShadowErrorFocus","boxShadowFocus","color","colorFocus","fontSize","fontWeight","lineHeight","margin","formLabel","fontFamily","errorMessage","paymentMethodFormCss","PaymentMethodForm","this","connectedCallback","window","addEventListener","dispatchMessageEvent","bind","disconnectedCallback","removeEventListener","componentShouldUpdate","sendStyleOverrides","postMessage","paymentMethodFormType","messageEvent","messagePayload","data","messageType","eventType","messageData","paymentMethodFormReady","emit","height","payload","_b","_a","iframeElement","contentWindow","Object","assign","async","Promise","resolve","responseListener","event","clientId","paymentMethodMetadata","account","componentVersion","packageJson","version","postMessageWithResponseListener","composeQueryParams","values","queryParams","map","value","join","getIframeSrc","iframeOrigin","iframeSrc","paramsList","paymentMethodFormValidationMode","push","singleLine","concat","render","h","Host","id","src","ref","el"],"sources":["./src/components/payment-method-form/message-event-types.ts","./src/components/payment-method-form/get-computed-theme.ts","./src/components/payment-method-form/payment-method-form.css?tag=justifi-payment-method-form","./src/components/payment-method-form/payment-method-form.tsx"],"sourcesContent":["export const MessageEventType = {\n  card: {\n    ready: 'justifi.card.ready',\n    tokenize: 'justifi.card.tokenize',\n    validate: 'justifi.card.validate',\n    resize: 'justifi.card.resize',\n    styleOverrides: 'justifi.card.styleOverrides',\n  },\n  bankAccount: {\n    ready: 'justifi.bankAccount.ready',\n    tokenize: 'justifi.bankAccount.tokenize',\n    validate: 'justifi.bankAccount.validate',\n    resize: 'justifi.bankAccount.resize',\n    styleOverrides: 'justifi.bankAccount.styleOverrides',\n  },\n};\n","import { Theme } from './theme';\n\nconst getComputedTheme = () => {\n  const computedStyles = getComputedStyle(document.body);\n\n  const computedTheme: Theme = {\n    layout: {\n      padding: computedStyles.getPropertyValue('--jfi-layout-padding'),\n      formControlSpacingHorizontal: computedStyles.getPropertyValue('--jfi-layout-form-control-spacing-x'),\n      formControlSpacingVertical: computedStyles.getPropertyValue('--jfi-layout-form-control-spacing-y'),\n    },\n    formControl: {\n      backgroundColor: computedStyles.getPropertyValue('--jfi-form-control-background-color'),\n      borderColor: computedStyles.getPropertyValue('--jfi-form-control-border-color'),\n      borderColorFocus: computedStyles.getPropertyValue('--jfi-form-control-border-color-focus'),\n      borderColorError: computedStyles.getPropertyValue('--jfi-form-control-border-color-error'),\n      borderWidth: computedStyles.getPropertyValue('--jfi-form-control-border-width'),\n      borderBottomWidth: computedStyles.getPropertyValue('--jfi-form-control-border-bottom-width'),\n      borderLeftWidth: computedStyles.getPropertyValue('--jfi-form-control-border-left-width'),\n      borderRightWidth: computedStyles.getPropertyValue('--jfi-form-control-border-right-width'),\n      borderTopWidth: computedStyles.getPropertyValue('--jfi-form-control-border-top-width'),\n      borderRadius: computedStyles.getPropertyValue('--jfi-form-control-border-radius'),\n      borderStyle: computedStyles.getPropertyValue('--jfi-form-control-border-style'),\n      boxShadow: computedStyles.getPropertyValue('--jfi-form-control-box-shadow'),\n      boxShadowError: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-error'),\n      boxShadowErrorFocus: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-error-focus'),\n      boxShadowFocus: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-focus'),\n      color: computedStyles.getPropertyValue('--jfi-form-control-color'),\n      colorFocus: computedStyles.getPropertyValue('--jfi-form-control-color-focus'),\n      fontSize: computedStyles.getPropertyValue('--jfi-form-control-font-size'),\n      fontWeight: computedStyles.getPropertyValue('--jfi-form-control-font-weight'),\n      lineHeight: computedStyles.getPropertyValue('--jfi-form-control-line-height'),\n      margin: computedStyles.getPropertyValue('--jfi-form-control-margin'),\n      padding: computedStyles.getPropertyValue('--jfi-form-control-padding'),\n    },\n    formLabel: {\n      color: computedStyles.getPropertyValue('--jfi-form-label-color'),\n      fontFamily: computedStyles.getPropertyValue('--jfi-form-label-font-family'),\n      fontSize: computedStyles.getPropertyValue('--jfi-form-label-font-size'),\n      fontWeight: computedStyles.getPropertyValue('--jfi-form-label-font-weight'),\n      margin: computedStyles.getPropertyValue('--jfi-form-label-margin'),\n    },\n    errorMessage: {\n      color: computedStyles.getPropertyValue('--jfi-error-message-color'),\n      margin: computedStyles.getPropertyValue('--jfi-error-message-margin'),\n      fontSize: computedStyles.getPropertyValue('--jfi-error-message-font-size'),\n    },\n  };\n\n  return computedTheme;\n};\n\nexport default getComputedTheme;\n",":host {\n  display: block;\n}\n\njustifi-payment-method-form iframe {\n  border: none;\n  width: 100%;\n}\n","import { Component, Event, Host, Prop, h, EventEmitter, Method, State } from '@stencil/core';\nimport { MessageEventType } from './message-event-types';\nimport { Theme } from './theme';\nimport packageJson from '../../../package.json';\nimport getComputedTheme from './get-computed-theme';\nimport { CreatePaymentMethodResponse } from './payment-method-responses';\n\n@Component({\n  tag: 'justifi-payment-method-form',\n  styleUrl: 'payment-method-form.css',\n  shadow: false,\n})\nexport class PaymentMethodForm {\n  @Prop() paymentMethodFormType: 'card' | 'bankAccount';\n  @Prop({\n    mutable: true,\n  })\n  paymentMethodFormValidationMode: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n  @Prop() iframeOrigin?: string;\n  @Prop() singleLine: boolean;\n  @Event({ bubbles: true }) paymentMethodFormReady: EventEmitter;\n  @Event({ bubbles: true }) paymentMethodFormTokenize: EventEmitter<{ data: any }>;\n  @State() height: number = 55;\n\n  private computedTheme: Theme = getComputedTheme();\n\n  iframeElement!: HTMLIFrameElement;\n\n  connectedCallback() {\n    window.addEventListener('message', this.dispatchMessageEvent.bind(this));\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('message', this.dispatchMessageEvent.bind(this));\n  }\n\n  componentShouldUpdate() {\n    this.sendStyleOverrides();\n  }\n\n  sendStyleOverrides() {\n    if (this.computedTheme) {\n      this.postMessage(MessageEventType[this.paymentMethodFormType].styleOverrides, { styleOverrides: this.computedTheme });\n    }\n  }\n\n  private dispatchMessageEvent(messageEvent: MessageEvent) {\n    const messagePayload = messageEvent.data;\n    const messageType = messagePayload.eventType;\n    const messageData = messagePayload.data;\n\n    if (messageType === MessageEventType[this.paymentMethodFormType].ready) {\n      this.paymentMethodFormReady.emit(messageData);\n    }\n\n    if (messageType === MessageEventType[this.paymentMethodFormType].resize) {\n      this.height = messageData.height;\n    }\n  }\n\n  private postMessage(eventType: string, payload?: any) {\n    this.iframeElement?.contentWindow?.postMessage({ eventType: eventType, ...payload }, '*');\n  }\n\n  private async postMessageWithResponseListener(eventType: string, payload?: any): Promise<any> {\n    return new Promise(resolve => {\n      const responseListener = (event: MessageEvent) => {\n        if (event.data.eventType !== eventType) return;\n        window.removeEventListener('message', responseListener);\n        resolve(event.data.data);\n      };\n      window.addEventListener('message', responseListener);\n      this.postMessage(eventType, payload);\n    });\n  }\n\n  @Method()\n  async tokenize(clientId: string, paymentMethodMetadata: any, account?: string): Promise<CreatePaymentMethodResponse> {\n    const eventType = MessageEventType[this.paymentMethodFormType].tokenize;\n    const payload = {\n      clientId: clientId,\n      componentVersion: packageJson.version,\n      paymentMethodMetadata: paymentMethodMetadata,\n      account: account,\n    };\n\n    return this.postMessageWithResponseListener(eventType, payload);\n  }\n\n  @Method()\n  async validate(): Promise<any> {\n    return this.postMessageWithResponseListener(MessageEventType[this.paymentMethodFormType].validate);\n  }\n\n  @Method()\n  async resize(): Promise<any> {\n    this.postMessage(MessageEventType[this.paymentMethodFormType].resize);\n  }\n\n  private composeQueryParams(values: string[]) {\n    const queryParams = values.map(value => {\n      if (value === values[0]) {\n        return (value = `?${value}`);\n      } else {\n        return (value = `&${value}`);\n      }\n    });\n    return queryParams.join('');\n  }\n\n  private getIframeSrc() {\n    const iframeOrigin = this.iframeOrigin || 'https://js.justifi.ai/v2';\n    let iframeSrc = `${iframeOrigin}/${this.paymentMethodFormType}`;\n    let paramsList = [];\n    if (this.paymentMethodFormValidationMode) {\n      paramsList.push(`validationMode=${this.paymentMethodFormValidationMode}`);\n    }\n    if (this.singleLine) {\n      paramsList.push(`singleLine=${this.singleLine}`);\n    }\n\n    return iframeSrc.concat(this.composeQueryParams(paramsList));\n  }\n\n  render() {\n    return (\n      <Host>\n        <iframe\n          id={`justifi-payment-method-form-${this.paymentMethodFormType}`}\n          src={this.getIframeSrc()}\n          ref={el => (this.iframeElement = el as HTMLIFrameElement)}\n          height={this.height}\n        ></iframe>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"names":["MessageEventType","card","ready","tokenize","validate","resize","styleOverrides","bankAccount","getComputedTheme","computedStyles","getComputedStyle","document","body","computedTheme","layout","padding","getPropertyValue","formControlSpacingHorizontal","formControlSpacingVertical","formControl","backgroundColor","borderColor","borderColorFocus","borderColorError","borderWidth","borderBottomWidth","borderLeftWidth","borderRightWidth","borderTopWidth","borderRadius","borderStyle","boxShadow","boxShadowError","boxShadowErrorFocus","boxShadowFocus","color","colorFocus","fontSize","fontWeight","lineHeight","margin","formLabel","fontFamily","errorMessage","paymentMethodFormCss","PaymentMethodForm","this","connectedCallback","window","addEventListener","dispatchMessageEvent","bind","disconnectedCallback","removeEventListener","componentShouldUpdate","sendStyleOverrides","postMessage","paymentMethodFormType","messageEvent","messagePayload","data","messageType","eventType","messageData","paymentMethodFormReady","emit","height","payload","_b","_a","iframeElement","contentWindow","Object","assign","async","Promise","resolve","responseListener","event","clientId","paymentMethodMetadata","account","componentVersion","packageJson","version","postMessageWithResponseListener","composeQueryParams","values","queryParams","map","value","join","getIframeSrc","iframeOrigin","iframeSrc","paramsList","paymentMethodFormValidationMode","push","singleLine","concat","render","h","Host","id","src","ref","el"],"sources":["./src/components/payment-method-form/message-event-types.ts","./src/components/payment-method-form/get-computed-theme.ts","./src/components/payment-method-form/payment-method-form.css?tag=justifi-payment-method-form","./src/components/payment-method-form/payment-method-form.tsx"],"sourcesContent":["export const MessageEventType = {\n  card: {\n    ready: 'justifi.card.ready',\n    tokenize: 'justifi.card.tokenize',\n    validate: 'justifi.card.validate',\n    resize: 'justifi.card.resize',\n    styleOverrides: 'justifi.card.styleOverrides',\n  },\n  bankAccount: {\n    ready: 'justifi.bankAccount.ready',\n    tokenize: 'justifi.bankAccount.tokenize',\n    validate: 'justifi.bankAccount.validate',\n    resize: 'justifi.bankAccount.resize',\n    styleOverrides: 'justifi.bankAccount.styleOverrides',\n  },\n};\n","import { Theme } from './theme';\n\nconst getComputedTheme = () => {\n  const computedStyles = getComputedStyle(document.body);\n\n  const computedTheme: Theme = {\n    layout: {\n      padding: computedStyles.getPropertyValue('--jfi-layout-padding'),\n      formControlSpacingHorizontal: computedStyles.getPropertyValue('--jfi-layout-form-control-spacing-x'),\n      formControlSpacingVertical: computedStyles.getPropertyValue('--jfi-layout-form-control-spacing-y'),\n    },\n    formControl: {\n      backgroundColor: computedStyles.getPropertyValue('--jfi-form-control-background-color'),\n      borderColor: computedStyles.getPropertyValue('--jfi-form-control-border-color'),\n      borderColorFocus: computedStyles.getPropertyValue('--jfi-form-control-border-color-focus'),\n      borderColorError: computedStyles.getPropertyValue('--jfi-form-control-border-color-error'),\n      borderWidth: computedStyles.getPropertyValue('--jfi-form-control-border-width'),\n      borderBottomWidth: computedStyles.getPropertyValue('--jfi-form-control-border-bottom-width'),\n      borderLeftWidth: computedStyles.getPropertyValue('--jfi-form-control-border-left-width'),\n      borderRightWidth: computedStyles.getPropertyValue('--jfi-form-control-border-right-width'),\n      borderTopWidth: computedStyles.getPropertyValue('--jfi-form-control-border-top-width'),\n      borderRadius: computedStyles.getPropertyValue('--jfi-form-control-border-radius'),\n      borderStyle: computedStyles.getPropertyValue('--jfi-form-control-border-style'),\n      boxShadow: computedStyles.getPropertyValue('--jfi-form-control-box-shadow'),\n      boxShadowError: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-error'),\n      boxShadowErrorFocus: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-error-focus'),\n      boxShadowFocus: computedStyles.getPropertyValue('--jfi-form-control-box-shadow-focus'),\n      color: computedStyles.getPropertyValue('--jfi-form-control-color'),\n      colorFocus: computedStyles.getPropertyValue('--jfi-form-control-color-focus'),\n      fontSize: computedStyles.getPropertyValue('--jfi-form-control-font-size'),\n      fontWeight: computedStyles.getPropertyValue('--jfi-form-control-font-weight'),\n      lineHeight: computedStyles.getPropertyValue('--jfi-form-control-line-height'),\n      margin: computedStyles.getPropertyValue('--jfi-form-control-margin'),\n      padding: computedStyles.getPropertyValue('--jfi-form-control-padding'),\n    },\n    formLabel: {\n      color: computedStyles.getPropertyValue('--jfi-form-label-color'),\n      fontFamily: computedStyles.getPropertyValue('--jfi-form-label-font-family'),\n      fontSize: computedStyles.getPropertyValue('--jfi-form-label-font-size'),\n      fontWeight: computedStyles.getPropertyValue('--jfi-form-label-font-weight'),\n      margin: computedStyles.getPropertyValue('--jfi-form-label-margin'),\n    },\n    errorMessage: {\n      color: computedStyles.getPropertyValue('--jfi-error-message-color'),\n      margin: computedStyles.getPropertyValue('--jfi-error-message-margin'),\n      fontSize: computedStyles.getPropertyValue('--jfi-error-message-font-size'),\n    },\n  };\n\n  return computedTheme;\n};\n\nexport default getComputedTheme;\n",":host {\n  display: block;\n}\n\njustifi-payment-method-form iframe {\n  border: none;\n  width: 100%;\n}\n","import { Component, Event, Host, Prop, h, EventEmitter, Method, State } from '@stencil/core';\nimport { MessageEventType } from './message-event-types';\nimport { Theme } from './theme';\nimport packageJson from '../../../package.json';\nimport getComputedTheme from './get-computed-theme';\nimport { CreatePaymentMethodResponse } from './payment-method-responses';\n\n@Component({\n  tag: 'justifi-payment-method-form',\n  styleUrl: 'payment-method-form.css',\n  shadow: false,\n})\nexport class PaymentMethodForm {\n  @Prop() paymentMethodFormType: 'card' | 'bankAccount';\n  @Prop({\n    mutable: true,\n  })\n  paymentMethodFormValidationMode: 'onChange' | 'onBlur' | 'onSubmit' | 'onTouched' | 'all';\n  @Prop() iframeOrigin?: string;\n  @Prop() singleLine: boolean;\n  @Event({ bubbles: true }) paymentMethodFormReady: EventEmitter;\n  @Event({ bubbles: true }) paymentMethodFormTokenize: EventEmitter<{ data: any }>;\n  @State() height: number = 55;\n\n  private computedTheme: Theme = getComputedTheme();\n\n  iframeElement!: HTMLIFrameElement;\n\n  connectedCallback() {\n    window.addEventListener('message', this.dispatchMessageEvent.bind(this));\n  }\n\n  disconnectedCallback() {\n    window.removeEventListener('message', this.dispatchMessageEvent.bind(this));\n  }\n\n  componentShouldUpdate() {\n    this.sendStyleOverrides();\n  }\n\n  sendStyleOverrides() {\n    if (this.computedTheme) {\n      this.postMessage(MessageEventType[this.paymentMethodFormType].styleOverrides, { styleOverrides: this.computedTheme });\n    }\n  }\n\n  private dispatchMessageEvent(messageEvent: MessageEvent) {\n    const messagePayload = messageEvent.data;\n    const messageType = messagePayload.eventType;\n    const messageData = messagePayload.data;\n\n    if (messageType === MessageEventType[this.paymentMethodFormType].ready) {\n      this.paymentMethodFormReady.emit(messageData);\n    }\n\n    if (messageType === MessageEventType[this.paymentMethodFormType].resize) {\n      this.height = messageData.height;\n    }\n  }\n\n  private postMessage(eventType: string, payload?: any) {\n    this.iframeElement?.contentWindow?.postMessage({ eventType: eventType, ...payload }, '*');\n  }\n\n  private async postMessageWithResponseListener(eventType: string, payload?: any): Promise<any> {\n    return new Promise(resolve => {\n      const responseListener = (event: MessageEvent) => {\n        if (event.data.eventType !== eventType) return;\n        window.removeEventListener('message', responseListener);\n        resolve(event.data.data);\n      };\n      window.addEventListener('message', responseListener);\n      this.postMessage(eventType, payload);\n    });\n  }\n\n  @Method()\n  async tokenize(clientId: string, paymentMethodMetadata: any, account?: string): Promise<CreatePaymentMethodResponse> {\n    const eventType = MessageEventType[this.paymentMethodFormType].tokenize;\n    const payload = {\n      clientId: clientId,\n      componentVersion: packageJson.version,\n      paymentMethodMetadata: paymentMethodMetadata,\n      account: account,\n    };\n\n    return this.postMessageWithResponseListener(eventType, payload);\n  }\n\n  @Method()\n  async validate(): Promise<any> {\n    return this.postMessageWithResponseListener(MessageEventType[this.paymentMethodFormType].validate);\n  }\n\n  @Method()\n  async resize(): Promise<any> {\n    this.postMessage(MessageEventType[this.paymentMethodFormType].resize);\n  }\n\n  private composeQueryParams(values: string[]) {\n    const queryParams = values.map(value => {\n      if (value === values[0]) {\n        return (value = `?${value}`);\n      } else {\n        return (value = `&${value}`);\n      }\n    });\n    return queryParams.join('');\n  }\n\n  private getIframeSrc() {\n    const iframeOrigin = this.iframeOrigin || 'https://js.justifi.ai/v2';\n    let iframeSrc = `${iframeOrigin}/${this.paymentMethodFormType}`;\n    let paramsList = [];\n    if (this.paymentMethodFormValidationMode) {\n      paramsList.push(`validationMode=${this.paymentMethodFormValidationMode}`);\n    }\n    if (this.singleLine) {\n      paramsList.push(`singleLine=${this.singleLine}`);\n    }\n\n    return iframeSrc.concat(this.composeQueryParams(paramsList));\n  }\n\n  render() {\n    return (\n      <Host>\n        <iframe\n          id={`justifi-payment-method-form-${this.paymentMethodFormType}`}\n          src={this.getIframeSrc()}\n          ref={el => (this.iframeElement = el as HTMLIFrameElement)}\n          height={this.height}\n        ></iframe>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/webcomponents/webcomponents.esm.js

@@ -1,2 +1,2 @@
-import{p as e,b as t}from"./p-3aa91155.js";export{s as setNonce}from"./p-3aa91155.js";const i=()=>{const t=import.meta.url;const i={};if(t!==""){i.resourcesUrl=new URL(".",t).href}return e(i)};i().then((e=>t([["p-d87b0711",[[1,"justifi-payment-form",{bankAccount:[4,"bank-account"],card:[4],email:[1],iframeOrigin:[1,"iframe-origin"],clientId:[1,"client-id"],accountId:[1,"account-id"],submitButtonText:[1,"submit-button-text"],submitButtonEnabled:[32],isLoading:[32],selectedPaymentMethodType:[32],allowedPaymentMethodTypes:[32],fillBillingForm:[64],enableSubmitButton:[64]},[[0,"paymentMethodSelected","paymentMethodSelectedHandler"]]]]],["p-255b1284",[[1,"justifi-business-address",{businessAddress:[32],businessAddressErrors:[32],submit:[64]},[[0,"fieldReceivedInput","setFormValue"]]]]],["p-90c0d9e1",[[1,"justifi-business-info",{authToken:[1,"auth-token"],businessId:[1,"business-id"],businessInfoPrefillData:[32],businessInfo:[32],businessInfoFieldsErrors:[32],submit:[64]},[[0,"fieldReceivedInput","setFormValue"]]]]],["p-2b8c281e",[[0,"justifi-payment-method-form",{paymentMethodFormType:[1,"payment-method-form-type"],paymentMethodFormValidationMode:[1025,"payment-method-form-validation-mode"],iframeOrigin:[1,"iframe-origin"],singleLine:[4,"single-line"],height:[32],tokenize:[64],validate:[64],resize:[64]}]]],["p-bd5352d6",[[0,"justifi-bank-account-form",{validationMode:[1025,"validation-mode"],iframeOrigin:[1025,"iframe-origin"],internalStyleOverrides:[32],tokenize:[64],validate:[64],resize:[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["p-0969db8f",[[0,"justifi-card-form",{validationMode:[1025,"validation-mode"],iframeOrigin:[1025,"iframe-origin"],singleLine:[4,"single-line"],internalStyleOverrides:[32],tokenize:[64],validate:[64],resize:[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["p-f30d1567",[[1,"justifi-payments-list",{accountId:[1,"account-id"],auth:[16],payments:[32]}]]],["p-dbf7100f",[[1,"select-input",{name:[1],label:[1],defaultValue:[1,"default-value"],error:[1],options:[16],internalValue:[32]}],[1,"text-input",{name:[1],label:[1],defaultValue:[1,"default-value"],error:[1],internalValue:[32]}]]],["p-c903cc5a",[[1,"justifi-billing-form",{legend:[1],billingFields:[32],billingFieldsErrors:[32],fill:[64],validate:[64],getValues:[64]},[[0,"fieldReceivedInput","setFormValue"]]],[1,"justifi-payment-method-selector",{paymentMethodTypes:[16],selectedPaymentMethodType:[1,"selected-payment-method-type"]}]]]],e)));
+import{p as e,b as t}from"./p-3aa91155.js";export{s as setNonce}from"./p-3aa91155.js";const i=()=>{const t=import.meta.url;const i={};if(t!==""){i.resourcesUrl=new URL(".",t).href}return e(i)};i().then((e=>t([["p-d87b0711",[[1,"justifi-payment-form",{bankAccount:[4,"bank-account"],card:[4],email:[1],iframeOrigin:[1,"iframe-origin"],clientId:[1,"client-id"],accountId:[1,"account-id"],submitButtonText:[1,"submit-button-text"],submitButtonEnabled:[32],isLoading:[32],selectedPaymentMethodType:[32],allowedPaymentMethodTypes:[32],fillBillingForm:[64],enableSubmitButton:[64]},[[0,"paymentMethodSelected","paymentMethodSelectedHandler"]]]]],["p-255b1284",[[1,"justifi-business-address",{businessAddress:[32],businessAddressErrors:[32],submit:[64]},[[0,"fieldReceivedInput","setFormValue"]]]]],["p-90c0d9e1",[[1,"justifi-business-info",{authToken:[1,"auth-token"],businessId:[1,"business-id"],businessInfoPrefillData:[32],businessInfo:[32],businessInfoFieldsErrors:[32],submit:[64]},[[0,"fieldReceivedInput","setFormValue"]]]]],["p-4ecc9860",[[0,"justifi-payment-method-form",{paymentMethodFormType:[1,"payment-method-form-type"],paymentMethodFormValidationMode:[1025,"payment-method-form-validation-mode"],iframeOrigin:[1,"iframe-origin"],singleLine:[4,"single-line"],height:[32],tokenize:[64],validate:[64],resize:[64]}]]],["p-bd5352d6",[[0,"justifi-bank-account-form",{validationMode:[1025,"validation-mode"],iframeOrigin:[1025,"iframe-origin"],internalStyleOverrides:[32],tokenize:[64],validate:[64],resize:[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["p-0969db8f",[[0,"justifi-card-form",{validationMode:[1025,"validation-mode"],iframeOrigin:[1025,"iframe-origin"],singleLine:[4,"single-line"],internalStyleOverrides:[32],tokenize:[64],validate:[64],resize:[64]},[[0,"paymentMethodFormReady","readyHandler"],[0,"paymentMethodFormTokenize","tokenizeHandler"],[0,"paymentMethodFormValidate","validateHandler"]]]]],["p-f30d1567",[[1,"justifi-payments-list",{accountId:[1,"account-id"],auth:[16],payments:[32]}]]],["p-dbf7100f",[[1,"select-input",{name:[1],label:[1],defaultValue:[1,"default-value"],error:[1],options:[16],internalValue:[32]}],[1,"text-input",{name:[1],label:[1],defaultValue:[1,"default-value"],error:[1],internalValue:[32]}]]],["p-c903cc5a",[[1,"justifi-billing-form",{legend:[1],billingFields:[32],billingFieldsErrors:[32],fill:[64],validate:[64],getValues:[64]},[[0,"fieldReceivedInput","setFormValue"]]],[1,"justifi-payment-method-selector",{paymentMethodTypes:[16],selectedPaymentMethodType:[1,"selected-payment-method-type"]}]]]],e)));
 //# sourceMappingURL=webcomponents.esm.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justifi/webcomponents",
-  "version": "4.2.1-rc.4",
+  "version": "4.2.2",
   "description": "JustiFi Web Components",
   "main": "dist/index.cjs.js",
   "module": "dist/components/index.js",

package/dist/webcomponents/p-2b8c281e.entry.js

@@ -1,2 +0,0 @@
-import{r as o,c as t,h as e,H as r}from"./p-3aa91155.js";const i={card:{ready:"justifi.card.ready",tokenize:"justifi.card.tokenize",validate:"justifi.card.validate",resize:"justifi.card.resize",styleOverrides:"justifi.card.styleOverrides"},bankAccount:{ready:"justifi.bankAccount.ready",tokenize:"justifi.bankAccount.tokenize",validate:"justifi.bankAccount.validate",resize:"justifi.bankAccount.resize",styleOverrides:"justifi.bankAccount.styleOverrides"}};const s="@justifi/webcomponents";const n="4.2.1-rc.4";const c="JustiFi Web Components";const d="dist/index.cjs.js";const a="dist/components/index.js";const l="dist/esm/index.mjs";const f="dist/esm/index.mjs";const h="dist/types/index.d.ts";const m="dist/collection/collection-manifest.json";const u={type:"git",url:"git+https://github.com/justifi-tech/web-component-library.git"};const b={registry:"https://registry.npmjs.org"};const p=["dist/","loader/"];const g={"auto-changelog":"auto-changelog","build:dev":"NODE_ENV=dev stencil build --docs","build:staging":"NODE_ENV=staging stencil build --docs","build:prod":"NODE_ENV=prod stencil build --docs",start:'NODE_ENV=dev concurrently -c "bgBlue.bold,bgMagenta.bold,bgGreen.bold" "yarn run start-stencil" "yarn run storybook"',"start-stencil":"stencil build --watch --serve --no-open",test:"stencil test --spec","test:watch":"stencil test --spec --watchAll","test:e2e":"stencil test --e2e",generate:"stencil generate",storybook:"storybook dev -p 6006 --quiet","build-storybook":"storybook build -o ../docs"};const y={"@stencil/core":"^3.3.0","@stencil/react-output-target":"^0.3.1",bootstrap:"^5.2.3","date-fns":"^2.29.3","dinero.js":"^1.9.1","ts-dedent":"^2.2.0",uuid:"^9.0.0",yup:"^1.0.0"};const j={"@babel/preset-env":"^7.21.5","@babel/preset-react":"^7.18.6","@babel/preset-typescript":"^7.21.5","@pxtrn/storybook-addon-docs-stencil":"^6.4.1","@stencil/sass":"^3.0.1","@storybook/addon-actions":"^7.0.4","@storybook/addon-essentials":"^7.0.4","@storybook/addon-interactions":"^7.0.4","@storybook/addon-links":"^7.0.4","@storybook/html":"^7.0.4","@storybook/html-webpack5":"^7.0.4","@storybook/jest":"^0.1.0","@storybook/testing-library":"^0.1.0","@types/jest":"27.0.3","@types/node":"^20.1.4","@types/react":"^18.0.37","@types/react-dom":"^18.0.11","auto-changelog":"^2.4.0",concurrently:"^7.6.0",jest:"^27.4.5","jest-cli":"^27.4.5",puppeteer:"^10.0.0",react:"^18.2.0","react-dom":"^18.2.0","release-it":"^15.6.0","rollup-plugin-replace":"^2.2.0",storybook:"^7.0.4"};const k="MIT";const w={name:s,version:n,description:c,main:d,module:a,es2015:l,es2017:f,types:h,collection:m,"collection:main":"dist/collection/index.js",repository:u,publishConfig:b,files:p,scripts:g,"auto-changelog":{output:"../CHANGELOG.md",hideCredtis:"true",commitLimit:"true"},dependencies:y,devDependencies:j,license:k};const v=()=>{const o=getComputedStyle(document.body);const t={layout:{padding:o.getPropertyValue("--jfi-layout-padding"),formControlSpacingHorizontal:o.getPropertyValue("--jfi-layout-form-control-spacing-x"),formControlSpacingVertical:o.getPropertyValue("--jfi-layout-form-control-spacing-y")},formControl:{backgroundColor:o.getPropertyValue("--jfi-form-control-background-color"),borderColor:o.getPropertyValue("--jfi-form-control-border-color"),borderColorFocus:o.getPropertyValue("--jfi-form-control-border-color-focus"),borderColorError:o.getPropertyValue("--jfi-form-control-border-color-error"),borderWidth:o.getPropertyValue("--jfi-form-control-border-width"),borderBottomWidth:o.getPropertyValue("--jfi-form-control-border-bottom-width"),borderLeftWidth:o.getPropertyValue("--jfi-form-control-border-left-width"),borderRightWidth:o.getPropertyValue("--jfi-form-control-border-right-width"),borderTopWidth:o.getPropertyValue("--jfi-form-control-border-top-width"),borderRadius:o.getPropertyValue("--jfi-form-control-border-radius"),borderStyle:o.getPropertyValue("--jfi-form-control-border-style"),boxShadow:o.getPropertyValue("--jfi-form-control-box-shadow"),boxShadowError:o.getPropertyValue("--jfi-form-control-box-shadow-error"),boxShadowErrorFocus:o.getPropertyValue("--jfi-form-control-box-shadow-error-focus"),boxShadowFocus:o.getPropertyValue("--jfi-form-control-box-shadow-focus"),color:o.getPropertyValue("--jfi-form-control-color"),colorFocus:o.getPropertyValue("--jfi-form-control-color-focus"),fontSize:o.getPropertyValue("--jfi-form-control-font-size"),fontWeight:o.getPropertyValue("--jfi-form-control-font-weight"),lineHeight:o.getPropertyValue("--jfi-form-control-line-height"),margin:o.getPropertyValue("--jfi-form-control-margin"),padding:o.getPropertyValue("--jfi-form-control-padding")},formLabel:{color:o.getPropertyValue("--jfi-form-label-color"),fontFamily:o.getPropertyValue("--jfi-form-label-font-family"),fontSize:o.getPropertyValue("--jfi-form-label-font-size"),fontWeight:o.getPropertyValue("--jfi-form-label-font-weight"),margin:o.getPropertyValue("--jfi-form-label-margin")},errorMessage:{color:o.getPropertyValue("--jfi-error-message-color"),margin:o.getPropertyValue("--jfi-error-message-margin"),fontSize:o.getPropertyValue("--jfi-error-message-font-size")}};return t};const z=":host{display:block}justifi-payment-method-form iframe{border:none;width:100%}";const x=class{constructor(e){o(this,e);this.paymentMethodFormReady=t(this,"paymentMethodFormReady",7);this.paymentMethodFormTokenize=t(this,"paymentMethodFormTokenize",7);this.computedTheme=v();this.paymentMethodFormType=undefined;this.paymentMethodFormValidationMode=undefined;this.iframeOrigin=undefined;this.singleLine=undefined;this.height=55}connectedCallback(){window.addEventListener("message",this.dispatchMessageEvent.bind(this))}disconnectedCallback(){window.removeEventListener("message",this.dispatchMessageEvent.bind(this))}componentShouldUpdate(){this.sendStyleOverrides()}sendStyleOverrides(){if(this.computedTheme){this.postMessage(i[this.paymentMethodFormType].styleOverrides,{styleOverrides:this.computedTheme})}}dispatchMessageEvent(o){const t=o.data;const e=t.eventType;const r=t.data;if(e===i[this.paymentMethodFormType].ready){this.paymentMethodFormReady.emit(r)}if(e===i[this.paymentMethodFormType].resize){this.height=r.height}}postMessage(o,t){var e,r;(r=(e=this.iframeElement)===null||e===void 0?void 0:e.contentWindow)===null||r===void 0?void 0:r.postMessage(Object.assign({eventType:o},t),"*")}async postMessageWithResponseListener(o,t){return new Promise((e=>{const r=t=>{if(t.data.eventType!==o)return;window.removeEventListener("message",r);e(t.data.data)};window.addEventListener("message",r);this.postMessage(o,t)}))}async tokenize(o,t,e){const r=i[this.paymentMethodFormType].tokenize;const s={clientId:o,componentVersion:w.version,paymentMethodMetadata:t,account:e};return this.postMessageWithResponseListener(r,s)}async validate(){return this.postMessageWithResponseListener(i[this.paymentMethodFormType].validate)}async resize(){this.postMessage(i[this.paymentMethodFormType].resize)}composeQueryParams(o){const t=o.map((t=>{if(t===o[0]){return t=`?${t}`}else{return t=`&${t}`}}));return t.join("")}getIframeSrc(){const o=this.iframeOrigin||"https://js.justifi.ai/v2";let t=`${o}/${this.paymentMethodFormType}`;let e=[];if(this.paymentMethodFormValidationMode){e.push(`validationMode=${this.paymentMethodFormValidationMode}`)}if(this.singleLine){e.push(`singleLine=${this.singleLine}`)}return t.concat(this.composeQueryParams(e))}render(){return e(r,null,e("iframe",{id:`justifi-payment-method-form-${this.paymentMethodFormType}`,src:this.getIframeSrc(),ref:o=>this.iframeElement=o,height:this.height}))}};x.style=z;export{x as justifi_payment_method_form};
-//# sourceMappingURL=p-2b8c281e.entry.js.map