@lookiero/checkout 9.9.0-beta.2 → 9.9.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 (149) 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.js +2 -2
  4. package/dist/src/ExpoRoot.js +12 -16
  5. package/dist/src/infrastructure/ui/Root.d.ts +2 -0
  6. package/dist/src/infrastructure/ui/Root.js +4 -2
  7. package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.js +1 -1
  8. package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.style.d.ts +0 -1
  9. package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.style.js +0 -1
  10. package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.js +1 -1
  11. package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.style.d.ts +0 -1
  12. package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.style.js +0 -1
  13. package/dist/src/infrastructure/ui/hooks/usePaymentInstrumentEvents.d.ts +2 -3
  14. package/dist/src/infrastructure/ui/hooks/usePaymentInstrumentEvents.js +26 -17
  15. package/dist/src/infrastructure/ui/hooks/useQueryBus.d.ts +9 -0
  16. package/dist/src/infrastructure/ui/hooks/useQueryBus.js +10 -0
  17. package/dist/src/infrastructure/ui/hooks/useSubmitCheckout.d.ts +1 -1
  18. package/dist/src/infrastructure/ui/hooks/useSubmitCheckout.js +55 -22
  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/views/App.js +6 -5
  22. package/dist/src/infrastructure/ui/views/checkout/Checkout.js +2 -5
  23. package/dist/src/infrastructure/ui/views/checkout/Checkout.style.d.ts +0 -3
  24. package/dist/src/infrastructure/ui/views/checkout/Checkout.style.js +0 -3
  25. package/dist/src/infrastructure/ui/views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal.js +2 -2
  26. package/dist/src/infrastructure/ui/views/checkout/components/paymentInstrument/PaymentInstrument.js +7 -7
  27. package/dist/src/projection/customer/customer.d.ts +0 -2
  28. package/dist/src/version.d.ts +1 -1
  29. package/dist/src/version.js +1 -1
  30. package/fake-dependencies/@lookiero/payments-front/index.tsx +9 -32
  31. package/index.ts +2 -2
  32. package/package.json +7 -7
  33. package/src/ExpoRoot.tsx +31 -36
  34. package/src/infrastructure/ui/Root.tsx +30 -17
  35. package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.style.ts +0 -1
  36. package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.tsx +1 -0
  37. package/src/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.style.ts +0 -1
  38. package/src/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.tsx +1 -0
  39. package/src/infrastructure/ui/hooks/usePaymentInstrumentEvents.ts +60 -18
  40. package/src/infrastructure/ui/hooks/useQueryBus.test.tsx +23 -0
  41. package/src/infrastructure/ui/hooks/useQueryBus.tsx +27 -0
  42. package/src/infrastructure/ui/hooks/useSubmitCheckout.test.ts +58 -0
  43. package/src/infrastructure/ui/hooks/useSubmitCheckout.ts +77 -33
  44. package/src/infrastructure/ui/i18n/i18n.ts +0 -1
  45. package/src/infrastructure/ui/views/App.tsx +13 -5
  46. package/src/infrastructure/ui/views/checkout/Checkout.style.ts +0 -3
  47. package/src/infrastructure/ui/views/checkout/Checkout.tsx +3 -12
  48. package/src/infrastructure/ui/views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal.tsx +2 -2
  49. package/src/infrastructure/ui/views/checkout/components/paymentInstrument/PaymentInstrument.tsx +8 -8
  50. package/src/projection/customer/customer.ts +0 -2
  51. package/dist/pact.config.d.ts +0 -21
  52. package/dist/pact.config.js +0 -16
  53. package/dist/public/public/assets/adaptive-icon.png +0 -0
  54. package/dist/public/public/assets/favicon.png +0 -0
  55. package/dist/public/public/assets/icon.png +0 -0
  56. package/dist/public/public/assets/splash.png +0 -0
  57. package/dist/public/public/images/not-found.png +0 -0
  58. package/dist/src/infrastructure/projection/bookedProductsVariants/httpBookedProductsVariantsForCheckoutItemView.pact.d.ts +0 -1
  59. package/dist/src/infrastructure/projection/bookedProductsVariants/httpBookedProductsVariantsForCheckoutItemView.pact.js +0 -55
  60. package/dist/src/infrastructure/projection/checkout/httpCheckoutByIdView.pact.d.ts +0 -1
  61. package/dist/src/infrastructure/projection/checkout/httpCheckoutByIdView.pact.js +0 -116
  62. package/dist/src/infrastructure/projection/checkout/httpFirstAvailableCheckoutByCustomerIdView.pact.d.ts +0 -1
  63. package/dist/src/infrastructure/projection/checkout/httpFirstAvailableCheckoutByCustomerIdView.pact.js +0 -56
  64. package/dist/src/infrastructure/projection/checkout/httpFiveItemsDiscountByCustomerIdView.pact.d.ts +0 -1
  65. package/dist/src/infrastructure/projection/checkout/httpFiveItemsDiscountByCustomerIdView.pact.js +0 -51
  66. package/dist/src/infrastructure/projection/checkout/httpIsCheckoutEnabledByCustomerIdView.pact.d.ts +0 -1
  67. package/dist/src/infrastructure/projection/checkout/httpIsCheckoutEnabledByCustomerIdView.pact.js +0 -51
  68. package/dist/src/infrastructure/projection/checkout/httpIsSizeChangeEnabledByCheckoutIdView.pact.d.ts +0 -1
  69. package/dist/src/infrastructure/projection/checkout/httpIsSizeChangeEnabledByCheckoutIdView.pact.js +0 -51
  70. package/dist/src/infrastructure/projection/checkout/react/useViewIsCheckoutAccessibleByCustomerId.d.ts +0 -13
  71. package/dist/src/infrastructure/projection/checkout/react/useViewIsCheckoutAccessibleByCustomerId.js +0 -19
  72. package/dist/src/infrastructure/projection/checkoutBooking/httpCheckoutBookingByIdView.pact.d.ts +0 -1
  73. package/dist/src/infrastructure/projection/checkoutBooking/httpCheckoutBookingByIdView.pact.js +0 -56
  74. package/dist/src/infrastructure/projection/checkoutItem/httpCheckoutItemByIdView.pact.d.ts +0 -1
  75. package/dist/src/infrastructure/projection/checkoutItem/httpCheckoutItemByIdView.pact.js +0 -57
  76. package/dist/src/infrastructure/projection/checkoutQuestion/httpCheckoutQuestionsByCheckoutIdView.pact.d.ts +0 -1
  77. package/dist/src/infrastructure/projection/checkoutQuestion/httpCheckoutQuestionsByCheckoutIdView.pact.js +0 -55
  78. package/dist/src/infrastructure/projection/payment/httpPaymentFlowPayloadByCheckoutIdView.pact.d.ts +0 -1
  79. package/dist/src/infrastructure/projection/payment/httpPaymentFlowPayloadByCheckoutIdView.pact.js +0 -120
  80. package/dist/src/infrastructure/projection/pricing/httpPricingByCheckoutIdView.pact.d.ts +0 -1
  81. package/dist/src/infrastructure/projection/pricing/httpPricingByCheckoutIdView.pact.js +0 -55
  82. package/dist/src/infrastructure/projection/returnQuestion/httpReturnQuestionsByCheckoutItemIdView.pact.d.ts +0 -1
  83. package/dist/src/infrastructure/projection/returnQuestion/httpReturnQuestionsByCheckoutItemIdView.pact.js +0 -55
  84. package/dist/src/infrastructure/ui/components/layouts/layout/Layout.d.ts +0 -22
  85. package/dist/src/infrastructure/ui/components/layouts/layout/Layout.js +0 -1
  86. package/dist/src/infrastructure/ui/components/layouts/layout/components/footer/Footer.d.ts +0 -7
  87. package/dist/src/infrastructure/ui/components/layouts/layout/components/footer/Footer.js +0 -5
  88. package/dist/src/infrastructure/ui/components/layouts/layout/components/header/Header.d.ts +0 -7
  89. package/dist/src/infrastructure/ui/components/layouts/layout/components/header/Header.js +0 -6
  90. package/dist/src/infrastructure/ui/components/layouts/layout/components/header/Header.style.d.ts +0 -4
  91. package/dist/src/infrastructure/ui/components/layouts/layout/components/header/Header.style.js +0 -20
  92. package/dist/src/infrastructure/ui/components/layouts/layout/dummyLayout/DummyLayout.d.ts +0 -4
  93. package/dist/src/infrastructure/ui/components/layouts/layout/dummyLayout/DummyLayout.js +0 -43
  94. package/dist/src/infrastructure/ui/components/layouts/layout/dummyLayout/DummyLayout.style.d.ts +0 -12
  95. package/dist/src/infrastructure/ui/components/layouts/layout/dummyLayout/DummyLayout.style.js +0 -14
  96. package/dist/src/infrastructure/ui/components/templates/header/defaultHeader/DefaultHeader.d.ts +0 -7
  97. package/dist/src/infrastructure/ui/components/templates/header/defaultHeader/DefaultHeader.js +0 -21
  98. package/dist/src/infrastructure/ui/components/templates/header/defaultHeader/DefaultHeader.style.d.ts +0 -8
  99. package/dist/src/infrastructure/ui/components/templates/header/defaultHeader/DefaultHeader.style.js +0 -12
  100. package/dist/src/infrastructure/ui/hooks/useNewFeedbackExperiment.d.ts +0 -12
  101. package/dist/src/infrastructure/ui/hooks/useNewFeedbackExperiment.js +0 -64
  102. package/dist/src/infrastructure/ui/i18n/fetchTranslations.d.ts +0 -10
  103. package/dist/src/infrastructure/ui/i18n/fetchTranslations.js +0 -17
  104. package/dist/src/infrastructure/ui/i18n/translationEndpoint.d.ts +0 -20
  105. package/dist/src/infrastructure/ui/i18n/translationEndpoint.js +0 -27
  106. package/dist/src/infrastructure/ui/routing/CheckoutAccessibilityMiddleware.d.ts +0 -10
  107. package/dist/src/infrastructure/ui/routing/CheckoutAccessibilityMiddleware.js +0 -27
  108. package/dist/src/infrastructure/ui/views/App.style.d.ts +0 -6
  109. package/dist/src/infrastructure/ui/views/App.style.js +0 -8
  110. package/dist/src/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.style.d.ts +0 -7
  111. package/dist/src/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.style.js +0 -11
  112. package/dist/src/infrastructure/ui/views/item/components/returnQuestionsForm/ReturnQuestionsForm.d.ts +0 -12
  113. package/dist/src/infrastructure/ui/views/item/components/returnQuestionsForm/ReturnQuestionsForm.js +0 -64
  114. package/dist/src/infrastructure/ui/views/item/components/returnQuestionsForm/ReturnQuestionsForm.style.d.ts +0 -12
  115. package/dist/src/infrastructure/ui/views/item/components/returnQuestionsForm/ReturnQuestionsForm.style.js +0 -16
  116. package/dist/src/infrastructure/ui/views/return/Return.style.d.ts +0 -40
  117. package/dist/src/infrastructure/ui/views/return/Return.style.js +0 -44
  118. package/dist/src/infrastructure/ui/views/summary/components/stickyPricing/StickyPricing.d.ts +0 -14
  119. package/dist/src/infrastructure/ui/views/summary/components/stickyPricing/StickyPricing.js +0 -28
  120. package/dist/src/infrastructure/ui/views/summary/components/stickyPricing/StickyPricing.style.d.ts +0 -7
  121. package/dist/src/infrastructure/ui/views/summary/components/stickyPricing/StickyPricing.style.js +0 -11
  122. package/dist/src/projection/checkout/viewIsCheckoutAccessibleByCustomerId.d.ts +0 -26
  123. package/dist/src/projection/checkout/viewIsCheckoutAccessibleByCustomerId.js +0 -21
  124. package/dist/src/projection/shared/country.d.ts +0 -14
  125. package/dist/src/projection/shared/country.js +0 -15
  126. package/dist/src/projection/shared/customer.d.ts +0 -9
  127. package/dist/src/projection/shared/customer.js +0 -1
  128. package/dist/src/projection/shared/locale.d.ts +0 -12
  129. package/dist/src/projection/shared/locale.js +0 -13
  130. package/dist/src/projection/shared/order.d.ts +0 -6
  131. package/dist/src/projection/shared/order.js +0 -1
  132. package/dist/src/projection/shared/price.d.ts +0 -11
  133. package/dist/src/projection/shared/price.js +0 -1
  134. package/dist/src/projection/shared/size.d.ts +0 -21
  135. package/dist/src/projection/shared/size.js +0 -4
  136. package/dist/src/projection/shared/subscription.d.ts +0 -2
  137. package/dist/src/projection/shared/subscription.js +0 -1
  138. package/dist/src/shared/ui/components/atoms/aspectRatioView/AspectRatioView.d.ts +0 -15
  139. package/dist/src/shared/ui/components/atoms/aspectRatioView/AspectRatioView.js +0 -16
  140. package/dist/src/shared/ui/components/atoms/error/Error.d.ts +0 -11
  141. package/dist/src/shared/ui/components/atoms/error/Error.js +0 -6
  142. package/dist/src/shared/ui/components/atoms/field/Field.d.ts +0 -14
  143. package/dist/src/shared/ui/components/atoms/field/Field.js +0 -29
  144. package/dist/src/shared/ui/components/atoms/field/Field.style.d.ts +0 -16
  145. package/dist/src/shared/ui/components/atoms/field/Field.style.js +0 -19
  146. package/dist/src/shared/ui/components/molecules/inputField/InputField.d.ts +0 -24
  147. package/dist/src/shared/ui/components/molecules/inputField/InputField.js +0 -28
  148. package/dist/src/shared/ui/components/molecules/inputField/InputField.style.d.ts +0 -29
  149. package/dist/src/shared/ui/components/molecules/inputField/InputField.style.js +0 -37
