@infosoftas/s4-orders-js-sdk 0.1.18 → 0.1.19
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/package.json +3 -3
- package/src/components/OrderForm/OrderForm.tsx +130 -111
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.19",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"build": "rimraf lib && webpack --mode production",
|
|
6
6
|
"release": "release-it"
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"react-hook-form": "^7.66.1"
|
|
18
18
|
},
|
|
19
19
|
"devDependencies": {
|
|
20
|
-
"@babel/core": "^7.
|
|
20
|
+
"@babel/core": "^7.29.6",
|
|
21
21
|
"@babel/preset-env": "^7.28.5",
|
|
22
22
|
"@babel/preset-react": "^7.28.5",
|
|
23
23
|
"@babel/preset-typescript": "^7.28.5",
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
"copy-webpack-plugin": "^14.0.0",
|
|
28
28
|
"css-loader": "^7.1.2",
|
|
29
29
|
"mini-css-extract-plugin": "^2.9.4",
|
|
30
|
-
"release-it": "^20.
|
|
30
|
+
"release-it": "^20.2.1",
|
|
31
31
|
"rimraf": "^6.1.2",
|
|
32
32
|
"sass": "^1.94.2",
|
|
33
33
|
"sass-loader": "^16.0.6",
|
|
@@ -304,123 +304,142 @@ const OrderForm: FC<Props> = ({
|
|
|
304
304
|
data-testid="sdk-order-form-id"
|
|
305
305
|
>
|
|
306
306
|
{paymentMethods?.length > 0 && (
|
|
307
|
-
<div className="
|
|
308
|
-
<div className="field-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
className="radio-button-control"
|
|
312
|
-
key={item.value}
|
|
313
|
-
>
|
|
314
|
-
<label className="radio-badge">
|
|
315
|
-
<input
|
|
316
|
-
{...register('paymentMethod', {
|
|
317
|
-
required: true,
|
|
318
|
-
})}
|
|
319
|
-
onChange={handlePaymentChange}
|
|
320
|
-
type="radio"
|
|
321
|
-
value={item.value}
|
|
322
|
-
/>
|
|
323
|
-
<span className="value-block">
|
|
324
|
-
<span className="prefix-icon"></span>
|
|
325
|
-
<span className="text-block">
|
|
326
|
-
{item.label}
|
|
327
|
-
</span>
|
|
328
|
-
</span>
|
|
329
|
-
</label>
|
|
307
|
+
<div className="sdk-payment-method-section">
|
|
308
|
+
<div className="field-wrapper radio-button-group">
|
|
309
|
+
<div className="field-label">
|
|
310
|
+
{paymentMethodLabel}
|
|
330
311
|
</div>
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
312
|
+
{paymentMethods.map((item) => (
|
|
313
|
+
<div
|
|
314
|
+
className="radio-button-control"
|
|
315
|
+
key={item.value}
|
|
316
|
+
>
|
|
317
|
+
<label className="radio-badge">
|
|
318
|
+
<input
|
|
319
|
+
{...register('paymentMethod', {
|
|
320
|
+
required: true,
|
|
321
|
+
})}
|
|
322
|
+
onChange={handlePaymentChange}
|
|
323
|
+
type="radio"
|
|
324
|
+
value={item.value}
|
|
325
|
+
/>
|
|
326
|
+
<span className="value-block">
|
|
327
|
+
<span className="prefix-icon"></span>
|
|
328
|
+
<span className="text-block">
|
|
329
|
+
{item.label}
|
|
330
|
+
</span>
|
|
331
|
+
</span>
|
|
332
|
+
</label>
|
|
333
|
+
</div>
|
|
334
|
+
))}
|
|
335
|
+
{errors.paymentMethod && (
|
|
336
|
+
<div className="text-error caption">
|
|
337
|
+
{errors.paymentMethod.message}
|
|
338
|
+
</div>
|
|
339
|
+
)}
|
|
340
|
+
</div>
|
|
337
341
|
</div>
|
|
338
342
|
)}
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
+
<div className="sdk-order-details-section">
|
|
344
|
+
{orderFields?.length > 0 && allowPaymentMethod && (
|
|
345
|
+
<Suspense fallback={null}>
|
|
346
|
+
{orderFields.map((field) => {
|
|
347
|
+
const Component = formFieldsMapper[field.name];
|
|
343
348
|
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
349
|
+
return Component ? (
|
|
350
|
+
<Component
|
|
351
|
+
key={field.name}
|
|
352
|
+
name={field.name}
|
|
353
|
+
label={field.label}
|
|
354
|
+
required={field.required || false}
|
|
355
|
+
readOnly={field.readOnly || false}
|
|
356
|
+
errors={errors}
|
|
357
|
+
errorReqMsg={errorReqMsg}
|
|
358
|
+
errorInvalidEmailMsg={
|
|
359
|
+
errorInvalidEmailMsg
|
|
360
|
+
}
|
|
361
|
+
errorInvalidPhoneMsg={
|
|
362
|
+
errorInvalidPhoneMsg
|
|
363
|
+
}
|
|
364
|
+
/>
|
|
365
|
+
) : null;
|
|
366
|
+
})}
|
|
367
|
+
</Suspense>
|
|
368
|
+
)}
|
|
369
|
+
{showInvoiceToggle && (
|
|
370
|
+
<ToggleField
|
|
371
|
+
name="invoiceAddressSelection"
|
|
372
|
+
label={
|
|
373
|
+
invoiceAddressSelection?.label ??
|
|
374
|
+
'Invoice Address'
|
|
375
|
+
}
|
|
376
|
+
toggleCallback={(e) =>
|
|
377
|
+
userActionCallback?.(
|
|
378
|
+
UserActionEnum.TOGGLE_INVOICE_ADDRESS,
|
|
379
|
+
{ value: e }
|
|
380
|
+
)
|
|
381
|
+
}
|
|
382
|
+
/>
|
|
383
|
+
)}
|
|
384
|
+
{showInvoiceFields && (
|
|
385
|
+
<Suspense fallback={null}>
|
|
386
|
+
{invoiceOrderFields.map((field) => {
|
|
387
|
+
const Component = formFieldsMapper[field.name];
|
|
378
388
|
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
389
|
+
return Component ? (
|
|
390
|
+
<Component
|
|
391
|
+
key={field.name}
|
|
392
|
+
name={field.name}
|
|
393
|
+
label={field.label}
|
|
394
|
+
required={field.required || false}
|
|
395
|
+
readOnly={field.readOnly || false}
|
|
396
|
+
errors={errors}
|
|
397
|
+
errorReqMsg={errorReqMsg}
|
|
398
|
+
errorInvalidEmailMsg={
|
|
399
|
+
errorInvalidEmailMsg
|
|
400
|
+
}
|
|
401
|
+
errorInvalidPhoneMsg={
|
|
402
|
+
errorInvalidPhoneMsg
|
|
403
|
+
}
|
|
404
|
+
/>
|
|
405
|
+
) : null;
|
|
406
|
+
})}
|
|
407
|
+
</Suspense>
|
|
408
|
+
)}
|
|
409
|
+
{requireTermsAcceptance && (
|
|
410
|
+
<TermsCheckbox
|
|
411
|
+
name="termsAccept"
|
|
412
|
+
label={termsAndConditionsText}
|
|
413
|
+
required
|
|
414
|
+
errors={errors}
|
|
415
|
+
/>
|
|
416
|
+
)}
|
|
417
|
+
{allowPaymentMethod && (
|
|
418
|
+
<Button
|
|
419
|
+
type="submit"
|
|
420
|
+
loading={loading}
|
|
421
|
+
buttonText={submitButtonText}
|
|
422
|
+
disable={isSubmitButtonDisabled}
|
|
423
|
+
/>
|
|
424
|
+
)}
|
|
425
|
+
<Alert
|
|
426
|
+
className="mt-2"
|
|
427
|
+
msg={
|
|
428
|
+
allowPaymentMethod
|
|
429
|
+
? apiErrorMsg
|
|
430
|
+
: paymentMethodNotAllowedMsg
|
|
431
|
+
}
|
|
409
432
|
/>
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
allowPaymentMethod &&
|
|
421
|
-
errorsMsg.map((i, index) => (
|
|
422
|
-
<Alert key={`${i}-${index}`} className="mt-2" msg={i} />
|
|
423
|
-
))}
|
|
433
|
+
{errorsMsg?.length > 0 &&
|
|
434
|
+
allowPaymentMethod &&
|
|
435
|
+
errorsMsg.map((i, index) => (
|
|
436
|
+
<Alert
|
|
437
|
+
key={`${i}-${index}`}
|
|
438
|
+
className="mt-2"
|
|
439
|
+
msg={i}
|
|
440
|
+
/>
|
|
441
|
+
))}
|
|
442
|
+
</div>
|
|
424
443
|
<OrderDenialModal
|
|
425
444
|
isOpen={!!orderDenialType}
|
|
426
445
|
message={orderDenialMessage}
|