@lookiero/checkout 10.0.0-beta.3 → 10.0.0

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.
Files changed (84) hide show
  1. package/dist/fake-dependencies/@lookiero/payments-front/index.d.ts +6 -8
  2. package/dist/fake-dependencies/@lookiero/payments-front/index.js +4 -7
  3. package/dist/index.d.ts +4 -3
  4. package/dist/src/Expo.js +2 -0
  5. package/dist/src/ExpoRoot.js +13 -17
  6. package/dist/src/infrastructure/domain/checkoutBooking/react/useBlockCheckoutBooking.d.ts +1 -1
  7. package/dist/src/infrastructure/domain/checkoutBooking/react/useBlockCheckoutBooking.js +0 -2
  8. package/dist/src/infrastructure/projection/pricing/react/useViewPricingByCheckoutId.d.ts +1 -1
  9. package/dist/src/infrastructure/projection/pricing/react/useViewPricingByCheckoutId.js +1 -2
  10. package/dist/src/infrastructure/tracking/tracking.d.ts +2 -2
  11. package/dist/src/infrastructure/tracking/useTrackCheckout.d.ts +17 -10
  12. package/dist/src/infrastructure/tracking/useTrackCheckout.js +12 -27
  13. package/dist/src/infrastructure/ui/Root.d.ts +9 -7
  14. package/dist/src/infrastructure/ui/Root.js +3 -2
  15. package/dist/src/infrastructure/ui/hooks/usePaymentInstrumentEvents.d.ts +2 -3
  16. package/dist/src/infrastructure/ui/hooks/usePaymentInstrumentEvents.js +26 -17
  17. package/dist/src/infrastructure/ui/hooks/useStaticInfo.d.ts +3 -0
  18. package/dist/src/infrastructure/ui/hooks/useStaticInfo.js +7 -2
  19. package/dist/src/infrastructure/ui/i18n/i18n.d.ts +0 -1
  20. package/dist/src/infrastructure/ui/i18n/i18n.js +0 -1
  21. package/dist/src/infrastructure/ui/routing/CheckoutMiddleware.js +12 -1
  22. package/dist/src/infrastructure/ui/routing/Routing.d.ts +7 -5
  23. package/dist/src/infrastructure/ui/routing/Routing.js +11 -3
  24. package/dist/src/infrastructure/ui/routing/routes.d.ts +1 -0
  25. package/dist/src/infrastructure/ui/routing/routes.js +1 -0
  26. package/dist/src/infrastructure/ui/views/App.js +6 -5
  27. package/dist/src/infrastructure/ui/views/checkout/Checkout.d.ts +2 -7
  28. package/dist/src/infrastructure/ui/views/checkout/Checkout.js +9 -20
  29. package/dist/src/infrastructure/ui/views/checkout/Checkout.style.d.ts +0 -3
  30. package/dist/src/infrastructure/ui/views/checkout/Checkout.style.js +0 -3
  31. package/dist/src/infrastructure/ui/views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal.js +1 -3
  32. package/dist/src/infrastructure/ui/views/checkout/components/paymentInstrument/PaymentInstrument.js +7 -7
  33. package/dist/src/infrastructure/ui/views/summary/Summary.js +1 -2
  34. package/dist/src/projection/customer/customer.d.ts +0 -2
  35. package/dist/src/projection/order/order.d.ts +1 -1
  36. package/dist/src/projection/subscription/subscription.d.ts +1 -1
  37. package/dist/src/version.d.ts +1 -1
  38. package/dist/src/version.js +1 -1
  39. package/fake-dependencies/@lookiero/payments-front/index.tsx +9 -32
  40. package/index.ts +4 -10
  41. package/package.json +6 -4
  42. package/src/Expo.tsx +3 -0
  43. package/src/ExpoRoot.tsx +37 -42
  44. package/src/infrastructure/domain/checkoutBooking/react/useBlockCheckoutBooking.ts +1 -4
  45. package/src/infrastructure/projection/pricing/react/useViewPricingByCheckoutId.ts +2 -3
  46. package/src/infrastructure/tracking/tracking.ts +2 -2
  47. package/src/infrastructure/tracking/useTrackCheckout.ts +56 -66
  48. package/src/infrastructure/ui/Root.tsx +14 -10
  49. package/src/infrastructure/ui/components/templates/header/itemHeader/ItemHeader.test.tsx +6 -0
  50. package/src/infrastructure/ui/components/templates/header/itemHeader/ItemHeader.tsx +0 -1
  51. package/src/infrastructure/ui/hooks/usePaymentInstrumentEvents.ts +60 -18
  52. package/src/infrastructure/ui/hooks/useStaticInfo.test.tsx +6 -1
  53. package/src/infrastructure/ui/hooks/useStaticInfo.tsx +13 -2
  54. package/src/infrastructure/ui/hooks/useSubmitCheckout.test.ts +297 -0
  55. package/src/infrastructure/ui/hooks/useSubmitCheckout.ts +169 -0
  56. package/src/infrastructure/ui/i18n/i18n.ts +0 -1
  57. package/src/infrastructure/ui/routing/CheckoutMiddleware.test.tsx +9 -1
  58. package/src/infrastructure/ui/routing/CheckoutMiddleware.tsx +15 -1
  59. package/src/infrastructure/ui/routing/Routing.tsx +29 -15
  60. package/src/infrastructure/ui/routing/routes.ts +1 -0
  61. package/src/infrastructure/ui/views/App.tsx +13 -5
  62. package/src/infrastructure/ui/views/checkout/Checkout.style.ts +0 -3
  63. package/src/infrastructure/ui/views/checkout/Checkout.test.tsx +43 -51
  64. package/src/infrastructure/ui/views/checkout/Checkout.tsx +13 -51
  65. package/src/infrastructure/ui/views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal.test.tsx +134 -0
  66. package/src/infrastructure/ui/views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal.tsx +124 -0
  67. package/src/infrastructure/ui/views/checkout/components/paymentInstrument/PaymentInstrument.tsx +8 -8
  68. package/src/infrastructure/ui/views/return/components/returnQuestionsForm/ReturnQuestionsForm.test.tsx +6 -0
  69. package/src/infrastructure/ui/views/summary/Summary.tsx +1 -1
  70. package/src/infrastructure/ui/views/summaryTabs/SummaryTabs.test.tsx +4 -1
  71. package/src/projection/customer/customer.ts +0 -2
  72. package/src/projection/order/order.ts +1 -1
  73. package/src/projection/subscription/subscription.ts +1 -1
  74. package/dist/public/public/assets/adaptive-icon.png +0 -0
  75. package/dist/public/public/assets/favicon.png +0 -0
  76. package/dist/public/public/assets/icon.png +0 -0
  77. package/dist/public/public/assets/splash.png +0 -0
  78. package/dist/public/public/images/not-found.png +0 -0
  79. package/dist/src/infrastructure/ui/hooks/useCheckoutFlow.d.ts +0 -26
  80. package/dist/src/infrastructure/ui/hooks/useCheckoutFlow.js +0 -127
  81. package/dist/src/infrastructure/ui/routing/useBasePath.d.ts +0 -8
  82. package/dist/src/infrastructure/ui/routing/useBasePath.js +0 -9
  83. package/src/infrastructure/ui/hooks/useCheckoutFlow.test.tsx +0 -302
  84. package/src/infrastructure/ui/hooks/useCheckoutFlow.tsx +0 -203