@@ -1,14 +1,39 @@
1
1
  import { RefObject, useCallback, useMemo, useState } from "react";
2
2
  import { CommandStatus } from "@lookiero/messaging-react";
3
- import { PaymentFlowRef, PaymentPayload } from "@lookiero/payments-front";
3
+ import { PaymentFlowRef } from "@lookiero/payments-front";
4
4
  import { Logger } from "@lookiero/sty-psp-logging";
5
5
  import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
6
+ import {
7
+ ViewCheckoutBookingById,
8
+ viewCheckoutBookingById,
9
+ ViewCheckoutBookingByIdResult,
10
+ } from "../../../projection/checkoutBooking/viewCheckoutBookingById";
6
11
  import { PaymentFlowPayloadProjection } from "../../../projection/payment/paymentFlowPayload";
7
12
  import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
8
13
  import { useSubmitCheckout as useSubmitCheckoutCommand } from "../../domain/checkout/react/useSubmitCheckout";
9
14
  import { useBlockCheckoutBooking } from "../../domain/checkoutBooking/react/useBlockCheckoutBooking";
10
15
  import { I18nMessages } from "../i18n/i18n";
11
- import { usePaymentInstrumentEvents } from "./usePaymentInstrumentEvents";
16
+ import { useQueryBus } from "./useQueryBus";
17
+
18
+ enum ChargeStatus {
19
+ EXECUTED = "EXECUTED",
20
+ REQUIRES_ACTION = "REQUIRES_ACTION",
21
+ REQUIRED_ACTION_CANCELLED = "REQUIRED_ACTION_CANCELLED",
22
+ REJECTED = "REJECTED",
23
+ CANCELLED = "CANCELLED",
24
+ TO_CONFIRM = "TO_CONFIRM",
25
+ ERROR = "ERROR",
26
+ UNKNOWN = "UNKNOWN",
27
+ }
28
+ interface LegacyBoxCheckout {
29
+ readonly status: ChargeStatus;
30
+ readonly toaster: {
31
+ id: string;
32
+ } | null;
33
+ readonly final: boolean;
34
+ readonly id?: string;
35
+ readonly translation?: string;
36
+ }
12
37
 
