@taxbit/react-sdk 0.1.0 → 0.2.1
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.
- package/README.md +79 -243
- package/dist/App.d.ts +1 -1
- package/dist/basic.css +1 -1
- package/dist/components/ErrorMessage/ErrorMessage.d.ts +2 -2
- package/dist/components/Form/Form.d.ts +8 -0
- package/dist/components/Form/index.d.ts +1 -0
- package/dist/components/Notification/Notification.d.ts +2 -2
- package/dist/components/Row/Row.d.ts +2 -2
- package/dist/components/index.d.ts +7 -7
- package/dist/contexts/FormUI/index.d.ts +4 -3
- package/dist/contexts/FormUI/useFormUI.d.ts +17 -117
- package/dist/contexts/FormUI/useFormUIContext.d.ts +30 -626
- package/dist/contexts/TaxDocumentation/TaxBitFormProvider.d.ts +6 -4
- package/dist/contexts/TaxDocumentation/useTaxDocumentation.d.ts +11 -10
- package/dist/contexts/TaxDocumentation/useTaxDocumentationContext.d.ts +194 -110
- package/dist/entry/index.d.ts +6 -5
- package/dist/hooks/useTaxBit/useTaxBit.d.ts +108 -4
- package/dist/i18n/locales/bg-bg.d.ts +1 -1
- package/dist/i18n/locales/cs-cz.d.ts +1 -1
- package/dist/i18n/locales/da-dk.d.ts +2 -0
- package/dist/i18n/locales/de-at.d.ts +2 -0
- package/dist/i18n/locales/de-de.d.ts +1 -1
- package/dist/i18n/locales/el-cy.d.ts +2 -0
- package/dist/i18n/locales/el-gr.d.ts +1 -1
- package/dist/i18n/locales/en-gb.d.ts +1 -1
- package/dist/i18n/locales/en-us.d.ts +1 -1
- package/dist/i18n/locales/es-es.d.ts +1 -1
- package/dist/i18n/locales/et-ee.d.ts +1 -1
- package/dist/i18n/locales/fi-fi.d.ts +2 -0
- package/dist/i18n/locales/fr-fr.d.ts +1 -1
- package/dist/i18n/locales/fr-lu.d.ts +2 -0
- package/dist/i18n/locales/ga-ie.d.ts +2 -0
- package/dist/i18n/locales/hr-hr.d.ts +2 -0
- package/dist/i18n/locales/hu-hu.d.ts +1 -1
- package/dist/i18n/locales/index.d.ts +18 -7
- package/dist/i18n/locales/it-it.d.ts +1 -1
- package/dist/i18n/locales/lt-lt.d.ts +2 -0
- package/dist/i18n/locales/lv-lv.d.ts +2 -0
- package/dist/i18n/locales/mt-mt.d.ts +1 -1
- package/dist/i18n/locales/nl-be.d.ts +2 -0
- package/dist/i18n/locales/nl-nl.d.ts +1 -1
- package/dist/i18n/locales/no-no.d.ts +1 -1
- package/dist/i18n/locales/pl-pl.d.ts +2 -0
- package/dist/i18n/locales/pt-pt.d.ts +1 -1
- package/dist/i18n/locales/ro-ro.d.ts +1 -1
- package/dist/i18n/locales/sk-sk.d.ts +1 -1
- package/dist/i18n/locales/sl-si.d.ts +1 -1
- package/dist/i18n/locales/sv-se.d.ts +1 -1
- package/dist/i18n/types/LocalizationKey.d.ts +10 -11
- package/dist/inline.css +1 -1
- package/dist/lookups/toOptions.d.ts +3 -0
- package/dist/services/api.d.ts +3 -2
- package/dist/taxbit-react-sdk.es.js +16460 -9899
- package/dist/taxbit-react-sdk.umd.js +10 -10
- package/dist/test/Wrapper.d.ts +7 -0
- package/dist/test/getWrapper.d.ts +4 -0
- package/dist/test/index.d.ts +2 -0
- package/dist/types/CamelCaseKeys.d.ts +7 -0
- package/dist/types/CountryCode.d.ts +3 -3
- package/dist/types/Locale.d.ts +1 -1
- package/dist/types/TaxDocumentation.d.ts +8 -4
- package/dist/types/client/index.d.ts +4 -0
- package/dist/types/index.d.ts +12 -11
- package/dist/types/{external → server}/ComprehensiveTaxDocumentation.d.ts +5 -16
- package/dist/types/server/TaxDocumentationStatus.d.ts +9 -0
- package/dist/types/server/enums.d.ts +13 -0
- package/dist/types/server/index.d.ts +3 -0
- package/dist/ui/DateOfBirthInput/DateOfBirthInput.d.ts +1 -2
- package/dist/ui/DateOfBirthInput/__tests__/useDateOfBirthInput.test.d.ts +1 -0
- package/dist/ui/DateOfBirthInput/useDateOfBirthInput.d.ts +20 -0
- package/dist/ui/Password/Password.d.ts +2 -3
- package/dist/ui/RadioButtons/RadioButtons.d.ts +3 -3
- package/dist/ui/RadioButtons/__tests__/RadioButtons.test.d.ts +0 -0
- package/dist/utils/camelCaseKeys.d.ts +1 -0
- package/dist/utils/getFieldsState.d.ts +4 -3
- package/dist/utils/getHintKeyMap.d.ts +3 -1
- package/dist/utils/getPromptKeyMap.d.ts +5 -3
- package/dist/utils/index.d.ts +11 -15
- package/dist/utils/kebabCase.d.ts +1 -0
- package/dist/utils/{getForeignAccountType.d.ts → transformInbound/getForeignAccountType.d.ts} +1 -1
- package/dist/utils/{getForeignOtherClassification.d.ts → transformInbound/getForeignOtherClassification.d.ts} +1 -1
- package/dist/utils/{getForeignTrustClassification.d.ts → transformInbound/getForeignTrustClassification.d.ts} +1 -1
- package/dist/utils/{getLLCClassification.d.ts → transformInbound/getLLCClassification.d.ts} +1 -1
- package/dist/utils/{getUsAccountType.d.ts → transformInbound/getUsAccountType.d.ts} +1 -1
- package/dist/utils/transformInbound/index.d.ts +6 -0
- package/dist/utils/transformInbound/transformInbound.d.ts +3 -0
- package/dist/utils/transformOutbound/index.d.ts +6 -0
- package/dist/utils/transformOutbound/transformOutbound.d.ts +2 -2
- package/dist/utils/transformOutbound/transformToOutboundAccoutHolder.d.ts +3 -3
- package/dist/utils/transformOutbound/transformToOutboundAddress.d.ts +2 -2
- package/dist/utils/transformOutbound/transformToOutboundRegardedOwner.d.ts +2 -2
- package/dist/utils/transformOutbound/transformToOutboundTaxResidenceFields.d.ts +3 -4
- package/dist/validations/getInvalidFields.d.ts +3 -0
- package/dist/validations/getNotifiedFields.d.ts +10 -0
- package/dist/validations/getRequiredFields.d.ts +3 -0
- package/dist/validations/getSubmittableFields.d.ts +3 -0
- package/dist/{utils → validations}/getSupportedFields.d.ts +1 -1
- package/dist/validations/getVisibleFields.d.ts +3 -0
- package/dist/validations/index.d.ts +7 -2
- package/dist/validations/invalidFieldRules.d.ts +7 -0
- package/dist/validations/{requiredFields.d.ts → requiredFieldRules.d.ts} +3 -3
- package/dist/widgets/TaxBitForm/TaxBitDAC7Form.d.ts +4 -11
- package/dist/widgets/TaxBitForm/TaxBitForm.d.ts +7 -6
- package/dist/wizard/AddressInput/AddressInput.d.ts +3 -3
- package/dist/wizard/PlaceOfBirthInput/PlaceOfBirthInput.d.ts +1 -1
- package/dist/wizard/ResidenceInput/ResidenceInput.d.ts +3 -3
- package/dist/wizard/RowInput/ErrorRow/ErrorRow.d.ts +6 -0
- package/dist/wizard/RowInput/ErrorRow/index.d.ts +1 -0
- package/dist/wizard/RowInput/VisibleRow/VisibleRow.d.ts +3 -3
- package/dist/wizard/RowInput/index.d.ts +7 -6
- package/dist/wizard/TaxBitFormUI/AccountHolderClassification/AccountHolderClassification.d.ts +1 -1
- package/dist/wizard/TaxBitFormUI/AccountHolderContact/AccountHolderContact.d.ts +1 -1
- package/dist/wizard/TaxBitFormUI/AccountHolderTax/AccountHolderTax.d.ts +1 -1
- package/dist/wizard/TaxBitFormUI/AccountHolderTaxClarification/AccountHolderTaxClarification.d.ts +1 -1
- package/dist/wizard/TaxBitFormUI/Exemptions/Exemptions.d.ts +1 -1
- package/dist/wizard/TaxBitFormUI/RegardedOwnerClassification/RegardedOwnerClassification.d.ts +1 -1
- package/dist/wizard/TaxBitFormUI/RegardedOwnerContact/RegardedOwnerContact.d.ts +1 -1
- package/dist/wizard/TaxBitFormUI/RegardedOwnerTax/RegardedOwnerTax.d.ts +1 -1
- package/dist/wizard/TaxBitFormUI/Summary/Recap.d.ts +1 -1
- package/dist/wizard/TaxBitFormUI/Summary/Summary.d.ts +1 -1
- package/dist/wizard/TaxBitFormUI/TaxBitDAC7FormUI.d.ts +3 -9
- package/dist/wizard/TaxBitFormUI/TaxBitFormUI.d.ts +6 -6
- package/package.json +14 -11
- package/dist/components/Page/Page.d.ts +0 -8
- package/dist/components/Page/index.d.ts +0 -1
- package/dist/types/external/index.d.ts +0 -1
- package/dist/utils/getNotifications.d.ts +0 -10
- package/dist/utils/getRequiredFields.d.ts +0 -103
- package/dist/utils/getValidationMessages.d.ts +0 -104
- package/dist/utils/getVisibleQuestions.d.ts +0 -6
- package/dist/utils/transformInbound.d.ts +0 -3
- package/dist/validations/validations.d.ts +0 -7
- /package/dist/{taxbit-react-sdk.es.d.ts → index.d.ts} +0 -0
package/README.md
CHANGED
|
@@ -9,100 +9,121 @@ npm install @taxbit/react-sdk
|
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
```typescript
|
|
12
|
-
import '@taxbit/react-sdk/style/inline.css'; // other options include 'basic.css' and 'minimal.css'
|
|
12
|
+
import '@taxbit/react-sdk/style/inline.css'; // other options include 'basic.css' and 'minimal.css'
|
|
13
13
|
import { TaxBitDAC7Form } from '@taxbit/react-sdk';
|
|
14
14
|
```
|
|
15
15
|
|
|
16
16
|
### Data
|
|
17
|
+
|
|
17
18
|
```typescript
|
|
18
19
|
exampleData = {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
20
|
+
accountHolder: {
|
|
21
|
+
name: 'John Smith',
|
|
22
|
+
tin: '456456456',
|
|
23
|
+
ftin: '667788991',
|
|
24
|
+
usAccountType: 'individual',
|
|
25
|
+
foreignAccountType: 'individual',
|
|
24
26
|
address: {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
27
|
+
firstLine: '123 Main St',
|
|
28
|
+
secondLine: 'Unit #2',
|
|
29
|
+
city: 'Seattle',
|
|
30
|
+
stateOrProvince: 'WA',
|
|
31
|
+
postalCode: '98000',
|
|
32
|
+
country: 'GR',
|
|
30
33
|
},
|
|
31
34
|
mailingAddress: {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
35
|
+
firstLine: '123 Main St',
|
|
36
|
+
city: 'Seattle',
|
|
37
|
+
stateOrProvince: 'WA',
|
|
38
|
+
postalCode: '98000',
|
|
39
|
+
country: 'GR',
|
|
37
40
|
},
|
|
38
41
|
mailingAddressIsDifferent: true,
|
|
39
|
-
countryOfCitizenship:
|
|
42
|
+
countryOfCitizenship: 'GR',
|
|
40
43
|
ftinNotLegallyRequired: true,
|
|
41
44
|
taxResidences: [
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
45
|
+
{
|
|
46
|
+
country: 'GR',
|
|
47
|
+
tin: '456456456',
|
|
48
|
+
tinNotRequired: false,
|
|
49
|
+
},
|
|
47
50
|
],
|
|
48
|
-
vatin:
|
|
49
|
-
vatinCountry:
|
|
51
|
+
vatin: '123123123',
|
|
52
|
+
vatinCountry: 'GR',
|
|
50
53
|
vatinNotRequired: true,
|
|
51
|
-
financialAccountIdentifier:
|
|
52
|
-
financialAccountName:
|
|
54
|
+
financialAccountIdentifier: '123123123',
|
|
55
|
+
financialAccountName: 'John Smith',
|
|
53
56
|
isIndividual: true,
|
|
54
57
|
isEuResident: true,
|
|
55
58
|
isUsPerson: false,
|
|
59
|
+
},
|
|
56
60
|
};
|
|
57
61
|
```
|
|
58
62
|
|
|
59
63
|
```jsx
|
|
60
64
|
<TaxBitDAC7Form
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
+
data={exampleData} // `data` is an optional prop
|
|
66
|
+
bearerToken="bearer token goes here"
|
|
67
|
+
language="en-us" // 'en-us' is the default
|
|
68
|
+
staging // if not production
|
|
65
69
|
/>
|
|
66
70
|
```
|
|
67
71
|
|
|
68
72
|
Which is just a shortcut for this component...
|
|
73
|
+
|
|
69
74
|
```jsx
|
|
70
|
-
<TaxBitForm
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
75
|
+
<TaxBitForm
|
|
76
|
+
data={exampleData} // `data` is an optional prop
|
|
77
|
+
bearerToken="bearer token goes here"
|
|
78
|
+
language="en-us" // 'en-us' is the default
|
|
79
|
+
forms={['DAC7']}
|
|
80
|
+
staging // if not production
|
|
76
81
|
/>
|
|
77
82
|
```
|
|
78
83
|
|
|
79
|
-
There is a more basic component that simply shows the TaxBit UI and does not interact with the TaxBit server.
|
|
84
|
+
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...
|
|
85
|
+
|
|
80
86
|
```typescript jsx
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
87
|
+
<TaxBitDAC7FormUI
|
|
88
|
+
data={exampleData}
|
|
89
|
+
onSubmit={(data: unknown) => alert(JSON.stringify(data))}
|
|
90
|
+
/>
|
|
85
91
|
```
|
|
86
92
|
|
|
87
93
|
### Bearer Token
|
|
94
|
+
|
|
88
95
|
This will be generated from the TaxBit API and passed in as a prop to the component.
|
|
89
96
|
|
|
90
97
|
### Language
|
|
91
|
-
|
|
98
|
+
|
|
99
|
+
The first screen of the tax documentation interview gives the user the opportunity to select a language.
|
|
100
|
+
This can also be initially set to any one of the following:
|
|
101
|
+
|
|
92
102
|
- bg-bg
|
|
93
103
|
- cs-cz
|
|
104
|
+
- da-dk
|
|
105
|
+
- de-at
|
|
94
106
|
- de-de
|
|
107
|
+
- el-cy
|
|
95
108
|
- el-gr
|
|
96
109
|
- en-gb
|
|
97
110
|
- en-us
|
|
98
111
|
- es-es
|
|
99
112
|
- et-ee
|
|
113
|
+
- fi-fi
|
|
100
114
|
- fr-fr
|
|
115
|
+
- fr-lu
|
|
116
|
+
- ga-ie
|
|
117
|
+
- hr-hr
|
|
101
118
|
- hu-hu
|
|
102
119
|
- it-it
|
|
120
|
+
- lt-lt
|
|
121
|
+
- lv-lv
|
|
103
122
|
- mt-mt
|
|
123
|
+
- nl-be
|
|
104
124
|
- nl-nl
|
|
105
125
|
- no-no
|
|
126
|
+
- pl-pl
|
|
106
127
|
- pt-pt
|
|
107
128
|
- ro-ro
|
|
108
129
|
- sk-sk
|
|
@@ -110,210 +131,25 @@ This can be set to any of the following:
|
|
|
110
131
|
- sv-se
|
|
111
132
|
|
|
112
133
|
### Staging
|
|
113
|
-
|
|
134
|
+
|
|
135
|
+
This can be set to `true` or `false`. Passing `staging` in the component is the same as passing `staging={true}`.
|
|
114
136
|
|
|
115
137
|
If `true`, the staging environment will be used. If `false`, the production environment will be used. The default is `false`.
|
|
116
138
|
|
|
117
139
|
### CSS and Style Customization
|
|
118
|
-
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.
|
|
119
|
-
The structure below is an example of the HTML that that could be produced by a rendered React SDK Widget component.
|
|
120
140
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
<input type="radio" name="accountHolderIsIndividual" id="accountHolderIsIndividual-yes" value="yes" checked="">
|
|
135
|
-
<label for="accountHolderIsIndividual-yes">Yes</label>
|
|
136
|
-
</div>
|
|
137
|
-
<div class="taxbit-radio-button">
|
|
138
|
-
<input type="radio" name="accountHolderIsIndividual" id="accountHolderIsIndividual-no" value="no">
|
|
139
|
-
<label for="accountHolderIsIndividual-no">No</label>
|
|
140
|
-
</div>
|
|
141
|
-
</div>
|
|
142
|
-
</div>
|
|
143
|
-
</div>
|
|
144
|
-
</div>
|
|
145
|
-
</div>
|
|
146
|
-
<div class="taxbit-row">
|
|
147
|
-
<div class="taxbit-label">Name of Individual*</div>
|
|
148
|
-
<div class="taxbit-row-content">
|
|
149
|
-
<div class="taxbit-row-value">
|
|
150
|
-
<div class="taxbit-input-status">
|
|
151
|
-
<input type="text" name="accountHolderName" class="taxbit-input" value="Mark">
|
|
152
|
-
</div>
|
|
153
|
-
</div>
|
|
154
|
-
</div>
|
|
155
|
-
</div>
|
|
156
|
-
<div class="taxbit-row">
|
|
157
|
-
<div class="taxbit-label">Date of Birth*</div>
|
|
158
|
-
<div class="taxbit-row-content">
|
|
159
|
-
<div class="taxbit-row-value">
|
|
160
|
-
<div class="taxbit-input-status">
|
|
161
|
-
<div class="taxbit-row-value">
|
|
162
|
-
<select name="accountHolderDateOfBirth" class="taxbit-select taxbit-select-month">
|
|
163
|
-
<option value="" disabled="" hidden="">Month</option>
|
|
164
|
-
<option value="01">January</option>
|
|
165
|
-
<option value="02">February</option>
|
|
166
|
-
<option value="03">March</option>
|
|
167
|
-
<option value="04">April</option>
|
|
168
|
-
<option value="05">May</option>
|
|
169
|
-
<option value="06">June</option>
|
|
170
|
-
<option value="07">July</option>
|
|
171
|
-
<option value="08">August</option>
|
|
172
|
-
<option value="09">September</option>
|
|
173
|
-
<option value="10">October</option>
|
|
174
|
-
<option value="11">November</option>
|
|
175
|
-
<option value="12">December</option>
|
|
176
|
-
</select>
|
|
177
|
-
<select name="accountHolderDateOfBirth" class="taxbit-select taxbit-select-day taxbit-placeholder">
|
|
178
|
-
<option value="" disabled="" hidden="">Day</option>
|
|
179
|
-
<option value="01">1</option>
|
|
180
|
-
<option value="02">2</option>
|
|
181
|
-
<option value="03">3</option>
|
|
182
|
-
<option value="04">4</option>
|
|
183
|
-
<option value="05">5</option>
|
|
184
|
-
<option value="06">6</option>
|
|
185
|
-
<option value="07">7</option>
|
|
186
|
-
<option value="08">8</option>
|
|
187
|
-
<option value="09">9</option>
|
|
188
|
-
<option value="10">10</option>
|
|
189
|
-
<option value="11">11</option>
|
|
190
|
-
<option value="12">12</option>
|
|
191
|
-
<option value="13">13</option>
|
|
192
|
-
<option value="14">14</option>
|
|
193
|
-
<option value="15">15</option>
|
|
194
|
-
<option value="16">16</option>
|
|
195
|
-
<option value="17">17</option>
|
|
196
|
-
<option value="18">18</option>
|
|
197
|
-
<option value="19">19</option>
|
|
198
|
-
<option value="21">21</option>
|
|
199
|
-
<option value="22">22</option>
|
|
200
|
-
<option value="23">23</option>
|
|
201
|
-
<option value="24">24</option>
|
|
202
|
-
<option value="25">25</option>
|
|
203
|
-
<option value="26">26</option>
|
|
204
|
-
<option value="27">27</option>
|
|
205
|
-
<option value="28">28</option>
|
|
206
|
-
<option value="29">29</option>
|
|
207
|
-
<option value="30">30</option>
|
|
208
|
-
<option value="31">31</option>
|
|
209
|
-
</select>
|
|
210
|
-
<select name="accountHolderDateOfBirth" class="taxbit-select taxbit-select-year taxbit-placeholder">
|
|
211
|
-
<option value="" disabled="" hidden="">Year</option>
|
|
212
|
-
<option value="2023">2023</option>
|
|
213
|
-
<option value="2022">2022</option>
|
|
214
|
-
<option value="2021">2021</option>
|
|
215
|
-
<option value="2020">2020</option>
|
|
216
|
-
<option value="2019">2019</option>
|
|
217
|
-
<option value="2018">2018</option>
|
|
218
|
-
<option value="2017">2017</option>
|
|
219
|
-
<option value="2016">2016</option>
|
|
220
|
-
<option value="2015">2015</option>
|
|
221
|
-
<option value="2014">2014</option>
|
|
222
|
-
<option value="2013">2013</option>
|
|
223
|
-
<option value="2012">2012</option>
|
|
224
|
-
<option value="2011">2011</option>
|
|
225
|
-
<option value="2010">2010</option>
|
|
226
|
-
<option value="2009">2009</option>
|
|
227
|
-
<option value="2008">2008</option>
|
|
228
|
-
<option value="2007">2007</option>
|
|
229
|
-
<option value="2006">2006</option>
|
|
230
|
-
<option value="2005">2005</option>
|
|
231
|
-
<option value="2004">2004</option>
|
|
232
|
-
<option value="2003">2003</option>
|
|
233
|
-
<option value="2002">2002</option>
|
|
234
|
-
<option value="2001">2001</option>
|
|
235
|
-
<option value="2000">2000</option>
|
|
236
|
-
</select>
|
|
237
|
-
</div>
|
|
238
|
-
</div>
|
|
239
|
-
</div>
|
|
240
|
-
</div>
|
|
241
|
-
</div>
|
|
242
|
-
<div class="taxbit-section">
|
|
243
|
-
<div class="taxbit-row">
|
|
244
|
-
<div class="taxbit-label">VAT Member State*</div>
|
|
245
|
-
<div class="taxbit-row-content">
|
|
246
|
-
<div class="taxbit-row-value">
|
|
247
|
-
<div class="taxbit-input-status">
|
|
248
|
-
<select name="accountHolderVatCountry" class="taxbit-select">
|
|
249
|
-
<option value="">
|
|
141
|
+
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.
|
|
142
|
+
Classnames are namespaced with "taxbit-" to reduce the chance of conflict.
|
|
143
|
+
|
|
144
|
+
### Callbacks
|
|
145
|
+
|
|
146
|
+
The TaxBit React SDK provides callbacks for the following events:
|
|
147
|
+
|
|
148
|
+
- `onSubmit` - called when the user clicks the submit button
|
|
149
|
+
- `onSuccess` - called after the server responds with a successful submission
|
|
150
|
+
|
|
151
|
+
These callbacks can be passed in to the Component and used to trigger other actions in your application.
|
|
152
|
+
|
|
153
|
+
### Types
|
|
250
154
|
|
|
251
|
-
|
|
252
|
-
<option value="AT">Austria</option>
|
|
253
|
-
<option value="BE">Belgium</option>
|
|
254
|
-
<option value="BG">Bulgaria</option>
|
|
255
|
-
<option value="HR">Croatia</option>
|
|
256
|
-
<option value="CY">Cyprus</option>
|
|
257
|
-
<option value="CZ">Czechia</option>
|
|
258
|
-
<option value="DK">Denmark</option>
|
|
259
|
-
<option value="EE">Estonia</option>
|
|
260
|
-
<option value="FI">Finland</option>
|
|
261
|
-
<option value="FR">France</option>
|
|
262
|
-
<option value="DE">Germany</option>
|
|
263
|
-
<option value="GR">Greece</option>
|
|
264
|
-
<option value="HU">Hungary</option>
|
|
265
|
-
<option value="IE">Ireland</option>
|
|
266
|
-
<option value="IT">Italy</option>
|
|
267
|
-
<option value="LV">Latvia</option>
|
|
268
|
-
<option value="LT">Lithuania</option>
|
|
269
|
-
<option value="LU">Luxembourg</option>
|
|
270
|
-
<option value="MT">Malta</option>
|
|
271
|
-
<option value="NL">Netherlands</option>
|
|
272
|
-
<option value="PL">Poland</option>
|
|
273
|
-
<option value="PT">Portugal</option>
|
|
274
|
-
<option value="RO">Romania</option>
|
|
275
|
-
<option value="SK">Slovakia</option>
|
|
276
|
-
<option value="SI">Slovenia</option>
|
|
277
|
-
<option value="ES">Spain</option>
|
|
278
|
-
<option value="SE">Sweden</option>
|
|
279
|
-
</select>
|
|
280
|
-
</div>
|
|
281
|
-
</div>
|
|
282
|
-
</div>
|
|
283
|
-
</div>
|
|
284
|
-
<div class="taxbit-row">
|
|
285
|
-
<div class="taxbit-label">VAT Identification Number*<div class="taxbit-sub-label">Unique identifier for VAT-registered businesses or individuals.</div>
|
|
286
|
-
</div>
|
|
287
|
-
<div class="taxbit-row-content">
|
|
288
|
-
<div class="taxbit-row-value">
|
|
289
|
-
<div class="taxbit-input-status">
|
|
290
|
-
<input type="text" name="accountHolderVatIdentificationNumber" class="taxbit-input" value="">
|
|
291
|
-
</div>
|
|
292
|
-
</div>
|
|
293
|
-
</div>
|
|
294
|
-
</div>
|
|
295
|
-
<div class="taxbit-row">
|
|
296
|
-
<div class="taxbit-label"></div>
|
|
297
|
-
<div class="taxbit-row-content">
|
|
298
|
-
<div class="taxbit-row-value">
|
|
299
|
-
<div class="taxbit-input-status">
|
|
300
|
-
<div class="taxbit-checkBox-label">
|
|
301
|
-
<input type="checkbox" id="accountHolderVatIdentificationNumberIsNotRequired" name="accountHolderVatIdentificationNumberIsNotRequired" class="taxbit-check-box">
|
|
302
|
-
<label for="accountHolderVatIdentificationNumberIsNotRequired">VAT is not required or has not been issued</label>
|
|
303
|
-
</div>
|
|
304
|
-
</div>
|
|
305
|
-
</div>
|
|
306
|
-
</div>
|
|
307
|
-
</div>
|
|
308
|
-
</div>
|
|
309
|
-
</main>
|
|
310
|
-
<footer class="taxbit-step-actions">
|
|
311
|
-
<div class="taxbit-secondary-actions">
|
|
312
|
-
<button tabindex="-1">Back</button>
|
|
313
|
-
</div>
|
|
314
|
-
<div class="taxbit-primary-actions">
|
|
315
|
-
<button>Next</button>
|
|
316
|
-
</div>
|
|
317
|
-
</footer>
|
|
318
|
-
</form>
|
|
319
|
-
```
|
|
155
|
+
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
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React from
|
|
1
|
+
import React from 'react';
|
|
2
2
|
export declare const App: () => React.JSX.Element;
|
package/dist/basic.css
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Form.tsx';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export * from
|
|
3
|
-
export * from
|
|
4
|
-
export * from
|
|
5
|
-
export * from
|
|
6
|
-
export * from
|
|
7
|
-
export * from
|
|
1
|
+
export * from './Address';
|
|
2
|
+
export * from './ErrorMessage';
|
|
3
|
+
export * from './Form';
|
|
4
|
+
export * from './InputStatus';
|
|
5
|
+
export * from './Notification';
|
|
6
|
+
export * from './Row';
|
|
7
|
+
export * from './Section';
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
export * from
|
|
3
|
-
export
|
|
1
|
+
import type { TaxDocumentationErrorFile, TaxDocumentationPropertyFile } from './useFormUI';
|
|
2
|
+
export * from './FormUIProvider';
|
|
3
|
+
export * from './useFormUIContext';
|
|
4
|
+
export { TaxDocumentationErrorFile, TaxDocumentationPropertyFile };
|
|
@@ -1,145 +1,45 @@
|
|
|
1
|
-
|
|
2
|
-
import {
|
|
3
|
-
import { Locale } from
|
|
4
|
-
import {
|
|
5
|
-
export type
|
|
6
|
-
[key in TaxDocumentationKey]
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { ButtonKey, ErrorKey, HintKey, NotificationKey, PromptKey, SubPromptKey, TextKey, TitleKey } from 'i18n/types';
|
|
3
|
+
import { Locale } from 'types';
|
|
4
|
+
import { TaxDocumentation, TaxDocumentationKey } from 'types/TaxDocumentation';
|
|
5
|
+
export type TaxDocumentationPropertyFile = {
|
|
6
|
+
[key in TaxDocumentationKey]: boolean;
|
|
7
7
|
};
|
|
8
|
-
type
|
|
9
|
-
[key in TaxDocumentationKey]
|
|
10
|
-
};
|
|
11
|
-
type FormUIRequired = {
|
|
12
|
-
[key in TaxDocumentationKey]?: boolean;
|
|
8
|
+
export type TaxDocumentationErrorFile = {
|
|
9
|
+
[key in TaxDocumentationKey]?: ErrorKey;
|
|
13
10
|
};
|
|
14
11
|
export declare const useFormUI: () => {
|
|
15
12
|
fields: TaxDocumentation;
|
|
13
|
+
setFields: import("react").Dispatch<import("react").SetStateAction<TaxDocumentation>>;
|
|
16
14
|
setValue: (key: TaxDocumentationKey, value: string | undefined) => void;
|
|
17
|
-
errors: FormUIErrors;
|
|
18
|
-
notifications: Notifications;
|
|
19
15
|
isErrorFree: boolean;
|
|
20
16
|
showErrors: boolean;
|
|
21
17
|
exposeErrors: () => void;
|
|
22
18
|
hideErrors: () => void;
|
|
23
|
-
required: FormUIRequired;
|
|
24
19
|
getLocalButton: (key: ButtonKey) => string;
|
|
25
20
|
getLocalCaProvince: (key: string | undefined) => string;
|
|
26
21
|
getLocalCountry: (key: string | undefined) => string;
|
|
27
22
|
getLocalError: (key: ErrorKey) => string;
|
|
28
23
|
getLocalHint: (key: TaxDocumentationKey) => string | undefined;
|
|
24
|
+
getHintKey: (key: TaxDocumentationKey) => HintKey;
|
|
29
25
|
getLocalLocale: (key: Locale) => string;
|
|
30
26
|
getLocalNotification: (key: NotificationKey) => string;
|
|
31
27
|
getLocalOption: (key: string | undefined) => string | undefined;
|
|
32
28
|
getLocalPrompt: (key: string) => string;
|
|
29
|
+
getPromptKey: (key: string) => PromptKey;
|
|
33
30
|
getLocalSubPrompt: (key: TaxDocumentationKey) => string;
|
|
31
|
+
getSubPromptKey: (key: TaxDocumentationKey) => SubPromptKey;
|
|
34
32
|
getLocalText: (key: TextKey) => string;
|
|
35
33
|
getLocalTitle: (key: TitleKey) => string;
|
|
36
34
|
getLocalSubTitle: (key: string) => string;
|
|
37
35
|
getLocalUsState: (key: string | undefined) => string;
|
|
38
36
|
getLocalMonth: (key: string | undefined) => string;
|
|
39
37
|
getRequiredLocalPrompt: (key: TaxDocumentationKey) => string;
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
iAmExemptFromFatcaReporting: boolean;
|
|
46
|
-
iAmNotSubjectToBackupWithholding: boolean;
|
|
47
|
-
iAuthorizeWithholdingAgent: boolean;
|
|
48
|
-
iCertifyToAll: boolean;
|
|
49
|
-
iConfirmIncomeIsNonUs: boolean;
|
|
50
|
-
iConfirmTheBeneficialOwnerIsExempt: boolean;
|
|
51
|
-
iConfirmTheEntityIsNotAUsPerson: boolean;
|
|
52
|
-
iConfirmTheEntityIsTheBeneficialOwner: boolean;
|
|
53
|
-
iConfirmTheTaxIdIsCorrect: boolean;
|
|
54
|
-
iHaveLegalCapacityToSign: boolean;
|
|
55
|
-
regardedOwnerUsPerson: boolean;
|
|
56
|
-
signature: boolean;
|
|
57
|
-
accountHolderAddressCity: boolean;
|
|
58
|
-
accountHolderAddressCountry: boolean;
|
|
59
|
-
accountHolderAddressState: boolean;
|
|
60
|
-
accountHolderAddressStreet2: boolean;
|
|
61
|
-
accountHolderAddressStreet: boolean;
|
|
62
|
-
accountHolderAddressZip: boolean;
|
|
63
|
-
accountHolderCityOfBirth: boolean;
|
|
64
|
-
accountHolderCountryOfBirth: boolean;
|
|
65
|
-
accountHolderCountryOfCitizenship: boolean;
|
|
66
|
-
accountHolderDateOfBirth: boolean;
|
|
67
|
-
accountHolderDbaName: boolean;
|
|
68
|
-
accountHolderMailingAddressCity: boolean;
|
|
69
|
-
accountHolderMailingAddressCountry: boolean;
|
|
70
|
-
accountHolderMailingAddressIsDifferent: boolean;
|
|
71
|
-
accountHolderMailingAddressState: boolean;
|
|
72
|
-
accountHolderMailingAddressStreet2: boolean;
|
|
73
|
-
accountHolderMailingAddressStreet: boolean;
|
|
74
|
-
accountHolderMailingAddressZip: boolean;
|
|
75
|
-
accountHolderName: boolean;
|
|
76
|
-
accountHolderFinancialAccountIdentifier: boolean;
|
|
77
|
-
accountHolderFinancialAccountName: boolean;
|
|
78
|
-
accountHolderForeignTin: boolean;
|
|
79
|
-
accountHolderForeignTinIsNotRequired: boolean;
|
|
80
|
-
accountHolderTaxResidenceCountry1: boolean;
|
|
81
|
-
accountHolderTaxResidenceForeignTin1: boolean;
|
|
82
|
-
accountHolderTaxResidenceForeignTin1IsNotRequired: boolean;
|
|
83
|
-
accountHolderTaxResidenceCountry2: boolean;
|
|
84
|
-
accountHolderTaxResidenceForeignTin2: boolean;
|
|
85
|
-
accountHolderTaxResidenceForeignTin2IsNotRequired: boolean;
|
|
86
|
-
accountHolderTaxResidenceCountry3: boolean;
|
|
87
|
-
accountHolderTaxResidenceForeignTin3: boolean;
|
|
88
|
-
accountHolderTaxResidenceForeignTin3IsNotRequired: boolean;
|
|
89
|
-
accountHolderTaxResidenceCountry4: boolean;
|
|
90
|
-
accountHolderTaxResidenceForeignTin4: boolean;
|
|
91
|
-
accountHolderTaxResidenceForeignTin4IsNotRequired: boolean;
|
|
92
|
-
accountHolderTaxResidenceCountry5: boolean;
|
|
93
|
-
accountHolderTaxResidenceForeignTin5: boolean;
|
|
94
|
-
accountHolderTaxResidenceForeignTin5IsNotRequired: boolean;
|
|
95
|
-
accountHolderShowTaxResidence2: boolean;
|
|
96
|
-
accountHolderShowTaxResidence3: boolean;
|
|
97
|
-
accountHolderShowTaxResidence4: boolean;
|
|
98
|
-
accountHolderShowTaxResidence5: boolean;
|
|
99
|
-
accountHolderUsTin: boolean;
|
|
100
|
-
accountHolderVatIdentificationNumber: boolean;
|
|
101
|
-
accountHolderVatIdentificationNumberIsNotRequired: boolean;
|
|
102
|
-
accountHolderVatCountry: boolean;
|
|
103
|
-
accountHolderIsIndividual: boolean;
|
|
104
|
-
accountHolderIsEuResident: boolean;
|
|
105
|
-
accountHolderUsPerson: boolean;
|
|
106
|
-
accountHolderUsAccountType: boolean;
|
|
107
|
-
accountHolderUsSmllcElection: boolean;
|
|
108
|
-
accountHolderUsLlcClassification: boolean;
|
|
109
|
-
accountHolderUsOtherClassification: boolean;
|
|
110
|
-
accountHolderUsTrustEstateEin: boolean;
|
|
111
|
-
accountHolderForeignAccountType: boolean;
|
|
112
|
-
accountHolderForeignTrustClassification: boolean;
|
|
113
|
-
accountHolderForeignOtherClassification: boolean;
|
|
114
|
-
regardedOwnerAddressCity: boolean;
|
|
115
|
-
regardedOwnerAddressCountry: boolean;
|
|
116
|
-
regardedOwnerAddressState: boolean;
|
|
117
|
-
regardedOwnerAddressStreet2: boolean;
|
|
118
|
-
regardedOwnerAddressStreet: boolean;
|
|
119
|
-
regardedOwnerAddressZip: boolean;
|
|
120
|
-
regardedOwnerCountryOfCitizenship: boolean;
|
|
121
|
-
regardedOwnerDateOfBirth: boolean;
|
|
122
|
-
regardedOwnerDbaName: boolean;
|
|
123
|
-
regardedOwnerMailingAddressCity: boolean;
|
|
124
|
-
regardedOwnerMailingAddressCountry: boolean;
|
|
125
|
-
regardedOwnerMailingAddressIsDifferent: boolean;
|
|
126
|
-
regardedOwnerMailingAddressState: boolean;
|
|
127
|
-
regardedOwnerMailingAddressStreet2: boolean;
|
|
128
|
-
regardedOwnerMailingAddressStreet: boolean;
|
|
129
|
-
regardedOwnerMailingAddressZip: boolean;
|
|
130
|
-
regardedOwnerName: boolean;
|
|
131
|
-
regardedOwnerUsAccountType: boolean;
|
|
132
|
-
regardedOwnerUsLlcClassification: boolean;
|
|
133
|
-
regardedOwnerUsOtherClassification: boolean;
|
|
134
|
-
regardedOwnerUsTrustEstateEin: boolean;
|
|
135
|
-
regardedOwnerForeignAccountType: boolean;
|
|
136
|
-
regardedOwnerForeignTrustClassification: boolean;
|
|
137
|
-
regardedOwnerForeignOtherClassification: boolean;
|
|
138
|
-
regardedOwnerForeignTin: boolean;
|
|
139
|
-
regardedOwnerForeignTinIsNotRequired: boolean;
|
|
140
|
-
regardedOwnerUsTin: boolean;
|
|
141
|
-
};
|
|
38
|
+
notifiedFields: import("../../validations/getNotifiedFields.ts").Notifications;
|
|
39
|
+
invalidFields: TaxDocumentationErrorFile;
|
|
40
|
+
requiredFields: TaxDocumentationPropertyFile;
|
|
41
|
+
submittableFields: TaxDocumentation;
|
|
42
|
+
visibleFields: TaxDocumentationPropertyFile;
|
|
142
43
|
hideField: (key: TaxDocumentationKey) => void;
|
|
143
44
|
showField: (key: TaxDocumentationKey) => void;
|
|
144
45
|
};
|
|
145
|
-
export {};
|