@taxbit/react-sdk 0.0.16 → 0.2.0

package/README.md

@@ -9,90 +9,147 @@ npm install @taxbit/react-sdk
 ```
 
 ```typescript
-import '@taxbit/react-sdk/style/inline.css'; // other options include 'basic.css' and 'minimal.css' 
+import '@taxbit/react-sdk/style/inline.css'; // other options include 'basic.css' and 'minimal.css'
 import { TaxBitDAC7Form } from '@taxbit/react-sdk';
 ```
 
 ### Data
+
 ```typescript
 exampleData = {
-    name: "John Smith",
-    tin: "456456456",
-    ftin: "667788991",
-    usAccountType: "individual",
-    foreignAccountType: "individual",
+  accountHolder: {
+    name: 'John Smith',
+    tin: '456456456',
+    ftin: '667788991',
+    usAccountType: 'individual',
+    foreignAccountType: 'individual',
     address: {
-    firstLine: "123 Main St",
-        city: "Seattle",
-        stateOrProvince: "WA",
-        postalCode: "98000",
-        country: "GR",
+      firstLine: '123 Main St',
+      secondLine: 'Unit #2',
+      city: 'Seattle',
+      stateOrProvince: 'WA',
+      postalCode: '98000',
+      country: 'GR',
     },
     mailingAddress: {
-        firstLine: "123 Main St",
-        city: "Seattle",
-        stateOrProvince: "WA",
-        postalCode: "98000",
-        country: "GR",
+      firstLine: '123 Main St',
+      city: 'Seattle',
+      stateOrProvince: 'WA',
+      postalCode: '98000',
+      country: 'GR',
     },
     mailingAddressIsDifferent: true,
-    countryOfCitizenship: "GR",
+    countryOfCitizenship: 'GR',
     ftinNotLegallyRequired: true,
     taxResidences: [
-        {
-            country: "GR",
-            tin: "456456456",
-            tinNotRequired: false,
-        },
+      {
+        country: 'GR',
+        tin: '456456456',
+        tinNotRequired: false,
+      },
     ],
-    vatin: "123123123",
-    vatinCountry: "GR",
+    vatin: '123123123',
+    vatinCountry: 'GR',
     vatinNotRequired: true,
-    financialAccountIdentifier: "123123123",
-    financialAccountName: "John Smith",
+    financialAccountIdentifier: '123123123',
+    financialAccountName: 'John Smith',
     isIndividual: true,
     isEuResident: true,
     isUsPerson: false,
+  },
 };
 ```
 
 ```jsx
 <TaxBitDAC7Form
-    data={exampleData}  // `data` is an optional prop
-    bearerToken='bearer token goes here'
-    language='en-us'  // 'en-us' is the default
-    staging // if not production
+  data={exampleData} // `data` is an optional prop
+  bearerToken="bearer token goes here"
+  language="en-us" // 'en-us' is the default
+  staging // if not production
 />
 ```
 
 Which is just a shortcut for this component...
+
 ```jsx