13
38
  type Status = "idle" | "loading" | "success" | "error";
14
39
 
@@ -28,7 +53,7 @@ interface UseSubmitCheckoutFunctionArgs {
28
53
  readonly checkoutBookingId: string;
29
54
  readonly paymentFlowRef: RefObject<PaymentFlowRef>;
30
55
  readonly onError: () => void;
31
- readonly onSuccess: () => void;
56
+ readonly onSuccess?: () => void;
32
57
  readonly logger: Logger;
33
58
  }
34
59
 
@@ -44,9 +69,11 @@ const useSubmitCheckout: UseSubmitCheckoutFunction = ({
44
69
  onSuccess,
45
70
  logger,
46
71
  }) => {
72
+ const queryBus = useQueryBus();
47
73
  const [submitCheckoutCommand, submitCheckoutCommandStatus] = useSubmitCheckoutCommand({ checkoutId, logger });
48
74
  const [blockCheckoutBooking, blockCheckoutBookingStatus] = useBlockCheckoutBooking({ checkoutBookingId, logger });
49
75
  const [createNotification] = useCreateToastNotification({ contextId: MESSAGING_CONTEXT_ID, logger });
76
+ const [checkoutBookingExpired, setCheckoutBookingExpired] = useState(false);
50
77
 
51
78
  const [startLegacyBoxCheckoutStatus, setStartLegacyBoxCheckoutStatus] = useState<Status>("idle");
52
79
 
@@ -58,37 +85,48 @@ const useSubmitCheckout: UseSubmitCheckoutFunction = ({
58
85
  return;
59
86
  }
60
87
 
61
- setStartLegacyBoxCheckoutStatus("loading");
62
-
63
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
64
- // @ts-ignore
65
- paymentFlowRef.current?.startLegacyBoxCheckout(paymentFlowPayload);
66
- },
67
- [paymentFlowRef, blockCheckoutBooking],
68
- );
88
+ const checkoutBooking = await queryBus<ViewCheckoutBookingById, ViewCheckoutBookingByIdResult>(
89
+ viewCheckoutBookingById({ checkoutBookingId }),
90
+ );
69
91
 
