npm - @justifi/webcomponents - Versions diffs - 4.7.0-rc.0 → 4.7.0-rc.2 - Mend

@justifi/webcomponents 4.7.0-rc.0 → 4.7.0-rc.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (338) hide show

package/dist/collection/components/business-form/business-form.stories.js CHANGED Viewed

@@ -1,8 +1,9 @@
+import { config } from "../../../config";
 class BusinessFormStoryArgs {
   constructor(args) {
     this['auth-token'] = args['auth-token'] || '';
     this['business-id'] = args['business-id'] || '';
-    this['account-id'] = args['account-id'] || process.env.EXAMPLE_BUSINESS_ACCOUNT_ID;
+    this['account-id'] = args['account-id'] || config.exampleBusinessAccountId;
     this['cssVariables'] = args['cssVariables'] || '';
   }
 }

package/dist/collection/components/business-form/business-form.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"business-form.stories.js","sourceRoot":"","sources":["../../../../src/components/business-form/business-form.stories.tsx"],"names":[],"mappings":"~~AACA~~,MAAM,qBAAqB;EAMzB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC9C,IAAI,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;IAChD,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,~~OAAO~~,CAAC,~~GAAG~~,CAAC~~,2BAA2B,CAAC~~;~~IACnF~~,IAAI,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;EACpD,CAAC;CACF;AAED,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,SAAS,EAAE,uBAAuB;EAClC,QAAQ,EAAE;IACR,YAAY,EAAE;MACZ,OAAO,EAAE,MAAM;MACf,KAAK,EAAE;QACL,QAAQ,EAAE,OAAO;OAClB;KACF;IACD,YAAY,EAAE;MACZ,OAAO,EAAE,MAAM;MACf,KAAK,EAAE;QACL,QAAQ,EAAE,OAAO;OAClB;KACF;IACD,aAAa,EAAE;MACb,OAAO,EAAE,MAAM;MACf,KAAK,EAAE;QACL,QAAQ,EAAE,OAAO;OAClB;KACF;GACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA2B,EAAE,EAAE;EAC/C,wFAAwF;EACxF,OAAO;;;sBAGa,IAAI,CAAC,YAAY,CAAC;sBAClB,IAAI,CAAC,YAAY,CAAC;uBACjB,IAAI,CAAC,aAAa,CAAC;;;;;UAKhC,IAAI,CAAC,YAAY;;;GAGxB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,qBAAqB,CAAC,EAAE,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,KAAK,CAAC,IAAI,GAAG,IAAI,qBAAqB,CAAC;EACrC,YAAY,EAAE,EAAE;EAChB,aAAa,EAAE,EAAE;EACjB,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEb;CACF,CAAC,CAAC","sourcesContent":["\nclass BusinessFormStoryArgs {\n 'auth-token': string;\n 'account-id': string;\n 'bussiness-id': string;\n 'cssVariables': string;\n\n constructor(args) {\n this['auth-token'] = args['auth-token'] \|\| '';\n this['business-id'] = args['business-id'] \|\| '';\n this['account-id'] = args['account-id'] \|\| ~~process~~.~~env.EXAMPLE_BUSINESS_ACCOUNT_ID~~;\n this['cssVariables'] = args['cssVariables'] \|\| '';\n }\n}\n\nexport default {\n title: 'Components/BusinessForm',\n component: 'justifi-business-form',\n argTypes: {\n 'auth-token': {\n control: 'text',\n table: {\n category: 'props',\n },\n },\n 'account-id': {\n control: 'text',\n table: {\n category: 'props',\n },\n },\n 'business-id': {\n control: 'text',\n table: {\n category: 'props',\n },\n },\n },\n};\n\nconst Template = (args: BusinessFormStoryArgs) => {\n // The <div> here should be replaced by a `display` property in the cardForm potentially\n return `\n <div>\n <justifi-business-form\n auth-token=\"${args['auth-token']}\"\n account-id=\"${args['account-id']}\"\n business-id=\"${args['business-id']}\"\n />\n </div>\n <style>\n :root {\n ${args.cssVariables}\n }\n </style>\n `;\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new BusinessFormStoryArgs({});\n\nexport const Styled = Template.bind({});\nBasic.args = new BusinessFormStoryArgs({\n 'auth-token': '',\n 'business-id': '',\n cssVariables: `\n --jfi-primary-color: #212529;\n --jfi-load-google-font: 'Roboto Mono:wght@200;400;700;900';\n --jfi-layout-font-family: Roboto Mono, Calibri, sans-serif;\n --jfi-layout-padding: 4px;\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: Calibri, 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: 0 2px 4px rgba(0, 0, 0, 0.2);\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 --jfi-submit-button-color: white;\n --jfi-submit-button-background-color: #3F3F47;\n --jfi-submit-button-border-color: var(--jfi-primary-color);\n --jfi-submit-button-padding: 0.375rem 0.75rem;\n --jfi-submit-button-font-size: 1rem;\n --jfi-submit-button-border-radius: 1px;\n --jfi-submit-button-color-hover: white;\n --jfi-submit-button-background-color-hover: var(--jfi-primary-color);\n --jfi-submit-button-border-color-hover: var(--jfi-primary-color);\n --jfi-submit-button-color-focus: white;\n --jfi-submit-button-background-color-focus: var(--jfi-primary-color);\n --jfi-submit-button-border-color-focus: var(--jfi-primary-color);\n --jfi-submit-button-color-active: white;\n --jfi-submit-button-background-color-active: var(--jfi-primary-color);\n --jfi-submit-button-border-color-active: var(--jfi-primary-color);\n --jfi-submit-button-width: 100%;\n --jfi-submit-button-box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;\n\n --jfi-radio-button-color: var(--jfi-primary-color);\n --jfi-radio-button-background-color: transparent;\n --jfi-radio-button-color-selected: white;\n --jfi-radio-button-background-color-selected: var(--jfi-primary-color);\n --jfi-radio-button-border-color: var(--jfi-primary-color);\n --jfi-radio-button-border-color-selected: var(--jfi-primary-color);\n --jfi-radio-button-padding: 0.375rem 0.75rem;\n --jfi-radio-button-font-size: 1rem;\n --jfi-radio-button-color-hover: var(--jfi-primary-color);\n --jfi-radio-button-color-selected-hover: white;\n --jfi-radio-button-background-color-hover: transparent;\n --jfi-radio-button-background-color-selected-hover: var(--jfi-primary-color);\n --jfi-radio-button-border-color-selected-hover: var(--jfi-primary-color);\n --jfi-radio-button-border-color-hover: var(--jfi-primary-color);\n --jfi-radio-button-group-width: 100%;\n `,\n});\n"]}
1	+ {"version":3,"file":"business-form.stories.js","sourceRoot":"","sources":["../../../../src/components/business-form/business-form.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,MAAM,qBAAqB;EAMzB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;IAC9C,IAAI,CAAC,aAAa,CAAC,GAAG,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;IAChD,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,wBAAwB,CAAC;IAC3E,IAAI,CAAC,cAAc,CAAC,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC;EACpD,CAAC;CACF;AAED,eAAe;EACb,KAAK,EAAE,yBAAyB;EAChC,SAAS,EAAE,uBAAuB;EAClC,QAAQ,EAAE;IACR,YAAY,EAAE;MACZ,OAAO,EAAE,MAAM;MACf,KAAK,EAAE;QACL,QAAQ,EAAE,OAAO;OAClB;KACF;IACD,YAAY,EAAE;MACZ,OAAO,EAAE,MAAM;MACf,KAAK,EAAE;QACL,QAAQ,EAAE,OAAO;OAClB;KACF;IACD,aAAa,EAAE;MACb,OAAO,EAAE,MAAM;MACf,KAAK,EAAE;QACL,QAAQ,EAAE,OAAO;OAClB;KACF;GACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA2B,EAAE,EAAE;EAC/C,wFAAwF;EACxF,OAAO;;;sBAGa,IAAI,CAAC,YAAY,CAAC;sBAClB,IAAI,CAAC,YAAY,CAAC;uBACjB,IAAI,CAAC,aAAa,CAAC;;;;;UAKhC,IAAI,CAAC,YAAY;;;GAGxB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,qBAAqB,CAAC,EAAE,CAAC,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,KAAK,CAAC,IAAI,GAAG,IAAI,qBAAqB,CAAC;EACrC,YAAY,EAAE,EAAE;EAChB,aAAa,EAAE,EAAE;EACjB,YAAY,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqEb;CACF,CAAC,CAAC","sourcesContent":["import { config } from '../../../config';\n\nclass BusinessFormStoryArgs {\n 'auth-token': string;\n 'account-id': string;\n 'bussiness-id': string;\n 'cssVariables': string;\n\n constructor(args) {\n this['auth-token'] = args['auth-token'] \|\| '';\n this['business-id'] = args['business-id'] \|\| '';\n this['account-id'] = args['account-id'] \|\| config.exampleBusinessAccountId;\n this['cssVariables'] = args['cssVariables'] \|\| '';\n }\n}\n\nexport default {\n title: 'Components/BusinessForm',\n component: 'justifi-business-form',\n argTypes: {\n 'auth-token': {\n control: 'text',\n table: {\n category: 'props',\n },\n },\n 'account-id': {\n control: 'text',\n table: {\n category: 'props',\n },\n },\n 'business-id': {\n control: 'text',\n table: {\n category: 'props',\n },\n },\n },\n};\n\nconst Template = (args: BusinessFormStoryArgs) => {\n // The <div> here should be replaced by a `display` property in the cardForm potentially\n return `\n <div>\n <justifi-business-form\n auth-token=\"${args['auth-token']}\"\n account-id=\"${args['account-id']}\"\n business-id=\"${args['business-id']}\"\n />\n </div>\n <style>\n :root {\n ${args.cssVariables}\n }\n </style>\n `;\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new BusinessFormStoryArgs({});\n\nexport const Styled = Template.bind({});\nBasic.args = new BusinessFormStoryArgs({\n 'auth-token': '',\n 'business-id': '',\n cssVariables: `\n --jfi-primary-color: #212529;\n --jfi-load-google-font: 'Roboto Mono:wght@200;400;700;900';\n --jfi-layout-font-family: Roboto Mono, Calibri, sans-serif;\n --jfi-layout-padding: 4px;\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: Calibri, 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: 0 2px 4px rgba(0, 0, 0, 0.2);\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 --jfi-submit-button-color: white;\n --jfi-submit-button-background-color: #3F3F47;\n --jfi-submit-button-border-color: var(--jfi-primary-color);\n --jfi-submit-button-padding: 0.375rem 0.75rem;\n --jfi-submit-button-font-size: 1rem;\n --jfi-submit-button-border-radius: 1px;\n --jfi-submit-button-color-hover: white;\n --jfi-submit-button-background-color-hover: var(--jfi-primary-color);\n --jfi-submit-button-border-color-hover: var(--jfi-primary-color);\n --jfi-submit-button-color-focus: white;\n --jfi-submit-button-background-color-focus: var(--jfi-primary-color);\n --jfi-submit-button-border-color-focus: var(--jfi-primary-color);\n --jfi-submit-button-color-active: white;\n --jfi-submit-button-background-color-active: var(--jfi-primary-color);\n --jfi-submit-button-border-color-active: var(--jfi-primary-color);\n --jfi-submit-button-width: 100%;\n --jfi-submit-button-box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 2px 2px 0px, rgba(0, 0, 0, 0.12) 0px 1px 5px 0px;\n\n --jfi-radio-button-color: var(--jfi-primary-color);\n --jfi-radio-button-background-color: transparent;\n --jfi-radio-button-color-selected: white;\n --jfi-radio-button-background-color-selected: var(--jfi-primary-color);\n --jfi-radio-button-border-color: var(--jfi-primary-color);\n --jfi-radio-button-border-color-selected: var(--jfi-primary-color);\n --jfi-radio-button-padding: 0.375rem 0.75rem;\n --jfi-radio-button-font-size: 1rem;\n --jfi-radio-button-color-hover: var(--jfi-primary-color);\n --jfi-radio-button-color-selected-hover: white;\n --jfi-radio-button-background-color-hover: transparent;\n --jfi-radio-button-background-color-selected-hover: var(--jfi-primary-color);\n --jfi-radio-button-border-color-selected-hover: var(--jfi-primary-color);\n --jfi-radio-button-border-color-hover: var(--jfi-primary-color);\n --jfi-radio-button-group-width: 100%;\n `,\n});\n"]}

package/dist/collection/components/business-list/business-list.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { Host, h } from "@stencil/core";
 import { Api, pagingDefaults } from "../../api";
 import { Business } from "../../api/Business";
 import { formatDate, snakeCaseToHumanReadable } from "../../utils/utils";
+import { config } from "../../../config";
 /**
  * @exportedPart table-head: Table head
  * @exportedPart table-head-row: Head row
@@ -59,7 +60,8 @@ export class BusinessList {
     this.loading = true;
     const endpoint = `entities/business`;
     let accountIDParam = { account_id: this.accountId };
-    const response = await Api(this.authToken, process.env.ENTITIES_API_ORIGIN).get(endpoint, Object.assign(Object.assign({}, accountIDParam), this.params));
+    const response = await Api(this.authToken, config.proxyApiOrigin)
+      .get(endpoint, Object.assign(Object.assign({}, accountIDParam), this.params));
     if (!response.error) {
       this.paging = Object.assign(Object.assign({}, this.paging), response.page_info);
       const data = (_a = response === null || response === void 0 ? void 0 : response.data) === null || _a === void 0 ? void 0 : _a.map(dataItem => new Business(dataItem));

package/dist/collection/components/business-list/business-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"business-list.js","sourceRoot":"","sources":["../../../../src/components/business-list/business-list.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,GAAG,EAAsC,cAAc,EAAE,MAAM,WAAW,CAAC;AACpF,OAAO,EAAE,QAAQ,EAAa,MAAM,oBAAoB,CAAC;AACzD,OAAO,EAAE,UAAU,EAAE,wBAAwB,EAAE,MAAM,mBAAmB,CAAC;~~AAEzE~~;;;;;;;;;;;;;;;;GAgBG;AAMH,MAAM,OAAO,YAAY;;IAiCvB,4BAAuB,GAAG,CAAC,MAAe,EAAE,EAAE;MAC5C,OAAO,CAAC,MAAM,IAAI,YAAY,CAAC,IAAI,cAAc,CAAC;IACpD,CAAC,CAAC;IAEF,wBAAmB,GAAG,CAAC,YAAoB,EAAE,EAAE;MAC7C,MAAM,SAAS,qBAAa,IAAI,CAAC,MAAM,CAAE,CAAC;MAC1C,OAAO,SAAS,CAAC,YAAY,CAAC;MAC9B,IAAI,CAAC,MAAM,GAAG,iCAAM,SAAS,KAAE,aAAa,EAAE,YAAY,IAAG,CAAC;IAChE,CAAC,CAAC;IAEF,oBAAe,GAAG,CAAC,WAAmB,EAAE,EAAE;MACxC,MAAM,SAAS,qBAAa,IAAI,CAAC,MAAM,CAAE,CAAC;MAC1C,OAAO,SAAS,CAAC,aAAa,CAAC;MAC/B,IAAI,CAAC,MAAM,GAAG,iCAAM,SAAS,KAAE,YAAY,EAAE,WAAW,IAAG,CAAC;IAC9D,CAAC,CAAC;;;sBA/BgC,EAAE;mBACR,IAAI;;kBAEF,cAAc;;;EAM5C,kBAAkB;IAChB,IAAI,CAAC,SAAS,EAAE,CAAC;EACnB,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,SAAS,EAAE,CAAC;EACnB,CAAC;EAkBD,KAAK,CAAC,SAAS;;IACb,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;MACtC,IAAI,CAAC,YAAY;QACf,8DAA8D,CAAC;MACjE,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;MACrB,OAAO;KACR;IACD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;IACpB,MAAM,QAAQ,GAAG,mBAAmB,CAAC;IACrC,IAAI,cAAc,GAAG,EAAE,UAAU,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC;IAEpD,MAAM,QAAQ,GAAuC,MAAM,GAAG,~~CAC5D~~,IAAI,CAAC,SAAS,~~EACd~~,~~OAAO~~,CAAC,~~GAAG~~,~~CAAC~~,~~mBAAmB,CAChC,CAAC,~~GAAG,CAAC,QAAQ,kCAAO,cAAc,GAAK,IAAI,CAAC,MAAM,EAAG,CAAC;~~IACvD~~,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE;MACnB,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,GACX,QAAQ,CAAC,SAAS,CACtB,CAAC;MAEF,MAAM,IAAI,GAAG,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI,0CAAE,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC;MACrE,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC;KACxB;SAAM;MACL,IAAI,CAAC,YAAY;QACf,OAAO,QAAQ,CAAC,KAAK,KAAK,QAAQ;UAChC,CAAC,CAAC,QAAQ,CAAC,KAAK;UAChB,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC;KAC9B;IAED,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;EACvB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,qBACE,UAAU,EAAE;UACV,CAAC,YAAY,EAAE,wCAAwC,CAAC;UACxD,CAAC,eAAe,EAAE,mBAAmB,CAAC;UACtC,CAAC,oBAAoB,EAAE,wBAAwB,CAAC;UAChD,CAAC,QAAQ,EAAE,0CAA0C,CAAC;UACtD,CAAC,UAAU,EAAE,4CAA4C,CAAC;UAC1D;YACE,eAAe;YACf,qDAAqD;WACtD;UACD,CAAC,YAAY,EAAE,gCAAgC,CAAC;SACjD,EACD,OAAO,EAAE,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,QAAmB,EAAE,EAAE,CAAC;UACpD,QAAQ,CAAC,UAAU;UACnB,wBAAwB,CAAC,QAAQ,CAAC,aAAa,CAAC;UAChD,wBAAwB,CAAC,QAAQ,CAAC,kBAAkB,CAAC;UACrD,QAAQ,CAAC,MAAM;UACf,QAAQ,CAAC,QAAQ;UACjB;YACE,IAAI,EAAE,OAAO;YACb,KAAK,EAAE;;2CAEsB,IAAI,CAAC,uBAAuB,~~CAC/C~~,QAAQ,CAAC,kBAAkB,CAAC,MAAM,CACnC;~~2CACoB~~,IAAI,CAAC,uBAAuB,~~CAC/C~~,QAAQ,CAAC,kBAAkB,CAAC,SAAS,CACtC;~~2CACoB~~,IAAI,CAAC,uBAAuB,~~CAC/C~~,QAAQ,CAAC,kBAAkB,CAAC,OAAO,CACpC;~~2CACoB~~,IAAI,CAAC,uBAAuB,~~CAC/C~~,QAAQ,CAAC,kBAAkB,CAAC,OAAO,CACpC;;~~mBAEJ~~;WACN;UACD,UAAU,CAAC,QAAQ,CAAC,UAAU,CAAC;SAChC,CAAC,EACF,OAAO,EAAE,IAAI,CAAC,OAAO,mBACN,IAAI,CAAC,YAAY,EAChC,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,MAAM,kCACD,IAAI,CAAC,MAAM,KACd,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,mBAAmB,EAAE,IAAI,CAAC,mBAAmB,MAE/C,CACG,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { Api, IApiResponseCollection, PagingInfo, pagingDefaults } from '../../api';\nimport { Business, IBusiness } from '../../api/Business';\nimport { formatDate, snakeCaseToHumanReadable } from '../../utils/utils';\n\n/*\n @exportedPart table-head: Table head\n * @exportedPart table-head-row: Head row\n * @exportedPart table-head-cell: Individual head cell\n * @exportedPart table-body: Body of the table\n * @exportedPart table-row: Row of the table\n * @exportedPart table-cell: Individual cell of the table\n * @exportedPart loading-state-cell: Row for loading state\n * @exportedPart loading-state-spinner: Spinner element for loading state\n * @exportedPart error-state: Row for Error state\n * @exportedPart empty-state: Row for Emtpy state\n * @exportedPart pagination-bar: Pagination bar\n * @exportedPart arrow: Both paging buttons\n * @exportedPart arrow-left: Previous page button\n * @exportedPart arrow-right: Next page button\n * @exportedPart arrow-disabled: Disabled state for paging buttons\n /\n@Component({\n tag: 'justifi-business-list',\n styleUrl: 'business-list.scss',\n shadow: true,\n})\nexport class BusinessList {\n /\n The Account ID to fetch payments.\n * This is required to fetch any data.\n * @required\n * @type {string}\n * @memberof PaymentsList\n /\n @Prop() accountId: string;\n /\n The Auth Token to fetch payments.\n * This is required to fetch any data.\n * @required\n * @type {string}\n */\n @Prop() authToken: string;\n @State() businesses: Business[] = [];\n @State() loading: boolean = true;\n @State() errorMessage: string;\n @State() paging: PagingInfo = pagingDefaults;\n @State() params: any\n\n @Watch('accountId')\n @Watch('authToken')\n @Watch('params')\n updateOnPropChange() {\n this.fetchData();\n }\n\n connectedCallback() {\n this.fetchData();\n }\n\n mapProductStatusToBadge = (status: boolean) => {\n return (status && 'bg-success') \|\| 'bg-secondary';\n };\n\n handleClickPrevious = (beforeCursor: string) => {\n const newParams: any = { ...this.params };\n delete newParams.after_cursor;\n this.params = ({ ...newParams, before_cursor: beforeCursor });\n };\n\n handleClickNext = (afterCursor: string) => {\n const newParams: any = { ...this.params };\n delete newParams.before_cursor;\n this.params = ({ ...newParams, after_cursor: afterCursor });\n }~~; \~~n\n async fetchData(): Promise<void> {\n if (!this.accountId \|\| !this.authToken) {\n this.errorMessage =\n 'Can not fetch any data without an AccountID and an AuthToken';\n this.loading = false;\n return;\n }\n this.loading = true;\n const endpoint = `entities/business`;\n let accountIDParam = { account_id: this.accountId };\n\n const response: IApiResponseCollection<Business[]> = await Api(\n this.authToken,\n ~~process~~.~~env.ENTITIES_API_ORIGIN,\n ).~~get(endpoint, { ...accountIDParam, ...this.params });\n if (!response.error) {\n this.paging = {\n ...this.paging,\n ...response.page_info,\n };\n\n const data = response?.data?.map(dataItem => new Business(dataItem));\n this.businesses = data;\n } else {\n this.errorMessage =\n typeof response.error === 'string'\n ? response.error\n : response.error.message;\n }\n\n this.loading = false;\n }\n\n render() {\n return (\n <Host>\n <justifi-table\n columnData={[\n ['Legal Name', 'The name associated with this Business'],\n ['Business Type', 'The business type'],\n ['Business Structure', 'The business structure'],\n ['Tax ID', 'The tax ID associated with this business'],\n ['Industry', 'The industry this business participates in'],\n [\n 'Product Ready',\n 'List of our products that are used by this business',\n ],\n ['Created at', 'Date this business was created'],\n ]}\n rowData={this.businesses.map((business: IBusiness) => [\n business.legal_name,\n snakeCaseToHumanReadable(business.business_type),\n snakeCaseToHumanReadable(business.business_structure),\n business.tax_id,\n business.industry,\n {\n type: 'inner',\n value: `\n <div class=\"d-flex flex-nowrap gap-1\">\n <span class=\"badge ${this.mapProductStatusToBadge(\n business.product_categories.credit,\n )}\">Credit</span>\n <span class=\"badge ${this.mapProductStatusToBadge(\n business.product_categories.insurance,\n )}\">Insurance</span>\n <span class=\"badge ${this.mapProductStatusToBadge(\n business.product_categories.lending,\n )}\">Lending</span>\n <span class=\"badge ${this.mapProductStatusToBadge(\n business.product_categories.payment,\n )}\">Payment</span>\n </div>\n `,\n },\n formatDate(business.created_at),\n ])}\n loading={this.loading}\n error-message={this.errorMessage}\n params={this.params}\n paging={{\n ...this.paging,\n handleClickNext: this.handleClickNext,\n handleClickPrevious: this.handleClickPrevious\n }}\n />\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"business-list.js","sourceRoot":"","sources":["../../../../src/components/business-list/business-list.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { Api, IApiResponseCollection, PagingInfo, pagingDefaults } from '../../api';\nimport { Business, IBusiness } from '../../api/Business';\nimport { formatDate, snakeCaseToHumanReadable } from '../../utils/utils';\nimport { config } from '../../../config';\n\n\n/*\n @exportedPart table-head: Table head\n * @exportedPart table-head-row: Head row\n * @exportedPart table-head-cell: Individual head cell\n * @exportedPart table-body: Body of the table\n * @exportedPart table-row: Row of the table\n * @exportedPart table-cell: Individual cell of the table\n * @exportedPart loading-state-cell: Row for loading state\n * @exportedPart loading-state-spinner: Spinner element for loading state\n * @exportedPart error-state: Row for Error state\n * @exportedPart empty-state: Row for Emtpy state\n * @exportedPart pagination-bar: Pagination bar\n * @exportedPart arrow: Both paging buttons\n * @exportedPart arrow-left: Previous page button\n * @exportedPart arrow-right: Next page button\n * @exportedPart arrow-disabled: Disabled state for paging buttons\n /\n@Component({\n tag: 'justifi-business-list',\n styleUrl: 'business-list.scss',\n shadow: true,\n})\nexport class BusinessList {\n /\n The Account ID to fetch payments.\n * This is required to fetch any data.\n * @required\n * @type {string}\n * @memberof PaymentsList\n /\n @Prop() accountId: string;\n /\n The Auth Token to fetch payments.\n * This is required to fetch any data.\n * @required\n * @type {string}\n */\n @Prop() authToken: string;\n @State() businesses: Business[] = [];\n @State() loading: boolean = true;\n @State() errorMessage: string;\n @State() paging: PagingInfo = pagingDefaults;\n @State() params: any\n\n @Watch('accountId')\n @Watch('authToken')\n @Watch('params')\n updateOnPropChange() {\n this.fetchData();\n }\n\n connectedCallback() {\n this.fetchData();\n }\n\n mapProductStatusToBadge = (status: boolean) => {\n return (status && 'bg-success') \|\| 'bg-secondary';\n };\n\n handleClickPrevious = (beforeCursor: string) => {\n const newParams: any = { ...this.params };\n delete newParams.after_cursor;\n this.params = ({ ...newParams, before_cursor: beforeCursor });\n };\n\n handleClickNext = (afterCursor: string) => {\n const newParams: any = { ...this.params };\n delete newParams.before_cursor;\n this.params = ({ ...newParams, after_cursor: afterCursor });\n };\n\n async fetchData(): Promise<void> {\n if (!this.accountId \|\| !this.authToken) {\n this.errorMessage =\n 'Can not fetch any data without an AccountID and an AuthToken';\n this.loading = false;\n return;\n }\n this.loading = true;\n const endpoint = `entities/business`;\n let accountIDParam = { account_id: this.accountId };\n\n const response: IApiResponseCollection<Business[]> = await Api(this.authToken, config.proxyApiOrigin,)\n .get(endpoint, { ...accountIDParam, ...this.params });\n\n if (!response.error) {\n this.paging = {\n ...this.paging,\n ...response.page_info,\n };\n\n const data = response?.data?.map(dataItem => new Business(dataItem));\n this.businesses = data;\n } else {\n this.errorMessage =\n typeof response.error === 'string'\n ? response.error\n : response.error.message;\n }\n\n this.loading = false;\n }\n\n render() {\n return (\n <Host>\n <justifi-table\n columnData={[\n ['Legal Name', 'The name associated with this Business'],\n ['Business Type', 'The business type'],\n ['Business Structure', 'The business structure'],\n ['Tax ID', 'The tax ID associated with this business'],\n ['Industry', 'The industry this business participates in'],\n [\n 'Product Ready',\n 'List of our products that are used by this business',\n ],\n ['Created at', 'Date this business was created'],\n ]}\n rowData={this.businesses.map((business: IBusiness) => [\n business.legal_name,\n snakeCaseToHumanReadable(business.business_type),\n snakeCaseToHumanReadable(business.business_structure),\n business.tax_id,\n business.industry,\n {\n type: 'inner',\n value: `\n <div class=\"d-flex flex-nowrap gap-1\">\n <span class=\"badge ${this.mapProductStatusToBadge(\n business.product_categories.credit,\n )}\">Credit</span>\n <span class=\"badge ${this.mapProductStatusToBadge(\n business.product_categories.insurance,\n )}\">Insurance</span>\n <span class=\"badge ${this.mapProductStatusToBadge(\n business.product_categories.lending,\n )}\">Lending</span>\n <span class=\"badge ${this.mapProductStatusToBadge(\n business.product_categories.payment,\n )}\">Payment</span>\n </div>\n `,\n },\n formatDate(business.created_at),\n ])}\n loading={this.loading}\n error-message={this.errorMessage}\n params={this.params}\n paging={{\n ...this.paging,\n handleClickNext: this.handleClickNext,\n handleClickPrevious: this.handleClickPrevious\n }}\n />\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/business-list/business-list.stories.js CHANGED Viewed

@@ -1,3 +1,4 @@
+import { config } from "../../../config";
 export default {
   title: 'dev/Components/BusinessList',
   component: 'justifi-business-list',
@@ -5,8 +6,8 @@ export default {
 };
 class BusinessListArgs {
   constructor(args) {
-    this['auth-token'] = args['auth-token'] || 'tbd';
-    this['account-id'] = args['account-id'] || process.env.EXAMPLE_BUSINESS_ACCOUNT_ID;
+    this['auth-token'] = args['auth-token'] || config.proxyAuthToken;
+    this['account-id'] = args['account-id'] || config.exampleBusinessAccountId;
   }
 }
 const Template = (args) => {

package/dist/collection/components/business-list/business-list.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"business-list.stories.js","sourceRoot":"","sources":["../../../../src/components/business-list/business-list.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACb,KAAK,EAAE,6BAA6B;EACpC,SAAS,EAAE,uBAAuB;EAClC,UAAU,EAAE,EAAE;CACf,CAAC;AAEF,MAAM,gBAAgB;EAIpB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,~~KAAK~~,CAAC;~~IACjD~~,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,~~OAAO~~,CAAC,~~GAAG~~,CAAC~~,2BAA2B,CAAC~~;~~EACrF~~,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAsB,EAAE,EAAE;EAC1C,OAAO,CAAC;;;oBAGU,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;;GAEnC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC;AAEtC,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC;AACvC,MAAM,CAAC,UAAU,GAAG;EAClB,CAAC,KAAK,EAAE,EAAE,CAAC;MACP,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BV;CACF,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,UAAU,GAAG;EACrB,CAAC,KAAK,EAAE,EAAE,CAAC;;QAEL,KAAK,EAAE;;GAEZ;CACF,CAAA;AACD,SAAS,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC","sourcesContent":["~~export~~ default {\n title: 'dev/Components/BusinessList',\n component: 'justifi-business-list',\n parameters: {}\n};\n\nclass BusinessListArgs {\n 'auth-token': string;\n 'account-id': string;\n\n constructor(args) {\n this['auth-token'] = args['auth-token'] \|\| ~~'tbd'~~;\n this['account-id'] = args['account-id'] \|\| ~~process~~.~~env.EXAMPLE_BUSINESS_ACCOUNT_ID~~;\n }\n}\n\nconst Template = (args: BusinessListArgs) => {\n return (`\n <justifi-business-list\n data-testid=\"justifi-business-list\"\n auth-token=\"${args['auth-token']}\"\n account-id=\"${args['account-id']}\"\n />\n `);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new BusinessListArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new BusinessListArgs({});\nStyled.decorators = [\n (Story) => `\n ${Story()}\n <style>\n justifi-business-list::part(table-head-cell) {\n background-color: #F4F4F6;\n }\n justifi-business-list::part(pagination-bar) {\n background-color: #F4F4F6;\n }\n justifi-business-list::part(arrow) {\n --bs-btn-disabled-bg: #212529;\n --bs-btn-disabled-border-color: #212529;\n --bs-btn-bg: #212529;\n --bs-btn-border-color: #212529;\n --bs-btn-hover-bg: #fccc32;\n --bs-btn-hover-border-color: #fccc32;\n }\n justifi-business-list::part(error-state) {\n color: red;\n background-color: #EEEEF5;\n }\n justifi-business-list::part(loading-state-cell) {\n background-color: #EEEEF5;\n }\n justifi-business-list::part(table-row) {\n background-color: #EEEEF5;\n }\n justifi-business-list::part(table-row-even) {\n background-color: #F4F4F6;\n }\n </style>\n `\n]\n\nexport const Contained = Template.bind({});\nContained.decorators = [\n (Story) => `\n <div style=\"position: relative; width: 900px; height: 300px; overflow-x: hidden;\">\n ${Story()}\n </div>\n `\n]\nContained.args = new BusinessListArgs({});\n"]}
1	+ {"version":3,"file":"business-list.stories.js","sourceRoot":"","sources":["../../../../src/components/business-list/business-list.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAEzC,eAAe;EACb,KAAK,EAAE,6BAA6B;EACpC,SAAS,EAAE,uBAAuB;EAClC,UAAU,EAAE,EAAE;CACf,CAAC;AAEF,MAAM,gBAAgB;EAIpB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,cAAc,CAAC;IACjE,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,MAAM,CAAC,wBAAwB,CAAC;EAC7E,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAAsB,EAAE,EAAE;EAC1C,OAAO,CAAC;;;oBAGU,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;;GAEnC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC;AAEtC,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC;AACvC,MAAM,CAAC,UAAU,GAAG;EAClB,CAAC,KAAK,EAAE,EAAE,CAAC;MACP,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BV;CACF,CAAA;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC3C,SAAS,CAAC,UAAU,GAAG;EACrB,CAAC,KAAK,EAAE,EAAE,CAAC;;QAEL,KAAK,EAAE;;GAEZ;CACF,CAAA;AACD,SAAS,CAAC,IAAI,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { config } from '../../../config';\n\nexport default {\n title: 'dev/Components/BusinessList',\n component: 'justifi-business-list',\n parameters: {}\n};\n\nclass BusinessListArgs {\n 'auth-token': string;\n 'account-id': string;\n\n constructor(args) {\n this['auth-token'] = args['auth-token'] \|\| config.proxyAuthToken;\n this['account-id'] = args['account-id'] \|\| config.exampleBusinessAccountId;\n }\n}\n\nconst Template = (args: BusinessListArgs) => {\n return (`\n <justifi-business-list\n data-testid=\"justifi-business-list\"\n auth-token=\"${args['auth-token']}\"\n account-id=\"${args['account-id']}\"\n />\n `);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new BusinessListArgs({});\n\nexport const Styled = Template.bind({});\nStyled.args = new BusinessListArgs({});\nStyled.decorators = [\n (Story) => `\n ${Story()}\n <style>\n justifi-business-list::part(table-head-cell) {\n background-color: #F4F4F6;\n }\n justifi-business-list::part(pagination-bar) {\n background-color: #F4F4F6;\n }\n justifi-business-list::part(arrow) {\n --bs-btn-disabled-bg: #212529;\n --bs-btn-disabled-border-color: #212529;\n --bs-btn-bg: #212529;\n --bs-btn-border-color: #212529;\n --bs-btn-hover-bg: #fccc32;\n --bs-btn-hover-border-color: #fccc32;\n }\n justifi-business-list::part(error-state) {\n color: red;\n background-color: #EEEEF5;\n }\n justifi-business-list::part(loading-state-cell) {\n background-color: #EEEEF5;\n }\n justifi-business-list::part(table-row) {\n background-color: #EEEEF5;\n }\n justifi-business-list::part(table-row-even) {\n background-color: #F4F4F6;\n }\n </style>\n `\n]\n\nexport const Contained = Template.bind({});\nContained.decorators = [\n (Story) => `\n <div style=\"position: relative; width: 900px; height: 300px; overflow-x: hidden;\">\n ${Story()}\n </div>\n `\n]\nContained.args = new BusinessListArgs({});\n"]}

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

@@ -1,3 +1,4 @@
+import { config } from "../../../config";
 export default {
   title: 'Components/CardForm',
   component: 'justifi-card-form',
@@ -78,7 +79,7 @@ const Template = (args) => {
       <justifi-card-form
         data-testid="card-form-iframe"
         validation-mode='${args['validation-mode'] || 'onSubmit'}'
-        iframe-origin='${process.env.IFRAME_ORIGIN}'
+        iframe-origin='${config.iframeOrigin}'
         single-line='${args['single-line']}'
       />
     </div>

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

	@@ -1 +1 @@
1	- {"version":3,"file":"card-form.stories.js","sourceRoot":"","sources":["../../../../src/components/card-form/card-form.stories.ts"],"names":[],"mappings":"~~AAOA~~,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,SAAS,EAAE,mBAAmB;EAC9B,QAAQ,EAAE;IACR,QAAQ,EAAE;MACR,WAAW,EAAE,6DAA6D;MAC1E,KAAK,EAAE;QACL,QAAQ,EAAE,SAAS;OACpB;KACF;GACF;EACD,UAAU,EAAE;IACV,KAAK,CAAC,EAAE,CAAC;;;QAGL,KAAK,EAAE;gBACC,SAAS,EAAE;KACtB;GACF;CACF,CAAC;AAEF,MAAM,mBAAmB,GAAG,KAAK,EAAE,QAAoC,EAAE,EAAE;EACzE,MAAM,KAAK,GAAG,MAAM,QAAQ,CAAC,QAAQ,EAAE,CAAC;EACxC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;AACrB,CAAC,CAAC;AACF,MAAM,mBAAmB,GAAG,KAAK,EAAE,QAAoC,EAAE,iBAAiB,EAAE,EAAE;EAC5F,MAAM,gBAAgB,GAAG,MAAM,QAAQ,CAAC,QAAQ,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC;EACjF,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;AAChC,CAAC,CAAC;AACF,MAAM,iBAAiB,GAAG,KAAK,EAAE,QAAoC,EAAE,EAAE;EACvE,MAAM,QAAQ,CAAC,MAAM,EAAE,CAAC;AAC1B,CAAC,CAAC;AACF,MAAM,WAAW,GAAG,GAAG,EAAE;EACvB,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;EAClC,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,mBAAmB,CAA+B,CAAC;EAC3F,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;EAC5D,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;EAC5D,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;EACxD,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1C,mBAAmB,CAAC,QAAQ,CAAC,CAAC;EAChC,CAAC,CAAC,CAAC;EACH,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1C,mBAAmB,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;EACpC,CAAC,CAAC,CAAC;EACH,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;IACxC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;EAC9B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;EACrB,gBAAgB,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC;AACjD,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;SAiBX,CAAC;AAEV,MAAM,QAAQ,GAAG,CAAC,IAAuB,EAAE,EAAE;EAC3C,MAAM,cAAc,GAAG,IAAI,CAAC;EAE5B,OAAO;;;;UAIC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;;;;;2BAKV,IAAI,CAAC,iBAAiB,CAAC,IAAI,UAAU;yBACvC,~~OAAO~~,CAAC,~~GAAG,CAAC,aAAa~~;~~uBAC3B~~,IAAI,CAAC,aAAa,CAAC;;;MAGpC,cAAc,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;GACpC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;EACX,iBAAiB,EAAE,UAAU;EAC7B,aAAa,EAAE,KAAK;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,UAAU,CAAC,IAAI,GAAG;EAChB,aAAa,EAAE,IAAI;CACpB,CAAC;AAEF,MAAM,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCvB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG;EACZ,aAAa,EAAE,KAAK;EACpB,eAAe,EAAE,eAAe;CACjC,CAAC","sourcesContent":["~~interface~~ CardFormStoryArgs {\n 'iframe-origin': string;\n 'single-line': boolean;\n 'validation-mode': string;\n 'css-variables': string;\n}\n\nexport default {\n title: 'Components/CardForm',\n component: 'justifi-card-form',\n argTypes: {\n 'resize': {\n description: 'Deprecated: This method will be removed in future releases.',\n table: {\n category: 'methods',\n },\n },\n },\n decorators: [\n story => `\n <!-- Deprecated Notice -->\n <p style=\"color: red; font-family: 'Roboto Mono', monospace;\">Note: The 'resize' method is deprecated and will be removed in future releases.</p>\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 handleResizeClick = async (cardForm: HTMLJustifiCardFormElement) => {\n await cardForm.resize();\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 const resizeBtn = document.querySelector('#resize-btn');\n validateBtn?.addEventListener('click', () => {\n handleValidateClick(cardForm);\n });\n tokenizeBtn?.addEventListener('click', () => {\n handleTokenizeClick(cardForm, {});\n });\n resizeBtn?.addEventListener('click', () => {\n handleResizeClick(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 <button id=\"resize-btn\">Resize</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='${~~process~~.~~env.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-load-google-font: 'Inter:wght@200;400;700;900&family=Agdasima';\n --jfi-layout-font-family: Agdasima;\n --jfi-layout-padding: 4px;\n --jfi-layout-form-control-spacing-x: .5rem;\n --jfi-layout-form-control-spacing-y: 1rem;\n --jfi-form-label-font-weight: 100;\n --jfi-form-label-font-family: Inter;\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: 0 2px 4px rgba(0, 0, 0, 0.2);\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 'single-line': false,\n 'css-variables': styledVariables,\n};\n"]}
1	+ {"version":3,"file":"card-form.stories.js","sourceRoot":"","sources":["../../../../src/components/card-form/card-form.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AASzC,eAAe;EACb,KAAK,EAAE,qBAAqB;EAC5B,SAAS,EAAE,mBAAmB;EAC9B,QAAQ,EAAE;IACR,QAAQ,EAAE;MACR,WAAW,EAAE,6DAA6D;MAC1E,KAAK,EAAE;QACL,QAAQ,EAAE,SAAS;OACpB;KACF;GACF;EACD,UAAU,EAAE;IACV,KAAK,CAAC,EAAE,CAAC;;;QAGL,KAAK,EAAE;gBACC,SAAS,EAAE;KACtB;GACF;CACF,CAAC;AAEF,MAAM,mBAAmB,GAAG,KAAK,EAAE,QAAoC,EAAE,EAAE;EACzE,MAAM,KAAK,GAAG,MAAM,QAAQ,CAAC,QAAQ,EAAE,CAAC;EACxC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;AACrB,CAAC,CAAC;AACF,MAAM,mBAAmB,GAAG,KAAK,EAAE,QAAoC,EAAE,iBAAiB,EAAE,EAAE;EAC5F,MAAM,gBAAgB,GAAG,MAAM,QAAQ,CAAC,QAAQ,CAAC,WAAW,EAAE,iBAAiB,CAAC,CAAC;EACjF,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;AAChC,CAAC,CAAC;AACF,MAAM,iBAAiB,GAAG,KAAK,EAAE,QAAoC,EAAE,EAAE;EACvE,MAAM,QAAQ,CAAC,MAAM,EAAE,CAAC;AAC1B,CAAC,CAAC;AACF,MAAM,WAAW,GAAG,GAAG,EAAE;EACvB,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;EAClC,MAAM,QAAQ,GAAG,QAAQ,CAAC,aAAa,CAAC,mBAAmB,CAA+B,CAAC;EAC3F,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;EAC5D,MAAM,WAAW,GAAG,QAAQ,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;EAC5D,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,aAAa,CAAC,CAAC;EACxD,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1C,mBAAmB,CAAC,QAAQ,CAAC,CAAC;EAChC,CAAC,CAAC,CAAC;EACH,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;IAC1C,mBAAmB,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;EACpC,CAAC,CAAC,CAAC;EACH,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,gBAAgB,CAAC,OAAO,EAAE,GAAG,EAAE;IACxC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;EAC9B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,MAAM,SAAS,GAAG,GAAG,EAAE;EACrB,gBAAgB,CAAC,eAAe,EAAE,WAAW,CAAC,CAAC;AACjD,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG;;;;;;;;;;;;;;;;;SAiBX,CAAC;AAEV,MAAM,QAAQ,GAAG,CAAC,IAAuB,EAAE,EAAE;EAC3C,MAAM,cAAc,GAAG,IAAI,CAAC;EAE5B,OAAO;;;;UAIC,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;;;;;2BAKV,IAAI,CAAC,iBAAiB,CAAC,IAAI,UAAU;yBACvC,MAAM,CAAC,YAAY;uBACrB,IAAI,CAAC,aAAa,CAAC;;;MAGpC,cAAc,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE;GACpC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACvC,KAAK,CAAC,IAAI,GAAG;EACX,iBAAiB,EAAE,UAAU;EAC7B,aAAa,EAAE,KAAK;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAC5C,UAAU,CAAC,IAAI,GAAG;EAChB,aAAa,EAAE,IAAI;CACpB,CAAC;AAEF,MAAM,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCvB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACxC,MAAM,CAAC,IAAI,GAAG;EACZ,aAAa,EAAE,KAAK;EACpB,eAAe,EAAE,eAAe;CACjC,CAAC","sourcesContent":["import { config } from '../../../config';\n\ninterface CardFormStoryArgs {\n 'iframe-origin': string;\n 'single-line': boolean;\n 'validation-mode': string;\n 'css-variables': string;\n}\n\nexport default {\n title: 'Components/CardForm',\n component: 'justifi-card-form',\n argTypes: {\n 'resize': {\n description: 'Deprecated: This method will be removed in future releases.',\n table: {\n category: 'methods',\n },\n },\n },\n decorators: [\n story => `\n <!-- Deprecated Notice -->\n <p style=\"color: red; font-family: 'Roboto Mono', monospace;\">Note: The 'resize' method is deprecated and will be removed in future releases.</p>\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 handleResizeClick = async (cardForm: HTMLJustifiCardFormElement) => {\n await cardForm.resize();\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 const resizeBtn = document.querySelector('#resize-btn');\n validateBtn?.addEventListener('click', () => {\n handleValidateClick(cardForm);\n });\n tokenizeBtn?.addEventListener('click', () => {\n handleTokenizeClick(cardForm, {});\n });\n resizeBtn?.addEventListener('click', () => {\n handleResizeClick(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 <button id=\"resize-btn\">Resize</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='${config.iframeOrigin}'\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-load-google-font: 'Inter:wght@200;400;700;900&family=Agdasima';\n --jfi-layout-font-family: Agdasima;\n --jfi-layout-padding: 4px;\n --jfi-layout-form-control-spacing-x: .5rem;\n --jfi-layout-form-control-spacing-y: 1rem;\n --jfi-form-label-font-weight: 100;\n --jfi-form-label-font-family: Inter;\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: 0 2px 4px rgba(0, 0, 0, 0.2);\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 'single-line': false,\n 'css-variables': styledVariables,\n};\n"]}

package/dist/collection/components/gross-payment-chart/chart-utils.js ADDED Viewed

@@ -0,0 +1,59 @@
+import { formatCurrency, formatDisplayDate } from "../../utils/utils";
+export const generateChartOptions = (total, dates, endDate) => {
+  return ({
+    type: 'bar',
+    options: {
+      plugins: {
+        legend: {
+          display: false
+        },
+        title: {
+          display: true,
+          text: ['Trailing 30 Days', 'Gross Payments', formatCurrency(total)],
+          position: 'top',
+          align: 'start'
+        },
+        tooltip: {
+          displayColors: false,
+          intersect: false,
+          callbacks: {
+            label: (context) => {
+              let index = context.dataIndex;
+              let date = formatDisplayDate(dates[index].date, endDate);
+              let value = formatCurrency(dates[index].value);
+              return [date, value];
+            },
+          }
+        }
+      },
+      scales: {
+        x: {
+          grid: {
+            drawOnChartArea: false,
+            drawTicks: false
+          },
+          ticks: {
+            callback: (index) => {
+              if (index === 0 || index === dates.length - 1) {
+                return formatDisplayDate(dates[index].date, endDate);
+              }
+            }
+          }
+        },
+        y: {
+          display: false
+        }
+      }
+    },
+    data: {
+      labels: dates.map(() => ''),
+      datasets: [
+        {
+          label: 'Gross Volume by Date',
+          data: dates.map((date) => date.value)
+        }
+      ]
+    },
+  });
+};
+//# sourceMappingURL=chart-utils.js.map

package/dist/collection/components/gross-payment-chart/chart-utils.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"chart-utils.js","sourceRoot":"","sources":["../../../../src/components/gross-payment-chart/chart-utils.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAEtE,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAClC,KAAa,EACb,KAA8B,EAC9B,OAAe,EACf,EAAE;EACF,OAAO,CAAC;IACN,IAAI,EAAE,KAAK;IACX,OAAO,EAAE;MACP,OAAO,EAAE;QACP,MAAM,EAAE;UACN,OAAO,EAAE,KAAK;SACf;QACD,KAAK,EAAE;UACL,OAAO,EAAE,IAAI;UACb,IAAI,EAAE,CAAC,kBAAkB,EAAE,gBAAgB,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;UACnE,QAAQ,EAAE,KAAK;UACf,KAAK,EAAE,OAAO;SACf;QACD,OAAO,EAAE;UACP,aAAa,EAAE,KAAK;UACpB,SAAS,EAAE,KAAK;UAChB,SAAS,EAAE;YACT,KAAK,EAAE,CAAC,OAAO,EAAE,EAAE;cACjB,IAAI,KAAK,GAAG,OAAO,CAAC,SAAS,CAAC;cAC9B,IAAI,IAAI,GAAG,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;cACzD,IAAI,KAAK,GAAG,cAAc,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAA;cAC9C,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,CAAA;YACtB,CAAC;WACF;SACF;OACF;MACD,MAAM,EAAE;QACN,CAAC,EAAE;UACD,IAAI,EAAE;YACJ,eAAe,EAAE,KAAK;YACtB,SAAS,EAAE,KAAK;WACjB;UACD,KAAK,EAAE;YACL,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;cAClB,IAAI,KAAK,KAAK,CAAC,IAAI,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC7C,OAAO,iBAAiB,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;eACtD;YACH,CAAC;WACF;SACF;QACD,CAAC,EAAE;UACD,OAAO,EAAE,KAAK;SACf;OACF;KACF;IACD,IAAI,EAAE;MACJ,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC;MAC3B,QAAQ,EAAE;QACR;UACE,KAAK,EAAE,sBAAsB;UAC7B,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC;SACtC;OAAC;KACL;GACF,CAAC,CAAC;AACL,CAAC,CAAA","sourcesContent":["import { GrossVolumeReportDate } from \"../../api/GrossVolume\";\nimport { formatCurrency, formatDisplayDate } from \"../../utils/utils\";\n\nexport const generateChartOptions = (\n total: number,\n dates: GrossVolumeReportDate[],\n endDate: string\n) => {\n return ({\n type: 'bar',\n options: {\n plugins: {\n legend: {\n display: false\n },\n title: {\n display: true,\n text: ['Trailing 30 Days', 'Gross Payments', formatCurrency(total)],\n position: 'top',\n align: 'start'\n },\n tooltip: {\n displayColors: false,\n intersect: false,\n callbacks: {\n label: (context) => {\n let index = context.dataIndex;\n let date = formatDisplayDate(dates[index].date, endDate);\n let value = formatCurrency(dates[index].value)\n return [date, value]\n },\n }\n }\n },\n scales: {\n x: {\n grid: {\n drawOnChartArea: false,\n drawTicks: false\n },\n ticks: {\n callback: (index) => {\n if (index === 0 || index === dates.length - 1) {\n return formatDisplayDate(dates[index].date, endDate);\n }\n }\n }\n },\n y: {\n display: false\n }\n }\n },\n data: {\n labels: dates.map(() => ''),\n datasets: [\n {\n label: 'Gross Volume by Date',\n data: dates.map((date) => date.value)\n }]\n },\n });\n}"]}