@infosoftas/s4-orders-js-sdk 0.1.2 → 0.1.4
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 +18 -0
- package/package.json +2 -2
- package/src/App.tsx +22 -0
- package/src/api/InvoiceApi.ts +2 -1
- package/src/components/EHFForm/EHFForm.tsx +14 -1
- package/src/components/FormFields/ToggleFiled.tsx +3 -0
- package/src/components/OIOForm/OIOForm.tsx +14 -1
- package/src/components/OrderForm/OrderForm.tsx +16 -1
- package/src/enums/general.ts +8 -0
- package/src/hooks/useOrderForm.tsx +37 -5
- package/src/types/general.ts +5 -1
- package/src/utils/helper.ts +30 -9
package/README.md
CHANGED
|
@@ -64,10 +64,17 @@ type OrderFormInputsType = {
|
|
|
64
64
|
zip?: string;
|
|
65
65
|
};
|
|
66
66
|
|
|
67
|
+
enum UserActionEnum {
|
|
68
|
+
SELECT_FORM = 'selectForm',
|
|
69
|
+
SELECT_PAYMENT_METHOD = 'selectPaymentMethod',
|
|
70
|
+
RETURN_TO_MAIN = 'returnToMain',
|
|
71
|
+
}
|
|
72
|
+
|
|
67
73
|
type ConfigType = {
|
|
68
74
|
domElementId: string;
|
|
69
75
|
moduleTitle?: string;
|
|
70
76
|
submitStartCallback?: (subscriberId: string) => void;
|
|
77
|
+
userActionCallback?: (action: UserActionEnum, args: object | null | undefined) => void;
|
|
71
78
|
apiKey: string;
|
|
72
79
|
apiUrl: string;
|
|
73
80
|
templatePackageId: string;
|
|
@@ -99,6 +106,9 @@ type ConfigType = {
|
|
|
99
106
|
errorReqMsg?: string;
|
|
100
107
|
errorInvalidEmailMsg?: string;
|
|
101
108
|
errorInvalidPhoneMsg?: string;
|
|
109
|
+
errorValidationTitleMsg?: string;
|
|
110
|
+
errorValidationDenialOrderBlockingMsg?: string;
|
|
111
|
+
errorValidationBlockingOffersMsg?: string;
|
|
102
112
|
};
|
|
103
113
|
}
|
|
104
114
|
```
|
|
@@ -151,6 +161,10 @@ export const prepareConfig = ({
|
|
|
151
161
|
|
|
152
162
|
const config = {
|
|
153
163
|
submitStartCallback,
|
|
164
|
+
userActionCallback: (action, args) => {
|
|
165
|
+
console.log(action);
|
|
166
|
+
console.table(args);
|
|
167
|
+
},
|
|
154
168
|
moduleTitle: '',
|
|
155
169
|
domElementId: ORDER_PLACE_ID,
|
|
156
170
|
redirectUrl: window.location.href,
|
|
@@ -271,6 +285,9 @@ export const prepareConfig = ({
|
|
|
271
285
|
errorReqMsg: 'This field is required!',
|
|
272
286
|
errorInvalidEmailMsg: 'Invalid email address!',
|
|
273
287
|
errorInvalidPhoneMsg: 'Invalid phone number!',
|
|
288
|
+
errorValidationTitleMsg: 'One or more validation errors occurred.',
|
|
289
|
+
errorValidationDenialOrderBlockingMsg: 'The order/subscription will not be created because the subscriber has a denial order blocking all.',
|
|
290
|
+
errorValidationBlockingOffersMsg: 'The order/subscription will not be created because the subscriber has a denial order blocking offers.',
|
|
274
291
|
paymentMethodNotAllowedMsg: 'This payment method not allowed!',
|
|
275
292
|
invoiceLookupNotFoundText: 'There was no recipient found for the given information',
|
|
276
293
|
successText: 'Success message',
|
|
@@ -369,6 +386,7 @@ export default OrderPlace;
|
|
|
369
386
|
| organizationId | '' | organization id |
|
|
370
387
|
| redirectUrl | window.location.href | redirect url |
|
|
371
388
|
| showIframe | false | show credit card in iframe |
|
|
389
|
+
| userActionCallback | undefined | function for tracking user actions |
|
|
372
390
|
| paymentMethodsOptions | orderFormFields: [{name: 'phone, required: false, readOnly: false, label: ''}] | default form fields |
|
|
373
391
|
| availablePaymentMethods | [] | available payment methods |
|
|
374
392
|
| language | 'en-US' | language |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@infosoftas/s4-orders-js-sdk",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.4",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"build": "rimraf lib && webpack --mode production",
|
|
6
6
|
"release": "release-it"
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"copy-webpack-plugin": "^12.0.2",
|
|
28
28
|
"css-loader": "^7.1.2",
|
|
29
29
|
"mini-css-extract-plugin": "^2.9.1",
|
|
30
|
-
"release-it": "^
|
|
30
|
+
"release-it": "^19.0.4",
|
|
31
31
|
"rimraf": "^6.0.1",
|
|
32
32
|
"sass": "^1.79.2",
|
|
33
33
|
"sass-loader": "^16.0.1",
|
package/src/App.tsx
CHANGED
|
@@ -4,6 +4,7 @@ import {
|
|
|
4
4
|
FormTypeEnum,
|
|
5
5
|
MessageEventTypeEnum,
|
|
6
6
|
PaymentMethodEnum,
|
|
7
|
+
UserActionEnum,
|
|
7
8
|
} from './enums/general';
|
|
8
9
|
import useMessageEvent from './hooks/useMessageEvent';
|
|
9
10
|
import OrderForm from './components/OrderForm/OrderForm';
|
|
@@ -27,6 +28,7 @@ import './App.scss';
|
|
|
27
28
|
|
|
28
29
|
const App: FC<ConfigType> = ({
|
|
29
30
|
submitStartCallback,
|
|
31
|
+
userActionCallback,
|
|
30
32
|
moduleTitle,
|
|
31
33
|
apiKey,
|
|
32
34
|
apiUrl,
|
|
@@ -58,6 +60,9 @@ const App: FC<ConfigType> = ({
|
|
|
58
60
|
errorReqMsg: '',
|
|
59
61
|
errorInvalidEmailMsg: '',
|
|
60
62
|
errorInvalidPhoneMsg: '',
|
|
63
|
+
errorValidationTitleMsg: 'One or more validation errors occurred.',
|
|
64
|
+
errorValidationDenialOrderBlockingMsg: 'The order/subscription will not be created because the subscriber has a denial order blocking all.',
|
|
65
|
+
errorValidationBlockingOffersMsg: 'The order/subscription will not be created because the subscriber has a denial order blocking offers.',
|
|
61
66
|
paymentMethodNotAllowedMsg: '',
|
|
62
67
|
invoiceLookupNotFoundText:
|
|
63
68
|
'There was no recipient found for the given information',
|
|
@@ -145,6 +150,7 @@ const App: FC<ConfigType> = ({
|
|
|
145
150
|
setLoading(false);
|
|
146
151
|
setShowOrderForm(true);
|
|
147
152
|
setFormType(FormTypeEnum.ORDER);
|
|
153
|
+
userActionCallback?.(UserActionEnum.SELECT_FORM, { form: FormTypeEnum.ORDER });
|
|
148
154
|
}
|
|
149
155
|
};
|
|
150
156
|
|
|
@@ -238,8 +244,10 @@ const App: FC<ConfigType> = ({
|
|
|
238
244
|
});
|
|
239
245
|
} else if (data?.paymentMethod === PaymentMethodEnum.EHF) {
|
|
240
246
|
setFormType(FormTypeEnum.EHF);
|
|
247
|
+
userActionCallback?.(UserActionEnum.SELECT_FORM, { form: FormTypeEnum.EHF });
|
|
241
248
|
} else if (data?.paymentMethod === PaymentMethodEnum.OIO) {
|
|
242
249
|
setFormType(FormTypeEnum.OIO);
|
|
250
|
+
userActionCallback?.(UserActionEnum.SELECT_FORM, { form: FormTypeEnum.OIO });
|
|
243
251
|
} else if (url) {
|
|
244
252
|
if (
|
|
245
253
|
showIframe &&
|
|
@@ -261,11 +269,13 @@ const App: FC<ConfigType> = ({
|
|
|
261
269
|
|
|
262
270
|
const handleInvoiceBack = () => {
|
|
263
271
|
setFormType(FormTypeEnum.ORDER);
|
|
272
|
+
userActionCallback?.(UserActionEnum.SELECT_FORM, { form: FormTypeEnum.ORDER });
|
|
264
273
|
};
|
|
265
274
|
|
|
266
275
|
const updateFormData = (data: OrderFormInputsType) => {
|
|
267
276
|
setOrderFormValues(data);
|
|
268
277
|
setFormType(data.paymentMethod as unknown as FormTypeEnum);
|
|
278
|
+
userActionCallback?.(UserActionEnum.SELECT_FORM, { form: data.paymentMethod });
|
|
269
279
|
};
|
|
270
280
|
|
|
271
281
|
const handleInvoiceForm = async (
|
|
@@ -332,6 +342,10 @@ const App: FC<ConfigType> = ({
|
|
|
332
342
|
invoiceLookupNotFoundText={
|
|
333
343
|
settings?.invoiceLookupNotFoundText
|
|
334
344
|
}
|
|
345
|
+
userActionCallback={userActionCallback}
|
|
346
|
+
errorValidationTitleMsg={settings?.errorValidationTitleMsg}
|
|
347
|
+
errorValidationDenialOrderBlockingMsg={settings?.errorValidationDenialOrderBlockingMsg}
|
|
348
|
+
errorValidationBlockingOffersMsg={settings?.errorValidationBlockingOffersMsg}
|
|
335
349
|
/>
|
|
336
350
|
)}
|
|
337
351
|
{formType === FormTypeEnum.EHF && (
|
|
@@ -363,6 +377,10 @@ const App: FC<ConfigType> = ({
|
|
|
363
377
|
invoiceLookupNotFoundText={
|
|
364
378
|
settings?.invoiceLookupNotFoundText
|
|
365
379
|
}
|
|
380
|
+
userActionCallback={userActionCallback}
|
|
381
|
+
errorValidationTitleMsg={settings?.errorValidationTitleMsg}
|
|
382
|
+
errorValidationDenialOrderBlockingMsg={settings?.errorValidationDenialOrderBlockingMsg}
|
|
383
|
+
errorValidationBlockingOffersMsg={settings?.errorValidationBlockingOffersMsg}
|
|
366
384
|
/>
|
|
367
385
|
)}
|
|
368
386
|
{formType !== FormTypeEnum.OIO &&
|
|
@@ -407,6 +425,10 @@ const App: FC<ConfigType> = ({
|
|
|
407
425
|
invoiceAddressSelection={
|
|
408
426
|
invoiceAddressSelection
|
|
409
427
|
}
|
|
428
|
+
userActionCallback={userActionCallback}
|
|
429
|
+
errorValidationTitleMsg={settings?.errorValidationTitleMsg}
|
|
430
|
+
errorValidationDenialOrderBlockingMsg={settings?.errorValidationDenialOrderBlockingMsg}
|
|
431
|
+
errorValidationBlockingOffersMsg={settings?.errorValidationBlockingOffersMsg}
|
|
410
432
|
/>
|
|
411
433
|
)}
|
|
412
434
|
</>
|
package/src/api/InvoiceApi.ts
CHANGED
|
@@ -6,7 +6,8 @@ type RequestInvoiceLookupType = {
|
|
|
6
6
|
};
|
|
7
7
|
|
|
8
8
|
type InvoiceLookupResponseType = {
|
|
9
|
-
|
|
9
|
+
receivesInvoice: boolean;
|
|
10
|
+
recievesInvoice: boolean; // TODO: Should be deleted in the future (misspelled), use "receivesInvoice" instead of this.
|
|
10
11
|
};
|
|
11
12
|
|
|
12
13
|
export const invoiceLookup = (
|
|
@@ -4,7 +4,7 @@ import { FormProvider, useForm, SubmitHandler } from 'react-hook-form';
|
|
|
4
4
|
import Alert from '../Alert/Alert';
|
|
5
5
|
import Button from '../Button/Button';
|
|
6
6
|
import InputField from '../FormFields/InputField';
|
|
7
|
-
import { PaymentMethodEnum } from '../../enums/general';
|
|
7
|
+
import { PaymentMethodEnum, UserActionEnum } from '../../enums/general';
|
|
8
8
|
import {
|
|
9
9
|
OrderFormFiledType,
|
|
10
10
|
PaymentMethodOptionsType,
|
|
@@ -18,6 +18,7 @@ type Props = {
|
|
|
18
18
|
callback: (url: string | null, orderInfo?: OrderInfoType | null) => void;
|
|
19
19
|
onBack: () => void;
|
|
20
20
|
submitStartCallback?: (id: string) => void;
|
|
21
|
+
userActionCallback?: (action: UserActionEnum, args: object | null | undefined) => void;
|
|
21
22
|
className?: string;
|
|
22
23
|
backButtonText?: string;
|
|
23
24
|
verifyButtonText?: string;
|
|
@@ -42,6 +43,9 @@ type Props = {
|
|
|
42
43
|
paymentMethods?: PaymentMethodEnum[];
|
|
43
44
|
};
|
|
44
45
|
invoiceLookupNotFoundText?: string;
|
|
46
|
+
errorValidationTitleMsg?: string,
|
|
47
|
+
errorValidationDenialOrderBlockingMsg?: string,
|
|
48
|
+
errorValidationBlockingOffersMsg?: string,
|
|
45
49
|
};
|
|
46
50
|
|
|
47
51
|
type EHFFormInputsType = {
|
|
@@ -56,6 +60,7 @@ const EHFForm: FC<Props> = ({
|
|
|
56
60
|
callback,
|
|
57
61
|
onBack,
|
|
58
62
|
submitStartCallback,
|
|
63
|
+
userActionCallback,
|
|
59
64
|
className = '',
|
|
60
65
|
backButtonText = '',
|
|
61
66
|
verifyButtonText = '',
|
|
@@ -74,6 +79,9 @@ const EHFForm: FC<Props> = ({
|
|
|
74
79
|
paymentMethodsOptions,
|
|
75
80
|
invoiceAddressSelection,
|
|
76
81
|
invoiceLookupNotFoundText,
|
|
82
|
+
errorValidationTitleMsg,
|
|
83
|
+
errorValidationDenialOrderBlockingMsg,
|
|
84
|
+
errorValidationBlockingOffersMsg
|
|
77
85
|
}) => {
|
|
78
86
|
const methods = useForm<EHFFormInputsType>({
|
|
79
87
|
defaultValues: {
|
|
@@ -97,6 +105,7 @@ const EHFForm: FC<Props> = ({
|
|
|
97
105
|
const { orderSubmit, loading, apiErrorMsg, errorsMsg } = useOrderForm({
|
|
98
106
|
callback,
|
|
99
107
|
submitStartCallback,
|
|
108
|
+
userActionCallback,
|
|
100
109
|
organizationId,
|
|
101
110
|
subscriberId,
|
|
102
111
|
userId,
|
|
@@ -111,6 +120,9 @@ const EHFForm: FC<Props> = ({
|
|
|
111
120
|
invoiceAddressToggle: orderValues?.invoiceAddressSelection,
|
|
112
121
|
invoiceOrderFields,
|
|
113
122
|
invoiceLookupNotFoundText,
|
|
123
|
+
errorValidationTitleMsg,
|
|
124
|
+
errorValidationDenialOrderBlockingMsg,
|
|
125
|
+
errorValidationBlockingOffersMsg
|
|
114
126
|
});
|
|
115
127
|
|
|
116
128
|
const onSubmit: SubmitHandler<EHFFormInputsType> = async (
|
|
@@ -123,6 +135,7 @@ const EHFForm: FC<Props> = ({
|
|
|
123
135
|
};
|
|
124
136
|
|
|
125
137
|
const handleBack = () => {
|
|
138
|
+
userActionCallback?.(UserActionEnum.RETURN_TO_MAIN, null);
|
|
126
139
|
onBack?.();
|
|
127
140
|
};
|
|
128
141
|
|
|
@@ -14,6 +14,7 @@ type Props = {
|
|
|
14
14
|
message?: string;
|
|
15
15
|
};
|
|
16
16
|
};
|
|
17
|
+
toggleCallback?: (value: boolean) => void;
|
|
17
18
|
};
|
|
18
19
|
|
|
19
20
|
const ToggleField: FC<Props> = ({
|
|
@@ -23,6 +24,7 @@ const ToggleField: FC<Props> = ({
|
|
|
23
24
|
label = '',
|
|
24
25
|
errorReqMsg = 'This field is required!',
|
|
25
26
|
errors,
|
|
27
|
+
toggleCallback
|
|
26
28
|
}) => {
|
|
27
29
|
const { register } = useFormContext();
|
|
28
30
|
const id = uuidv4();
|
|
@@ -44,6 +46,7 @@ const ToggleField: FC<Props> = ({
|
|
|
44
46
|
{...register(name, {
|
|
45
47
|
required: required ? errorReqMsg : false,
|
|
46
48
|
})}
|
|
49
|
+
onClick={(e) => toggleCallback?.(e.currentTarget.checked)}
|
|
47
50
|
/>
|
|
48
51
|
<span className="slider round"></span>
|
|
49
52
|
</label>
|
|
@@ -6,7 +6,7 @@ import Button from '../Button/Button';
|
|
|
6
6
|
import InputField from '../FormFields/InputField';
|
|
7
7
|
import { DEFAULT_ORDER_FORM_FIELDS } from '../FormFields/FormFields.helper';
|
|
8
8
|
|
|
9
|
-
import { PaymentMethodEnum } from '../../enums/general';
|
|
9
|
+
import { PaymentMethodEnum, UserActionEnum } from '../../enums/general';
|
|
10
10
|
import {
|
|
11
11
|
OrderFormFiledType,
|
|
12
12
|
PaymentMethodOptionsType,
|
|
@@ -19,6 +19,7 @@ type Props = {
|
|
|
19
19
|
callback: (url: string | null, orderInfo?: OrderInfoType | null) => void;
|
|
20
20
|
onBack: () => void;
|
|
21
21
|
submitStartCallback?: (id: string) => void;
|
|
22
|
+
userActionCallback?: (action: UserActionEnum, args: object | null | undefined) => void;
|
|
22
23
|
className?: string;
|
|
23
24
|
backButtonText?: string;
|
|
24
25
|
verifyButtonText?: string;
|
|
@@ -43,6 +44,9 @@ type Props = {
|
|
|
43
44
|
paymentMethods?: PaymentMethodEnum[];
|
|
44
45
|
};
|
|
45
46
|
invoiceLookupNotFoundText?: string;
|
|
47
|
+
errorValidationTitleMsg?: string,
|
|
48
|
+
errorValidationDenialOrderBlockingMsg?: string,
|
|
49
|
+
errorValidationBlockingOffersMsg?: string,
|
|
46
50
|
};
|
|
47
51
|
|
|
48
52
|
type OIOFormInputsType = {
|
|
@@ -59,6 +63,7 @@ const EHFForm: FC<Props> = ({
|
|
|
59
63
|
callback,
|
|
60
64
|
onBack,
|
|
61
65
|
submitStartCallback,
|
|
66
|
+
userActionCallback,
|
|
62
67
|
className = '',
|
|
63
68
|
backButtonText = '',
|
|
64
69
|
verifyButtonText = '',
|
|
@@ -78,6 +83,9 @@ const EHFForm: FC<Props> = ({
|
|
|
78
83
|
paymentMethodsOptions,
|
|
79
84
|
invoiceAddressSelection,
|
|
80
85
|
invoiceLookupNotFoundText,
|
|
86
|
+
errorValidationTitleMsg,
|
|
87
|
+
errorValidationDenialOrderBlockingMsg,
|
|
88
|
+
errorValidationBlockingOffersMsg
|
|
81
89
|
}) => {
|
|
82
90
|
const methods = useForm<OIOFormInputsType>({
|
|
83
91
|
defaultValues: {
|
|
@@ -105,6 +113,7 @@ const EHFForm: FC<Props> = ({
|
|
|
105
113
|
const { orderSubmit, loading, apiErrorMsg, errorsMsg } = useOrderForm({
|
|
106
114
|
callback,
|
|
107
115
|
submitStartCallback,
|
|
116
|
+
userActionCallback,
|
|
108
117
|
organizationId,
|
|
109
118
|
subscriberId,
|
|
110
119
|
userId,
|
|
@@ -119,6 +128,9 @@ const EHFForm: FC<Props> = ({
|
|
|
119
128
|
invoiceAddressToggle: orderValues?.invoiceAddressSelection,
|
|
120
129
|
invoiceOrderFields,
|
|
121
130
|
invoiceLookupNotFoundText,
|
|
131
|
+
errorValidationTitleMsg,
|
|
132
|
+
errorValidationDenialOrderBlockingMsg,
|
|
133
|
+
errorValidationBlockingOffersMsg
|
|
122
134
|
});
|
|
123
135
|
|
|
124
136
|
const onSubmit: SubmitHandler<OIOFormInputsType> = async (
|
|
@@ -128,6 +140,7 @@ const EHFForm: FC<Props> = ({
|
|
|
128
140
|
};
|
|
129
141
|
|
|
130
142
|
const handleBack = () => {
|
|
143
|
+
userActionCallback?.(UserActionEnum.RETURN_TO_MAIN, null);
|
|
131
144
|
onBack?.();
|
|
132
145
|
};
|
|
133
146
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { FC, ChangeEvent, Suspense, useState, useMemo } from 'react';
|
|
2
2
|
import { FormProvider, useForm, SubmitHandler } from 'react-hook-form';
|
|
3
3
|
|
|
4
|
-
import { PaymentMethodEnum } from '../../enums/general';
|
|
4
|
+
import { PaymentMethodEnum, UserActionEnum } from '../../enums/general';
|
|
5
5
|
import {
|
|
6
6
|
PAYMENT_METHOD_DEFAULT,
|
|
7
7
|
INVOICE_ALLOWED_PAYMENT_METHODS,
|
|
@@ -25,6 +25,7 @@ type Props = {
|
|
|
25
25
|
callback: (url: string | null, orderInfo?: OrderInfoType | null) => void;
|
|
26
26
|
updateFormData: (data: OrderFormInputsType) => void;
|
|
27
27
|
submitStartCallback?: (id: string) => void;
|
|
28
|
+
userActionCallback?: (action: UserActionEnum, args: object | null | undefined) => void;
|
|
28
29
|
templatePackageId: string;
|
|
29
30
|
subscriberId?: string;
|
|
30
31
|
userId?: string;
|
|
@@ -50,6 +51,9 @@ type Props = {
|
|
|
50
51
|
fields?: OrderFormFiledType[];
|
|
51
52
|
paymentMethods?: PaymentMethodEnum[];
|
|
52
53
|
};
|
|
54
|
+
errorValidationTitleMsg?: string,
|
|
55
|
+
errorValidationDenialOrderBlockingMsg?: string,
|
|
56
|
+
errorValidationBlockingOffersMsg?: string,
|
|
53
57
|
};
|
|
54
58
|
|
|
55
59
|
const initialData = {
|
|
@@ -69,6 +73,7 @@ const OrderForm: FC<Props> = ({
|
|
|
69
73
|
callback,
|
|
70
74
|
updateFormData,
|
|
71
75
|
submitStartCallback,
|
|
76
|
+
userActionCallback,
|
|
72
77
|
templatePackageId,
|
|
73
78
|
subscriberId,
|
|
74
79
|
userId,
|
|
@@ -89,6 +94,9 @@ const OrderForm: FC<Props> = ({
|
|
|
89
94
|
errorReqMsg = '',
|
|
90
95
|
errorInvalidEmailMsg = '',
|
|
91
96
|
errorInvalidPhoneMsg = '',
|
|
97
|
+
errorValidationTitleMsg,
|
|
98
|
+
errorValidationDenialOrderBlockingMsg,
|
|
99
|
+
errorValidationBlockingOffersMsg
|
|
92
100
|
}) => {
|
|
93
101
|
|
|
94
102
|
if (!templatePackageId) {
|
|
@@ -153,6 +161,7 @@ const OrderForm: FC<Props> = ({
|
|
|
153
161
|
const { orderSubmit, loading, apiErrorMsg, errorsMsg } = useOrderForm({
|
|
154
162
|
callback,
|
|
155
163
|
submitStartCallback,
|
|
164
|
+
userActionCallback,
|
|
156
165
|
organizationId,
|
|
157
166
|
subscriberId,
|
|
158
167
|
userId,
|
|
@@ -166,6 +175,9 @@ const OrderForm: FC<Props> = ({
|
|
|
166
175
|
templatePackageId,
|
|
167
176
|
invoiceAddressToggle,
|
|
168
177
|
invoiceOrderFields,
|
|
178
|
+
errorValidationTitleMsg,
|
|
179
|
+
errorValidationDenialOrderBlockingMsg,
|
|
180
|
+
errorValidationBlockingOffersMsg
|
|
169
181
|
});
|
|
170
182
|
|
|
171
183
|
const onSubmit: SubmitHandler<OrderFormInputsType> = async (
|
|
@@ -192,6 +204,8 @@ const OrderForm: FC<Props> = ({
|
|
|
192
204
|
) {
|
|
193
205
|
setValue('invoiceAddressSelection', false);
|
|
194
206
|
}
|
|
207
|
+
|
|
208
|
+
userActionCallback?.(UserActionEnum.SELECT_PAYMENT_METHOD, { paymentMethod: e.target.value });
|
|
195
209
|
};
|
|
196
210
|
|
|
197
211
|
const allowPaymentMethod = useMemo(() => {
|
|
@@ -287,6 +301,7 @@ const OrderForm: FC<Props> = ({
|
|
|
287
301
|
label={
|
|
288
302
|
invoiceAddressSelection?.label ?? 'Invoice Address'
|
|
289
303
|
}
|
|
304
|
+
toggleCallback={e => userActionCallback?.(UserActionEnum.TOGGLE_INVOICE_ADDRESS, { value: e })}
|
|
290
305
|
/>
|
|
291
306
|
)}
|
|
292
307
|
{showInvoiceFields && (
|
package/src/enums/general.ts
CHANGED
|
@@ -28,3 +28,11 @@ export enum FormTypeEnum {
|
|
|
28
28
|
EHF = 'EHF',
|
|
29
29
|
OIO = 'OIO',
|
|
30
30
|
}
|
|
31
|
+
|
|
32
|
+
export enum UserActionEnum {
|
|
33
|
+
SELECT_FORM = 'selectForm',
|
|
34
|
+
SELECT_PAYMENT_METHOD = 'selectPaymentMethod',
|
|
35
|
+
RETURN_TO_MAIN = 'returnToMain',
|
|
36
|
+
TOGGLE_INVOICE_ADDRESS = 'toggleInvoiceAddress',
|
|
37
|
+
SEARCH_ORGANIZATION_NUMBER = 'searchOrganizationNumber',
|
|
38
|
+
}
|
|
@@ -4,7 +4,7 @@ import { SubmitHandler } from 'react-hook-form';
|
|
|
4
4
|
import { createSubscriber, mapSubscriberToUser } from '../api/SubscribeApi';
|
|
5
5
|
import { orderStart } from '../api/OrdersApi';
|
|
6
6
|
import { invoiceLookup } from '../api/InvoiceApi';
|
|
7
|
-
import { InvoiceLookupNetworkEnum, PaymentMethodEnum } from '../enums/general';
|
|
7
|
+
import { InvoiceLookupNetworkEnum, PaymentMethodEnum, UserActionEnum } from '../enums/general';
|
|
8
8
|
import { WRONG_MSG, PAYMENT_METHOD_DEFAULT } from '../constants/index';
|
|
9
9
|
import { OrderFormInputsType, OrderInfoType } from '../types/order';
|
|
10
10
|
import {
|
|
@@ -20,11 +20,13 @@ import {
|
|
|
20
20
|
import {
|
|
21
21
|
prepareErrorMessage,
|
|
22
22
|
prepareErrorsArrayMessage,
|
|
23
|
+
ErrorMessages,
|
|
23
24
|
} from '../utils/helper';
|
|
24
25
|
|
|
25
26
|
type Props = {
|
|
26
27
|
callback: (url: string | null, orderInfo?: OrderInfoType | null) => void;
|
|
27
28
|
submitStartCallback?: (id: string) => void;
|
|
29
|
+
userActionCallback?: (action: UserActionEnum, args: object | null | undefined) => void;
|
|
28
30
|
templatePackageId: string;
|
|
29
31
|
subscriberId?: string;
|
|
30
32
|
userId?: string;
|
|
@@ -39,11 +41,15 @@ type Props = {
|
|
|
39
41
|
invoiceAddressToggle?: boolean;
|
|
40
42
|
invoiceOrderFields: OrderFormFiledType[];
|
|
41
43
|
invoiceLookupNotFoundText?: string;
|
|
44
|
+
errorValidationTitleMsg?: string,
|
|
45
|
+
errorValidationDenialOrderBlockingMsg?: string,
|
|
46
|
+
errorValidationBlockingOffersMsg?: string
|
|
42
47
|
};
|
|
43
48
|
|
|
44
49
|
const useOrderForm = ({
|
|
45
50
|
callback,
|
|
46
51
|
submitStartCallback,
|
|
52
|
+
userActionCallback,
|
|
47
53
|
organizationId,
|
|
48
54
|
subscriberId,
|
|
49
55
|
userId,
|
|
@@ -58,6 +64,9 @@ const useOrderForm = ({
|
|
|
58
64
|
invoiceAddressToggle,
|
|
59
65
|
invoiceOrderFields,
|
|
60
66
|
invoiceLookupNotFoundText,
|
|
67
|
+
errorValidationTitleMsg,
|
|
68
|
+
errorValidationDenialOrderBlockingMsg,
|
|
69
|
+
errorValidationBlockingOffersMsg
|
|
61
70
|
}: Props) => {
|
|
62
71
|
const [loading, setLoading] = useState<boolean>(false);
|
|
63
72
|
const [apiErrorMsg, setApiErrorMsg] = useState<string>('');
|
|
@@ -87,7 +96,17 @@ const useOrderForm = ({
|
|
|
87
96
|
});
|
|
88
97
|
}
|
|
89
98
|
|
|
90
|
-
|
|
99
|
+
// TODO: "recievesInvoice" should be deleted in the future
|
|
100
|
+
const receivesInvoice = invoiceResponse?.receivesInvoice || invoiceResponse?.recievesInvoice;
|
|
101
|
+
|
|
102
|
+
userActionCallback?.(UserActionEnum.SEARCH_ORGANIZATION_NUMBER, {
|
|
103
|
+
organizationNumber: data.organizationNumber,
|
|
104
|
+
cvr: data.cvr,
|
|
105
|
+
gln: data.gln,
|
|
106
|
+
found: !!receivesInvoice
|
|
107
|
+
});
|
|
108
|
+
|
|
109
|
+
if (invoiceResponse && !receivesInvoice) {
|
|
91
110
|
setLoading(false);
|
|
92
111
|
const value =
|
|
93
112
|
data.paymentMethod === PaymentMethodEnum.OIO
|
|
@@ -112,10 +131,15 @@ const useOrderForm = ({
|
|
|
112
131
|
sessionStorage.setItem('subscriberId', id); // For avoiding attempt of creating subscriber again
|
|
113
132
|
|
|
114
133
|
if (userId && identityProviderId) {
|
|
115
|
-
await mapSubscriberToUser(id, {
|
|
134
|
+
const mapResponse = await mapSubscriberToUser(id, {
|
|
116
135
|
userId: userId,
|
|
117
136
|
identityProviderId: identityProviderId,
|
|
118
137
|
});
|
|
138
|
+
|
|
139
|
+
if (!mapResponse.id) {
|
|
140
|
+
setErrorsMsg([WRONG_MSG]);
|
|
141
|
+
return;
|
|
142
|
+
}
|
|
119
143
|
}
|
|
120
144
|
}
|
|
121
145
|
|
|
@@ -173,15 +197,23 @@ const useOrderForm = ({
|
|
|
173
197
|
setApiErrorMsg(WRONG_MSG);
|
|
174
198
|
setErrorsMsg([]);
|
|
175
199
|
} catch (error) {
|
|
200
|
+
|
|
201
|
+
const translations = {
|
|
202
|
+
errorValidationTitleMsg,
|
|
203
|
+
errorValidationBlockingOffersMsg,
|
|
204
|
+
errorValidationDenialOrderBlockingMsg
|
|
205
|
+
} as ErrorMessages;
|
|
206
|
+
|
|
176
207
|
console.error(error);
|
|
177
|
-
setApiErrorMsg(prepareErrorMessage(error as Error));
|
|
208
|
+
setApiErrorMsg(prepareErrorMessage(error as Error, undefined, translations));
|
|
178
209
|
setErrorsMsg(
|
|
179
210
|
prepareErrorsArrayMessage(
|
|
180
211
|
(
|
|
181
212
|
error as {
|
|
182
213
|
errors: ErrorsMsg;
|
|
183
214
|
}
|
|
184
|
-
)?.errors
|
|
215
|
+
)?.errors,
|
|
216
|
+
translations
|
|
185
217
|
)
|
|
186
218
|
);
|
|
187
219
|
callback(null);
|
package/src/types/general.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { PaymentMethodEnum } from '../enums/general';
|
|
1
|
+
import { PaymentMethodEnum, UserActionEnum } from '../enums/general';
|
|
2
2
|
import { OrderFormInputsType } from './order';
|
|
3
3
|
|
|
4
4
|
declare global {
|
|
@@ -25,6 +25,7 @@ export type PaymentMethodOptionsType = {
|
|
|
25
25
|
|
|
26
26
|
export type ConfigType = {
|
|
27
27
|
submitStartCallback?: (subscriberId: string) => void;
|
|
28
|
+
userActionCallback?: (action: UserActionEnum, args: object | null | undefined) => void;
|
|
28
29
|
domElementId: string;
|
|
29
30
|
moduleTitle?: string;
|
|
30
31
|
templatePackageId: string;
|
|
@@ -62,6 +63,9 @@ export type ConfigType = {
|
|
|
62
63
|
errorInvalidPhoneMsg?: string;
|
|
63
64
|
paymentMethodNotAllowedMsg?: string;
|
|
64
65
|
invoiceLookupNotFoundText?: string;
|
|
66
|
+
errorValidationTitleMsg?: string;
|
|
67
|
+
errorValidationDenialOrderBlockingMsg?: string;
|
|
68
|
+
errorValidationBlockingOffersMsg?: string;
|
|
65
69
|
};
|
|
66
70
|
};
|
|
67
71
|
|
package/src/utils/helper.ts
CHANGED
|
@@ -1,31 +1,28 @@
|
|
|
1
1
|
import { WRONG_MSG } from '../constants/index';
|
|
2
2
|
import { ErrorsMsg } from '../types/general';
|
|
3
3
|
|
|
4
|
-
export const prepareErrorMessage = (error: Error, defaultMsg?: string) => {
|
|
4
|
+
export const prepareErrorMessage = (error: Error, defaultMsg?: string, translations?: ErrorMessages) => {
|
|
5
5
|
if (typeof error === 'string') {
|
|
6
6
|
try {
|
|
7
7
|
const parsedError = JSON.parse(error);
|
|
8
8
|
return (parsedError as { message: string }).message;
|
|
9
9
|
} catch (e) {
|
|
10
|
-
return error;
|
|
10
|
+
return translateError(error, translations);
|
|
11
11
|
}
|
|
12
12
|
} else {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
defaultMsg ||
|
|
16
|
-
WRONG_MSG
|
|
17
|
-
);
|
|
13
|
+
const serverErrorMsg = (error as { message: string })?.message as string;
|
|
14
|
+
return translateError(serverErrorMsg, translations) || defaultMsg || WRONG_MSG;
|
|
18
15
|
}
|
|
19
16
|
};
|
|
20
17
|
|
|
21
|
-
export const prepareErrorsArrayMessage = (errors: ErrorsMsg | null) => {
|
|
18
|
+
export const prepareErrorsArrayMessage = (errors: ErrorsMsg | null, translations?: ErrorMessages) => {
|
|
22
19
|
const msg: string[] = [];
|
|
23
20
|
|
|
24
21
|
if (errors) {
|
|
25
22
|
Object.entries(errors).forEach(([_, values]) => {
|
|
26
23
|
if (values?.length > 0) {
|
|
27
24
|
values.forEach((i) => {
|
|
28
|
-
msg.push(i);
|
|
25
|
+
msg.push(translateError(i, translations));
|
|
29
26
|
});
|
|
30
27
|
}
|
|
31
28
|
});
|
|
@@ -44,3 +41,27 @@ export function uuidv4() {
|
|
|
44
41
|
}
|
|
45
42
|
);
|
|
46
43
|
}
|
|
44
|
+
|
|
45
|
+
export type ErrorMessages = {
|
|
46
|
+
errorValidationTitleMsg: string,
|
|
47
|
+
errorValidationBlockingOffersMsg: string,
|
|
48
|
+
errorValidationDenialOrderBlockingMsg: string,
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
const translateError = (errorMsg: string, translations?: ErrorMessages) => {
|
|
52
|
+
if (!translations) {
|
|
53
|
+
return errorMsg;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
switch(errorMsg)
|
|
57
|
+
{
|
|
58
|
+
case 'One or more validation errors occurred.':
|
|
59
|
+
return translations?.errorValidationTitleMsg;
|
|
60
|
+
case 'The order/subscription will not be created because the subscriber has a denial order blocking offers.':
|
|
61
|
+
return translations?.errorValidationBlockingOffersMsg;
|
|
62
|
+
case 'The order/subscription will not be created because the subscriber has a denial order blocking all.':
|
|
63
|
+
return translations?.errorValidationDenialOrderBlockingMsg;
|
|
64
|
+
default:
|
|
65
|
+
return errorMsg;
|
|
66
|
+
}
|
|
67
|
+
}
|