70
- const onPaymentSuccess = useCallback(async () => {
71
- setStartLegacyBoxCheckoutStatus("success");
72
-
73
- await submitCheckoutCommand();
74
-
75
- createNotification({
76
- bodyI18nKey: I18nMessages.CHECKOUT_TOAST_PAYMENT_SUCCESS,
77
- level: NotificationLevel.SUCCESS,
78
- });
79
- }, [createNotification, submitCheckoutCommand]);
80
- const onPaymentError = useCallback(
81
- (payload: PaymentPayload) => {
82
- setStartLegacyBoxCheckoutStatus("error");
92
+ if (checkoutBooking?.isExpired) {
93
+ setCheckoutBookingExpired(true);
94
+ return;
95
+ }
83
96
 
84
- createNotification({
85
- bodyI18nKey: payload.metadata?.toaster?.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
86
- level: NotificationLevel.ERROR,
87
- });
97
+ paymentFlowRef.current?.startLegacyBoxCheckout(
98
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
99
+ // @ts-ignore
100
+ paymentFlowPayload,
101
+ async ({ status, toaster, final }: LegacyBoxCheckout) => {
102
+ setStartLegacyBoxCheckoutStatus("loading");
103
+
104
+ if (final) {
105
+ if (status === ChargeStatus.EXECUTED) {
106
+ setStartLegacyBoxCheckoutStatus("success");
107
+ await submitCheckoutCommand();
108
+ onSuccess?.();
109
+ } else {
110
+ createNotification({
111
+ level: NotificationLevel.ERROR,
112
+ bodyI18nKey: toaster?.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR,
113
+ });
114
+ setStartLegacyBoxCheckoutStatus("error");
115
+ }
116
+ }
117
+ },
118
+ );
88
119
  },
89
- [createNotification],
120
+ [
121
+ queryBus,
122
+ checkoutBookingId,
123
+ paymentFlowRef,
124
+ blockCheckoutBooking,
125
+ submitCheckoutCommand,
126
+ onSuccess,
127
+ createNotification,
128
+ ],
90
129
  );
91
- usePaymentInstrumentEvents({ onSuccess: onPaymentSuccess, onError: onPaymentError });
92
130
 
93
131
  const status: Status = useMemo(() => {
94
132
  if (
@@ -103,20 +141,26 @@ const useSubmitCheckout: UseSubmitCheckoutFunction = ({
103
141
  startLegacyBoxCheckoutStatus === "success" &&
104
142
  submitCheckoutCommandStatus === CommandStatus.SUCCESS
105
143
  ) {
106
- onSuccess();
107
144
  return "success";
108
145
  }
109
146
  if (
110
147
  blockCheckoutBookingStatus === CommandStatus.ERROR ||
111
148
  startLegacyBoxCheckoutStatus === "error" ||
112
- submitCheckoutCommandStatus === CommandStatus.ERROR
149
+ submitCheckoutCommandStatus === CommandStatus.ERROR ||
150
+ checkoutBookingExpired
113
151
  ) {
114
152
  onError();
115
153
  return "error";
116
154
  }
117
155
 
118
156
  return "idle";
119
- }, [blockCheckoutBookingStatus, startLegacyBoxCheckoutStatus, submitCheckoutCommandStatus, onSuccess, onError]);
157
+ }, [
158
+ blockCheckoutBookingStatus,
159
+ startLegacyBoxCheckoutStatus,
160
+ submitCheckoutCommandStatus,
161
+ checkoutBookingExpired,
162
+ onError,
163
+ ]);
120
164
 
121
165
  return [submitCheckout, status];
122
166
  };