-<TaxBitForm 
-    data={exampleData}  // `data` is an optional prop
-    bearerToken='bearer token goes here' 
-    language='en-us'  // 'en-us' is the default
-    forms={['DAC7']}
-    staging // if not production
+<TaxBitForm
+  data={exampleData} // `data` is an optional prop
+  bearerToken="bearer token goes here"
+  language="en-us" // 'en-us' is the default
+  forms={['DAC7']}
+  staging // if not production
+/>
+```
+
+There is a more basic component that simply shows the TaxBit UI and does not interact with the TaxBit server. It can be used like this...
+
+```typescript jsx
+<TaxBitDAC7FormUI
+  data={exampleData}
+  onSubmit={(data: unknown) => alert(JSON.stringify(data))}
 />
 ```
 
 ### Bearer Token
+
 This will be generated from the TaxBit API and passed in as a prop to the component.
 
 ### Language
-This can be set to any of the following:
+
+The first screen of the tax documentation interview gives the user the opportunity to select a language.  
+This can also be initially set to any one of the following:
+
+- bg-bg
+- cs-cz
+- da-dk
+- de-at
+- de-de
+- el-cy
+- el-gr
+- en-gb
 - en-us
 - es-es
+- et-ee
+- fi-fi
 - fr-fr
-- de-de
+- fr-lu
+- ga-ie
+- hr-hr
+- hu-hu
 - it-it
+- lt-lt
+- lv-lv
+- mt-mt
+- nl-be
 - nl-nl
 - no-no
-- sv-se
-- en-gb
+- pl-pl
 - pt-pt
+- ro-ro
+- sk-sk
+- sl-si
+- sv-se
 
 ### Staging
-This can be set to `true` or `false`.  Passing `staging` in the component is the same as passing `staging={true}`.
 
-If `true`, the staging environment will be used. If `false`, the production environment will be used. The default is `false`.
+This can be set to `true` or `false`. Passing `staging` in the component is the same as passing `staging={true}`.
+
+If `true`, the staging environment will be used. If `false`, the production environment will be used. The default is `false`.
+
+### CSS and Style Customization
+
+The TaxBit React SDK renders a form for collecting user data. The form is structured with fairly semantic HTML and CSS classes and can be easily customized to closely match your website's style.
+Classnames are namespaced with "taxbit-" to reduce the chance of conflict.
+
+### Callbacks
+
+The TaxBit React SDK provides callbacks for the following events:
+
+- `onSubmit` - called when the user clicks the submit button
+- `onSuccess` - called after the server responds with a successful submission
+
+These callbacks can be passed in to the Component and used to trigger other actions in your application.
+
+### Types
+
+The TaxBit React SDK provides a type for the status of the most resent tax documentation submitted by the user, referred to as `ClientTaxDocumentationStatus`. The data is typed as `ClientTaxDocumentation` and can be used to determine if the user has submitted tax documentation and if it has been approved.

package/dist/App.d.ts

@@ -1,2 +1,2 @@
-import React from "react";
+import React from 'react';
 export declare const App: () => React.JSX.Element;

package/dist/basic.css

@@ -29,17 +29,23 @@ button:focus-visible {
 .taxbit-page {
   max-width: 600px;
   padding: 12px;
-  margin-bottom: 100px;
 }
 
-.taxbit-title {
+.taxbit-page-header {
+  display: flex;
+  align-items: center;
+  padding-bottom: 8px;
+  border-bottom: solid 1px #E4EBF6;
+  margin-bottom: 20px;
+}
+
+.taxbit-page-title {
+  margin: 0;
   font-size: 1.2em;
   line-height: 1.1;
   font-weight: 600;
-  padding-bottom: 8px;
-  border-bottom: solid 1px #E4EBF6;
-  margin-bottom: 8px;
   color: #12263F;
+  flex: 1 1 auto;
 }
 
 .taxbit-section {
@@ -57,6 +63,18 @@ button:focus-visible {
   }
 }
 
+.taxbit-select-language {
+  border: 0;
+  outline: none;
+  opacity: 0.6;
+  width: 170px;
+}
+
+.taxbit-select-language:focus {
+  border-bottom: solid 1px #E4EBF6;
+  opacity: 1;
+}
+
 .taxbit-row {
   margin-bottom: 10px;
   align-items: flex-start;
@@ -83,6 +101,8 @@ button:focus-visible {
 
 .taxbit-row-actions {
   flex: 0 0 10%;
+  display: flex;
+  align-items: center;
 }
 .taxbit-row-action-button {
   font-size: .8em;
@@ -93,11 +113,11 @@ button:focus-visible {
 .taxbit-label {
   flex: 0 0 40%;
   font-weight: 500;
-  line-height: 1.25em;
   .taxbit-sub-label {
     font-size: 0.8em;
     opacity: 0.7;
     font-weight: 400;
+    line-height: 1.25em;
   }
 }
 .taxbit-input, .taxbit-select {
@@ -110,6 +130,12 @@ button:focus-visible {
   color: rgb(18, 38, 63);
 }
 
+@media only screen and (max-width: 600px) {
+  .taxbit-input, .taxbit-select {
+    font-size: 100%;
+  }
+}
+
 .taxbit-placeholder {
   color: #aaa;
 }

package/dist/components/ErrorMessage/ErrorMessage.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import { TaxDocumentationKey } from "types";
+import React from 'react';
+import { TaxDocumentationKey } from 'types';
 export declare const ErrorMessage: ({ name, hint, }: {
     name: TaxDocumentationKey;
     hint?: true | undefined;

package/dist/components/Form/Form.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type FormProps = {
+    title: string;
+    children: React.ReactNode;
+    actions?: React.ReactNode;
+};
+export declare const Form: ({ children, title, actions }: FormProps) => React.JSX.Element;
+export {};

package/dist/components/Form/index.d.ts

@@ -0,0 +1 @@
+export * from './Form.tsx';

package/dist/components/Notification/Notification.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import { TaxDocumentationKey } from "types";
+import React from 'react';
+import { TaxDocumentationKey } from 'types';
 export declare const Notification: ({ name }: {
     name: TaxDocumentationKey;
 }) => React.JSX.Element | null;

package/dist/components/Row/Row.d.ts

@@ -1,5 +1,5 @@
-import React from "react";
-import { TaxDocumentationKey } from "types/TaxDocumentation";
+import React from 'react';
+import { TaxDocumentationKey } from 'types/TaxDocumentation';
 export type RowProps = {
     label?: string;
     subLabel?: string;

package/dist/components/index.d.ts

@@ -1,8 +1,7 @@
-export * from "./Address";
-export * from "./ErrorMessage";
-export * from "./Notification";
-export * from "./InputStatus";
-export * from "./Page";
-export * from "./Row";
-export * from "./Section";
-export * from "./Title";
+export * from './Address';
+export * from './ErrorMessage';
+export * from './Form';
+export * from './InputStatus';
+export * from './Notification';
+export * from './Row';
+export * from './Section';

package/dist/contexts/FormUI/index.d.ts

@@ -1,3 +1,3 @@
-export * from "./useFormUIContext";
-export * from "./FormUIProvider";
-export { type FormUIFields } from "./useFormUI";
+export * from './FormUIProvider';
+export { type TaxDocumentationErrorFile, type TaxDocumentationPropertyFile, } from './useFormUI';
+export * from './useFormUIContext';

package/dist/contexts/FormUI/useFormUI.d.ts

@@ -1,144 +1,45 @@
-import { ButtonKey, ErrorKey, NotificationKey, TextKey, TitleKey } from "i18n/types";
-import { TaxDocumentation, TaxDocumentationKey } from "types/TaxDocumentation";
-import { Notifications } from "../../utils/getNotifications";
-export type FormUIFields = {
-    [key in TaxDocumentationKey]?: string | undefined;
+/// <reference types="react" />
+import { ButtonKey, ErrorKey, HintKey, NotificationKey, PromptKey, SubPromptKey, TextKey, TitleKey } from 'i18n/types';
+import { Locale } from 'types';
+import { TaxDocumentation, TaxDocumentationKey } from 'types/TaxDocumentation';
+export type TaxDocumentationPropertyFile = {
+    [key in TaxDocumentationKey]: boolean;
 };
-type FormUIErrors = {
-    [key in TaxDocumentationKey]: ErrorKey;
-};
-type FormUIRequired = {
-    [key in TaxDocumentationKey]?: boolean;
+export type TaxDocumentationErrorFile = {
+    [key in TaxDocumentationKey]?: ErrorKey;
 };
 export declare const useFormUI: () => {
     fields: TaxDocumentation;
+    setFields: import("react").Dispatch<import("react").SetStateAction<TaxDocumentation>>;
     setValue: (key: TaxDocumentationKey, value: string | undefined) => void;
-    errors: FormUIErrors;
-    notifications: Notifications;
     isErrorFree: boolean;
     showErrors: boolean;
     exposeErrors: () => void;
     hideErrors: () => void;
-    requiredFields: FormUIRequired;
     getLocalButton: (key: ButtonKey) => string;
     getLocalCaProvince: (key: string | undefined) => string;
     getLocalCountry: (key: string | undefined) => string;
     getLocalError: (key: ErrorKey) => string;
     getLocalHint: (key: TaxDocumentationKey) => string | undefined;
+    getHintKey: (key: TaxDocumentationKey) => HintKey;
+    getLocalLocale: (key: Locale) => string;
     getLocalNotification: (key: NotificationKey) => string;
     getLocalOption: (key: string | undefined) => string | undefined;
     getLocalPrompt: (key: string) => string;
+    getPromptKey: (key: string) => PromptKey;
     getLocalSubPrompt: (key: TaxDocumentationKey) => string;
+    getSubPromptKey: (key: TaxDocumentationKey) => SubPromptKey;
     getLocalText: (key: TextKey) => string;
     getLocalTitle: (key: TitleKey) => string;
     getLocalSubTitle: (key: string) => string;
     getLocalUsState: (key: string | undefined) => string;
     getLocalMonth: (key: string | undefined) => string;
     getRequiredLocalPrompt: (key: TaxDocumentationKey) => string;
-    visibleQuestions: {
-        exemptPayeeCode: boolean;
-        exemptFatcaCode: boolean;
-        iAcknowlegeESignIsOk: boolean;
-        iAmACitizenOfTheUs: boolean;
-        iAmExemptFromFatcaReporting: boolean;
-        iAmNotSubjectToBackupWithholding: boolean;
-        iAuthorizeWithholdingAgent: boolean;
-        iCertifyToAll: boolean;
-        iConfirmIncomeIsNonUs: boolean;
-        iConfirmTheBeneficialOwnerIsExempt: boolean;
-        iConfirmTheEntityIsNotAUsPerson: boolean;
-        iConfirmTheEntityIsTheBeneficialOwner: boolean;
-        iConfirmTheTaxIdIsCorrect: boolean;
-        iHaveLegalCapacityToSign: boolean;
-        regardedOwnerUsPerson: boolean;
-        signature: boolean;
-        accountHolderAddressCity: boolean;
-        accountHolderAddressCountry: boolean;
-        accountHolderAddressState: boolean;
-        accountHolderAddressStreet2: boolean;
-        accountHolderAddressStreet: boolean;
-        accountHolderAddressZip: boolean;
-        accountHolderCityOfBirth: boolean;
-        accountHolderCountryOfBirth: boolean;
-        accountHolderCountryOfCitizenship: boolean;
-        accountHolderDateOfBirth: boolean;
-        accountHolderDbaName: boolean;
-        accountHolderMailingAddressCity: boolean;
-        accountHolderMailingAddressCountry: boolean;
-        accountHolderMailingAddressIsDifferent: boolean;
-        accountHolderMailingAddressState: boolean;
-        accountHolderMailingAddressStreet2: boolean;
-        accountHolderMailingAddressStreet: boolean;
-        accountHolderMailingAddressZip: boolean;
-        accountHolderName: boolean;
-        accountHolderFinancialAccountIdentifier: boolean;
-        accountHolderFinancialAccountName: boolean;
-        accountHolderFinancialAccountNameSameAsAccountHolderName: boolean;
-        accountHolderForeignTin: boolean;
-        accountHolderForeignTinIsNotRequired: boolean;
-        accountHolderTaxResidenceCountry1: boolean;
-        accountHolderTaxResidenceForeignTin1: boolean;
-        accountHolderTaxResidenceForeignTin1IsNotRequired: boolean;
-        accountHolderTaxResidenceCountry2: boolean;
-        accountHolderTaxResidenceForeignTin2: boolean;
-        accountHolderTaxResidenceForeignTin2IsNotRequired: boolean;
-        accountHolderTaxResidenceCountry3: boolean;
-        accountHolderTaxResidenceForeignTin3: boolean;
-        accountHolderTaxResidenceForeignTin3IsNotRequired: boolean;
-        accountHolderTaxResidenceCountry4: boolean;
-        accountHolderTaxResidenceForeignTin4: boolean;
-        accountHolderTaxResidenceForeignTin4IsNotRequired: boolean;
-        accountHolderTaxResidenceCountry5: boolean;
-        accountHolderTaxResidenceForeignTin5: boolean;
-        accountHolderTaxResidenceForeignTin5IsNotRequired: boolean;
-        accountHolderShowTaxResidence2: boolean;
-        accountHolderShowTaxResidence3: boolean;
-        accountHolderShowTaxResidence4: boolean;
-        accountHolderShowTaxResidence5: boolean;
-        accountHolderUsTin: boolean;
-        accountHolderVatIdentificationNumber: boolean;
-        accountHolderVatIdentificationNumberIsNotRequired: boolean;
-        accountHolderVatCountry: boolean;
-        accountHolderIsIndividual: boolean;
-        accountHolderIsEuResident: boolean;
-        accountHolderUsPerson: boolean;
-        accountHolderUsAccountType: boolean;
-        accountHolderUsSmllcElection: boolean;
-        accountHolderUsLlcClassification: boolean;
-        accountHolderUsOtherClassification: boolean;
-        accountHolderUsTrustEstateEin: boolean;
-        accountHolderForeignAccountType: boolean;
-        accountHolderForeignTrustClassification: boolean;
-        accountHolderForeignOtherClassification: boolean;
-        regardedOwnerAddressCity: boolean;
-        regardedOwnerAddressCountry: boolean;
-        regardedOwnerAddressState: boolean;
-        regardedOwnerAddressStreet2: boolean;
-        regardedOwnerAddressStreet: boolean;
-        regardedOwnerAddressZip: boolean;
-        regardedOwnerCountryOfCitizenship: boolean;
-        regardedOwnerDateOfBirth: boolean;
-        regardedOwnerDbaName: boolean;
-        regardedOwnerMailingAddressCity: boolean;
-        regardedOwnerMailingAddressCountry: boolean;
-        regardedOwnerMailingAddressIsDifferent: boolean;
-        regardedOwnerMailingAddressState: boolean;
-        regardedOwnerMailingAddressStreet2: boolean;
-        regardedOwnerMailingAddressStreet: boolean;
-        regardedOwnerMailingAddressZip: boolean;
-        regardedOwnerName: boolean;
-        regardedOwnerUsAccountType: boolean;
-        regardedOwnerUsLlcClassification: boolean;
-        regardedOwnerUsOtherClassification: boolean;
-        regardedOwnerUsTrustEstateEin: boolean;
-        regardedOwnerForeignAccountType: boolean;
-        regardedOwnerForeignTrustClassification: boolean;
-        regardedOwnerForeignOtherClassification: boolean;
-        regardedOwnerForeignTin: boolean;
-        regardedOwnerForeignTinIsNotRequired: boolean;
-        regardedOwnerUsTin: boolean;
-    };
+    notifiedFields: import("../../validations/getNotifiedFields.ts").Notifications;
+    invalidFields: TaxDocumentationErrorFile;
+    requiredFields: TaxDocumentationPropertyFile;
+    submittableFields: TaxDocumentation;
+    visibleFields: TaxDocumentationPropertyFile;
     hideField: (key: TaxDocumentationKey) => void;
     showField: (key: TaxDocumentationKey) => void;
 };
-export {};