@justifi/webcomponents 4.6.4 → 4.7.0-rc.0

package/dist/collection/components/subaccount-details/subaccount-details.js

@@ -0,0 +1,147 @@
+import { Host, h } from "@stencil/core";
+import { Api } from "../../api";
+import { SubAccount } from "../../api/SubAccount";
+import { EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from "../details/utils";
+import { MapSubAccountStatusToBadge, formatDate, formatTime } from "../../utils/utils";
+export class SubaccountDetails {
+  constructor() {
+    this.accountId = undefined;
+    this.subaccountId = undefined;
+    this.authToken = undefined;
+    this.onboardingData = undefined;
+    this.subaccount = undefined;
+    this.loading = true;
+    this.errorMessage = undefined;
+  }
+  updateOnPropChange() {
+    this.fetchData();
+  }
+  connectedCallback() {
+    this.fetchData();
+  }
+  async fetchOnboardingData() {
+    const api = Api(this.authToken, process.env.ACCOUNTS_API_ORIGIN);
+    const endpoint = `onboarding/${this.subaccountId}`;
+    const response = await api.get(endpoint);
+    if (!response.error) {
+      this.onboardingData = response.data;
+    }
+    else {
+      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;
+    }
+  }
+  async fetchSubAccountData() {
+    const api = Api(this.authToken, process.env.PRIVATE_API_ORIGIN);
+    const endpoint = `account/${this.accountId}/seller_accounts/${this.subaccountId}`;
+    const response = await api.get(endpoint);
+    if (!response.error) {
+      const data = new SubAccount(response.data);
+      this.subaccount = data;
+    }
+    else {
+      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;
+    }
+  }
+  async fetchData() {
+    this.loading = true;
+    if (!this.accountId || !this.authToken) {
+      this.errorMessage = "Can not fetch any data without an AccountID and an AuthToken";
+      this.loading = false;
+      return;
+    }
+    this.fetchSubAccountData();
+    this.fetchOnboardingData();
+    this.loading = false;
+  }
+  render() {
+    var _a, _b, _c, _d, _e, _f;
+    return (h(Host, null, this.loading ? LoadingState :
+      !this.subaccount || !this.onboardingData ? ErrorState(this.errorMessage) :
+        h("justifi-details", null, h(EntityHeadInfo, { slot: 'head-info', badge: h("span", { slot: 'badge', innerHTML: MapSubAccountStatusToBadge((_a = this.subaccount) === null || _a === void 0 ? void 0 : _a.status) }), title: (_b = this.subaccount) === null || _b === void 0 ? void 0 : _b.name }, h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Created At", value: `${formatDate(this.subaccount.created_at)} ${formatTime(this.subaccount.created_at)}` }), h(EntityHeadInfoItem, { classes: "border-1 border-end", title: "Last Updated", value: `${formatDate(this.subaccount.updated_at)} ${formatTime(this.subaccount.updated_at)}` }), h(EntityHeadInfoItem, { title: "ID", value: this.subaccount.id })), h("div", { slot: 'detail-sections' }, h("subaccount-account-details", { subaccount: this.subaccount, onboardingData: this.onboardingData }), h("subaccount-merchant-details", { onboardingData: this.onboardingData }), h("subaccount-representative-details", { data: (_d = (_c = this.onboardingData) === null || _c === void 0 ? void 0 : _c.payload) === null || _d === void 0 ? void 0 : _d.representative }), h("subaccount-owners-details", { data: (_f = (_e = this.onboardingData) === null || _e === void 0 ? void 0 : _e.payload) === null || _f === void 0 ? void 0 : _f.owners })))));
+  }
+  static get is() { return "justifi-subaccount-details"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["subaccount-details.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["subaccount-details.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "accountId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "account-id",
+        "reflect": false
+      },
+      "subaccountId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "subaccount-id",
+        "reflect": false
+      },
+      "authToken": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "auth-token",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "onboardingData": {},
+      "subaccount": {},
+      "loading": {},
+      "errorMessage": {}
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "subaccountId",
+        "methodName": "updateOnPropChange"
+      }, {
+        "propName": "authToken",
+        "methodName": "updateOnPropChange"
+      }];
+  }
+}
+//# sourceMappingURL=subaccount-details.js.map

package/dist/collection/components/subaccount-details/subaccount-details.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"subaccount-details.js","sourceRoot":"","sources":["../../../../src/components/subaccount-details/subaccount-details.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\nimport { Api, IApiResponse } from '../../api';\nimport { IOnboardingData, ISubAccount, SubAccount } from '../../api/SubAccount';\nimport { EntityHeadInfo, EntityHeadInfoItem, ErrorState, LoadingState } from '../details/utils';\nimport { MapSubAccountStatusToBadge, formatDate, formatTime } from '../../utils/utils';\n\n@Component({\n  tag: 'justifi-subaccount-details',\n  styleUrl: 'subaccount-details.scss',\n  shadow: true,\n})\n\nexport class SubaccountDetails {\n  @Prop() accountId: string;\n  @Prop() subaccountId: string;\n  @Prop() authToken: string;\n  @State() onboardingData: IOnboardingData;\n  @State() subaccount: SubAccount;\n  @State() loading: boolean = true;\n  @State() errorMessage: string;\n\n  @Watch('subaccountId')\n  @Watch('authToken')\n  updateOnPropChange() {\n    this.fetchData();\n  }\n\n  connectedCallback() {\n    this.fetchData();\n  }\n\n  async fetchOnboardingData(): Promise<void> {\n    const api = Api(this.authToken, process.env.ACCOUNTS_API_ORIGIN);\n    const endpoint = `onboarding/${this.subaccountId}`;\n\n    const response: IApiResponse<IOnboardingData> = await api.get(endpoint);\n    if (!response.error) {\n      this.onboardingData = response.data;\n    } else {\n      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;\n    }\n  }\n\n  async fetchSubAccountData(): Promise<void> {\n    const api = Api(this.authToken, process.env.PRIVATE_API_ORIGIN);\n    const endpoint = `account/${this.accountId}/seller_accounts/${this.subaccountId}`;\n\n    const response: IApiResponse<ISubAccount> = await api.get(endpoint);\n    if (!response.error) {\n      const data = new SubAccount(response.data);\n      this.subaccount = data;\n    } else {\n      this.errorMessage = typeof response.error === 'string' ? response.error : response.error.message;\n    }\n  }\n\n  async fetchData(): Promise<void> {\n    this.loading = true;\n    if (!this.accountId || !this.authToken) {\n      this.errorMessage = \"Can not fetch any data without an AccountID and an AuthToken\";\n      this.loading = false;\n      return;\n    }\n    this.fetchSubAccountData();\n    this.fetchOnboardingData();\n    this.loading = false;\n  }\n\n  render() {\n    return (\n      <Host>\n        {\n          this.loading ? LoadingState :\n            !this.subaccount || !this.onboardingData ? ErrorState(this.errorMessage) :\n              <justifi-details>\n                <EntityHeadInfo \n                  slot='head-info' \n                  badge={<span slot='badge' innerHTML={MapSubAccountStatusToBadge(this.subaccount?.status)} />}\n                  title={this.subaccount?.name}>\n                    <EntityHeadInfoItem \n                      classes=\"border-1 border-end\"\n                      title=\"Created At\"\n                      value={`${formatDate(this.subaccount.created_at)} ${formatTime(this.subaccount.created_at)}`}\n                    />\n                    <EntityHeadInfoItem\n                      classes=\"border-1 border-end\"\n                      title=\"Last Updated\"\n                      value={`${formatDate(this.subaccount.updated_at)} ${formatTime(this.subaccount.updated_at)}`}\n                    />\n                    <EntityHeadInfoItem title=\"ID\" value={this.subaccount.id} />  \n                </EntityHeadInfo>\n                <div slot='detail-sections'>\n                  <subaccount-account-details subaccount={this.subaccount} onboardingData={this.onboardingData} />\n                  <subaccount-merchant-details onboardingData={this.onboardingData} />\n                  <subaccount-representative-details data={this.onboardingData?.payload?.representative} />\n                  <subaccount-owners-details data={this.onboardingData?.payload?.owners} />\n                </div>\n              </justifi-details>\n        }\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/subaccount-details/subaccount-details.stories.js

@@ -0,0 +1,25 @@
+export default {
+  title: 'dev/Components/SubaccountDetails',
+  component: 'justifi-subaccount-details',
+  parameters: {}
+};
+class SubaccountDetailsArgs {
+  constructor(args) {
+    this['auth-token'] = args['auth-token'] || process.env.PRIVATE_AUTH_TOKEN;
+    this['account-id'] = args['account-id'] || process.env.EXAMPLE_PLATFORM_ACCOUNT_ID;
+    this['subaccount-id'] = args['subaccount-id'] || process.env.EXAMPLE_SUBACCOUNT_ID;
+  }
+}
+const Template = (args) => {
+  return (`
+    <justifi-subaccount-details
+      data-testid="justifi-subaccounts-details"
+      auth-token="${args['auth-token']}"
+      account-id="${args['account-id']}"
+      subaccount-id="${args['subaccount-id']}"
+    />
+  `);
+};
+export const Basic = Template.bind({});
+Basic.args = new SubaccountDetailsArgs({});
+//# sourceMappingURL=subaccount-details.stories.js.map

package/dist/collection/components/subaccount-details/subaccount-details.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"subaccount-details.stories.js","sourceRoot":"","sources":["../../../../src/components/subaccount-details/subaccount-details.stories.ts"],"names":[],"mappings":"AAAA,eAAe;EACb,KAAK,EAAE,kCAAkC;EACzC,SAAS,EAAE,4BAA4B;EACvC,UAAU,EAAE,EAAE;CACf,CAAC;AAEF,MAAM,qBAAqB;EAKzB,YAAY,IAAI;IACd,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC;IAC1E,IAAI,CAAC,YAAY,CAAC,GAAG,IAAI,CAAC,YAAY,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,2BAA2B,CAAC;IACnF,IAAI,CAAC,eAAe,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,OAAO,CAAC,GAAG,CAAC,qBAAqB,CAAC;EACrF,CAAC;CACF;AAED,MAAM,QAAQ,GAAG,CAAC,IAA2B,EAAE,EAAE;EAC/C,OAAO,CAAC;;;oBAGU,IAAI,CAAC,YAAY,CAAC;oBAClB,IAAI,CAAC,YAAY,CAAC;uBACf,IAAI,CAAC,eAAe,CAAC;;GAEzC,CAAC,CAAC;AACL,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","sourcesContent":["export default {\n  title: 'dev/Components/SubaccountDetails',\n  component: 'justifi-subaccount-details',\n  parameters: {}\n};\n\nclass SubaccountDetailsArgs {\n  'auth-token': string;\n  'account-id': string;\n  'subaccount-id': string;\n\n  constructor(args) {\n    this['auth-token'] = args['auth-token'] || process.env.PRIVATE_AUTH_TOKEN;\n    this['account-id'] = args['account-id'] || process.env.EXAMPLE_PLATFORM_ACCOUNT_ID;\n    this['subaccount-id'] = args['subaccount-id'] || process.env.EXAMPLE_SUBACCOUNT_ID;\n  }\n}\n\nconst Template = (args: SubaccountDetailsArgs) => {\n  return (`\n    <justifi-subaccount-details\n      data-testid=\"justifi-subaccounts-details\"\n      auth-token=\"${args['auth-token']}\"\n      account-id=\"${args['account-id']}\"\n      subaccount-id=\"${args['subaccount-id']}\"\n    />\n  `);\n};\n\nexport const Basic = Template.bind({});\nBasic.args = new SubaccountDetailsArgs({});\n"]}