@@ -48,7 +48,6 @@ enum I18nMessages {
48
48
  CHECKOUT_TITLE = "checkout.title",
49
49
  CHECKOUT_PAY_BUTTON = "checkout.pay_button",
50
50
  CHECKOUT_TOAST_PAYMENT_ERROR = "checkout.toast_payment_error",
51
- CHECKOUT_TOAST_PAYMENT_SUCCESS = "checkout.toast_payment_success",
52
51
  CHECKOUT_SUCCESS_MODAL_TITLE = "checkout.success_modal_title",
53
52
  CHECKOUT_SUCCESS_MODAL_DESCRIPTION = "checkout.success_modal_description",
54
53
  CHECKOUT_SUCCESS_MODAL_BUTTON = "checkout.success_modal_button",
@@ -1,7 +1,8 @@
1
- import { PortalHost } from "@gorhom/portal";
1
+ import { PortalProvider } from "@gorhom/portal";
2
2
  import React, { FC } from "react";
3
3
  import { StatusBar } from "react-native";
4
4
  import { SafeAreaProvider } from "react-native-safe-area-context";
5
+ import { PortalProvider as AuroraPortalProvider } from "@lookiero/aurora";
5
6
  import { Notifications } from "@lookiero/sty-psp-notifications";
6
7
  import { theme } from "@lookiero/sty-psp-ui";
7
8
  import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
@@ -14,10 +15,17 @@ interface AppProps {
14
15
 
15
16
  const App: FC<AppProps> = ({ children }) => (
16
17
  <SafeAreaProvider>
17
- <StatusBar backgroundColor={colorBgBase} barStyle="dark-content" translucent />
18
- <Notifications contextId={MESSAGING_CONTEXT_ID} portalHostName="Checkout" />
19
- <PortalHost name="Checkout" />
20
- {children}
18
+ <PortalProvider rootHostName="Checkout">
19
+ <StatusBar backgroundColor={colorBgBase} barStyle="dark-content" translucent />
20
+ <Notifications contextId={MESSAGING_CONTEXT_ID} portalHostName="Checkout" />
21
+ {/*
22
+ We are using the Aurora's PortalProvider at this level for notifications to work properly.
23
+
24
+ PaymentInstrumentSelect uses Aurora's Portal, and if we rely on UAF's Portal (injected by <Aurora>)
25
+ notifications would be displayed in a layer below Portal's one (not visible).
26
+ */}
27
+ <AuroraPortalProvider>{children}</AuroraPortalProvider>
28
+ </PortalProvider>
21
29
  </SafeAreaProvider>
22
30
  );
23
31
 
@@ -30,9 +30,6 @@ const style = StyleSheet.create({
30
30
  paymentSelector: {
31
31
  marginTop: space6,
32
32
  },
33
- paymentSelectorNL: {
34
- marginBottom: space6,
35
- },
36
33
  princingWrapper: {
37
34
  padding: space6,
38
35
  },
@@ -4,7 +4,6 @@ import { useNavigate } from "react-router-native";
4
4
  import { Box, Button, Layout as AuroraLayout, Spinner, Text, useDevice } from "@lookiero/aurora";
5
5
  import { useI18nMessage } from "@lookiero/i18n-react";
6
6
  import { QueryStatus } from "@lookiero/messaging-react";
7
- import { Country } from "@lookiero/sty-psp-locale";
8
7
  import { Layout as UiLayout, Sticky } from "@lookiero/sty-psp-ui";
9
8
  import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
10
9
  import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
@@ -117,12 +116,6 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect })
117
116
  >
118
117
  <Box size={{ L: "2/3" }} style={screen.L && style.desktopListSpacing}>
119
118
  <View style={[style.contentWrapper, screen.L && style.desktopContentWrapper]}>
120
- {country === Country.NL && (
121
- <View style={style.paymentSelectorNL}>
122
- <PaymentInstrument useRedirect={useRedirect} />
123
- </View>
124
- )}
125
-
126
119
  <Text level={3} style={style.title} heading>
127
120
  {titleText}
128
121
  </Text>
@@ -146,11 +139,9 @@ const Checkout: FC<CheckoutProps> = ({ children, layout: Layout, useRedirect })
146
139
  </View>
147
140
  ))}
148
141
 
149
- {country !== Country.NL && (
150
- <View style={style.paymentSelector}>
151
- <PaymentInstrument useRedirect={useRedirect} />
152
- </View>
153
- )}
142
+ <View style={style.paymentSelector}>
143
+ <PaymentInstrument useRedirect={useRedirect} />
144
+ </View>
154
145
  </View>
155
146
  </Box>
156
147
 
@@ -1,7 +1,7 @@
1
1
  import React, { FC, useCallback, useEffect, useRef, useState } from "react";
2
2
  import { useNavigate } from "react-router-native";
3
3
  import { QueryStatus } from "@lookiero/messaging-react";
4
- import { PaymentFlow, PaymentFlowRef, Section } from "@lookiero/payments-front";
4
+ import { PaymentFlow, PaymentFlowRef } from "@lookiero/payments-front";
5
5
  import { useLogger } from "@lookiero/sty-psp-logging";
6
6
  import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
7
7
  import { Currency } from "../../../../../../domain/checkoutItem/model/currency";
