@lookiero/checkout 0.4.6 → 0.4.8
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/domain/checkout/command/submitCheckout.d.ts +13 -0
- package/dist/domain/checkout/command/submitCheckout.js +4 -0
- package/dist/domain/checkout/model/checkout.d.ts +4 -4
- package/dist/domain/checkout/model/checkout.js +6 -6
- package/dist/domain/checkout/model/checkoutSubmitted.d.ts +13 -0
- package/dist/domain/checkout/model/checkoutSubmitted.js +4 -0
- package/dist/infrastructure/delivery/baseBootstrap.js +3 -3
- package/dist/infrastructure/domain/checkout/model/httpCheckouts.js +2 -2
- package/dist/infrastructure/domain/checkout/model/httpCheckoutsSubmit.d.ts +5 -0
- package/dist/infrastructure/domain/checkout/model/httpCheckoutsSubmit.js +13 -0
- package/dist/infrastructure/domain/checkout/react/useSubmitCheckout.d.ts +13 -0
- package/dist/infrastructure/domain/checkout/react/{useMarkCheckoutAsPaid.js → useSubmitCheckout.js} +7 -7
- package/dist/infrastructure/projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId.js +3 -3
- package/dist/infrastructure/ui/components/templates/SafeAreaScrollView.d.ts +1 -0
- package/dist/infrastructure/ui/components/templates/SafeAreaScrollView.js +7 -5
- package/dist/infrastructure/ui/hooks/useSubmitCheckout.js +8 -8
- package/dist/infrastructure/ui/routing/CheckoutMiddleware.js +2 -2
- package/dist/infrastructure/ui/views/checkout/Checkout.js +1 -1
- package/dist/infrastructure/ui/views/feedback/Feedback.js +1 -1
- package/dist/infrastructure/ui/views/header/Header.d.ts +1 -1
- package/dist/infrastructure/ui/views/header/Header.js +6 -6
- package/dist/infrastructure/ui/views/item/Item.js +1 -2
- package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.js +3 -1
- package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.style.d.ts +0 -1
- package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.style.js +1 -2
- package/dist/infrastructure/ui/views/summary/Summary.js +7 -9
- package/dist/infrastructure/ui/views/summary/components/pricing/Pricing.js +3 -1
- package/dist/infrastructure/ui/views/summary/components/pricing/Pricing.style.d.ts +0 -1
- package/dist/infrastructure/ui/views/summary/components/pricing/Pricing.style.js +1 -2
- package/dist/shared/notifications/infrastructure/ui/components/Notifications.style.d.ts +4 -1
- package/dist/shared/notifications/infrastructure/ui/components/Notifications.style.js +2 -1
- package/dist/shared/ui/components/atoms/field/Field.js +1 -1
- package/dist/shared/ui/components/atoms/field/Field.style.d.ts +2 -0
- package/dist/shared/ui/components/atoms/field/Field.style.js +2 -0
- package/dist/shared/ui/components/atoms/input/Input.js +1 -1
- package/dist/shared/ui/components/atoms/input/Input.style.d.ts +0 -3
- package/dist/shared/ui/components/atoms/input/Input.style.js +0 -3
- package/dist/shared/ui/components/layouts/stack/Stack.js +4 -5
- package/dist/shared/ui/components/layouts/sticky/Sticky.style.d.ts +3 -0
- package/dist/shared/ui/components/layouts/sticky/Sticky.style.js +4 -9
- package/dist/shared/ui/components/molecules/inputField/InputField.js +6 -1
- package/package.json +2 -1
- package/dist/domain/checkout/command/markCheckoutAsPaid.d.ts +0 -13
- package/dist/domain/checkout/command/markCheckoutAsPaid.js +0 -4
- package/dist/domain/checkout/model/checkoutPaid.d.ts +0 -13
- package/dist/domain/checkout/model/checkoutPaid.js +0 -4
- package/dist/infrastructure/domain/checkout/model/httpCheckoutsMarkAsPaid.d.ts +0 -5
- package/dist/infrastructure/domain/checkout/model/httpCheckoutsMarkAsPaid.js +0 -13
- package/dist/infrastructure/domain/checkout/react/useMarkCheckoutAsPaid.d.ts +0 -13
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { Command } from "@lookiero/messaging";
|
|
2
|
+
declare const SUBMIT_CHECKOUT = "submit_checkout";
|
|
3
|
+
interface SubmitCheckoutPayload {
|
|
4
|
+
readonly aggregateId: string;
|
|
5
|
+
}
|
|
6
|
+
interface SubmitCheckout extends Command<typeof SUBMIT_CHECKOUT>, SubmitCheckoutPayload {
|
|
7
|
+
}
|
|
8
|
+
interface SubmitCheckoutFunction {
|
|
9
|
+
(payload: SubmitCheckoutPayload): SubmitCheckout;
|
|
10
|
+
}
|
|
11
|
+
declare const submitCheckout: SubmitCheckoutFunction;
|
|
12
|
+
export type { SubmitCheckout };
|
|
13
|
+
export { SUBMIT_CHECKOUT, submitCheckout };
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { AggregateRoot, CommandHandlerFunction } from "@lookiero/messaging";
|
|
2
|
-
import { MarkCheckoutAsPaid } from "../command/markCheckoutAsPaid";
|
|
3
2
|
import { StartCheckout } from "../command/startCheckout";
|
|
3
|
+
import { SubmitCheckout } from "../command/submitCheckout";
|
|
4
4
|
declare enum CheckoutStatus {
|
|
5
5
|
AVAILABLE = "AVAILABLE",
|
|
6
6
|
NOTIFIED = "NOTIFIED",
|
|
7
7
|
STARTED = "STARTED",
|
|
8
8
|
COMPLETED = "COMPLETED",
|
|
9
|
-
|
|
9
|
+
SUBMITTED = "SUBMITTED",
|
|
10
10
|
EXPIRED = "EXPIRED"
|
|
11
11
|
}
|
|
12
12
|
interface Checkout extends AggregateRoot {
|
|
@@ -17,6 +17,6 @@ interface Checkout extends AggregateRoot {
|
|
|
17
17
|
readonly expiresOn: Date;
|
|
18
18
|
}
|
|
19
19
|
declare const startCheckoutHandler: CommandHandlerFunction<StartCheckout, Checkout>;
|
|
20
|
-
declare const
|
|
20
|
+
declare const submitCheckoutHandler: CommandHandlerFunction<SubmitCheckout, Checkout>;
|
|
21
21
|
export type { Checkout };
|
|
22
|
-
export { CheckoutStatus, startCheckoutHandler,
|
|
22
|
+
export { CheckoutStatus, startCheckoutHandler, submitCheckoutHandler };
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import invariant from "tiny-invariant";
|
|
2
|
-
import { checkoutPaid } from "./checkoutPaid";
|
|
3
2
|
import { checkoutStarted } from "./checkoutStarted";
|
|
3
|
+
import { checkoutSubmitted } from "./checkoutSubmitted";
|
|
4
4
|
var CheckoutStatus;
|
|
5
5
|
(function (CheckoutStatus) {
|
|
6
6
|
CheckoutStatus["AVAILABLE"] = "AVAILABLE";
|
|
7
7
|
CheckoutStatus["NOTIFIED"] = "NOTIFIED";
|
|
8
8
|
CheckoutStatus["STARTED"] = "STARTED";
|
|
9
9
|
CheckoutStatus["COMPLETED"] = "COMPLETED";
|
|
10
|
-
CheckoutStatus["
|
|
10
|
+
CheckoutStatus["SUBMITTED"] = "SUBMITTED";
|
|
11
11
|
CheckoutStatus["EXPIRED"] = "EXPIRED";
|
|
12
12
|
})(CheckoutStatus || (CheckoutStatus = {}));
|
|
13
13
|
const startCheckoutHandler = () => async ({ aggregateRoot, command }) => {
|
|
@@ -20,13 +20,13 @@ const startCheckoutHandler = () => async ({ aggregateRoot, command }) => {
|
|
|
20
20
|
domainEvents: [checkoutStarted({ aggregateId })],
|
|
21
21
|
};
|
|
22
22
|
};
|
|
23
|
-
const
|
|
23
|
+
const submitCheckoutHandler = () => async ({ aggregateRoot, command }) => {
|
|
24
24
|
const { aggregateId } = command;
|
|
25
25
|
invariant(aggregateRoot.status !== CheckoutStatus.COMPLETED, "Checkout is already completed");
|
|
26
26
|
return {
|
|
27
27
|
...aggregateRoot,
|
|
28
|
-
status: CheckoutStatus.
|
|
29
|
-
domainEvents: [
|
|
28
|
+
status: CheckoutStatus.SUBMITTED,
|
|
29
|
+
domainEvents: [checkoutSubmitted({ aggregateId })],
|
|
30
30
|
};
|
|
31
31
|
};
|
|
32
|
-
export { CheckoutStatus, startCheckoutHandler,
|
|
32
|
+
export { CheckoutStatus, startCheckoutHandler, submitCheckoutHandler };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { DomainEvent } from "@lookiero/messaging";
|
|
2
|
+
declare const CHECKOUT_SUBMITTED = "checkout_submitted";
|
|
3
|
+
interface CheckoutSubmittedPayload {
|
|
4
|
+
readonly aggregateId: string;
|
|
5
|
+
}
|
|
6
|
+
interface CheckoutSubmitted extends DomainEvent<typeof CHECKOUT_SUBMITTED>, CheckoutSubmittedPayload {
|
|
7
|
+
}
|
|
8
|
+
interface CheckoutSubmittedFunction {
|
|
9
|
+
(payload: CheckoutSubmittedPayload): CheckoutSubmitted;
|
|
10
|
+
}
|
|
11
|
+
declare const checkoutSubmitted: CheckoutSubmittedFunction;
|
|
12
|
+
export type { CheckoutSubmitted };
|
|
13
|
+
export { CHECKOUT_SUBMITTED, checkoutSubmitted };
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { bootstrap as messagingBootstrap } from "@lookiero/messaging-react";
|
|
2
|
-
import { MARK_CHECKOUT_AS_PAID } from "../../domain/checkout/command/markCheckoutAsPaid";
|
|
3
2
|
import { START_CHECKOUT } from "../../domain/checkout/command/startCheckout";
|
|
4
|
-
import {
|
|
3
|
+
import { SUBMIT_CHECKOUT } from "../../domain/checkout/command/submitCheckout";
|
|
4
|
+
import { submitCheckoutHandler, startCheckoutHandler } from "../../domain/checkout/model/checkout";
|
|
5
5
|
import { BLOCK_CHECKOUT_BOOKING } from "../../domain/checkoutBooking/command/blockCheckoutBooking";
|
|
6
6
|
import { BOOK_CHECKOUT_BOOKING_FOR_CHECKOUT_ITEM } from "../../domain/checkoutBooking/command/bookCheckoutBookingForCheckoutItem";
|
|
7
7
|
import { createNotificationWhenCheckoutBookingExpired } from "../../domain/checkoutBooking/event/createNotificationWhenCheckoutBookingExpired";
|
|
@@ -47,7 +47,7 @@ const baseBootstrap = ({ checkoutByIdView, firstAvailableCheckoutByCustomerIdVie
|
|
|
47
47
|
})
|
|
48
48
|
.query(VIEW_IS_CHECKOUT_ACCESSIBLE_BY_CUSTOMER_ID, viewIsCheckoutAccessibleByCustomerIdHandler)
|
|
49
49
|
.command(START_CHECKOUT, startCheckoutHandler)(getCheckout, saveCheckout, ...checkoutsDependencies)
|
|
50
|
-
.command(
|
|
50
|
+
.command(SUBMIT_CHECKOUT, submitCheckoutHandler)(getCheckout, saveCheckout, ...checkoutsDependencies)
|
|
51
51
|
.query(VIEW_CHECKOUT_ITEM_BY_ID, viewCheckoutItemByIdHandler, {
|
|
52
52
|
view: checkoutItemByIdView,
|
|
53
53
|
})
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import invariant from "tiny-invariant";
|
|
2
2
|
import { viewCheckoutById, } from "../../../../projection/checkout/viewCheckoutById";
|
|
3
|
-
import { httpCheckoutsMarkAsPaid } from "./httpCheckoutsMarkAsPaid";
|
|
4
3
|
import { httpCheckoutsStart } from "./httpCheckoutsStart";
|
|
4
|
+
import { httpCheckoutsSubmit } from "./httpCheckoutsSubmit";
|
|
5
5
|
const toDomain = (checkout) => {
|
|
6
6
|
invariant(checkout, "No checkout found!");
|
|
7
7
|
return {
|
|
@@ -19,7 +19,7 @@ const getCheckout = ({ queryBus }) => async (aggregateId) => toDomain(await quer
|
|
|
19
19
|
const saveCheckout = ({ httpPost }) => async (aggregateRoot) => {
|
|
20
20
|
await Promise.all([
|
|
21
21
|
httpCheckoutsStart({ httpPost })(aggregateRoot),
|
|
22
|
-
|
|
22
|
+
httpCheckoutsSubmit({ httpPost })(aggregateRoot),
|
|
23
23
|
]);
|
|
24
24
|
};
|
|
25
25
|
export { getCheckout, saveCheckout };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { CHECKOUT_SUBMITTED } from "../../../../domain/checkout/model/checkoutSubmitted";
|
|
2
|
+
const isCheckoutSubmitted = (event) => event.name === CHECKOUT_SUBMITTED;
|
|
3
|
+
const httpCheckoutsSubmit = ({ httpPost }) => async ({ aggregateId, domainEvents }) => {
|
|
4
|
+
const checkoutSubmitted = domainEvents.find(isCheckoutSubmitted);
|
|
5
|
+
if (!checkoutSubmitted) {
|
|
6
|
+
return;
|
|
7
|
+
}
|
|
8
|
+
await httpPost({
|
|
9
|
+
endpoint: "/submit-checkout",
|
|
10
|
+
body: { checkoutId: aggregateId },
|
|
11
|
+
});
|
|
12
|
+
};
|
|
13
|
+
export { httpCheckoutsSubmit };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { CommandStatus } from "@lookiero/messaging-react";
|
|
2
|
+
interface SubmitFunction {
|
|
3
|
+
(): Promise<void>;
|
|
4
|
+
}
|
|
5
|
+
type UseSubmitCheckout = [submit: SubmitFunction, status: CommandStatus];
|
|
6
|
+
interface UseSubmitCheckoutFunctionArgs {
|
|
7
|
+
readonly checkoutId?: string;
|
|
8
|
+
}
|
|
9
|
+
interface UseSubmitCheckoutFunction {
|
|
10
|
+
(args: UseSubmitCheckoutFunctionArgs): UseSubmitCheckout;
|
|
11
|
+
}
|
|
12
|
+
declare const useSubmitCheckout: UseSubmitCheckoutFunction;
|
|
13
|
+
export { useSubmitCheckout };
|
package/dist/infrastructure/domain/checkout/react/{useMarkCheckoutAsPaid.js → useSubmitCheckout.js}
RENAMED
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import { useCommand } from "@lookiero/messaging-react";
|
|
2
2
|
import { useCallback } from "react";
|
|
3
3
|
import invariant from "tiny-invariant";
|
|
4
|
-
import {
|
|
4
|
+
import { submitCheckout } from "../../../../domain/checkout/command/submitCheckout";
|
|
5
5
|
import { MESSAGING_CONTEXT_ID } from "../../../delivery/baseBootstrap";
|
|
6
|
-
const
|
|
6
|
+
const useSubmitCheckout = ({ checkoutId }) => {
|
|
7
7
|
const [commandBus, status] = useCommand({ contextId: MESSAGING_CONTEXT_ID });
|
|
8
|
-
const
|
|
9
|
-
invariant(checkoutId, "CheckoutId must be defined in order to
|
|
10
|
-
return commandBus(
|
|
8
|
+
const submit = useCallback(() => {
|
|
9
|
+
invariant(checkoutId, "CheckoutId must be defined in order to submit checkout");
|
|
10
|
+
return commandBus(submitCheckout({
|
|
11
11
|
aggregateId: checkoutId,
|
|
12
12
|
}));
|
|
13
13
|
}, [checkoutId, commandBus]);
|
|
14
|
-
return [
|
|
14
|
+
return [submit, status];
|
|
15
15
|
};
|
|
16
|
-
export {
|
|
16
|
+
export { useSubmitCheckout };
|
package/dist/infrastructure/projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useQuery } from "@lookiero/messaging-react";
|
|
2
|
-
import {
|
|
2
|
+
import { CHECKOUT_SUBMITTED } from "../../../../domain/checkout/model/checkoutSubmitted";
|
|
3
3
|
import { CHECKOUT_BOOKING_BOOKED, } from "../../../../domain/checkoutBooking/model/checkoutBookingBooked";
|
|
4
4
|
import { CHECKOUT_BOOKING_EXPIRED, } from "../../../../domain/checkoutBooking/model/checkoutBookingExpired";
|
|
5
5
|
import { CHECKOUT_FEEDBACK_GIVEN, } from "../../../../domain/checkoutFeedback/model/checkoutFeedbackGiven";
|
|
@@ -11,14 +11,14 @@ import { MESSAGING_CONTEXT_ID } from "../../../delivery/baseBootstrap";
|
|
|
11
11
|
const isCheckoutItemKept = (event) => event.name === CHECKOUT_ITEM_KEPT;
|
|
12
12
|
const isCheckoutItemReturned = (event) => event.name === CHECKOUT_ITEM_RETURNED;
|
|
13
13
|
const isCheckoutItemReplaced = (event) => event.name === CHECKOUT_ITEM_REPLACED;
|
|
14
|
-
const
|
|
14
|
+
const isCheckoutSubmitted = (event) => event.name === CHECKOUT_SUBMITTED;
|
|
15
15
|
const isCheckoutFeedbackGiven = (event) => event.name === CHECKOUT_FEEDBACK_GIVEN;
|
|
16
16
|
const isCheckoutBookingExpired = (event) => event.name === CHECKOUT_BOOKING_EXPIRED;
|
|
17
17
|
const isCheckoutBookingBooked = (event) => event.name === CHECKOUT_BOOKING_BOOKED;
|
|
18
18
|
const shouldInvalidate = (event) => isCheckoutItemKept(event) ||
|
|
19
19
|
isCheckoutItemReplaced(event) ||
|
|
20
20
|
isCheckoutItemReturned(event) ||
|
|
21
|
-
|
|
21
|
+
isCheckoutSubmitted(event) ||
|
|
22
22
|
isCheckoutFeedbackGiven(event) ||
|
|
23
23
|
isCheckoutBookingExpired(event) ||
|
|
24
24
|
isCheckoutBookingBooked(event);
|
|
@@ -4,6 +4,7 @@ import { Edge } from "react-native-safe-area-context";
|
|
|
4
4
|
type SafeAreaScrollViewStyle = "safeAreaView" | "scrollView";
|
|
5
5
|
interface SafeAreaScrollViewProps {
|
|
6
6
|
readonly children: ReactNode;
|
|
7
|
+
readonly footer?: ReactNode;
|
|
7
8
|
readonly scrollerPaddingTop?: number;
|
|
8
9
|
readonly edges?: Edge[];
|
|
9
10
|
readonly style?: Partial<Record<SafeAreaScrollViewStyle, StyleProp<ViewStyle>>>;
|
|
@@ -1,16 +1,18 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { ScrollView } from "react-native";
|
|
2
|
+
import { Platform, ScrollView } from "react-native";
|
|
3
3
|
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
|
|
4
|
-
|
|
4
|
+
import { theme } from "../../theme/theme";
|
|
5
|
+
const { spaceXXXL } = theme();
|
|
6
|
+
const SafeAreaScrollView = ({ children, footer, edges = ["top", "bottom", "left", "right"], style: customStyle, scrollerPaddingTop = 0, }) => {
|
|
5
7
|
const { top: safeAreaInsetTop, bottom: safeAreaInsetBottom } = useSafeAreaInsets();
|
|
6
8
|
return (React.createElement(SafeAreaView, { edges: edges, style: customStyle?.safeAreaView },
|
|
7
9
|
React.createElement(ScrollView, { contentContainerStyle: [
|
|
8
10
|
{
|
|
9
|
-
// Why did we set this??
|
|
10
11
|
paddingTop: safeAreaInsetTop + scrollerPaddingTop,
|
|
11
|
-
paddingBottom: safeAreaInsetBottom,
|
|
12
|
+
paddingBottom: safeAreaInsetBottom + (Platform.OS === "android" ? spaceXXXL : 0),
|
|
12
13
|
},
|
|
13
14
|
customStyle?.scrollView,
|
|
14
|
-
] }, children)
|
|
15
|
+
] }, children),
|
|
16
|
+
footer));
|
|
15
17
|
};
|
|
16
18
|
export { SafeAreaScrollView };
|
|
@@ -4,11 +4,11 @@ import { useCallback, useMemo, useState } from "react";
|
|
|
4
4
|
import { useCreateNotification } from "../../../shared/notifications";
|
|
5
5
|
import { NotificationLevel } from "../../../shared/notifications/domain/notification/model/notification";
|
|
6
6
|
import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
|
|
7
|
-
import {
|
|
7
|
+
import { useSubmitCheckout as useSubmitCheckoutCommand } from "../../domain/checkout/react/useSubmitCheckout";
|
|
8
8
|
import { useBlockCheckoutBooking } from "../../domain/checkoutBooking/react/useBlockCheckoutBooking";
|
|
9
9
|
import { I18nMessages } from "../i18n/i18n";
|
|
10
10
|
const useSubmitCheckout = ({ checkoutId, checkoutBookingId, paymentFlowRef, onError }) => {
|
|
11
|
-
const [
|
|
11
|
+
const [submitCheckoutCommand, submitCheckoutCommandStatus] = useSubmitCheckoutCommand({ checkoutId });
|
|
12
12
|
const [blockCheckoutBooking, blockCheckoutBookingStatus] = useBlockCheckoutBooking({ checkoutBookingId });
|
|
13
13
|
const [createNotification] = useCreateNotification({ contextId: MESSAGING_CONTEXT_ID });
|
|
14
14
|
const [startLegacyBoxCheckoutStatus, setStartLegacyBoxCheckoutStatus] = useState("idle");
|
|
@@ -39,31 +39,31 @@ const useSubmitCheckout = ({ checkoutId, checkoutBookingId, paymentFlowRef, onEr
|
|
|
39
39
|
else if (status === ChargeStatus.EXECUTED) {
|
|
40
40
|
setStartLegacyBoxCheckoutStatus("success");
|
|
41
41
|
try {
|
|
42
|
-
await
|
|
42
|
+
await submitCheckoutCommand();
|
|
43
43
|
}
|
|
44
44
|
catch (error) { }
|
|
45
45
|
}
|
|
46
46
|
});
|
|
47
|
-
}, [blockCheckoutBooking, createNotification,
|
|
47
|
+
}, [blockCheckoutBooking, createNotification, submitCheckoutCommand, paymentFlowRef]);
|
|
48
48
|
const status = useMemo(() => {
|
|
49
49
|
if (blockCheckoutBookingStatus === CommandStatus.LOADING ||
|
|
50
50
|
startLegacyBoxCheckoutStatus === "loading" ||
|
|
51
|
-
|
|
51
|
+
submitCheckoutCommandStatus === CommandStatus.LOADING) {
|
|
52
52
|
return "loading";
|
|
53
53
|
}
|
|
54
54
|
if (blockCheckoutBookingStatus === CommandStatus.SUCCESS &&
|
|
55
55
|
startLegacyBoxCheckoutStatus === "success" &&
|
|
56
|
-
|
|
56
|
+
submitCheckoutCommandStatus === CommandStatus.SUCCESS) {
|
|
57
57
|
return "success";
|
|
58
58
|
}
|
|
59
59
|
if (blockCheckoutBookingStatus === CommandStatus.ERROR ||
|
|
60
60
|
startLegacyBoxCheckoutStatus === "error" ||
|
|
61
|
-
|
|
61
|
+
submitCheckoutCommandStatus === CommandStatus.ERROR) {
|
|
62
62
|
onError();
|
|
63
63
|
return "error";
|
|
64
64
|
}
|
|
65
65
|
return "idle";
|
|
66
|
-
}, [blockCheckoutBookingStatus,
|
|
66
|
+
}, [blockCheckoutBookingStatus, submitCheckoutCommandStatus, onError, startLegacyBoxCheckoutStatus]);
|
|
67
67
|
return [submitCheckout, status];
|
|
68
68
|
};
|
|
69
69
|
export { useSubmitCheckout };
|
|
@@ -34,8 +34,8 @@ const CheckoutMiddleware = ({ customerId, loader = React.createElement(Spinner,
|
|
|
34
34
|
if (checkoutPaymentRouteMatch && !checkoutShown.current) {
|
|
35
35
|
return React.createElement(Navigate, { to: `${basePath}/${Routes.HOME}`, replace: true });
|
|
36
36
|
}
|
|
37
|
-
/* Navigate to the feedback if checkout is
|
|
38
|
-
if (checkout?.status === CheckoutStatus.
|
|
37
|
+
/* Navigate to the feedback if checkout is submitted */
|
|
38
|
+
if (checkout?.status === CheckoutStatus.SUBMITTED &&
|
|
39
39
|
!(feedbackRouteMatch || checkoutRouteMatch || checkoutPaymentRouteMatch)) {
|
|
40
40
|
return React.createElement(Navigate, { to: `${basePath}/${Routes.FEEDBACK}`, replace: true });
|
|
41
41
|
}
|
|
@@ -38,7 +38,7 @@ const Checkout = ({ children, customerId, useRedirect }) => {
|
|
|
38
38
|
if (!dependenciesLoaded)
|
|
39
39
|
return React.createElement(Spinner, null);
|
|
40
40
|
return (React.createElement(React.Fragment, null,
|
|
41
|
-
React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" ? HEADER_HEIGHT : 0 },
|
|
41
|
+
React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0 },
|
|
42
42
|
React.createElement(Body, { style: { column: style.bodyColumn } },
|
|
43
43
|
hasReplacedCheckoutItem && (React.createElement(View, { style: style.deliveryBannerContainer },
|
|
44
44
|
React.createElement(DeliveryBanner, null))),
|
|
@@ -30,7 +30,7 @@ const Feedback = ({ customerId }) => {
|
|
|
30
30
|
if (!dependenciesLoaded)
|
|
31
31
|
return React.createElement(Spinner, null);
|
|
32
32
|
return (React.createElement(CheckoutQuestionFeedbackProvider, { feedback: {} },
|
|
33
|
-
React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" ? HEADER_HEIGHT : 0 },
|
|
33
|
+
React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0 },
|
|
34
34
|
React.createElement(Body, { style: { column: style.bodyColumn } },
|
|
35
35
|
React.createElement(CheckoutQuestionsForm, { checkoutQuestions: checkoutQuestions || [], submitButtonDisabled: giveCheckoutFeedbackStatus === CommandStatus.LOADING, onSubmit: handleOnSubmit })))));
|
|
36
36
|
};
|
|
@@ -2,8 +2,7 @@ import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Tex
|
|
|
2
2
|
import { useI18nMessage } from "@lookiero/i18n-react";
|
|
3
3
|
import React, { useCallback, useState } from "react";
|
|
4
4
|
import { View } from "react-native";
|
|
5
|
-
import { SafeAreaView
|
|
6
|
-
} from "react-native-safe-area-context";
|
|
5
|
+
import { SafeAreaView } from "react-native-safe-area-context";
|
|
7
6
|
import { generatePath, useMatch, useNavigate, useParams } from "react-router-native";
|
|
8
7
|
import { ButtonIcon } from "../../../../shared/ui/components/molecules/buttonIcon/ButtonIcon";
|
|
9
8
|
import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
|
|
@@ -66,6 +65,7 @@ const Header = ({ customerId, menu: Menu, style: customStyle }) => {
|
|
|
66
65
|
const itemRouteMatch = useMatch(`${basePath}/${Routes.ITEM}`);
|
|
67
66
|
const itemDetailRouteMatch = useMatch(`${basePath}/${Routes.ITEM_DETAIL}`);
|
|
68
67
|
const checkoutRouteMatch = useMatch(`${basePath}/${Routes.CHECKOUT}`);
|
|
68
|
+
const checkoutPaymentRouteMatch = useMatch(`${basePath}/${Routes.CHECKOUT}/${Routes.CHECKOUT_PAYMENT}`);
|
|
69
69
|
const [menuVisible, setMenuVisible] = useState(false);
|
|
70
70
|
const handleOnOpenMenu = useCallback(() => setMenuVisible(true), []);
|
|
71
71
|
const handleOnCloseMenu = useCallback(() => setMenuVisible(false), []);
|
|
@@ -78,14 +78,14 @@ const Header = ({ customerId, menu: Menu, style: customStyle }) => {
|
|
|
78
78
|
header = React.createElement(ItemDetailHeader, null);
|
|
79
79
|
}
|
|
80
80
|
}
|
|
81
|
-
else if (checkoutRouteMatch) {
|
|
81
|
+
else if (checkoutRouteMatch || checkoutPaymentRouteMatch) {
|
|
82
82
|
header = React.createElement(CheckoutHeader, null);
|
|
83
83
|
}
|
|
84
84
|
else {
|
|
85
85
|
header = React.createElement(DefaultHeader, { onOpenMenu: handleOnOpenMenu });
|
|
86
86
|
}
|
|
87
|
-
return (React.createElement(
|
|
88
|
-
header,
|
|
89
|
-
React.createElement(Menu, {
|
|
87
|
+
return (React.createElement(React.Fragment, null,
|
|
88
|
+
React.createElement(SafeAreaView, { edges: ["top"], style: [style.container, customStyle] }, header),
|
|
89
|
+
React.createElement(Menu, { isVisible: menuVisible, onClose: handleOnCloseMenu })));
|
|
90
90
|
};
|
|
91
91
|
export { Header };
|
|
@@ -136,7 +136,7 @@ const Item = ({ customerId }) => {
|
|
|
136
136
|
return (React.createElement(ReturnQuestionFeedbackProvider, { feedback: checkoutItem.feedbacks || {} },
|
|
137
137
|
React.createElement(SizeWithoutStockModal, { visible: sizeWithoutStockModalVisible, onDismiss: handleOnHideSizeWithoutStockModal }),
|
|
138
138
|
React.createElement(SizeChangeModal, { visible: sizeChangeModalVisible, onDismiss: handleOnHideSizeChangeModal }),
|
|
139
|
-
React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" ? HEADER_HEIGHT : 0 },
|
|
139
|
+
React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0, footer: !customerDecissionMade && (React.createElement(ItemActions, { keepButtonLoading: keepCheckoutItemStatus === CommandStatus.LOADING, productVariantSelected: productVariantSelected, productVariants: bookedProductsVariants?.productVariants || [], returnButtonLoading: returnCheckoutItemStatus === CommandStatus.LOADING, sizeSelectorDisabled: replaceCheckoutItemStatus === CommandStatus.LOADING, onKeep: handleOnKeep, onLayout: handleOnStickyLayout, onReplace: handleOnReplace, onReturn: handleOnReturn, onSizeSelectorPress: handleOnShowSizeWithoutStockModal })) },
|
|
140
140
|
React.createElement(Body, null,
|
|
141
141
|
customerDecissionMade && (React.createElement(CustomerDecissionBanner, { checkoutItemStatus: checkoutItem.status, onPress: handleOnBannerPress })),
|
|
142
142
|
React.createElement(View, { style: [style.container, { paddingBottom: Platform.OS === "web" ? spaceXL : stickyHeight }] },
|
|
@@ -145,7 +145,6 @@ const Item = ({ customerId }) => {
|
|
|
145
145
|
React.createElement(ProductVariantDescription, { brand: brand, color: color, name: name, price: price, size: productVariantSelected.size }),
|
|
146
146
|
checkoutItem.status === CheckoutItemStatus.RETURNED && (React.createElement(View, { style: style.feedbackContainer },
|
|
147
147
|
React.createElement(ReturnQuestionsFeedback, { returnQuestions: returnQuestions || [], onEditFeedback: handleOnEditFeedback })))))),
|
|
148
|
-
!customerDecissionMade && (React.createElement(ItemActions, { keepButtonLoading: keepCheckoutItemStatus === CommandStatus.LOADING, productVariantSelected: productVariantSelected, productVariants: bookedProductsVariants?.productVariants || [], returnButtonLoading: returnCheckoutItemStatus === CommandStatus.LOADING, sizeSelectorDisabled: replaceCheckoutItemStatus === CommandStatus.LOADING, onKeep: handleOnKeep, onLayout: handleOnStickyLayout, onReplace: handleOnReplace, onReturn: handleOnReturn, onSizeSelectorPress: handleOnShowSizeWithoutStockModal })),
|
|
149
148
|
React.createElement(ReturnQuestionsForm, { checkoutItemPrice: checkoutItem.price, productVariant: checkoutItem.productVariant, returnQuestions: returnQuestions || [], visible: returnQuestionsVisible, onClose: handleOnHideReturnQuestions, onSubmit: handleOnSubmit })));
|
|
150
149
|
};
|
|
151
150
|
export { Item };
|
|
@@ -8,7 +8,9 @@ import { ButtonIcon } from "../../../../../../shared/ui/components/molecules/but
|
|
|
8
8
|
import { Price } from "../../../../components/atoms/price/Price";
|
|
9
9
|
import { useMediaImage } from "../../../../hooks/useMediaImage";
|
|
10
10
|
import { COLOR_I18N_PREFIX, I18nMessages } from "../../../../i18n/i18n";
|
|
11
|
+
import { theme } from "../../../../theme/theme";
|
|
11
12
|
import { IMAGE_WIDTH, style } from "./ProductVariant.style";
|
|
13
|
+
const { colorContent } = theme();
|
|
12
14
|
const ProductVariant = ({ media, brand, name, price, size, color, status, discarded, style: customStyle, onPress, }) => {
|
|
13
15
|
const uniqueText = useI18nMessage({ id: I18nMessages.ITEM_UNIQUE });
|
|
14
16
|
const colorLabel = useI18nMessage({ id: color.label, prefix: COLOR_I18N_PREFIX });
|
|
@@ -23,7 +25,7 @@ const ProductVariant = ({ media, brand, name, price, size, color, status, discar
|
|
|
23
25
|
width: IMAGE_WIDTH,
|
|
24
26
|
}),
|
|
25
27
|
} }),
|
|
26
|
-
discarded && (React.createElement(Svg, { preserveAspectRatio: "none", style: style.discarded, testID: "discarded", viewBox: "0 0 100 100" },
|
|
28
|
+
discarded && (React.createElement(Svg, { preserveAspectRatio: "none", stroke: colorContent, style: style.discarded, testID: "discarded", viewBox: "0 0 100 100" },
|
|
27
29
|
React.createElement(Line, { vectorEffect: "non-scaling-stroke", x1: "100", x2: "0", y1: "0", y2: "100" })))),
|
|
28
30
|
React.createElement(View, { style: style.descriptionContainer },
|
|
29
31
|
React.createElement(View, null,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { StyleSheet } from "react-native";
|
|
2
2
|
import { theme } from "../../../../theme/theme";
|
|
3
|
-
const { borderSize,
|
|
3
|
+
const { borderSize, colorGrayscaleL, colorInfo, spaceXS, spaceS, spaceM } = theme();
|
|
4
4
|
const IMAGE_WIDTH = 96;
|
|
5
5
|
const IMAGE_HEIGHT = 120;
|
|
6
6
|
const style = StyleSheet.create({
|
|
@@ -19,7 +19,6 @@ const style = StyleSheet.create({
|
|
|
19
19
|
height: "100%",
|
|
20
20
|
left: 0,
|
|
21
21
|
position: "absolute",
|
|
22
|
-
stroke: colorContent,
|
|
23
22
|
top: 0,
|
|
24
23
|
width: "100%",
|
|
25
24
|
zIndex: 10,
|
|
@@ -43,14 +43,12 @@ const Summary = ({ customerId }) => {
|
|
|
43
43
|
dependenciesLoadedStatuses.includes(fiveItemsDiscountStatus);
|
|
44
44
|
if (!dependenciesLoaded)
|
|
45
45
|
return React.createElement(Spinner, null);
|
|
46
|
-
return (React.createElement(React.
|
|
47
|
-
React.createElement(
|
|
48
|
-
React.createElement(
|
|
49
|
-
|
|
50
|
-
React.createElement(
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
React.createElement(CheckoutItemsTabs, { checkoutItemsKept: checkoutItemsKept || [], checkoutItemsReturned: checkoutItemsReturned || [], onPressItem: handleOnPressItem }))),
|
|
54
|
-
pricing && (React.createElement(StickyPricing, { collapsed: pricingCollapsed, pricing: pricing, totalCheckoutItemsKept: checkoutItemsKept?.length || 0, onLayout: Platform.OS !== "web" ? handleOnPricingLayout : undefined, onPress: handleOnPressPricing, onSubmit: handleOnSubmit }))));
|
|
46
|
+
return (React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0, style: { safeAreaView: style.container }, footer: pricing && (React.createElement(StickyPricing, { collapsed: pricingCollapsed, pricing: pricing, totalCheckoutItemsKept: checkoutItemsKept?.length || 0, onLayout: Platform.OS !== "web" ? handleOnPricingLayout : undefined, onPress: handleOnPressPricing, onSubmit: handleOnSubmit })) },
|
|
47
|
+
React.createElement(Body, { style: { row: { paddingBottom: pricingHeight || spaceXL } } },
|
|
48
|
+
fiveItemsDiscount !== 0 && React.createElement(FiveItemsDiscountBanner, { fiveItemsDiscount: fiveItemsDiscount }),
|
|
49
|
+
React.createElement(View, { style: style.content },
|
|
50
|
+
React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
|
|
51
|
+
React.createElement(Text, { level: 3, style: style.description, body: true }, descriptionText)),
|
|
52
|
+
React.createElement(CheckoutItemsTabs, { checkoutItemsKept: checkoutItemsKept || [], checkoutItemsReturned: checkoutItemsReturned || [], onPressItem: handleOnPressItem }))));
|
|
55
53
|
};
|
|
56
54
|
export { Summary };
|
|
@@ -6,9 +6,11 @@ import React from "react";
|
|
|
6
6
|
import { Pressable, View } from "react-native";
|
|
7
7
|
import { Price } from "../../../../components/atoms/price/Price";
|
|
8
8
|
import { I18nMessages } from "../../../../i18n/i18n";
|
|
9
|
+
import { theme } from "../../../../theme/theme";
|
|
9
10
|
import { style } from "./Pricing.style";
|
|
10
11
|
import { ArrowDown } from "./icons/ArrowDown";
|
|
11
12
|
import { ArrowUp } from "./icons/ArrowUp";
|
|
13
|
+
const { colorGrayscaleS } = theme();
|
|
12
14
|
const PS_SERVICE_FREE_INDICATOR = 100;
|
|
13
15
|
const Row = ({ text, level = 3, children }) => (React.createElement(View, { style: style.row },
|
|
14
16
|
React.createElement(Text, { level: level, style: style.uppercase, action: true }, text),
|
|
@@ -32,7 +34,7 @@ const Pricing = ({ orderTotal, subtotal, balanceDiscount, discount, discountPerc
|
|
|
32
34
|
const collapsedStyle = useSpring({ opacitiy: collapsed ? 1 : 0 });
|
|
33
35
|
const notCollapsedStyle = useSpring({ opacitiy: collapsed ? 0 : 1 });
|
|
34
36
|
return (React.createElement(Pressable, { testID: "pricing", onPress: collapsible ? onPress : null },
|
|
35
|
-
collapsible && (React.createElement(View, { style: style.iconContainer }, collapsed ? (React.createElement(ArrowUp, { style: style.icon, testID: "arrow-up" })) : (React.createElement(ArrowDown, { style: style.icon, testID: "arrow-down" })))),
|
|
37
|
+
collapsible && (React.createElement(View, { style: style.iconContainer }, collapsed ? (React.createElement(ArrowUp, { stroke: colorGrayscaleS, style: style.icon, testID: "arrow-up" })) : (React.createElement(ArrowDown, { stroke: colorGrayscaleS, style: style.icon, testID: "arrow-down" })))),
|
|
36
38
|
collapsed && collapsible ? (React.createElement(animated.View, { style: [style.collapsed, { opacity: collapsedStyle.opacitiy }] },
|
|
37
39
|
React.createElement(View, null,
|
|
38
40
|
React.createElement(Text, { level: 1, style: style.totalCollapsed, detail: true },
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { StyleSheet } from "react-native";
|
|
2
2
|
import { theme } from "../../../../theme/theme";
|
|
3
|
-
const { colorContent,
|
|
3
|
+
const { colorContent, spaceXS, spaceL } = theme();
|
|
4
4
|
const style = StyleSheet.create({
|
|
5
5
|
collapsed: {
|
|
6
6
|
flexDirection: "row",
|
|
@@ -13,7 +13,6 @@ const style = StyleSheet.create({
|
|
|
13
13
|
},
|
|
14
14
|
icon: {
|
|
15
15
|
height: 10,
|
|
16
|
-
stroke: colorGrayscaleS,
|
|
17
16
|
width: 58,
|
|
18
17
|
},
|
|
19
18
|
iconContainer: {
|
|
@@ -1,17 +1,20 @@
|
|
|
1
1
|
import { StyleSheet } from "react-native";
|
|
2
2
|
declare const style: StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
|
|
3
3
|
notifications: {
|
|
4
|
+
flexDirection: "column";
|
|
4
5
|
top: number;
|
|
5
6
|
width: string;
|
|
6
7
|
zIndex: number;
|
|
7
8
|
left: number;
|
|
8
9
|
} | {
|
|
10
|
+
flexDirection: "column";
|
|
9
11
|
top: number;
|
|
10
12
|
width: string;
|
|
11
13
|
zIndex: number;
|
|
12
|
-
position: "
|
|
14
|
+
position: "fixed";
|
|
13
15
|
left: number;
|
|
14
16
|
} | {
|
|
17
|
+
flexDirection: "column";
|
|
15
18
|
top: number;
|
|
16
19
|
width: string;
|
|
17
20
|
zIndex: number;
|
|
@@ -7,10 +7,11 @@ const style = StyleSheet.create({
|
|
|
7
7
|
notifications: {
|
|
8
8
|
left: 0,
|
|
9
9
|
...Platform.select({
|
|
10
|
-
web: { position: "
|
|
10
|
+
web: { position: "fixed" },
|
|
11
11
|
ios: { position: "absolute" },
|
|
12
12
|
android: { position: "absolute" },
|
|
13
13
|
}),
|
|
14
|
+
flexDirection: "column",
|
|
14
15
|
top: 0,
|
|
15
16
|
width: "100%",
|
|
16
17
|
zIndex: 20,
|
|
@@ -23,7 +23,7 @@ const Field = ({ label, isFocused = false, style: customStyle }) => {
|
|
|
23
23
|
},
|
|
24
24
|
customStyle?.field,
|
|
25
25
|
] },
|
|
26
|
-
React.createElement(Text, { level: 1, style: [style.fieldText, customStyle?.fieldText], detail: true }, label),
|
|
26
|
+
React.createElement(Text, { level: 1, numberOfLines: 1, style: [style.fieldText, customStyle?.fieldText], detail: true }, label),
|
|
27
27
|
React.createElement(View, { style: [style.fieldBackground, { opacity: isFocused ? 1 : 0 }] })));
|
|
28
28
|
};
|
|
29
29
|
export { Field };
|
|
@@ -32,6 +32,6 @@ const Input = ({ minHeight = MIN_HEIGHT, maxHeight = MAX_HEIGHT, style: customSt
|
|
|
32
32
|
}, [maxHeight, minHeight, multiline]);
|
|
33
33
|
useLayoutEffect(handleOnContentSizeChangeWeb, [handleOnContentSizeChangeWeb, value]);
|
|
34
34
|
const textInputRef = useRef(null);
|
|
35
|
-
return (React.createElement(TextInput, { ...restOfProps, ref: textInputRef, multiline: multiline, placeholderTextColor: placeholderTextColor, style: [style.input, customStyle, { height }], testID: "input", textAlignVertical: "top", value: value, onChange: onChange, onContentSizeChange: handleOnContentSizeChange }));
|
|
35
|
+
return (React.createElement(TextInput, { ...restOfProps, ref: textInputRef, multiline: multiline, numberOfLines: !!multiline ? undefined : 1, placeholderTextColor: placeholderTextColor, style: [style.input, customStyle, { height }], testID: "input", textAlignVertical: "top", value: value, onChange: onChange, onContentSizeChange: handleOnContentSizeChange }));
|
|
36
36
|
};
|
|
37
37
|
export { Input };
|
|
@@ -8,12 +8,9 @@ declare const style: {
|
|
|
8
8
|
fontFamily: string;
|
|
9
9
|
fontSize: number;
|
|
10
10
|
letterSpacing: number;
|
|
11
|
-
outlineStyle: string;
|
|
12
11
|
paddingBottom: number;
|
|
13
12
|
paddingHorizontal: number;
|
|
14
13
|
paddingTop: number;
|
|
15
|
-
textOverflow: string;
|
|
16
|
-
whiteSpace: string;
|
|
17
14
|
};
|
|
18
15
|
};
|
|
19
16
|
export { style, borderSize, paddingVertical };
|
|
@@ -10,12 +10,9 @@ const style = StyleSheet.create({
|
|
|
10
10
|
fontFamily: fontMap.Body,
|
|
11
11
|
fontSize: fontBodySize3,
|
|
12
12
|
letterSpacing: fontBodyLetterSpacing3,
|
|
13
|
-
outlineStyle: "none",
|
|
14
13
|
paddingBottom: paddingVertical,
|
|
15
14
|
paddingHorizontal: spaceM,
|
|
16
15
|
paddingTop: paddingVertical,
|
|
17
|
-
textOverflow: "ellipsis",
|
|
18
|
-
whiteSpace: "nowrap",
|
|
19
16
|
...Platform.select({
|
|
20
17
|
web: {
|
|
21
18
|
lineHeight: fontBodyHeight3,
|
|
@@ -1,19 +1,18 @@
|
|
|
1
1
|
import { animated, useTransition } from "@react-spring/native";
|
|
2
|
-
import React, { useCallback, useState
|
|
2
|
+
import React, { useCallback, useState } from "react";
|
|
3
3
|
import { View } from "react-native";
|
|
4
4
|
import { style } from "./Stack.style";
|
|
5
5
|
const Stack = ({ children, style: customStyle }) => {
|
|
6
6
|
const [heights, setHeights] = useState({});
|
|
7
7
|
const handleOnLayout = useCallback((itemKey) => ({ nativeEvent: { layout } }) => setHeights((heights) => ({ ...heights, [itemKey]: layout.height })), []);
|
|
8
|
-
const
|
|
9
|
-
const inState = useCallback((height = 0) => ({ opacity: 1, height, translateY: 0 }), []);
|
|
8
|
+
const inState = useCallback((height) => ({ opacity: 1, height, translateY: 0 }), []);
|
|
10
9
|
const transitions = useTransition(children, {
|
|
11
10
|
keys: (item) => `${item.key}`,
|
|
12
11
|
native: true,
|
|
13
|
-
from:
|
|
12
|
+
from: { opacity: 0, height: undefined, translateY: -50 },
|
|
14
13
|
enter: (item) => inState(heights[item.key]),
|
|
15
14
|
update: (item) => inState(heights[item.key]),
|
|
16
|
-
leave:
|
|
15
|
+
leave: { opacity: 0, height: 0, translateY: -50 },
|
|
17
16
|
});
|
|
18
17
|
return (React.createElement(View, { pointerEvents: "box-none", style: [style.stack, customStyle] }, transitions(({ opacity, height, translateY }, item, { phase }) => (React.createElement(animated.View, { key: item.key, testID: "stack-item", style: [
|
|
19
18
|
{
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { StyleSheet } from "react-native";
|
|
2
2
|
declare const style: StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
|
|
3
3
|
sticky: {
|
|
4
|
+
zIndex: number;
|
|
4
5
|
backgroundColor: string;
|
|
5
6
|
bottom: number;
|
|
6
7
|
elevation: number;
|
|
@@ -14,6 +15,7 @@ declare const style: StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
|
|
|
14
15
|
shadowRadius: number;
|
|
15
16
|
width: string;
|
|
16
17
|
} | {
|
|
18
|
+
zIndex: number;
|
|
17
19
|
position: "sticky";
|
|
18
20
|
backgroundColor: string;
|
|
19
21
|
bottom: number;
|
|
@@ -28,6 +30,7 @@ declare const style: StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
|
|
|
28
30
|
shadowRadius: number;
|
|
29
31
|
width: string;
|
|
30
32
|
} | {
|
|
33
|
+
zIndex: number;
|
|
31
34
|
position: "absolute";
|
|
32
35
|
backgroundColor: string;
|
|
33
36
|
bottom: number;
|
|
@@ -18,16 +18,11 @@ const style = StyleSheet.create({
|
|
|
18
18
|
shadowRadius: elevationRadius,
|
|
19
19
|
width: "100%",
|
|
20
20
|
...Platform.select({
|
|
21
|
-
web: {
|
|
22
|
-
|
|
23
|
-
},
|
|
24
|
-
ios: {
|
|
25
|
-
position: "absolute",
|
|
26
|
-
},
|
|
27
|
-
android: {
|
|
28
|
-
position: "absolute",
|
|
29
|
-
},
|
|
21
|
+
web: { position: "sticky" },
|
|
22
|
+
ios: { position: "absolute" },
|
|
23
|
+
android: { position: "absolute" },
|
|
30
24
|
}),
|
|
25
|
+
zIndex: 0,
|
|
31
26
|
},
|
|
32
27
|
});
|
|
33
28
|
export { style };
|
|
@@ -8,6 +8,7 @@ import { Input } from "../../atoms/input/Input";
|
|
|
8
8
|
import { style } from "./InputField.style";
|
|
9
9
|
const { colorBase, colorContent, colorGrayscaleL, colorPrimary, spaceM, iconSize } = theme();
|
|
10
10
|
const inputPaddingRightWithIcon = iconSize + spaceM * 2;
|
|
11
|
+
const inputPaddingRightWithoutIcon = spaceM * 2;
|
|
11
12
|
const InputField = ({ label, placeholder, value, multiline = false, minHeight, error, style: customStyle, onChange = () => void 0, icon, ...inputRestProps }) => {
|
|
12
13
|
const [isFocused, setIsFocused] = useState(false);
|
|
13
14
|
const handleOnChange = useCallback((text) => onChange(text), [onChange]);
|
|
@@ -17,7 +18,11 @@ const InputField = ({ label, placeholder, value, multiline = false, minHeight, e
|
|
|
17
18
|
return (React.createElement(View, { style: customStyle?.inputField, testID: "input-field" },
|
|
18
19
|
React.createElement(Field, { isFocused: isFocused || !!value, label: label, style: {
|
|
19
20
|
field: [style.field, customStyle?.field],
|
|
20
|
-
fieldText: [
|
|
21
|
+
fieldText: [
|
|
22
|
+
{ color },
|
|
23
|
+
{ paddingRight: !!icon ? inputPaddingRightWithIcon : inputPaddingRightWithoutIcon },
|
|
24
|
+
customStyle?.fieldText,
|
|
25
|
+
],
|
|
21
26
|
} }),
|
|
22
27
|
React.createElement(Input, { minHeight: minHeight, multiline: multiline, placeholder: placeholder, placeholderTextColor: isFocused ? colorGrayscaleL : colorBase, style: [!!icon && { paddingRight: inputPaddingRightWithIcon }, { borderColor: color }, customStyle?.input], value: value, onBlur: handleOnBlur, onChangeText: handleOnChange, onFocus: handleOnFocus, ...inputRestProps }),
|
|
23
28
|
!!icon && React.createElement(Icon, { name: icon, style: [style.icon, { color }, customStyle?.icon] }),
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lookiero/checkout",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.8",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"types": "dist/index.d.ts",
|
|
6
6
|
"files": [
|
|
@@ -53,6 +53,7 @@
|
|
|
53
53
|
"react": "^18.0.0",
|
|
54
54
|
"react-dom": "^18.0.0",
|
|
55
55
|
"react-native": "^0.70.6",
|
|
56
|
+
"react-native-get-random-values": "^1.8.0",
|
|
56
57
|
"react-native-web": "^0.18.9",
|
|
57
58
|
"react-router-dom": "^6.4.5",
|
|
58
59
|
"react-router-native": "^6.4.5"
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { Command } from "@lookiero/messaging";
|
|
2
|
-
declare const MARK_CHECKOUT_AS_PAID = "mark_checkout_as_paid";
|
|
3
|
-
interface MarkCheckoutAsPaidPayload {
|
|
4
|
-
readonly aggregateId: string;
|
|
5
|
-
}
|
|
6
|
-
interface MarkCheckoutAsPaid extends Command<typeof MARK_CHECKOUT_AS_PAID>, MarkCheckoutAsPaidPayload {
|
|
7
|
-
}
|
|
8
|
-
interface MarkCheckoutAsPaidFunction {
|
|
9
|
-
(payload: MarkCheckoutAsPaidPayload): MarkCheckoutAsPaid;
|
|
10
|
-
}
|
|
11
|
-
declare const markCheckoutAsPaid: MarkCheckoutAsPaidFunction;
|
|
12
|
-
export type { MarkCheckoutAsPaid };
|
|
13
|
-
export { MARK_CHECKOUT_AS_PAID, markCheckoutAsPaid };
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { DomainEvent } from "@lookiero/messaging";
|
|
2
|
-
declare const CHECKOUT_PAID = "checkout_paid";
|
|
3
|
-
interface CheckoutPaidPayload {
|
|
4
|
-
readonly aggregateId: string;
|
|
5
|
-
}
|
|
6
|
-
interface CheckoutPaid extends DomainEvent<typeof CHECKOUT_PAID>, CheckoutPaidPayload {
|
|
7
|
-
}
|
|
8
|
-
interface CheckoutPaidFunction {
|
|
9
|
-
(payload: CheckoutPaidPayload): CheckoutPaid;
|
|
10
|
-
}
|
|
11
|
-
declare const checkoutPaid: CheckoutPaidFunction;
|
|
12
|
-
export type { CheckoutPaid };
|
|
13
|
-
export { CHECKOUT_PAID, checkoutPaid };
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { CHECKOUT_PAID } from "../../../../domain/checkout/model/checkoutPaid";
|
|
2
|
-
const isCheckoutPaid = (event) => event.name === CHECKOUT_PAID;
|
|
3
|
-
const httpCheckoutsMarkAsPaid = ({ httpPost }) => async ({ aggregateId, domainEvents }) => {
|
|
4
|
-
const checkoutPaid = domainEvents.find(isCheckoutPaid);
|
|
5
|
-
if (!checkoutPaid) {
|
|
6
|
-
return;
|
|
7
|
-
}
|
|
8
|
-
await httpPost({
|
|
9
|
-
endpoint: "/mark-checkout-as-paid",
|
|
10
|
-
body: { checkoutId: aggregateId },
|
|
11
|
-
});
|
|
12
|
-
};
|
|
13
|
-
export { httpCheckoutsMarkAsPaid };
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { CommandStatus } from "@lookiero/messaging-react";
|
|
2
|
-
interface MarkAsPaidFunction {
|
|
3
|
-
(): Promise<void>;
|
|
4
|
-
}
|
|
5
|
-
type UseMarkCheckoutAsPaid = [markAsPaid: MarkAsPaidFunction, status: CommandStatus];
|
|
6
|
-
interface UseMarkCheckoutAsPaidFunctionArgs {
|
|
7
|
-
readonly checkoutId?: string;
|
|
8
|
-
}
|
|
9
|
-
interface UseMarkCheckoutAsPaidFunction {
|
|
10
|
-
(args: UseMarkCheckoutAsPaidFunctionArgs): UseMarkCheckoutAsPaid;
|
|
11
|
-
}
|
|
12
|
-
declare const useMarkCheckoutAsPaid: UseMarkCheckoutAsPaidFunction;
|
|
13
|
-
export { useMarkCheckoutAsPaid };
|