@lookiero/checkout 12.28.1 → 13.0.0-beta.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.
- package/dist/index.d.ts +2 -3
- package/dist/public/public/assets/adaptive-icon.png +0 -0
- package/dist/public/public/assets/favicon.png +0 -0
- package/dist/public/public/assets/icon.png +0 -0
- package/dist/public/public/assets/splash.png +0 -0
- package/dist/public/public/images/not-found.png +0 -0
- package/dist/src/ExpoRoot.js +4 -10
- package/dist/src/infrastructure/domain/checkoutItem/react/useReturnCheckoutItem.js +4 -2
- package/dist/src/infrastructure/tracking/tracking.d.ts +0 -5
- package/dist/src/infrastructure/tracking/useTrackCheckout.d.ts +2 -5
- package/dist/src/infrastructure/tracking/useTrackCheckout.js +7 -23
- package/dist/src/infrastructure/ui/Root.d.ts +2 -5
- package/dist/src/infrastructure/ui/Root.js +2 -2
- package/dist/src/infrastructure/ui/hooks/useCheckoutFlow.d.ts +9 -6
- package/dist/src/infrastructure/ui/hooks/useCheckoutFlow.js +3 -5
- package/dist/src/infrastructure/ui/routing/Routing.d.ts +2 -5
- package/dist/src/infrastructure/ui/routing/Routing.js +2 -2
- package/dist/src/infrastructure/ui/views/checkout/Checkout.d.ts +2 -5
- package/dist/src/infrastructure/ui/views/checkout/Checkout.js +1 -3
- package/dist/src/version.d.ts +2 -2
- package/dist/src/version.js +2 -2
- package/index.ts +2 -4
- package/package.json +4 -4
- package/src/ExpoRoot.tsx +3 -14
- package/src/infrastructure/domain/checkoutItem/react/useReturnCheckoutItem.ts +6 -2
- package/src/infrastructure/tracking/tracking.ts +4 -5
- package/src/infrastructure/tracking/useTrackCheckout.ts +8 -38
- package/src/infrastructure/ui/Root.tsx +2 -9
- package/src/infrastructure/ui/hooks/useCheckoutFlow.tsx +14 -17
- package/src/infrastructure/ui/routing/Routing.tsx +2 -9
- package/src/infrastructure/ui/views/checkout/Checkout.tsx +3 -16
- package/src/projection/order/order.ts +0 -7
- package/src/projection/subscription/subscription.ts +0 -3
package/dist/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { ComponentType } from "react";
|
|
2
|
+
import { OnSuccessFunction } from "src/infrastructure/ui/hooks/useCheckoutFlow";
|
|
2
3
|
import { EndpointFunction } from "@lookiero/i18n";
|
|
3
4
|
import { translationEndpoint, translationExternalEndpoint, Project } from "@lookiero/sty-psp-i18n";
|
|
4
5
|
import { Country, Locale } from "@lookiero/sty-psp-locale";
|
|
@@ -10,8 +11,6 @@ import { KameleoonEnvironment } from "./src/infrastructure/ab-testing/kameleoonE
|
|
|
10
11
|
import { RootProps } from "./src/infrastructure/ui/Root";
|
|
11
12
|
import { CheckoutProjection } from "./src/projection/checkout/checkout";
|
|
12
13
|
import { Customer } from "./src/projection/customer/customer";
|
|
13
|
-
import { OrderProjection } from "./src/projection/order/order";
|
|
14
|
-
import { SubscriptionProjection } from "./src/projection/subscription/subscription";
|
|
15
14
|
interface FirstAvailableCheckoutByCustomerIdFunctionArgs {
|
|
16
15
|
readonly customerId: string | undefined;
|
|
17
16
|
}
|
|
@@ -34,4 +33,4 @@ interface BootstrapFunction {
|
|
|
34
33
|
}
|
|
35
34
|
declare const bootstrap: BootstrapFunction;
|
|
36
35
|
export { bootstrap, translationEndpoint, translationExternalEndpoint, Country, Segment, CheckoutStatus, Tradename };
|
|
37
|
-
export type { Project, SentryEnvironment, KameleoonEnvironment, Customer,
|
|
36
|
+
export type { Project, SentryEnvironment, KameleoonEnvironment, Customer, Locale, OnSuccessFunction as OnCheckoutFlowSuccessFunction, };
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/dist/src/ExpoRoot.js
CHANGED
|
@@ -21,14 +21,8 @@ import { RELEASE } from "./version";
|
|
|
21
21
|
const tradename = Tradename.LOOKIERO;
|
|
22
22
|
const theme = themeByTradename({ tradename });
|
|
23
23
|
const locale = Locale.es_ES;
|
|
24
|
-
const subscription = "b";
|
|
25
|
-
const order = {
|
|
26
|
-
isFirstOrder: false,
|
|
27
|
-
orderNumber: 3687582,
|
|
28
|
-
coupon: "MYLOOKIERO",
|
|
29
|
-
};
|
|
30
24
|
const customer = {
|
|
31
|
-
customerId: "
|
|
25
|
+
customerId: "5d7228e5-2220-4437-bdab-e5e6fb28e49d",
|
|
32
26
|
country: Country.ES,
|
|
33
27
|
segment: Segment.WOMEN,
|
|
34
28
|
email: "email@example.com",
|
|
@@ -49,10 +43,10 @@ const apiUrl = Platform.OS !== "web"
|
|
|
49
43
|
? "/local-to-dev"
|
|
50
44
|
: "http://localhost:3004/local-to-dev"
|
|
51
45
|
: "/checkout/api";
|
|
52
|
-
const authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.
|
|
46
|
+
const authToken = "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjIyMDgzMTMsImV4cCI6MTc3MDQ1NzEzMCwiZGlzcGxheU5hbWUiOiJtYWlsLmRlditCRlUtLTIwMzc0MjExMTYiLCJjb3VudHJ5X2NvZGUiOiJOTCIsImFjY2Vzc1ZpYSI6ImVtYWlsIiwic3Vic2NyaXB0aW9uU3RhcnRpbmdEYXRlIjoiMjAyMC0xMC0wMSIsImltcGVyc29uYXRlZCI6ZmFsc2UsInV1aWQiOiIwMDA0YTA0OS1mZWY2LTRiYWMtYTQ1ZC1iM2E5MDRiNGVlNGIiLCJ0cmFkZW5hbWUiOiJMT09LSUVSTyIsImlhdCI6MTc2Nzc3ODczMH0.5x6bj95AAh2c4zoQaR5AMrTO6xAkW73KHyYbFKnYzD8";
|
|
53
47
|
const getAuthToken = () => Promise.resolve(authToken);
|
|
54
48
|
const externalTranslationsUrl = Platform.OS !== "web"
|
|
55
|
-
? "https://
|
|
49
|
+
? "https://web2.sp.dev.aws.lookiero.es/api/v2/translations"
|
|
56
50
|
: __DEV__
|
|
57
51
|
? process.env.EXPO_PUBLIC_CI
|
|
58
52
|
? "/local-to-external-i18n"
|
|
@@ -131,7 +125,7 @@ const ExpoRoot = () => {
|
|
|
131
125
|
isAccessible === false && React.createElement(Text, { heading: true }, "Checkout is not accessible!"),
|
|
132
126
|
React.createElement(Router, null,
|
|
133
127
|
React.createElement(Routes, null,
|
|
134
|
-
React.createElement(Route, { path: "/checkout/*", element: React.createElement(Root, { basePath: "/checkout", customer: customer, layout: DummyLayout, locale: locale,
|
|
128
|
+
React.createElement(Route, { path: "/checkout/*", element: React.createElement(Root, { basePath: "/checkout", customer: customer, layout: DummyLayout, locale: locale, tradename: tradename, useRedirect: useRedirect, onCheckoutFlowSuccess: () => console.log("Checkout flow success!"), onNotAccessible: onNotAccessible }) }),
|
|
135
129
|
React.createElement(Route, { element: React.createElement(Navigate, { to: "/checkout", replace: true }), path: "*" })))))))) : null;
|
|
136
130
|
};
|
|
137
131
|
export { ExpoRoot };
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
import { useCallback } from "react";
|
|
2
2
|
import { useCommand } from "@lookiero/messaging-react";
|
|
3
|
-
import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
|
|
3
|
+
import { NotificationLevel, useClearNotifications, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
|
|
4
4
|
import { returnCheckoutItem as returnCheckoutItemCommand } from "../../../../domain/checkoutItem/command/returnCheckoutItem";
|
|
5
5
|
import { MESSAGING_CONTEXT_ID } from "../../../delivery/baseBootstrap";
|
|
6
6
|
import { I18nMessages } from "../../../ui/i18n/i18n";
|
|
7
7
|
const useReturnCheckoutItem = ({ checkoutItemId, logger }) => {
|
|
8
8
|
const [commandBus, status] = useCommand({ contextId: MESSAGING_CONTEXT_ID });
|
|
9
9
|
const [createNotification] = useCreateToastNotification({ contextId: MESSAGING_CONTEXT_ID, logger });
|
|
10
|
+
const [clearNotifications] = useClearNotifications({ contextId: MESSAGING_CONTEXT_ID, logger });
|
|
10
11
|
const returnCheckoutItem = useCallback(async ({ feedbacks }) => {
|
|
11
12
|
try {
|
|
12
13
|
await commandBus(returnCheckoutItemCommand({ aggregateId: checkoutItemId, feedbacks }));
|
|
14
|
+
await clearNotifications();
|
|
13
15
|
createNotification({
|
|
14
16
|
bodyI18nKey: I18nMessages.RETURN_QUESTION_TOAST_SUCCESS,
|
|
15
17
|
level: NotificationLevel.SUCCESS,
|
|
@@ -22,7 +24,7 @@ const useReturnCheckoutItem = ({ checkoutItemId, logger }) => {
|
|
|
22
24
|
bodyI18nKey: I18nMessages.TOAST_GENERIC_ERROR,
|
|
23
25
|
});
|
|
24
26
|
}
|
|
25
|
-
}, [checkoutItemId, commandBus, createNotification, logger]);
|
|
27
|
+
}, [checkoutItemId, commandBus, clearNotifications, createNotification, logger]);
|
|
26
28
|
return [returnCheckoutItem, status];
|
|
27
29
|
};
|
|
28
30
|
export { useReturnCheckoutItem };
|
|
@@ -2,7 +2,6 @@ import { Currency } from "@lookiero/sty-psp-locale";
|
|
|
2
2
|
import { BaseTrackingEvent, TrackingEventCategory } from "@lookiero/sty-psp-tracking";
|
|
3
3
|
import { CheckoutItemStatus } from "../../domain/checkoutItem/model/checkoutItem";
|
|
4
4
|
import { MediaPerspective } from "../../projection/checkoutItem/checkoutItem";
|
|
5
|
-
import { SubscriptionProjection } from "../../projection/subscription/subscription";
|
|
6
5
|
declare const PROJECT = "checkout";
|
|
7
6
|
declare enum TrackingPage {
|
|
8
7
|
ITEM = "item",
|
|
@@ -90,15 +89,11 @@ interface PressPreviousTrackingEvent extends CheckoutBaseTrackingEvent<TrackingE
|
|
|
90
89
|
interface CheckoutTrackingEvent extends CheckoutBaseTrackingEvent<TrackingEventName.CHECKOUT, TrackingEventCategory.ECOMMERCE> {
|
|
91
90
|
readonly userId: string;
|
|
92
91
|
readonly sizeChanges: number;
|
|
93
|
-
readonly isFirstOrder: boolean;
|
|
94
92
|
readonly ecommerce: {
|
|
95
93
|
readonly checkout: {
|
|
96
94
|
readonly actionField: {
|
|
97
95
|
readonly items: number;
|
|
98
96
|
readonly currencyCode: Currency;
|
|
99
|
-
readonly subscription: SubscriptionProjection;
|
|
100
|
-
readonly coupon: string | null;
|
|
101
|
-
readonly orderId: number;
|
|
102
97
|
readonly value: number;
|
|
103
98
|
};
|
|
104
99
|
};
|
|
@@ -2,17 +2,14 @@ import { Country } from "@lookiero/sty-psp-locale";
|
|
|
2
2
|
import { Segment } from "@lookiero/sty-psp-segment";
|
|
3
3
|
import { Tradename } from "@lookiero/sty-sp-tradename";
|
|
4
4
|
import { CheckoutProjection } from "../../projection/checkout/checkout";
|
|
5
|
-
import { OrderProjection } from "../../projection/order/order";
|
|
6
5
|
import { PricingProjection } from "../../projection/pricing/pricing";
|
|
7
|
-
import {
|
|
6
|
+
import { CheckoutTrackingEvent } from "./tracking";
|
|
8
7
|
interface TrackCheckoutFunction {
|
|
9
|
-
():
|
|
8
|
+
(): CheckoutTrackingEvent;
|
|
10
9
|
}
|
|
11
10
|
interface UseTrackCheckoutFunctionArgs {
|
|
12
|
-
readonly order: OrderProjection;
|
|
13
11
|
readonly checkout: CheckoutProjection | undefined;
|
|
14
12
|
readonly pricing: PricingProjection | undefined;
|
|
15
|
-
readonly subscription: SubscriptionProjection;
|
|
16
13
|
readonly userId: string;
|
|
17
14
|
readonly country: Country;
|
|
18
15
|
readonly segment: Segment;
|
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
import { useCallback } from "react";
|
|
2
2
|
import invariant from "tiny-invariant";
|
|
3
|
-
import { useEmitUserEvent } from "@lookiero/sty-psp-tracking";
|
|
4
3
|
import { CheckoutItemStatus } from "../../domain/checkoutItem/model/checkoutItem";
|
|
5
4
|
import { PROJECT, TrackingPage } from "./tracking";
|
|
6
5
|
import { TrackingEventName, TrackingEventCategory } from "./tracking";
|
|
7
|
-
const useTrackCheckout = ({
|
|
8
|
-
const emitUserEvent = useEmitUserEvent();
|
|
9
|
-
const { coupon, isFirstOrder, orderNumber } = order;
|
|
6
|
+
const useTrackCheckout = ({ checkout, pricing, segment, country, userId, tradename }) => {
|
|
10
7
|
const trackCheckout = useCallback(() => {
|
|
11
8
|
invariant(checkout, "Checkout must be defined to track checkout");
|
|
12
9
|
const checkoutItemsKept = checkout.items.filter((checkoutItem) => checkoutItem.status === CheckoutItemStatus.KEPT || checkoutItem.status === CheckoutItemStatus.REPLACED);
|
|
@@ -21,35 +18,22 @@ const useTrackCheckout = ({ order, checkout, pricing, subscription, segment, cou
|
|
|
21
18
|
userId,
|
|
22
19
|
tradename,
|
|
23
20
|
sizeChanges: totalReplacedFor,
|
|
24
|
-
isFirstOrder,
|
|
21
|
+
// isFirstOrder,
|
|
25
22
|
ecommerce: {
|
|
26
23
|
checkout: {
|
|
27
24
|
actionField: {
|
|
28
25
|
items: checkoutItemsKept.length || 0,
|
|
29
26
|
currencyCode: pricing?.pendingToPay.currency,
|
|
30
|
-
subscription,
|
|
31
|
-
coupon,
|
|
32
|
-
orderId: orderNumber,
|
|
27
|
+
// subscription,
|
|
28
|
+
// coupon,
|
|
29
|
+
// orderId: orderNumber,
|
|
33
30
|
value: pricing?.pendingToPay.amount / 100,
|
|
34
31
|
},
|
|
35
32
|
},
|
|
36
33
|
},
|
|
37
34
|
};
|
|
38
|
-
|
|
39
|
-
}, [
|
|
40
|
-
checkout,
|
|
41
|
-
country,
|
|
42
|
-
coupon,
|
|
43
|
-
emitUserEvent,
|
|
44
|
-
isFirstOrder,
|
|
45
|
-
orderNumber,
|
|
46
|
-
pricing?.pendingToPay.amount,
|
|
47
|
-
pricing?.pendingToPay.currency,
|
|
48
|
-
segment,
|
|
49
|
-
subscription,
|
|
50
|
-
userId,
|
|
51
|
-
tradename,
|
|
52
|
-
]);
|
|
35
|
+
return checkoutTrackingEvent;
|
|
36
|
+
}, [checkout, country, pricing?.pendingToPay.amount, pricing?.pendingToPay.currency, segment, userId, tradename]);
|
|
53
37
|
return trackCheckout;
|
|
54
38
|
};
|
|
55
39
|
export { useTrackCheckout };
|
|
@@ -8,9 +8,8 @@ import { SentryEnvironment, SentryLoggerFunctionArgs } from "@lookiero/sty-psp-l
|
|
|
8
8
|
import { Layout } from "@lookiero/sty-psp-ui";
|
|
9
9
|
import { Tradename } from "@lookiero/sty-sp-tradename";
|
|
10
10
|
import { Customer } from "../../projection/customer/customer";
|
|
11
|
-
import { OrderProjection } from "../../projection/order/order";
|
|
12
|
-
import { SubscriptionProjection } from "../../projection/subscription/subscription";
|
|
13
11
|
import { KameleoonEnvironment } from "../ab-testing/kameleoonEnvironment";
|
|
12
|
+
import { OnSuccessFunction as OnCheckoutFlowSuccessFunction } from "./hooks/useCheckoutFlow";
|
|
14
13
|
interface RootFunctionArgs {
|
|
15
14
|
readonly Messaging: MessagingRoot;
|
|
16
15
|
readonly I18n: I18n;
|
|
@@ -27,12 +26,10 @@ interface RootProps {
|
|
|
27
26
|
readonly basePath: string;
|
|
28
27
|
readonly locale: Locale;
|
|
29
28
|
readonly customer: Customer;
|
|
30
|
-
readonly order: OrderProjection;
|
|
31
|
-
readonly subscription: SubscriptionProjection;
|
|
32
29
|
readonly layout: Layout;
|
|
33
30
|
readonly tradename: Tradename;
|
|
34
31
|
readonly onNotAccessible: () => void;
|
|
35
|
-
readonly onCheckoutFlowSuccess:
|
|
32
|
+
readonly onCheckoutFlowSuccess: OnCheckoutFlowSuccessFunction;
|
|
36
33
|
readonly useRedirect: () => Record<string, string>;
|
|
37
34
|
readonly useRoutes?: typeof reactRouterUseRoutes;
|
|
38
35
|
}
|
|
@@ -9,11 +9,11 @@ const root = ({ Messaging, I18n, queryBus, getAuthToken, development, sentry, ka
|
|
|
9
9
|
const logger = sentryLogger(sentry);
|
|
10
10
|
const kameleoon = kameleoonConfig();
|
|
11
11
|
// eslint-disable-next-line react/display-name, react/prop-types
|
|
12
|
-
const Root = ({ basePath, locale, customer,
|
|
12
|
+
const Root = ({ basePath, locale, customer, layout, tradename, onNotAccessible, onCheckoutFlowSuccess, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
|
|
13
13
|
const handleOnI18nError = useCallback((error) => logger.captureException(error), []);
|
|
14
14
|
return (React.createElement(Messaging, { includeReactQueryDevTools: Platform.OS === "web" },
|
|
15
15
|
React.createElement(QueryBusProvider, { queryBus: queryBus },
|
|
16
|
-
React.createElement(Routing, { I18n: I18n, basePath: basePath, customer: customer, getAuthToken: getAuthToken, kameleoon: kameleoon, layout: layout, locale: locale,
|
|
16
|
+
React.createElement(Routing, { I18n: I18n, basePath: basePath, customer: customer, getAuthToken: getAuthToken, kameleoon: kameleoon, layout: layout, locale: locale, tradename: tradename, useRedirect: useRedirect, useRoutes: useRoutes, onCheckoutFlowSuccess: onCheckoutFlowSuccess, onI18nError: development ? undefined : handleOnI18nError, onNotAccessible: onNotAccessible }))));
|
|
17
17
|
};
|
|
18
18
|
const hoc = sentryLoggerHOC({ logger });
|
|
19
19
|
/**
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { ReactNode } from "react";
|
|
2
|
+
import { CheckoutTrackingEvent } from "src/infrastructure/tracking/tracking";
|
|
2
3
|
import { CheckoutProjection } from "../../../projection/checkout/checkout";
|
|
3
|
-
import { OrderProjection } from "../../../projection/order/order";
|
|
4
|
-
import { SubscriptionProjection } from "../../../projection/subscription/subscription";
|
|
5
4
|
type CheckoutFlowStatus = "idle" | "loading" | "success" | "error";
|
|
6
5
|
interface CheckoutFlowFunction {
|
|
7
6
|
(): Promise<void>;
|
|
@@ -11,16 +10,20 @@ type CheckoutFlowReturn = [
|
|
|
11
10
|
checkoutFlowStatus: CheckoutFlowStatus,
|
|
12
11
|
paymentFlow: ReactNode
|
|
13
12
|
];
|
|
13
|
+
interface OnSuccessFunctionArgs {
|
|
14
|
+
readonly checkoutTrackingEvent: CheckoutTrackingEvent;
|
|
15
|
+
}
|
|
16
|
+
interface OnSuccessFunction {
|
|
17
|
+
(args: OnSuccessFunctionArgs): void;
|
|
18
|
+
}
|
|
14
19
|
interface UseCheckoutFlowArgs {
|
|
15
20
|
readonly checkout: CheckoutProjection | undefined;
|
|
16
|
-
readonly order: OrderProjection;
|
|
17
|
-
readonly subscription: SubscriptionProjection;
|
|
18
21
|
readonly getAuthToken: () => Promise<string>;
|
|
19
|
-
readonly onSuccess:
|
|
22
|
+
readonly onSuccess: OnSuccessFunction;
|
|
20
23
|
}
|
|
21
24
|
interface UseCheckoutFlowFunction {
|
|
22
25
|
(args: UseCheckoutFlowArgs): CheckoutFlowReturn;
|
|
23
26
|
}
|
|
24
27
|
declare const useCheckoutFlow: UseCheckoutFlowFunction;
|
|
25
|
-
export type { CheckoutFlowStatus };
|
|
28
|
+
export type { CheckoutFlowStatus, OnSuccessFunction };
|
|
26
29
|
export { useCheckoutFlow };
|
|
@@ -14,7 +14,7 @@ import { Routes } from "../routing/routes";
|
|
|
14
14
|
import { usePaymentInstrumentEvents } from "./usePaymentInstrumentEvents";
|
|
15
15
|
import { useQueryBus } from "./useQueryBus";
|
|
16
16
|
import { useStaticInfo } from "./useStaticInfo";
|
|
17
|
-
const useCheckoutFlow = ({ checkout: checkoutProjection,
|
|
17
|
+
const useCheckoutFlow = ({ checkout: checkoutProjection, getAuthToken, onSuccess }) => {
|
|
18
18
|
const logger = useLogger();
|
|
19
19
|
const queryBus = useQueryBus();
|
|
20
20
|
const { customer: { customerId, country, segment, name, email }, basePath, tradename, } = useStaticInfo();
|
|
@@ -40,9 +40,7 @@ const useCheckoutFlow = ({ checkout: checkoutProjection, order: orderProjection,
|
|
|
40
40
|
}, [getAuthToken]);
|
|
41
41
|
const trackCheckout = useTrackCheckout({
|
|
42
42
|
checkout: checkoutProjection,
|
|
43
|
-
order: orderProjection,
|
|
44
43
|
pricing,
|
|
45
|
-
subscription: subscriptionProjection,
|
|
46
44
|
userId: customerId,
|
|
47
45
|
country,
|
|
48
46
|
segment,
|
|
@@ -70,8 +68,8 @@ const useCheckoutFlow = ({ checkout: checkoutProjection, order: orderProjection,
|
|
|
70
68
|
bodyI18nKey: I18nMessages.CHECKOUT_TOAST_PAYMENT_SUCCESS,
|
|
71
69
|
level: NotificationLevel.SUCCESS,
|
|
72
70
|
});
|
|
73
|
-
trackCheckout();
|
|
74
|
-
onSuccess();
|
|
71
|
+
const checkoutTrackingEvent = trackCheckout();
|
|
72
|
+
onSuccess({ checkoutTrackingEvent });
|
|
75
73
|
}, [createNotification, onSuccess, submitCheckout, trackCheckout]);
|
|
76
74
|
const onPaymentError = useCallback((payload) => {
|
|
77
75
|
setStartLegacyBoxCheckoutStatus("error");
|
|
@@ -5,14 +5,11 @@ import { Locale } from "@lookiero/sty-psp-locale";
|
|
|
5
5
|
import { Layout } from "@lookiero/sty-psp-ui";
|
|
6
6
|
import { Tradename } from "@lookiero/sty-sp-tradename";
|
|
7
7
|
import { Customer } from "../../../projection/customer/customer";
|
|
8
|
-
import { OrderProjection } from "../../../projection/order/order";
|
|
9
|
-
import { SubscriptionProjection } from "../../../projection/subscription/subscription";
|
|
10
8
|
import { KameleoonEnvironment } from "../../ab-testing/kameleoonEnvironment";
|
|
9
|
+
import { OnSuccessFunction as OnCheckoutFlowSuccessFunction } from "../hooks/useCheckoutFlow";
|
|
11
10
|
interface RoutingProps {
|
|
12
11
|
readonly basePath?: string;
|
|
13
12
|
readonly customer: Customer;
|
|
14
|
-
readonly order: OrderProjection;
|
|
15
|
-
readonly subscription: SubscriptionProjection;
|
|
16
13
|
readonly locale: Locale;
|
|
17
14
|
readonly I18n: I18n;
|
|
18
15
|
readonly kameleoon: KameleoonEnvironment;
|
|
@@ -20,7 +17,7 @@ interface RoutingProps {
|
|
|
20
17
|
readonly tradename: Tradename;
|
|
21
18
|
readonly getAuthToken: () => Promise<string>;
|
|
22
19
|
readonly onNotAccessible: () => void;
|
|
23
|
-
readonly onCheckoutFlowSuccess:
|
|
20
|
+
readonly onCheckoutFlowSuccess: OnCheckoutFlowSuccessFunction;
|
|
24
21
|
readonly onI18nError?: (err: Error) => void;
|
|
25
22
|
readonly useRedirect: () => Record<string, string>;
|
|
26
23
|
readonly useRoutes: typeof reactRouterUseRoutes;
|
|
@@ -12,7 +12,7 @@ import { Summary } from "../views/summary/Summary";
|
|
|
12
12
|
import { SummaryTabs } from "../views/summaryTabs/SummaryTabs";
|
|
13
13
|
import { CheckoutMiddleware } from "./CheckoutMiddleware";
|
|
14
14
|
import { Routes } from "./routes";
|
|
15
|
-
const Routing = ({ basePath = "", customer,
|
|
15
|
+
const Routing = ({ basePath = "", customer, locale, I18n, kameleoon, layout, tradename, getAuthToken, onI18nError, onNotAccessible, onCheckoutFlowSuccess, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
|
|
16
16
|
return useRoutes([
|
|
17
17
|
{
|
|
18
18
|
path: "",
|
|
@@ -49,7 +49,7 @@ const Routing = ({ basePath = "", customer, order, subscription, locale, I18n, k
|
|
|
49
49
|
{
|
|
50
50
|
path: Routes.CHECKOUT,
|
|
51
51
|
element: (React.createElement(Suspense, { fallback: React.createElement(Spinner, null) },
|
|
52
|
-
React.createElement(Checkout, { getAuthToken: getAuthToken, layout: layout,
|
|
52
|
+
React.createElement(Checkout, { getAuthToken: getAuthToken, layout: layout, useRedirect: useRedirect, onCheckoutFlowSuccess: onCheckoutFlowSuccess }))),
|
|
53
53
|
},
|
|
54
54
|
{
|
|
55
55
|
path: Routes.FEEDBACK,
|
|
@@ -1,13 +1,10 @@
|
|
|
1
1
|
import { FC } from "react";
|
|
2
2
|
import { Layout as UiLayout } from "@lookiero/sty-psp-ui";
|
|
3
|
-
import {
|
|
4
|
-
import { SubscriptionProjection } from "../../../../projection/subscription/subscription";
|
|
3
|
+
import { OnSuccessFunction as OnCheckoutFlowSuccessFunction } from "../../hooks/useCheckoutFlow";
|
|
5
4
|
interface CheckoutProps {
|
|
6
5
|
readonly layout: UiLayout;
|
|
7
|
-
readonly order: OrderProjection;
|
|
8
|
-
readonly subscription: SubscriptionProjection;
|
|
9
6
|
readonly getAuthToken: () => Promise<string>;
|
|
10
|
-
readonly onCheckoutFlowSuccess:
|
|
7
|
+
readonly onCheckoutFlowSuccess: OnCheckoutFlowSuccessFunction;
|
|
11
8
|
readonly useRedirect: () => Record<string, string>;
|
|
12
9
|
}
|
|
13
10
|
declare const Checkout: FC<CheckoutProps>;
|
|
@@ -25,7 +25,7 @@ import { Pricing } from "../summary/components/pricing/Pricing";
|
|
|
25
25
|
import { style as checkoutStyle } from "./Checkout.style";
|
|
26
26
|
import { DeliveryBanner } from "./components/deliveryBanner/DeliveryBanner";
|
|
27
27
|
import { PaymentInstrument } from "./components/paymentInstrument/PaymentInstrument";
|
|
28
|
-
const Checkout = ({ layout: Layout,
|
|
28
|
+
const Checkout = ({ layout: Layout, getAuthToken, useRedirect, onCheckoutFlowSuccess }) => {
|
|
29
29
|
const { customer: { customerId, country, segment, migrated }, basePath, tradename, } = useStaticInfo();
|
|
30
30
|
const screenSize = useScreenSize();
|
|
31
31
|
const isDektopScreen = screenSize === "L";
|
|
@@ -37,8 +37,6 @@ const Checkout = ({ layout: Layout, order, subscription, getAuthToken, useRedire
|
|
|
37
37
|
const [pricing, pricingStatus] = useViewPricingByCheckoutId({ checkoutId: checkout?.id });
|
|
38
38
|
const [checkoutFlow, checkoutFlowStatus, paymentFlowComponent] = useCheckoutFlow({
|
|
39
39
|
checkout,
|
|
40
|
-
order,
|
|
41
|
-
subscription,
|
|
42
40
|
getAuthToken,
|
|
43
41
|
onSuccess: onCheckoutFlowSuccess,
|
|
44
42
|
});
|
package/dist/src/version.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const VERSION = "
|
|
2
|
-
export declare const RELEASE = "checkout@
|
|
1
|
+
export declare const VERSION = "13.0.0-beta.0";
|
|
2
|
+
export declare const RELEASE = "checkout@13.0.0-beta.0";
|
package/dist/src/version.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export const VERSION = "
|
|
2
|
-
export const RELEASE = "checkout@
|
|
1
|
+
export const VERSION = "13.0.0-beta.0";
|
|
2
|
+
export const RELEASE = "checkout@13.0.0-beta.0";
|
package/index.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { ComponentType } from "react";
|
|
2
|
+
import { OnSuccessFunction } from "src/infrastructure/ui/hooks/useCheckoutFlow";
|
|
2
3
|
import { EndpointFunction } from "@lookiero/i18n";
|
|
3
4
|
import { i18n } from "@lookiero/i18n-react";
|
|
4
5
|
import { fetchTranslations, translationEndpoint, translationExternalEndpoint, Project } from "@lookiero/sty-psp-i18n";
|
|
@@ -14,8 +15,6 @@ import { DOMAIN } from "./src/infrastructure/ui/i18n/i18n";
|
|
|
14
15
|
import { CheckoutProjection } from "./src/projection/checkout/checkout";
|
|
15
16
|
import { viewFirstAvailableCheckoutByCustomerId } from "./src/projection/checkout/viewFirstAvailableCheckoutByCustomerId";
|
|
16
17
|
import { Customer } from "./src/projection/customer/customer";
|
|
17
|
-
import { OrderProjection } from "./src/projection/order/order";
|
|
18
|
-
import { SubscriptionProjection } from "./src/projection/subscription/subscription";
|
|
19
18
|
|
|
20
19
|
interface FirstAvailableCheckoutByCustomerIdFunctionArgs {
|
|
21
20
|
readonly customerId: string | undefined;
|
|
@@ -64,7 +63,6 @@ export type {
|
|
|
64
63
|
SentryEnvironment,
|
|
65
64
|
KameleoonEnvironment,
|
|
66
65
|
Customer,
|
|
67
|
-
SubscriptionProjection as Subscription,
|
|
68
|
-
OrderProjection as Order,
|
|
69
66
|
Locale,
|
|
67
|
+
OnSuccessFunction as OnCheckoutFlowSuccessFunction,
|
|
70
68
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lookiero/checkout",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "13.0.0-beta.0",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"sideEffects": "false",
|
|
@@ -28,13 +28,13 @@
|
|
|
28
28
|
"@lookiero/sty-psp-i18n": "^1.5",
|
|
29
29
|
"@lookiero/sty-psp-locale": "^2.1",
|
|
30
30
|
"@lookiero/sty-psp-logging": "^2.2",
|
|
31
|
-
"@lookiero/sty-psp-notifications": "^2.
|
|
31
|
+
"@lookiero/sty-psp-notifications": "^2.14",
|
|
32
32
|
"@lookiero/sty-psp-react-native": "^2.0",
|
|
33
33
|
"@lookiero/sty-psp-segment": "^0.1",
|
|
34
|
-
"@lookiero/sty-psp-storage": "^1.
|
|
34
|
+
"@lookiero/sty-psp-storage": "^1.1",
|
|
35
35
|
"@lookiero/sty-psp-tracking": "^2.4",
|
|
36
36
|
"@lookiero/sty-psp-ui": "^3.3",
|
|
37
|
-
"@lookiero/sty-psp-ui-settings": "^1.
|
|
37
|
+
"@lookiero/sty-psp-ui-settings": "^1.5",
|
|
38
38
|
"@lookiero/sty-psp-units": "^0.1",
|
|
39
39
|
"@lookiero/sty-psp-uuid": "^0.2",
|
|
40
40
|
"@lookiero/sty-sp-tradename": "^1.0",
|
package/src/ExpoRoot.tsx
CHANGED
|
@@ -21,23 +21,14 @@ import { root } from "./infrastructure/ui/Root";
|
|
|
21
21
|
import { DOMAIN } from "./infrastructure/ui/i18n/i18n";
|
|
22
22
|
import { Router } from "./infrastructure/ui/routing/router/Router";
|
|
23
23
|
import { Customer } from "./projection/customer/customer";
|
|
24
|
-
import { OrderProjection } from "./projection/order/order";
|
|
25
|
-
import { SubscriptionProjection } from "./projection/subscription/subscription";
|
|
26
24
|
import { RELEASE } from "./version";
|
|
27
25
|
|
|
28
26
|
const tradename = Tradename.LOOKIERO;
|
|
29
27
|
const theme = themeByTradename({ tradename });
|
|
30
28
|
const locale: Locale = Locale.es_ES;
|
|
31
29
|
|
|
32
|
-
const subscription: SubscriptionProjection = "b";
|
|
33
|
-
const order: OrderProjection = {
|
|
34
|
-
isFirstOrder: false,
|
|
35
|
-
orderNumber: 3687582,
|
|
36
|
-
coupon: "MYLOOKIERO",
|
|
37
|
-
};
|
|
38
|
-
|
|
39
30
|
const customer: Customer = {
|
|
40
|
-
customerId: "
|
|
31
|
+
customerId: "5d7228e5-2220-4437-bdab-e5e6fb28e49d",
|
|
41
32
|
country: Country.ES,
|
|
42
33
|
segment: Segment.WOMEN,
|
|
43
34
|
email: "email@example.com",
|
|
@@ -62,12 +53,12 @@ const apiUrl =
|
|
|
62
53
|
: "http://localhost:3004/local-to-dev"
|
|
63
54
|
: "/checkout/api";
|
|
64
55
|
const authToken =
|
|
65
|
-
"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.
|
|
56
|
+
"eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjIyMDgzMTMsImV4cCI6MTc3MDQ1NzEzMCwiZGlzcGxheU5hbWUiOiJtYWlsLmRlditCRlUtLTIwMzc0MjExMTYiLCJjb3VudHJ5X2NvZGUiOiJOTCIsImFjY2Vzc1ZpYSI6ImVtYWlsIiwic3Vic2NyaXB0aW9uU3RhcnRpbmdEYXRlIjoiMjAyMC0xMC0wMSIsImltcGVyc29uYXRlZCI6ZmFsc2UsInV1aWQiOiIwMDA0YTA0OS1mZWY2LTRiYWMtYTQ1ZC1iM2E5MDRiNGVlNGIiLCJ0cmFkZW5hbWUiOiJMT09LSUVSTyIsImlhdCI6MTc2Nzc3ODczMH0.5x6bj95AAh2c4zoQaR5AMrTO6xAkW73KHyYbFKnYzD8";
|
|
66
57
|
const getAuthToken = () => Promise.resolve(authToken);
|
|
67
58
|
|
|
68
59
|
const externalTranslationsUrl =
|
|
69
60
|
Platform.OS !== "web"
|
|
70
|
-
? "https://
|
|
61
|
+
? "https://web2.sp.dev.aws.lookiero.es/api/v2/translations"
|
|
71
62
|
: __DEV__
|
|
72
63
|
? process.env.EXPO_PUBLIC_CI
|
|
73
64
|
? "/local-to-external-i18n"
|
|
@@ -166,8 +157,6 @@ const ExpoRoot: FC = () => {
|
|
|
166
157
|
customer={customer}
|
|
167
158
|
layout={DummyLayout}
|
|
168
159
|
locale={locale}
|
|
169
|
-
order={order}
|
|
170
|
-
subscription={subscription}
|
|
171
160
|
tradename={tradename}
|
|
172
161
|
useRedirect={useRedirect}
|
|
173
162
|
onCheckoutFlowSuccess={() => console.log("Checkout flow success!")}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useCallback } from "react";
|
|
2
2
|
import { CommandStatus, useCommand } from "@lookiero/messaging-react";
|
|
3
3
|
import { Logger } from "@lookiero/sty-psp-logging";
|
|
4
|
-
import { NotificationLevel, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
|
|
4
|
+
import { NotificationLevel, useClearNotifications, useCreateToastNotification } from "@lookiero/sty-psp-notifications";
|
|
5
5
|
import { returnCheckoutItem as returnCheckoutItemCommand } from "../../../../domain/checkoutItem/command/returnCheckoutItem";
|
|
6
6
|
import { Feedbacks } from "../../../../domain/checkoutItem/model/feedbacks";
|
|
7
7
|
import { MESSAGING_CONTEXT_ID } from "../../../delivery/baseBootstrap";
|
|
@@ -29,11 +29,15 @@ interface UseReturnCheckoutItemFunction {
|
|
|
29
29
|
const useReturnCheckoutItem: UseReturnCheckoutItemFunction = ({ checkoutItemId, logger }) => {
|
|
30
30
|
const [commandBus, status] = useCommand({ contextId: MESSAGING_CONTEXT_ID });
|
|
31
31
|
const [createNotification] = useCreateToastNotification({ contextId: MESSAGING_CONTEXT_ID, logger });
|
|
32
|
+
const [clearNotifications] = useClearNotifications({ contextId: MESSAGING_CONTEXT_ID, logger });
|
|
32
33
|
|
|
33
34
|
const returnCheckoutItem: ReturnCheckoutItemFunction = useCallback(
|
|
34
35
|
async ({ feedbacks }) => {
|
|
35
36
|
try {
|
|
36
37
|
await commandBus(returnCheckoutItemCommand({ aggregateId: checkoutItemId, feedbacks }));
|
|
38
|
+
|
|
39
|
+
await clearNotifications();
|
|
40
|
+
|
|
37
41
|
createNotification({
|
|
38
42
|
bodyI18nKey: I18nMessages.RETURN_QUESTION_TOAST_SUCCESS,
|
|
39
43
|
level: NotificationLevel.SUCCESS,
|
|
@@ -46,7 +50,7 @@ const useReturnCheckoutItem: UseReturnCheckoutItemFunction = ({ checkoutItemId,
|
|
|
46
50
|
});
|
|
47
51
|
}
|
|
48
52
|
},
|
|
49
|
-
[checkoutItemId, commandBus, createNotification, logger],
|
|
53
|
+
[checkoutItemId, commandBus, clearNotifications, createNotification, logger],
|
|
50
54
|
);
|
|
51
55
|
|
|
52
56
|
return [returnCheckoutItem, status];
|
|
@@ -2,7 +2,6 @@ import { Currency } from "@lookiero/sty-psp-locale";
|
|
|
2
2
|
import { BaseTrackingEvent, TrackingEventCategory } from "@lookiero/sty-psp-tracking";
|
|
3
3
|
import { CheckoutItemStatus } from "../../domain/checkoutItem/model/checkoutItem";
|
|
4
4
|
import { MediaPerspective } from "../../projection/checkoutItem/checkoutItem";
|
|
5
|
-
import { SubscriptionProjection } from "../../projection/subscription/subscription";
|
|
6
5
|
|
|
7
6
|
const PROJECT = "checkout";
|
|
8
7
|
|
|
@@ -115,15 +114,15 @@ interface CheckoutTrackingEvent
|
|
|
115
114
|
extends CheckoutBaseTrackingEvent<TrackingEventName.CHECKOUT, TrackingEventCategory.ECOMMERCE> {
|
|
116
115
|
readonly userId: string;
|
|
117
116
|
readonly sizeChanges: number;
|
|
118
|
-
readonly isFirstOrder: boolean;
|
|
117
|
+
// readonly isFirstOrder: boolean;
|
|
119
118
|
readonly ecommerce: {
|
|
120
119
|
readonly checkout: {
|
|
121
120
|
readonly actionField: {
|
|
122
121
|
readonly items: number;
|
|
123
122
|
readonly currencyCode: Currency;
|
|
124
|
-
readonly subscription: SubscriptionProjection;
|
|
125
|
-
readonly coupon: string | null;
|
|
126
|
-
readonly orderId: number;
|
|
123
|
+
// readonly subscription: SubscriptionProjection;
|
|
124
|
+
// readonly coupon: string | null;
|
|
125
|
+
// readonly orderId: number;
|
|
127
126
|
readonly value: number;
|
|
128
127
|
};
|
|
129
128
|
};
|
|
@@ -2,25 +2,20 @@ import { useCallback } from "react";
|
|
|
2
2
|
import invariant from "tiny-invariant";
|
|
3
3
|
import { Country, Currency } from "@lookiero/sty-psp-locale";
|
|
4
4
|
import { Segment } from "@lookiero/sty-psp-segment";
|
|
5
|
-
import { useEmitUserEvent } from "@lookiero/sty-psp-tracking";
|
|
6
5
|
import { Tradename } from "@lookiero/sty-sp-tradename";
|
|
7
6
|
import { CheckoutItemStatus } from "../../domain/checkoutItem/model/checkoutItem";
|
|
8
7
|
import { CheckoutProjection } from "../../projection/checkout/checkout";
|
|
9
|
-
import { OrderProjection } from "../../projection/order/order";
|
|
10
8
|
import { PricingProjection } from "../../projection/pricing/pricing";
|
|
11
|
-
import { SubscriptionProjection } from "../../projection/subscription/subscription";
|
|
12
9
|
import { PROJECT, TrackingPage } from "./tracking";
|
|
13
10
|
import { CheckoutTrackingEvent, TrackingEventName, TrackingEventCategory } from "./tracking";
|
|
14
11
|
|
|
15
12
|
interface TrackCheckoutFunction {
|
|
16
|
-
():
|
|
13
|
+
(): CheckoutTrackingEvent;
|
|
17
14
|
}
|
|
18
15
|
|
|
19
16
|
interface UseTrackCheckoutFunctionArgs {
|
|
20
|
-
readonly order: OrderProjection;
|
|
21
17
|
readonly checkout: CheckoutProjection | undefined;
|
|
22
18
|
readonly pricing: PricingProjection | undefined;
|
|
23
|
-
readonly subscription: SubscriptionProjection;
|
|
24
19
|
readonly userId: string;
|
|
25
20
|
readonly country: Country;
|
|
26
21
|
readonly segment: Segment;
|
|
@@ -31,19 +26,7 @@ interface UseTrackCheckoutFunction {
|
|
|
31
26
|
(args: UseTrackCheckoutFunctionArgs): TrackCheckoutFunction;
|
|
32
27
|
}
|
|
33
28
|
|
|
34
|
-
const useTrackCheckout: UseTrackCheckoutFunction = ({
|
|
35
|
-
order,
|
|
36
|
-
checkout,
|
|
37
|
-
pricing,
|
|
38
|
-
subscription,
|
|
39
|
-
segment,
|
|
40
|
-
country,
|
|
41
|
-
userId,
|
|
42
|
-
tradename,
|
|
43
|
-
}) => {
|
|
44
|
-
const emitUserEvent = useEmitUserEvent<CheckoutTrackingEvent>();
|
|
45
|
-
const { coupon, isFirstOrder, orderNumber } = order;
|
|
46
|
-
|
|
29
|
+
const useTrackCheckout: UseTrackCheckoutFunction = ({ checkout, pricing, segment, country, userId, tradename }) => {
|
|
47
30
|
const trackCheckout: TrackCheckoutFunction = useCallback(() => {
|
|
48
31
|
invariant(checkout, "Checkout must be defined to track checkout");
|
|
49
32
|
|
|
@@ -63,36 +46,23 @@ const useTrackCheckout: UseTrackCheckoutFunction = ({
|
|
|
63
46
|
userId,
|
|
64
47
|
tradename,
|
|
65
48
|
sizeChanges: totalReplacedFor,
|
|
66
|
-
isFirstOrder,
|
|
49
|
+
// isFirstOrder,
|
|
67
50
|
ecommerce: {
|
|
68
51
|
checkout: {
|
|
69
52
|
actionField: {
|
|
70
53
|
items: checkoutItemsKept.length || 0,
|
|
71
54
|
currencyCode: pricing?.pendingToPay.currency as Currency,
|
|
72
|
-
subscription,
|
|
73
|
-
coupon,
|
|
74
|
-
orderId: orderNumber,
|
|
55
|
+
// subscription,
|
|
56
|
+
// coupon,
|
|
57
|
+
// orderId: orderNumber,
|
|
75
58
|
value: (pricing?.pendingToPay.amount as number) / 100,
|
|
76
59
|
},
|
|
77
60
|
},
|
|
78
61
|
},
|
|
79
62
|
};
|
|
80
63
|
|
|
81
|
-
|
|
82
|
-
}, [
|
|
83
|
-
checkout,
|
|
84
|
-
country,
|
|
85
|
-
coupon,
|
|
86
|
-
emitUserEvent,
|
|
87
|
-
isFirstOrder,
|
|
88
|
-
orderNumber,
|
|
89
|
-
pricing?.pendingToPay.amount,
|
|
90
|
-
pricing?.pendingToPay.currency,
|
|
91
|
-
segment,
|
|
92
|
-
subscription,
|
|
93
|
-
userId,
|
|
94
|
-
tradename,
|
|
95
|
-
]);
|
|
64
|
+
return checkoutTrackingEvent;
|
|
65
|
+
}, [checkout, country, pricing?.pendingToPay.amount, pricing?.pendingToPay.currency, segment, userId, tradename]);
|
|
96
66
|
|
|
97
67
|
return trackCheckout;
|
|
98
68
|
};
|
|
@@ -10,9 +10,8 @@ import { SentryEnvironment, SentryLoggerFunctionArgs, sentryLogger, sentryLogger
|
|
|
10
10
|
import { Layout } from "@lookiero/sty-psp-ui";
|
|
11
11
|
import { Tradename } from "@lookiero/sty-sp-tradename";
|
|
12
12
|
import { Customer } from "../../projection/customer/customer";
|
|
13
|
-
import { OrderProjection } from "../../projection/order/order";
|
|
14
|
-
import { SubscriptionProjection } from "../../projection/subscription/subscription";
|
|
15
13
|
import { KameleoonEnvironment } from "../ab-testing/kameleoonEnvironment";
|
|
14
|
+
import { OnSuccessFunction as OnCheckoutFlowSuccessFunction } from "./hooks/useCheckoutFlow";
|
|
16
15
|
import { QueryBusProvider } from "./hooks/useQueryBus";
|
|
17
16
|
import { Routing } from "./routing/Routing";
|
|
18
17
|
|
|
@@ -34,12 +33,10 @@ interface RootProps {
|
|
|
34
33
|
readonly basePath: string;
|
|
35
34
|
readonly locale: Locale;
|
|
36
35
|
readonly customer: Customer;
|
|
37
|
-
readonly order: OrderProjection;
|
|
38
|
-
readonly subscription: SubscriptionProjection;
|
|
39
36
|
readonly layout: Layout;
|
|
40
37
|
readonly tradename: Tradename;
|
|
41
38
|
readonly onNotAccessible: () => void;
|
|
42
|
-
readonly onCheckoutFlowSuccess:
|
|
39
|
+
readonly onCheckoutFlowSuccess: OnCheckoutFlowSuccessFunction;
|
|
43
40
|
readonly useRedirect: () => Record<string, string>;
|
|
44
41
|
readonly useRoutes?: typeof reactRouterUseRoutes;
|
|
45
42
|
}
|
|
@@ -61,8 +58,6 @@ const root: RootFunction = ({
|
|
|
61
58
|
basePath,
|
|
62
59
|
locale,
|
|
63
60
|
customer,
|
|
64
|
-
order,
|
|
65
|
-
subscription,
|
|
66
61
|
layout,
|
|
67
62
|
tradename,
|
|
68
63
|
onNotAccessible,
|
|
@@ -83,8 +78,6 @@ const root: RootFunction = ({
|
|
|
83
78
|
kameleoon={kameleoon}
|
|
84
79
|
layout={layout}
|
|
85
80
|
locale={locale}
|
|
86
|
-
order={order}
|
|
87
|
-
subscription={subscription}
|
|
88
81
|
tradename={tradename}
|
|
89
82
|
useRedirect={useRedirect}
|
|
90
83
|
useRoutes={useRoutes}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React, { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
2
|
+
import { CheckoutTrackingEvent } from "src/infrastructure/tracking/tracking";
|
|
2
3
|
import { CommandStatus } from "@lookiero/messaging-react";
|
|
3
4
|
import { PaymentFlow, PaymentFlowRef, PaymentPayload, Section } from "@lookiero/payments-front";
|
|
4
5
|
import { LegacyBoxCheckoutStrategyPayload } from "@lookiero/payments-front/build/components/PaymentFlow/internals/strategies/LegacyBoxCheckoutStrategy";
|
|
@@ -10,8 +11,6 @@ import {
|
|
|
10
11
|
viewCheckoutBookingById,
|
|
11
12
|
ViewCheckoutBookingByIdResult,
|
|
12
13
|
} from "../../../projection/checkoutBooking/viewCheckoutBookingById";
|
|
13
|
-
import { OrderProjection } from "../../../projection/order/order";
|
|
14
|
-
import { SubscriptionProjection } from "../../../projection/subscription/subscription";
|
|
15
14
|
import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
|
|
16
15
|
import { useSubmitCheckout } from "../../domain/checkout/react/useSubmitCheckout";
|
|
17
16
|
import { useViewPaymentFlowPayloadByCheckoutId } from "../../projection/payment/react/useViewPaymentFlowPayloadByCheckoutId";
|
|
@@ -35,25 +34,25 @@ type CheckoutFlowReturn = [
|
|
|
35
34
|
paymentFlow: ReactNode,
|
|
36
35
|
];
|
|
37
36
|
|
|
37
|
+
interface OnSuccessFunctionArgs {
|
|
38
|
+
readonly checkoutTrackingEvent: CheckoutTrackingEvent;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
interface OnSuccessFunction {
|
|
42
|
+
(args: OnSuccessFunctionArgs): void;
|
|
43
|
+
}
|
|
44
|
+
|
|
38
45
|
interface UseCheckoutFlowArgs {
|
|
39
46
|
readonly checkout: CheckoutProjection | undefined;
|
|
40
|
-
readonly order: OrderProjection;
|
|
41
|
-
readonly subscription: SubscriptionProjection;
|
|
42
47
|
readonly getAuthToken: () => Promise<string>;
|
|
43
|
-
readonly onSuccess:
|
|
48
|
+
readonly onSuccess: OnSuccessFunction;
|
|
44
49
|
}
|
|
45
50
|
|
|
46
51
|
interface UseCheckoutFlowFunction {
|
|
47
52
|
(args: UseCheckoutFlowArgs): CheckoutFlowReturn;
|
|
48
53
|
}
|
|
49
54
|
|
|
50
|
-
const useCheckoutFlow: UseCheckoutFlowFunction = ({
|
|
51
|
-
checkout: checkoutProjection,
|
|
52
|
-
order: orderProjection,
|
|
53
|
-
subscription: subscriptionProjection,
|
|
54
|
-
getAuthToken,
|
|
55
|
-
onSuccess,
|
|
56
|
-
}) => {
|
|
55
|
+
const useCheckoutFlow: UseCheckoutFlowFunction = ({ checkout: checkoutProjection, getAuthToken, onSuccess }) => {
|
|
57
56
|
const logger = useLogger();
|
|
58
57
|
const queryBus = useQueryBus();
|
|
59
58
|
const {
|
|
@@ -83,9 +82,7 @@ const useCheckoutFlow: UseCheckoutFlowFunction = ({
|
|
|
83
82
|
}, [getAuthToken]);
|
|
84
83
|
const trackCheckout = useTrackCheckout({
|
|
85
84
|
checkout: checkoutProjection,
|
|
86
|
-
order: orderProjection,
|
|
87
85
|
pricing,
|
|
88
|
-
subscription: subscriptionProjection,
|
|
89
86
|
userId: customerId,
|
|
90
87
|
country,
|
|
91
88
|
segment,
|
|
@@ -123,8 +120,8 @@ const useCheckoutFlow: UseCheckoutFlowFunction = ({
|
|
|
123
120
|
level: NotificationLevel.SUCCESS,
|
|
124
121
|
});
|
|
125
122
|
|
|
126
|
-
trackCheckout();
|
|
127
|
-
onSuccess();
|
|
123
|
+
const checkoutTrackingEvent = trackCheckout();
|
|
124
|
+
onSuccess({ checkoutTrackingEvent });
|
|
128
125
|
}, [createNotification, onSuccess, submitCheckout, trackCheckout]);
|
|
129
126
|
const onPaymentError = useCallback(
|
|
130
127
|
(payload: PaymentPayload) => {
|
|
@@ -170,5 +167,5 @@ const useCheckoutFlow: UseCheckoutFlowFunction = ({
|
|
|
170
167
|
);
|
|
171
168
|
};
|
|
172
169
|
|
|
173
|
-
export type { CheckoutFlowStatus };
|
|
170
|
+
export type { CheckoutFlowStatus, OnSuccessFunction };
|
|
174
171
|
export { useCheckoutFlow };
|
|
@@ -7,9 +7,8 @@ import { Locale } from "@lookiero/sty-psp-locale";
|
|
|
7
7
|
import { Layout } from "@lookiero/sty-psp-ui";
|
|
8
8
|
import { Tradename } from "@lookiero/sty-sp-tradename";
|
|
9
9
|
import { Customer } from "../../../projection/customer/customer";
|
|
10
|
-
import { OrderProjection } from "../../../projection/order/order";
|
|
11
|
-
import { SubscriptionProjection } from "../../../projection/subscription/subscription";
|
|
12
10
|
import { KameleoonEnvironment } from "../../ab-testing/kameleoonEnvironment";
|
|
11
|
+
import { OnSuccessFunction as OnCheckoutFlowSuccessFunction } from "../hooks/useCheckoutFlow";
|
|
13
12
|
import { StaticInfoProvider } from "../hooks/useStaticInfo";
|
|
14
13
|
import { App } from "../views/App";
|
|
15
14
|
import { Checkout } from "../views/checkout/Checkout";
|
|
@@ -24,8 +23,6 @@ import { Routes } from "./routes";
|
|
|
24
23
|
interface RoutingProps {
|
|
25
24
|
readonly basePath?: string;
|
|
26
25
|
readonly customer: Customer;
|
|
27
|
-
readonly order: OrderProjection;
|
|
28
|
-
readonly subscription: SubscriptionProjection;
|
|
29
26
|
readonly locale: Locale;
|
|
30
27
|
readonly I18n: I18n;
|
|
31
28
|
readonly kameleoon: KameleoonEnvironment;
|
|
@@ -33,7 +30,7 @@ interface RoutingProps {
|
|
|
33
30
|
readonly tradename: Tradename;
|
|
34
31
|
readonly getAuthToken: () => Promise<string>;
|
|
35
32
|
readonly onNotAccessible: () => void;
|
|
36
|
-
readonly onCheckoutFlowSuccess:
|
|
33
|
+
readonly onCheckoutFlowSuccess: OnCheckoutFlowSuccessFunction;
|
|
37
34
|
readonly onI18nError?: (err: Error) => void;
|
|
38
35
|
readonly useRedirect: () => Record<string, string>;
|
|
39
36
|
readonly useRoutes: typeof reactRouterUseRoutes;
|
|
@@ -42,8 +39,6 @@ interface RoutingProps {
|
|
|
42
39
|
const Routing: FC<RoutingProps> = ({
|
|
43
40
|
basePath = "",
|
|
44
41
|
customer,
|
|
45
|
-
order,
|
|
46
|
-
subscription,
|
|
47
42
|
locale,
|
|
48
43
|
I18n,
|
|
49
44
|
kameleoon,
|
|
@@ -116,8 +111,6 @@ const Routing: FC<RoutingProps> = ({
|
|
|
116
111
|
<Checkout
|
|
117
112
|
getAuthToken={getAuthToken}
|
|
118
113
|
layout={layout}
|
|
119
|
-
order={order}
|
|
120
|
-
subscription={subscription}
|
|
121
114
|
useRedirect={useRedirect}
|
|
122
115
|
onCheckoutFlowSuccess={onCheckoutFlowSuccess}
|
|
123
116
|
/>
|
|
@@ -8,8 +8,6 @@ import { PayButton, Section } from "@lookiero/payments-front";
|
|
|
8
8
|
import { Country } from "@lookiero/sty-psp-locale";
|
|
9
9
|
import { Layout as UiLayout, Sticky, useScreenSize } from "@lookiero/sty-psp-ui";
|
|
10
10
|
import { CheckoutItemStatus } from "../../../../domain/checkoutItem/model/checkoutItem";
|
|
11
|
-
import { OrderProjection } from "../../../../projection/order/order";
|
|
12
|
-
import { SubscriptionProjection } from "../../../../projection/subscription/subscription";
|
|
13
11
|
import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
|
|
14
12
|
import { useViewPricingByCheckoutId } from "../../../projection/pricing/react/useViewPricingByCheckoutId";
|
|
15
13
|
import { TrackingPage } from "../../../tracking/tracking";
|
|
@@ -18,7 +16,7 @@ import { useTrackPressBack } from "../../../tracking/useTrackPressBack";
|
|
|
18
16
|
import { useTrackPressContinue } from "../../../tracking/useTrackPressContinue";
|
|
19
17
|
import { Body } from "../../components/layouts/body/Body";
|
|
20
18
|
import { CheckoutHeader } from "../../components/templates/header/checkoutHeader/CheckoutHeader";
|
|
21
|
-
import { useCheckoutFlow } from "../../hooks/useCheckoutFlow";
|
|
19
|
+
import { useCheckoutFlow, OnSuccessFunction as OnCheckoutFlowSuccessFunction } from "../../hooks/useCheckoutFlow";
|
|
22
20
|
import { useStaticInfo } from "../../hooks/useStaticInfo";
|
|
23
21
|
import { DOMAIN, I18nMessages } from "../../i18n/i18n";
|
|
24
22
|
import { Routes } from "../../routing/routes";
|
|
@@ -30,21 +28,12 @@ import { PaymentInstrument } from "./components/paymentInstrument/PaymentInstrum
|
|
|
30
28
|
|
|
31
29
|
interface CheckoutProps {
|
|
32
30
|
readonly layout: UiLayout;
|
|
33
|
-
readonly order: OrderProjection;
|
|
34
|
-
readonly subscription: SubscriptionProjection;
|
|
35
31
|
readonly getAuthToken: () => Promise<string>;
|
|
36
|
-
readonly onCheckoutFlowSuccess:
|
|
32
|
+
readonly onCheckoutFlowSuccess: OnCheckoutFlowSuccessFunction;
|
|
37
33
|
readonly useRedirect: () => Record<string, string>;
|
|
38
34
|
}
|
|
39
35
|
|
|
40
|
-
const Checkout: FC<CheckoutProps> = ({
|
|
41
|
-
layout: Layout,
|
|
42
|
-
order,
|
|
43
|
-
subscription,
|
|
44
|
-
getAuthToken,
|
|
45
|
-
useRedirect,
|
|
46
|
-
onCheckoutFlowSuccess,
|
|
47
|
-
}) => {
|
|
36
|
+
const Checkout: FC<CheckoutProps> = ({ layout: Layout, getAuthToken, useRedirect, onCheckoutFlowSuccess }) => {
|
|
48
37
|
const {
|
|
49
38
|
customer: { customerId, country, segment, migrated },
|
|
50
39
|
basePath,
|
|
@@ -64,8 +53,6 @@ const Checkout: FC<CheckoutProps> = ({
|
|
|
64
53
|
|
|
65
54
|
const [checkoutFlow, checkoutFlowStatus, paymentFlowComponent] = useCheckoutFlow({
|
|
66
55
|
checkout,
|
|
67
|
-
order,
|
|
68
|
-
subscription,
|
|
69
56
|
getAuthToken,
|
|
70
57
|
onSuccess: onCheckoutFlowSuccess,
|
|
71
58
|
});
|