@@ -119,7 +119,7 @@ const CheckoutPaymentModal: FC<CheckoutPaymentModalProps> = ({
119
119
 
120
120
  if (!dependenciesLoaded) return null;
121
121
 
122
- return <PaymentFlow ref={paymentFlowRef} section={Section.BOX_CHECKOUT} token={authToken} />;
122
+ return <PaymentFlow ref={paymentFlowRef} token={authToken} />;
123
123
  };
124
124
 
125
125
  export { CheckoutPaymentModal };
@@ -1,24 +1,24 @@
1
- import React, { FC } from "react";
1
+ import React, { FC, useRef } from "react";
2
2
  import { PaymentInstrumentSelect, Section } from "@lookiero/payments-front";
3
- import { useStaticInfo } from "../../../../hooks/useStaticInfo";
3
+ import { useLogger } from "@lookiero/sty-psp-logging";
4
+ import { usePaymentInstrumentEvents } from "../../../../hooks/usePaymentInstrumentEvents";
4
5
 
5
6
  interface PaymentInstrumentProps {
6
7
  readonly useRedirect: () => Record<string, string>;
7
8
  }
8
9
  const PaymentInstrument: FC<PaymentInstrumentProps> = ({ useRedirect }) => {
10
+ const paymentInstrumentSelectRef = useRef(null);
9
11
  const { returnUrl } = useRedirect();
10
- const { customer } = useStaticInfo();
12
+ const logger = useLogger();
13
+
14
+ usePaymentInstrumentEvents({ logger });
11
15
 
12
16
  return (
13
17
  <PaymentInstrumentSelect
18
+ ref={paymentInstrumentSelectRef}
14
19
  beforeRedirect={returnUrl ? () => Promise.resolve(returnUrl) : undefined}
15
20
  hasError={false}
16
21
  section={Section.BOX_CHECKOUT}
17
- userInformation={{
18
- email: customer.email,
19
- name: customer.name,
20
- }}
21
- showSingleUsePaymentMethods
22
22
  />
23
23
  );
24
24
  };
@@ -5,8 +5,6 @@ interface Customer {
5
5
  readonly customerId: string;
6
6
  readonly country: Country;
7
7
  readonly segment: Segment;
8
- readonly name: string;
9
- readonly email: string;
10
8
  }
11
9
 
12
10
  export type { Customer };
@@ -1,21 +0,0 @@
1
- import { V3MockServer } from "@pact-foundation/pact";
2
-
3
- interface StringObject {
4
- readonly [k: string]: string;
5
- }
6
- declare const DEFAULT_PACT_OPTIONS: StringObject;
7
- declare const AUTH_TOKEN =
8
- "eyJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6InBpY2tlcixwYWNrZXIiLCJzdWIiOiIxIiwiaWF0IjoxNjAyODQ4MzEyfQ.gCs2_vBcJsXt4EdreNSjDI8NWkOTQ5Cy4SwtrGnuJ44";
9
- declare const DEFAULT_REQUEST_HEADERS: StringObject;
10
- declare const DEFAULT_RESPONSE_HEADERS: StringObject;
11
- interface FromMockServerUrlToApiUrlFunction {
12
- (mockServer: V3MockServer): string;
13
- }
14
- declare const fromMockServerUrlToApiUrl: FromMockServerUrlToApiUrlFunction;
15
- export {
16
- fromMockServerUrlToApiUrl,
17
- AUTH_TOKEN,
18
- DEFAULT_PACT_OPTIONS,
19
- DEFAULT_REQUEST_HEADERS,
20
- DEFAULT_RESPONSE_HEADERS,
21
- };
@@ -1,16 +0,0 @@
1
- const DEFAULT_PACT_OPTIONS = { dir: ".contracts", logDir: ".pact/logs" };
2
- const AUTH_TOKEN =
3
- "eyJhbGciOiJIUzI1NiJ9.eyJyb2xlcyI6InBpY2tlcixwYWNrZXIiLCJzdWIiOiIxIiwiaWF0IjoxNjAyODQ4MzEyfQ.gCs2_vBcJsXt4EdreNSjDI8NWkOTQ5Cy4SwtrGnuJ44";
4
- const DEFAULT_REQUEST_HEADERS = {
5
- Authorization: `Bearer ${AUTH_TOKEN}`,
6
- ["Content-Type"]: "application/json",
7
- };
8
- const DEFAULT_RESPONSE_HEADERS = { ["Content-Type"]: "application/json" };
9
- const fromMockServerUrlToApiUrl = (mockServer) => mockServer.url.concat("/api");
10
- export {
11
- fromMockServerUrlToApiUrl,
12
- AUTH_TOKEN,
13
- DEFAULT_PACT_OPTIONS,
14
- DEFAULT_REQUEST_HEADERS,
15
- DEFAULT_RESPONSE_HEADERS,
16
- };
Binary file
@@ -1,55 +0,0 @@
1
- import { MatchersV3, PactV3 } from "@pact-foundation/pact";
2
- import { fetchHttpPost } from "@lookiero/sty-psp-http";
3
- import {
4
- AUTH_TOKEN,
5
- DEFAULT_PACT_OPTIONS,
6
- DEFAULT_REQUEST_HEADERS,
7
- DEFAULT_RESPONSE_HEADERS,
8
- fromMockServerUrlToApiUrl,
9
- } from "../../../../pact.config";
10
- import { bookedProductsVariants } from "./bookedProductsVariants.mock";
11
- import { httpBookedProductsVariantsForCheckoutItemView } from "./httpBookedProductsVariantsForCheckoutItemView";
12
-
13
- const provider = new PactV3({
14
- ...DEFAULT_PACT_OPTIONS,
15
- consumer: "STY-BOX_CHECKOUT-FRONT",
16
- provider: "STY-BOX_CHECKOUT-BACK_ViewBookedProductVariantsForCheckoutItem",
17
- });
18
- const checkoutItemId = "52440ae5-7a4c-498b-8b35-08ecfde15776";
19
- const bookedProductsVariantsResponse = {
20
- result: bookedProductsVariants,
21
- };
22
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
23
- // @ts-ignore
24
- const EXPECTED_BODY = MatchersV3.like(bookedProductsVariantsResponse);
25
- describe("STY-BOX_CHECKOUT-BACK_ViewBookedProductVariantsForCheckoutItem API", () => {
26
- it("returns a valid booked size change product variants for the given checkout item", () => {
27
- provider
28
- .given("a valid booked size change product variants for the given checkout item")
29
- .uponReceiving("booked size change product variants projection")
30
- .withRequest({
31
- method: "POST",
32
- path: "/api/view-booked-product-variants-for-checkout-item",
33
- headers: DEFAULT_REQUEST_HEADERS,
34
- body: { checkoutItemId },
35
- })
36
- .willRespondWith({
37
- status: 200,
38
- headers: DEFAULT_RESPONSE_HEADERS,
39
- body: EXPECTED_BODY,
40
- });
41
- return provider.executeTest(async (mockserver) => {
42
- const httpPost = fetchHttpPost({
43
- apiUrl: () => fromMockServerUrlToApiUrl(mockserver),
44
- getAuthToken: () => Promise.resolve(AUTH_TOKEN),
45
- device: "web",
46
- version: "1.0.0",
47
- });
48
- const response = await httpBookedProductsVariantsForCheckoutItemView({ httpPost })({
49
- checkoutItemId,
50
- signal: undefined,
51
- });
52
- expect(response).toStrictEqual(bookedProductsVariantsResponse.result);
53
- });
54
- });
55
- });
@@ -1,116 +0,0 @@
1
- import { MatchersV3, PactV3 } from "@pact-foundation/pact";
2
- import { fetchHttpPost } from "@lookiero/sty-psp-http";
3
- import {
4
- AUTH_TOKEN,
5
- DEFAULT_PACT_OPTIONS,
6
- DEFAULT_REQUEST_HEADERS,
7
- DEFAULT_RESPONSE_HEADERS,
8
- fromMockServerUrlToApiUrl,
9
- } from "../../../../pact.config";
10
- import { CheckoutItemStatus } from "../../../domain/checkoutItem/model/checkoutItem";
11
- import { MediaPerspective } from "../../../projection/checkoutItem/checkoutItem";
12
- import { checkout } from "./checkout.mock";
13
- import { httpCheckoutByIdView } from "./httpCheckoutByIdView";
14
-
15
- const provider = new PactV3({
16
- ...DEFAULT_PACT_OPTIONS,
17
- consumer: "STY-BOX_CHECKOUT-FRONT",
18
- provider: "STY-BOX_CHECKOUT-BACK_ViewCheckoutById",
19
- });
20
- const checkoutId = "e2490de5-5bd3-43d5-b7c4-526e33f71304";
21
- const replacedFor = {
22
- id: "2bf7fb8f-a283-4f53-bc27-0e7fc9466a33",
23
- media: [
24
- {
25
- id: "d7ec731b-4123-4394-829b-297b952e73e5",
26
- url: "https://cdn-catalog-back-prod.envs.lookiero.tech/1a/28/1a28f712-a76c-4172-8a11-f15002981dc0.jpg",
27
- perspective: MediaPerspective.MAIN,
28
- },
29
- {
30
- id: "8055e209-2fe9-44c5-b715-b09ad3ef741c",
31
- url: "https://cdn-catalog-back-prod.envs.lookiero.tech/15/ac/15aca112-4e71-4646-8db5-7f9723bc0130.jpg",
32
- perspective: MediaPerspective.DETAIL,
33
- },
34
- ],
35
- brand: "CKS",
36
- name: "Sari Tshirt lines",
37
- size: {
38
- id: "b3a76aea-ce7a-4ecb-82a4-6637d0ac2afd",
39
- lookiero: "S",
40
- uk: "S",
41
- it: "S",
42
- europe: "S",
43
- unique: false,
44
- },
45
- color: {
46
- id: "c228d1b0-d06d-4d5c-a7d5-953fd43af0d8",
47
- label: "black_C2",
48
- name: "black",
49
- },
50
- };
51
- const checkoutResponseWithReplacedFor = {
52
- result: checkout({ items: [{ status: CheckoutItemStatus.KEPT, replacedFor }] }),
53
- };
54
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
55
- // @ts-ignore
56
- const EXPECTED_BODY_WITH_REPLACED_FOR = MatchersV3.like(checkoutResponseWithReplacedFor);
57
- const checkoutResponseWithoutReplacedFor = {
58
- result: checkout({ items: [{ status: CheckoutItemStatus.KEPT }] }),
59
- };
60
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
61
- // @ts-ignore
62
- const EXPECTED_BODY_WITHOUT_REPLACED_FOR = MatchersV3.like(checkoutResponseWithoutReplacedFor);
63
- describe("STY-BOX_CHECKOUT-BACK_ViewCheckoutById API", () => {
64
- it("returns a valid checkout with replacedFor for the given id", () => {
65
- provider
66
- .given("a valid checkout with replacedFor for the given id")
67
- .uponReceiving("checkout projection")
68
- .withRequest({
69
- method: "POST",
70
- path: "/api/view-checkout-by-id",
71
- headers: DEFAULT_REQUEST_HEADERS,
72
- body: { checkoutId },
73
- })
74
- .willRespondWith({
75
- status: 200,
76
- headers: DEFAULT_RESPONSE_HEADERS,
77
- body: EXPECTED_BODY_WITH_REPLACED_FOR,
78
- });
79
- return provider.executeTest(async (mockserver) => {
80
- const httpPost = fetchHttpPost({
81
- apiUrl: () => fromMockServerUrlToApiUrl(mockserver),
82
- getAuthToken: () => Promise.resolve(AUTH_TOKEN),
83
- device: "web",
84
- version: "1.0.0",
85
- });
86
- const response = await httpCheckoutByIdView({ httpPost })({ checkoutId, signal: undefined });
87
- expect(response).toStrictEqual(checkoutResponseWithReplacedFor.result);
88
- });
89
- });
90
- it("returns a valid checkout without replacedFor for the given id", () => {
91
- provider
92
- .given("a valid checkout without replacedFor for the given id")
93
- .uponReceiving("checkout projection")
94
- .withRequest({
95
- method: "POST",
96
- path: "/api/view-checkout-by-id",
97
- headers: DEFAULT_REQUEST_HEADERS,
98
- body: { checkoutId },
99
- })
100
- .willRespondWith({
101
- status: 200,
102
- headers: DEFAULT_RESPONSE_HEADERS,
103
- body: EXPECTED_BODY_WITHOUT_REPLACED_FOR,
104
- });
105
- return provider.executeTest(async (mockserver) => {
106
- const httpPost = fetchHttpPost({
107
- apiUrl: () => fromMockServerUrlToApiUrl(mockserver),
108
- getAuthToken: () => Promise.resolve(AUTH_TOKEN),
109
- device: "web",
110
- version: "1.0.0",
111
- });
112
- const response = await httpCheckoutByIdView({ httpPost })({ checkoutId, signal: undefined });
113
- expect(response).toStrictEqual(checkoutResponseWithoutReplacedFor.result);
114
- });
115
- });
116
- });
@@ -1,56 +0,0 @@
1
- import { MatchersV3, PactV3 } from "@pact-foundation/pact";
2
- import { fetchHttpPost } from "@lookiero/sty-psp-http";
3
- import {
4
- AUTH_TOKEN,
5
- DEFAULT_PACT_OPTIONS,
6
- DEFAULT_REQUEST_HEADERS,
7
- DEFAULT_RESPONSE_HEADERS,
8
- fromMockServerUrlToApiUrl,
9
- } from "../../../../pact.config";
10
- import { CheckoutItemStatus } from "../../../domain/checkoutItem/model/checkoutItem";
11
- import { checkout } from "./checkout.mock";
12
- import { httpFirstAvailableCheckoutByCustomerIdView } from "./httpFirstAvailableCheckoutByCustomerIdView";
13
-
14
- const provider = new PactV3({
15
- ...DEFAULT_PACT_OPTIONS,
16
- consumer: "STY-BOX_CHECKOUT-FRONT",
17
- provider: "STY-BOX_CHECKOUT-BACK_ViewFirstAvailableCheckoutByCustomerId",
18
- });
19
- const customerId = "fab61a4d-c94d-4e33-b098-1945294a5f75";
20
- const checkoutResponse = {
21
- result: checkout({ items: [{ status: CheckoutItemStatus.KEPT }] }),
22
- };
23
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
24
- // @ts-ignore
25
- const EXPECTED_BODY = MatchersV3.like(checkoutResponse);
26
- describe("STY-BOX_CHECKOUT-BACK_ViewFirstAvailableCheckoutByCustomerId API", () => {
27
- it("returns a first available checkout for the given customer id", () => {
28
- provider
29
- .given("a first available checkout for the given customer id")
30
- .uponReceiving("checkout projection")
31
- .withRequest({
32
- method: "POST",
33
- path: "/api/view-first-available-checkout-by-customer-id",
34
- headers: DEFAULT_REQUEST_HEADERS,
35
- body: { customerId },
36
- })
37
- .willRespondWith({
38
- status: 200,
39
- headers: DEFAULT_RESPONSE_HEADERS,
40
- body: EXPECTED_BODY,
41
- });
42
- return provider.executeTest(async (mockserver) => {
43
- const httpPost = fetchHttpPost({
44
- apiUrl: () => fromMockServerUrlToApiUrl(mockserver),
45
- getAuthToken: () => Promise.resolve(AUTH_TOKEN),
46
- device: "web",
47
- version: "1.0.0",
48
- });
49
- const response = await httpFirstAvailableCheckoutByCustomerIdView({ httpPost })({
50
- customerId,
51
- signal: undefined,
52
- });
53
- expect(response).toStrictEqual(checkoutResponse.result);
54
- });
55
- });
56
- });
@@ -1,51 +0,0 @@
1
- import { MatchersV3, PactV3 } from "@pact-foundation/pact";
2
- import { fetchHttpGet } from "@lookiero/sty-psp-http";
3
- import {
4
- AUTH_TOKEN,
5
- DEFAULT_PACT_OPTIONS,
6
- DEFAULT_REQUEST_HEADERS,
7
- DEFAULT_RESPONSE_HEADERS,
8
- fromMockServerUrlToApiUrl,
9
- } from "../../../../pact.config";
10
- import { httpFiveItemsDiscountByCustomerIdView } from "./httpFiveItemsDiscountByCustomerIdView";
11
-
12
- const provider = new PactV3({
13
- ...DEFAULT_PACT_OPTIONS,
14
- consumer: "STY-BOX_CHECKOUT-FRONT",
15
- provider: "STY-BOX_CHECKOUT-BACK_ViewFiveItemsDiscountByCustomerId",
16
- });
17
- const customerId = "fab61a4d-c94d-4e33-b098-1945294a5f75";
18
- const fiveItemsDiscountResponse = 25;
19
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
20
- // @ts-ignore
21
- const EXPECTED_BODY = MatchersV3.number(fiveItemsDiscountResponse);
22
- describe("STY-BOX_CHECKOUT-BACK_ViewFiveItemsDiscountByCustomerId API", () => {
23
- it("returns a five items discount for the given customer id", () => {
24
- provider
25
- .given("a five items discount for the given customer id")
26
- .uponReceiving("five items discount")
27
- .withRequest({
28
- method: "GET",
29
- path: `/api/view-five-items-discount-by-customer-id/${customerId}`,
30
- headers: DEFAULT_REQUEST_HEADERS,
31
- })
32
- .willRespondWith({
33
- status: 200,
34
- headers: DEFAULT_RESPONSE_HEADERS,
35
- body: EXPECTED_BODY,
36
- });
37
- return provider.executeTest(async (mockserver) => {
38
- const httpGet = fetchHttpGet({
39
- apiUrl: () => fromMockServerUrlToApiUrl(mockserver),
40
- getAuthToken: () => Promise.resolve(AUTH_TOKEN),
41
- device: "web",
42
- version: "1.0.0",
43
- });
44
- const response = await httpFiveItemsDiscountByCustomerIdView({ httpGet })({
45
- customerId,
46
- signal: undefined,
47
- });
48
- expect(response).toStrictEqual(fiveItemsDiscountResponse);
49
- });
50
- });
51
- });