@@ -1,203 +0,0 @@
1
- import React, { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
2
- import { CommandStatus } from "@lookiero/messaging-react";
3
- import { PaymentFlow, PaymentFlowRef, PaymentPayload, Section } from "@lookiero/payments-front";
4
- import { LegacyBoxCheckoutStrategyPayload } from "@lookiero/payments-front/build/components/PaymentFlow/internals/strategies/LegacyBoxCheckoutStrategy";
5
- import { useLogger } from "@lookiero/sty-psp-logging";
6
- import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
7
- import { CheckoutProjection } from "../../../projection/checkout/checkout";
8
- import {
9
- ViewCheckoutBookingById,
10
- viewCheckoutBookingById,
11
- ViewCheckoutBookingByIdResult,
12
- } from "../../../projection/checkoutBooking/viewCheckoutBookingById";
13
- import { OrderProjection } from "../../../projection/order/order";
14
- import { SubscriptionProjection } from "../../../projection/subscription/subscription";
15
- import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
16
- import { useSubmitCheckout } from "../../domain/checkout/react/useSubmitCheckout";
17
- import { useBlockCheckoutBooking } from "../../domain/checkoutBooking/react/useBlockCheckoutBooking";
18
- import { useViewIsSizeChangeEnabledByCheckoutId } from "../../projection/checkout/react/useViewIsSizeChangeEnabledByCheckoutId";
19
- import { useViewPaymentFlowPayloadByCheckoutId } from "../../projection/payment/react/useViewPaymentFlowPayloadByCheckoutId";
20
- import { useViewPricingByCheckoutId } from "../../projection/pricing/react/useViewPricingByCheckoutId";
21
- import { useTrackCheckout } from "../../tracking/useTrackCheckout";
22
- import { I18nMessages } from "../i18n/i18n";
23
- import { Routes } from "../routing/routes";
24
- import { usePaymentInstrumentEvents } from "./usePaymentInstrumentEvents";
25
- import { useQueryBus } from "./useQueryBus";
26
- import { useStaticInfo } from "./useStaticInfo";
27
-
28
- type CheckoutFlowStatus = "idle" | "loading" | "success" | "error";
29
-
30
- interface CheckoutFlowFunction {
31
- (): Promise<void>;
32
- }
33
-
34
- type CheckoutFlowReturn = [
35
- checkoutFlow: CheckoutFlowFunction,
36
- checkoutFlowStatus: CheckoutFlowStatus,
37
- paymentFlow: ReactNode,
38
- ];
39
-
40
- interface UseCheckoutFlowArgs {
41
- readonly checkout: CheckoutProjection | undefined;
42
- readonly order: OrderProjection;
43
- readonly subscription: SubscriptionProjection;
44
- readonly getAuthToken: () => Promise<string>;
45
- readonly onSuccess: () => void;
46
- }
47
-
48
- interface UseCheckoutFlowFunction {
49
- (args: UseCheckoutFlowArgs): CheckoutFlowReturn;
50
- }
51
-
52
- const useCheckoutFlow: UseCheckoutFlowFunction = ({
53
- checkout: checkoutProjection,
54
- order: orderProjection,
55
- subscription: subscriptionProjection,
56
- getAuthToken,
57
- onSuccess,
58
- }) => {
59
- const logger = useLogger();
60
- const queryBus = useQueryBus();
61
- const {
62
- customer: { customerId, country, segment, name, email },
63
- basePath,
64
- } = useStaticInfo();
65
- const paymentFlowRef = useRef<PaymentFlowRef>(null);
66
- const [paymentFlowPayload] = useViewPaymentFlowPayloadByCheckoutId({
67
- checkoutId: checkoutProjection?.id as string,
68
- });
69
- const [sizeChangeEnabled] = useViewIsSizeChangeEnabledByCheckoutId({ checkoutId: checkoutProjection?.id as string });
70
- const [pricing] = useViewPricingByCheckoutId({
71
- checkoutId: checkoutProjection?.id,
72
- queryOptions: { refetchOnMount: true },
73
- });
74
- const [submitCheckout, submitCheckoutStatus] = useSubmitCheckout({
75
- checkoutId: checkoutProjection?.id,
76
- logger,
77
- });
78
- const [blockCheckoutBooking, blockCheckoutBookingStatus] = useBlockCheckoutBooking({
79
- checkoutBookingId: checkoutProjection?.checkoutBookingId,
80
- logger,
81
- });
82
- const [createNotification] = useCreateToastNotification({ contextId: MESSAGING_CONTEXT_ID, logger });
83
- const [checkoutBookingExpired, setCheckoutBookingExpired] = useState(false);
84
- const [startLegacyBoxCheckoutStatus, setStartLegacyBoxCheckoutStatus] = useState<CheckoutFlowStatus>("idle");
85
- const [authToken, setAuthToken] = useState<string>();
86
- useEffect(() => {
87
- const loadAuthToken = async () => setAuthToken(await getAuthToken());
88
- loadAuthToken();
89
- }, [getAuthToken]);
90
- const trackCheckout = useTrackCheckout({
91
- checkout: checkoutProjection,
92
- order: orderProjection,
93
- pricing,
94
- subscription: subscriptionProjection,
95
- userId: customerId,
96
- country,
97
- segment,
98
- });
99
-
100
- const checkoutFlow: CheckoutFlowFunction = useCallback(async () => {
101
- try {
102
- sizeChangeEnabled && (await blockCheckoutBooking());
103
- } catch (error) {
104
- return;
105
- }
106
-
107
- if (checkoutProjection?.checkoutBookingId) {
108
- const checkoutBooking = await queryBus<ViewCheckoutBookingById, ViewCheckoutBookingByIdResult>(
109
- viewCheckoutBookingById({ checkoutBookingId: checkoutProjection?.checkoutBookingId }),
110
- );
111
-
112
- if (checkoutBooking?.isExpired) {
113
- setCheckoutBookingExpired(true);
114
- return;
115
- }
116
- }
117
-
118
- setStartLegacyBoxCheckoutStatus("loading");
119
-
120
- paymentFlowRef.current?.startLegacyBoxCheckout({
121
- ...paymentFlowPayload,
122
- userInformation: { email, name },
123
- returnUrl: `${basePath}/${Routes.CHECKOUT}`,
124
- } as unknown as LegacyBoxCheckoutStrategyPayload);
125
- }, [
126
- checkoutProjection?.checkoutBookingId,
127
- paymentFlowPayload,
128
- email,
129
- name,
130
- basePath,
131
- sizeChangeEnabled,
132
- blockCheckoutBooking,
133
- queryBus,
134
- ]);
135
-
136
- const onPaymentSuccess = useCallback(async () => {
137
- setStartLegacyBoxCheckoutStatus("success");
138
-
139
- await submitCheckout();
140
-
141
- createNotification({
142
- bodyI18nKey: I18nMessages.CHECKOUT_TOAST_PAYMENT_SUCCESS,
143
- level: NotificationLevel.SUCCESS,
144
- });
145
-
146
- trackCheckout();
147
- onSuccess();
148
- }, [createNotification, onSuccess, submitCheckout, trackCheckout]);
149
- const onPaymentError = useCallback(
150
- (payload: PaymentPayload) => {
151
- setStartLegacyBoxCheckoutStatus("error");
152
-
153
- createNotification({
154
- bodyI18nKey: payload.metadata?.toaster?.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
155
- level: NotificationLevel.ERROR,
156
- });
157
- },
158
- [createNotification],
159
- );
160
- usePaymentInstrumentEvents({ onSuccess: onPaymentSuccess, onError: onPaymentError });
161
-
162
- const checkoutFlowStatus: CheckoutFlowStatus = useMemo(() => {
163
- if (
164
- blockCheckoutBookingStatus === CommandStatus.LOADING ||
165
- startLegacyBoxCheckoutStatus === "loading" ||
166
- submitCheckoutStatus === CommandStatus.LOADING
167
- ) {
168
- return "loading";
169
- }
170
-
171
- if (
172
- blockCheckoutBookingStatus === CommandStatus.SUCCESS &&
173
- startLegacyBoxCheckoutStatus === "success" &&
174
- submitCheckoutStatus === CommandStatus.SUCCESS
175
- ) {
176
- return "success";
177
- }
178
-
179
- if (
180
- blockCheckoutBookingStatus === CommandStatus.ERROR ||
181
- startLegacyBoxCheckoutStatus === "error" ||
182
- submitCheckoutStatus === CommandStatus.ERROR ||
183
- checkoutBookingExpired
184
- ) {
185
- return "error";
186
- }
187
-
188
- return "idle";
189
- }, [blockCheckoutBookingStatus, startLegacyBoxCheckoutStatus, submitCheckoutStatus, checkoutBookingExpired]);
190
-
191
- const paymentFlow = useMemo(
192
- () => (authToken ? <PaymentFlow ref={paymentFlowRef} section={Section.BOX_CHECKOUT} token={authToken} /> : null),
193
- [authToken],
194
- );
195
-
196
- return useMemo(
197
- () => [checkoutFlow, checkoutFlowStatus, paymentFlow],
198
- [checkoutFlow, paymentFlow, checkoutFlowStatus],
199
- );
200
- };
201
-
202
- export type { CheckoutFlowStatus };
203
- export { useCheckoutFlow };