@lookiero/checkout 4.0.0-beta.4 → 4.0.1-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/infrastructure/ui/Root.d.ts +2 -0
- package/dist/infrastructure/ui/Root.js +2 -2
- package/dist/infrastructure/ui/routing/Routing.d.ts +2 -0
- package/dist/infrastructure/ui/routing/Routing.js +2 -2
- package/dist/infrastructure/ui/views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal.d.ts +3 -1
- package/dist/infrastructure/ui/views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal.js +6 -4
- package/dist/projection/shared/order.d.ts +1 -1
- package/dist/projection/shared/subscription.d.ts +2 -0
- package/dist/projection/shared/subscription.js +1 -0
- package/dist/shared/tracking/infrastructure/useTrackCheckout.d.ts +6 -4
- package/dist/shared/tracking/infrastructure/useTrackCheckout.js +13 -8
- package/dist/shared/tracking/tracking.d.ts +11 -5
- package/package.json +1 -1
|
@@ -4,6 +4,7 @@ import { ComponentType } from "react";
|
|
|
4
4
|
import { useRoutes as reactRouterUseRoutes } from "react-router-native";
|
|
5
5
|
import { Customer } from "../../projection/shared/customer";
|
|
6
6
|
import { Order } from "../../projection/shared/order";
|
|
7
|
+
import { Subscription } from "../../projection/shared/subscription";
|
|
7
8
|
import { SentryEnvironment } from "../../shared/logging/SentryLogger";
|
|
8
9
|
import { Layout } from "./components/layouts/layout/Layout";
|
|
9
10
|
interface RootFunctionArgs {
|
|
@@ -21,6 +22,7 @@ interface RootProps {
|
|
|
21
22
|
readonly locale?: string;
|
|
22
23
|
readonly customer: Customer | undefined;
|
|
23
24
|
readonly order: Order | undefined;
|
|
25
|
+
readonly subscription: Subscription | undefined;
|
|
24
26
|
readonly layout: Layout;
|
|
25
27
|
readonly onNotAccessible: () => void;
|
|
26
28
|
readonly onCheckoutSubmitted?: () => void;
|
|
@@ -7,10 +7,10 @@ import { Routing } from "./routing/Routing";
|
|
|
7
7
|
const root = ({ Messaging, I18n, getAuthToken, development, sentry }) => {
|
|
8
8
|
const logger = sentryLogger(sentry);
|
|
9
9
|
// eslint-disable-next-line react/display-name, react/prop-types
|
|
10
|
-
const Root = ({ basePath, locale = "en", customer, order, layout, onNotAccessible, onCheckoutSubmitted, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
|
|
10
|
+
const Root = ({ basePath, locale = "en", customer, order, subscription, layout, onNotAccessible, onCheckoutSubmitted, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
|
|
11
11
|
const handleOnI18nError = useCallback((error) => logger.captureException(error), []);
|
|
12
12
|
return (React.createElement(Messaging, { includeReactQueryDevTools: Platform.OS === "web" },
|
|
13
|
-
React.createElement(Routing, { I18n: I18n, basePath: basePath, customer: customer, getAuthToken: getAuthToken, layout: layout, locale: locale, order: order, useRedirect: useRedirect, useRoutes: useRoutes, onCheckoutSubmitted: onCheckoutSubmitted, onI18nError: development ? undefined : handleOnI18nError, onNotAccessible: onNotAccessible })));
|
|
13
|
+
React.createElement(Routing, { I18n: I18n, basePath: basePath, customer: customer, getAuthToken: getAuthToken, layout: layout, locale: locale, order: order, subscription: subscription, useRedirect: useRedirect, useRoutes: useRoutes, onCheckoutSubmitted: onCheckoutSubmitted, onI18nError: development ? undefined : handleOnI18nError, onNotAccessible: onNotAccessible })));
|
|
14
14
|
};
|
|
15
15
|
return sentryLoggerHOC({ logger })(Root);
|
|
16
16
|
};
|
|
@@ -3,11 +3,13 @@ import React from "react";
|
|
|
3
3
|
import { useRoutes as reactRouterUseRoutes } from "react-router-native";
|
|
4
4
|
import { Customer } from "../../../projection/shared/customer";
|
|
5
5
|
import { Order } from "../../../projection/shared/order";
|
|
6
|
+
import { Subscription } from "../../../projection/shared/subscription";
|
|
6
7
|
import { Layout } from "../components/layouts/layout/Layout";
|
|
7
8
|
interface RoutingProps {
|
|
8
9
|
readonly basePath?: string;
|
|
9
10
|
readonly customer: Customer | undefined;
|
|
10
11
|
readonly order: Order | undefined;
|
|
12
|
+
readonly subscription: Subscription | undefined;
|
|
11
13
|
readonly locale: string;
|
|
12
14
|
readonly I18n: I18n;
|
|
13
15
|
readonly layout: Layout;
|
|
@@ -12,7 +12,7 @@ const Summary = lazy(() => import("../views/summary/Summary").then((module) => (
|
|
|
12
12
|
const SummaryTabs = lazy(() => import("../views/summaryTabs/SummaryTabs").then((module) => ({ default: module.SummaryTabs })));
|
|
13
13
|
const Checkout = lazy(() => import("../views/checkout/Checkout").then((module) => ({ default: module.Checkout })));
|
|
14
14
|
const Feedback = lazy(() => import("../views/feedback/Feedback").then((module) => ({ default: module.Feedback })));
|
|
15
|
-
const Routing = ({ basePath = "", customer, order, locale, I18n, layout, getAuthToken, onI18nError, onNotAccessible, onCheckoutSubmitted, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
|
|
15
|
+
const Routing = ({ basePath = "", customer, order, subscription, locale, I18n, layout, getAuthToken, onI18nError, onNotAccessible, onCheckoutSubmitted, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
|
|
16
16
|
return useRoutes([
|
|
17
17
|
{
|
|
18
18
|
path: "",
|
|
@@ -54,7 +54,7 @@ const Routing = ({ basePath = "", customer, order, locale, I18n, layout, getAuth
|
|
|
54
54
|
children: [
|
|
55
55
|
{
|
|
56
56
|
path: Routes.CHECKOUT_PAYMENT,
|
|
57
|
-
element: (React.createElement(CheckoutPaymentModal, { country: customer?.country, coupon: order?.coupon, customerId: customer?.customerId, getAuthToken: getAuthToken, isFirstOrder: order?.isFirstOrder, orderNumber: order?.orderNumber, onCheckoutSubmitted: onCheckoutSubmitted })),
|
|
57
|
+
element: (React.createElement(CheckoutPaymentModal, { country: customer?.country, coupon: order?.coupon || null, customerId: customer?.customerId, getAuthToken: getAuthToken, isFirstOrder: order?.isFirstOrder, orderNumber: order?.orderNumber, subscription: subscription, onCheckoutSubmitted: onCheckoutSubmitted })),
|
|
58
58
|
},
|
|
59
59
|
],
|
|
60
60
|
},
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
import { FC } from "react";
|
|
2
2
|
import { Country } from "../../../../../../projection/shared/country";
|
|
3
|
+
import { Subscription } from "../../../../../../projection/shared/subscription";
|
|
3
4
|
interface CheckoutPaymentModalProps {
|
|
4
5
|
readonly customerId: string;
|
|
5
6
|
readonly country: Country;
|
|
6
|
-
readonly coupon: string;
|
|
7
|
+
readonly coupon: string | null;
|
|
7
8
|
readonly orderNumber: number;
|
|
8
9
|
readonly isFirstOrder: boolean;
|
|
10
|
+
readonly subscription: Subscription;
|
|
9
11
|
readonly getAuthToken: () => Promise<string>;
|
|
10
12
|
readonly onCheckoutSubmitted?: () => void;
|
|
11
13
|
}
|
|
@@ -13,7 +13,7 @@ import { TrackingPage } from "../../../../../tracking/tracking";
|
|
|
13
13
|
import { useSubmitCheckout } from "../../../../hooks/useSubmitCheckout";
|
|
14
14
|
import { Routes } from "../../../../routing/routes";
|
|
15
15
|
import { useBasePath } from "../../../../routing/useBasePath";
|
|
16
|
-
const CheckoutPaymentModal = ({ customerId, country, coupon, isFirstOrder, orderNumber, getAuthToken, onCheckoutSubmitted, }) => {
|
|
16
|
+
const CheckoutPaymentModal = ({ customerId, country, coupon, isFirstOrder, subscription, orderNumber, getAuthToken, onCheckoutSubmitted, }) => {
|
|
17
17
|
const paymentFlowRef = useRef(null);
|
|
18
18
|
const logger = useLogger();
|
|
19
19
|
const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
|
|
@@ -42,13 +42,14 @@ const CheckoutPaymentModal = ({ customerId, country, coupon, isFirstOrder, order
|
|
|
42
42
|
const checkoutItemsKept = checkout?.items.filter((checkoutItem) => checkoutItem.status === CheckoutItemStatus.KEPT || checkoutItem.status === CheckoutItemStatus.REPLACED);
|
|
43
43
|
const sizeChange = checkoutItemsKept?.filter(({ replacedFor }) => Boolean(replacedFor)).length || 0;
|
|
44
44
|
trackCheckout({
|
|
45
|
-
|
|
46
|
-
|
|
45
|
+
items: checkoutItemsKept?.length || 0,
|
|
46
|
+
value: pricing?.pendingToPay.amount / 100,
|
|
47
47
|
coupon,
|
|
48
|
-
|
|
48
|
+
currencyCode: pricing?.pendingToPay.currency,
|
|
49
49
|
isFirstOrder,
|
|
50
50
|
orderNumber,
|
|
51
51
|
sizeChange,
|
|
52
|
+
subscription,
|
|
52
53
|
userId: customerId,
|
|
53
54
|
});
|
|
54
55
|
onCheckoutSubmitted?.();
|
|
@@ -61,6 +62,7 @@ const CheckoutPaymentModal = ({ customerId, country, coupon, isFirstOrder, order
|
|
|
61
62
|
orderNumber,
|
|
62
63
|
pricing?.pendingToPay.amount,
|
|
63
64
|
pricing?.pendingToPay.currency,
|
|
65
|
+
subscription,
|
|
64
66
|
trackCheckout,
|
|
65
67
|
]);
|
|
66
68
|
const [submitCheckout] = useSubmitCheckout({
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
import { Currency } from "../../../domain/checkoutItem/model/currency";
|
|
2
2
|
import { TrackingPage } from "../../../infrastructure/tracking/tracking";
|
|
3
3
|
import { Country } from "../../../projection/shared/country";
|
|
4
|
+
import { Subscription } from "../../../projection/shared/subscription";
|
|
4
5
|
interface TrackCheckoutFunctionArgs {
|
|
5
6
|
readonly userId: string;
|
|
6
|
-
readonly orderNumber: number;
|
|
7
|
-
readonly checkoutItems: number;
|
|
8
|
-
readonly checkoutValue: number;
|
|
9
7
|
readonly sizeChange: number;
|
|
10
8
|
readonly isFirstOrder: boolean;
|
|
9
|
+
readonly items: number;
|
|
10
|
+
readonly currencyCode: Currency;
|
|
11
|
+
readonly subscription: Subscription;
|
|
11
12
|
readonly coupon: string | null;
|
|
12
|
-
readonly
|
|
13
|
+
readonly orderNumber: number;
|
|
14
|
+
readonly value: number;
|
|
13
15
|
}
|
|
14
16
|
interface TrackCheckoutFunction {
|
|
15
17
|
(args: TrackCheckoutFunctionArgs): void;
|
|
@@ -4,7 +4,7 @@ import { TrackingEvent, TrackingEventCategory } from "../tracking";
|
|
|
4
4
|
import { useEmitUserEvent } from "./useEmitUserEvent";
|
|
5
5
|
const useTrackCheckout = ({ page, country, checkoutId }) => {
|
|
6
6
|
const emitUserEvent = useEmitUserEvent();
|
|
7
|
-
const trackCheckout = useCallback(({
|
|
7
|
+
const trackCheckout = useCallback(({ coupon, currencyCode, isFirstOrder, items, orderNumber, sizeChange, subscription, userId, value }) => {
|
|
8
8
|
if (!checkoutId) {
|
|
9
9
|
return;
|
|
10
10
|
}
|
|
@@ -14,14 +14,19 @@ const useTrackCheckout = ({ page, country, checkoutId }) => {
|
|
|
14
14
|
section: `${PROJECT}_${page}`,
|
|
15
15
|
store: country,
|
|
16
16
|
checkoutId,
|
|
17
|
-
checkoutItems,
|
|
18
|
-
checkoutValue,
|
|
19
|
-
coupon,
|
|
20
|
-
currency,
|
|
21
|
-
isFirstOrder,
|
|
22
|
-
orderNumber,
|
|
23
|
-
sizeChange,
|
|
24
17
|
userId,
|
|
18
|
+
sizeChange,
|
|
19
|
+
isFirstOrder,
|
|
20
|
+
ecommerce: {
|
|
21
|
+
actionField: {
|
|
22
|
+
items,
|
|
23
|
+
currencyCode,
|
|
24
|
+
subscription,
|
|
25
|
+
coupon,
|
|
26
|
+
orderNumber,
|
|
27
|
+
value,
|
|
28
|
+
},
|
|
29
|
+
},
|
|
25
30
|
};
|
|
26
31
|
emitUserEvent(checkoutTrackingEvent);
|
|
27
32
|
}, [checkoutId, country, emitUserEvent, page]);
|
|
@@ -2,6 +2,7 @@ import { CheckoutItemStatus } from "../../domain/checkoutItem/model/checkoutItem
|
|
|
2
2
|
import { Currency } from "../../domain/checkoutItem/model/currency";
|
|
3
3
|
import { MediaPerspective } from "../../projection/checkoutItem/checkoutItem";
|
|
4
4
|
import { Country } from "../../projection/shared/country";
|
|
5
|
+
import { Subscription } from "../../projection/shared/subscription";
|
|
5
6
|
declare enum TrackingEvent {
|
|
6
7
|
PAGEVIEW = "pageview",
|
|
7
8
|
KEEP_ITEM = "keep_item",
|
|
@@ -87,13 +88,18 @@ interface PressPreviousTrackingEvent extends BaseTrackingEvent {
|
|
|
87
88
|
}
|
|
88
89
|
interface CheckoutTrackingEvent extends BaseTrackingEvent {
|
|
89
90
|
readonly userId: string;
|
|
90
|
-
readonly orderNumber: number;
|
|
91
|
-
readonly checkoutItems: number;
|
|
92
|
-
readonly checkoutValue: number;
|
|
93
91
|
readonly sizeChange: number;
|
|
94
92
|
readonly isFirstOrder: boolean;
|
|
95
|
-
readonly
|
|
96
|
-
|
|
93
|
+
readonly ecommerce: {
|
|
94
|
+
readonly actionField: {
|
|
95
|
+
readonly items: number;
|
|
96
|
+
readonly currencyCode: Currency;
|
|
97
|
+
readonly subscription: Subscription;
|
|
98
|
+
readonly coupon: string | null;
|
|
99
|
+
readonly orderNumber: number;
|
|
100
|
+
readonly value: number;
|
|
101
|
+
};
|
|
102
|
+
};
|
|
97
103
|
}
|
|
98
104
|
export type { BaseTrackingEvent, ChangeFeedbackTrackingEvent, CheckoutTrackingEvent, ImageViewTrackingEvent, ItemPageViewTrackingEvent, KeepItemTrackingEvent, PageViewTrackingEvent, PressContinueTrackingEvent, PressItemTrackingEvent, PressPricingTrackingEvent, ReplaceItemTrackingEvent, ResetItemTrackingEvent, ReturnItemTrackingEvent, TabViewTrackingEvent, PressMenuTrackingEvent, PressBackTrackingEvent, PressNextTrackingEvent, PressPreviousTrackingEvent, };
|
|
99
105
|
export { TrackingEvent, TrackingEventCategory };
|