@lookiero/checkout 2.0.0-beta.2 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/dist/shared/notifications/infrastructure/ui/components/modalNotifications/ModalNotificationItem.js +2 -14
  2. package/package.json +1 -1
  3. package/dist/domain/checkoutBooking/event/createNotificationWhenCheckoutBookingExpired.d.ts +0 -6
  4. package/dist/domain/checkoutBooking/event/createNotificationWhenCheckoutBookingExpired.js +0 -13
  5. package/dist/infrastructure/domain/uiSetting/react/useIncrementIntroShownCount.d.ts +0 -10
  6. package/dist/infrastructure/domain/uiSetting/react/useIncrementIntroShownCount.js +0 -11
  7. package/dist/infrastructure/projection/uiSetting/react/useShouldIntroBeShown.d.ts +0 -6
  8. package/dist/infrastructure/projection/uiSetting/react/useShouldIntroBeShown.js +0 -7
  9. package/dist/infrastructure/projection/uiSetting/react/useViewIntroShownCount.d.ts +0 -6
  10. package/dist/infrastructure/projection/uiSetting/react/useViewIntroShownCount.js +0 -9
  11. package/dist/infrastructure/ui/hooks/usePaymentInstrumentUpdateEvents.d.ts +0 -2
  12. package/dist/infrastructure/ui/hooks/usePaymentInstrumentUpdateEvents.js +0 -28
  13. package/dist/infrastructure/ui/views/checkout/components/checkoutSuccessModal/CheckoutSuccessModal.d.ts +0 -7
  14. package/dist/infrastructure/ui/views/checkout/components/checkoutSuccessModal/CheckoutSuccessModal.js +0 -25
  15. package/dist/infrastructure/ui/views/checkout/components/checkoutSuccessModal/CheckoutSuccessModal.style.d.ts +0 -16
  16. package/dist/infrastructure/ui/views/checkout/components/checkoutSuccessModal/CheckoutSuccessModal.style.js +0 -19
  17. package/dist/infrastructure/ui/views/intro/Intro.d.ts +0 -6
  18. package/dist/infrastructure/ui/views/intro/Intro.js +0 -52
  19. package/dist/infrastructure/ui/views/intro/Intro.style.d.ts +0 -52
  20. package/dist/infrastructure/ui/views/intro/Intro.style.js +0 -55
  21. package/dist/infrastructure/ui/views/item/Item.style.d.ts +0 -15
  22. package/dist/infrastructure/ui/views/item/Item.style.js +0 -18
  23. package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.d.ts +0 -26
  24. package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.js +0 -44
  25. package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.style.d.ts +0 -45
  26. package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.style.js +0 -53
  27. package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.d.ts +0 -7
  28. package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.js +0 -25
  29. package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.style.d.ts +0 -16
  30. package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.style.js +0 -19
  31. package/dist/shared/notifications/domain/notification/command/createNotification.d.ts +0 -17
  32. package/dist/shared/notifications/domain/notification/command/createNotification.js +0 -7
  33. package/dist/shared/notifications/infrastructure/domain/notification/react/useCreateNotification.d.ts +0 -21
  34. package/dist/shared/notifications/infrastructure/domain/notification/react/useCreateNotification.js +0 -22
  35. package/dist/shared/notifications/infrastructure/ui/components/NotificationItem.d.ts +0 -12
  36. package/dist/shared/notifications/infrastructure/ui/components/NotificationItem.js +0 -24
  37. package/dist/shared/notifications/infrastructure/ui/components/Notifications.d.ts +0 -9
  38. package/dist/shared/notifications/infrastructure/ui/components/Notifications.js +0 -20
  39. package/dist/shared/notifications/infrastructure/ui/components/Notifications.style.d.ts +0 -36
  40. package/dist/shared/notifications/infrastructure/ui/components/Notifications.style.js +0 -31
  41. package/dist/shared/tracking/infrastructure/usePageView.d.ts +0 -13
  42. package/dist/shared/tracking/infrastructure/usePageView.js +0 -27
  43. package/dist/shared/ui/components/atoms/error/Error.style.d.ts +0 -6
  44. package/dist/shared/ui/components/atoms/error/Error.style.js +0 -9
@@ -1,6 +1,6 @@
1
1
  import { ALIGN, Button, Text } from "@lookiero/aurora";
2
2
  import { useI18nMessage } from "@lookiero/i18n-react";
3
- import React, { useEffect, useRef } from "react";
3
+ import React from "react";
4
4
  import { useCallback } from "react";
5
5
  import { View } from "react-native";
6
6
  import { Modal } from "../../../../../ui/components/layouts/modal/Modal";
@@ -9,19 +9,7 @@ const ModalNotificationItem = ({ visible, notification, onRemove, testID = "moda
9
9
  const titleText = useI18nMessage({ id: notification.titleI18nKey });
10
10
  const bodyText = useI18nMessage({ id: notification.bodyI18nKey });
11
11
  const acceptText = useI18nMessage({ id: notification.acceptI18nKey });
12
- const modalNotificationClosedRef = useRef(false);
13
- const handleOnClose = useCallback(() => {
14
- onRemove(notification.id);
15
- modalNotificationClosedRef.current = true;
16
- }, [notification.id, onRemove]);
17
- /**
18
- * Remove modal notification when this view is unmounted
19
- */
20
- useEffect(() => () => {
21
- if (!modalNotificationClosedRef.current) {
22
- onRemove(notification.id);
23
- }
24
- }, [notification.id, onRemove]);
12
+ const handleOnClose = useCallback(() => onRemove(notification.id), [notification.id, onRemove]);
25
13
  return (React.createElement(Modal, { testID: testID, visible: visible, onClose: handleOnClose },
26
14
  React.createElement(View, { style: style.modal },
27
15
  React.createElement(Text, { align: ALIGN.CENTER, level: 1 }, titleText),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lookiero/checkout",
3
- "version": "2.0.0-beta.2",
3
+ "version": "2.0.0",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "files": [
@@ -1,6 +0,0 @@
1
- import { ProcessManagerFunction } from "@lookiero/messaging";
2
- import { CheckoutBookingExpired } from "../model/checkoutBookingExpired";
3
- interface CreateNotificationWhenCheckoutBookingExpiredFunction extends ProcessManagerFunction<CheckoutBookingExpired> {
4
- }
5
- declare const createNotificationWhenCheckoutBookingExpired: CreateNotificationWhenCheckoutBookingExpiredFunction;
6
- export { createNotificationWhenCheckoutBookingExpired };
@@ -1,13 +0,0 @@
1
- import { v4 as uuid } from "uuid";
2
- import { I18nMessages } from "../../../infrastructure/ui/i18n/i18n";
3
- import { createNotification } from "../../../shared/notifications/domain/notification/command/createNotification";
4
- import { NotificationLevel } from "../../../shared/notifications/domain/notification/model/notification";
5
- const createNotificationWhenCheckoutBookingExpired = ({ commandBus }) => async () => {
6
- await commandBus(createNotification({
7
- aggregateId: uuid(),
8
- level: NotificationLevel.ERROR,
9
- titleI18nKey: undefined,
10
- bodyI18nKey: I18nMessages.CHECKOUT_TOAST_BOOKING_EXPIRED,
11
- }));
12
- };
13
- export { createNotificationWhenCheckoutBookingExpired };
@@ -1,10 +0,0 @@
1
- import { CommandStatus } from "@lookiero/messaging-react";
2
- interface IncrementIntroShownCountFunction {
3
- (): Promise<void>;
4
- }
5
- type UseIncrementIntroShownCount = [incrementIntroShownCount: IncrementIntroShownCountFunction, status: CommandStatus];
6
- interface UseIncrementIntroShownCountFunction {
7
- (): UseIncrementIntroShownCount;
8
- }
9
- declare const useIncrementIntroShownCount: UseIncrementIntroShownCountFunction;
10
- export { useIncrementIntroShownCount };
@@ -1,11 +0,0 @@
1
- import { useCallback } from "react";
2
- import { useViewIntroShownCount } from "../../../projection/uiSetting/react/useViewIntroShownCount";
3
- import { UISettings } from "../../../ui/settings/UISettings";
4
- import { useUpdateUiSetting } from "./useUpdateUiSetting";
5
- const useIncrementIntroShownCount = () => {
6
- const [update, status] = useUpdateUiSetting();
7
- const [introShownCount] = useViewIntroShownCount();
8
- const incrementIntroShownCount = useCallback(() => update({ key: UISettings.INTRO_SHOWN_COUNT, value: introShownCount + 1 }), [introShownCount, update]);
9
- return [incrementIntroShownCount, status];
10
- };
11
- export { useIncrementIntroShownCount };
@@ -1,6 +0,0 @@
1
- import { QueryStatus } from "@lookiero/messaging-react";
2
- interface UseShouldIntroBeShownFunction {
3
- (): [boolean, QueryStatus];
4
- }
5
- declare const useShouldIntroBeShown: UseShouldIntroBeShownFunction;
6
- export { useShouldIntroBeShown };
@@ -1,7 +0,0 @@
1
- import { useViewIntroShownCount } from "./useViewIntroShownCount";
2
- const MAX_INTRO_SHOWN_COUNT = 2;
3
- const useShouldIntroBeShown = () => {
4
- const [introShownCount, introShownCountStatus] = useViewIntroShownCount();
5
- return [introShownCount < MAX_INTRO_SHOWN_COUNT, introShownCountStatus];
6
- };
7
- export { useShouldIntroBeShown };
@@ -1,6 +0,0 @@
1
- import { QueryStatus } from "@lookiero/messaging-react";
2
- interface UseViewIntroShownCountFunction {
3
- (): [number, QueryStatus];
4
- }
5
- declare const useViewIntroShownCount: UseViewIntroShownCountFunction;
6
- export { useViewIntroShownCount };
@@ -1,9 +0,0 @@
1
- import { UISettings } from "../../../ui/settings/UISettings";
2
- import { useViewUiSettingByKey } from "./useViewUiSettingByKey";
3
- const useViewIntroShownCount = () => {
4
- const [introShownCount, introShownCountStatus] = useViewUiSettingByKey({
5
- key: UISettings.INTRO_SHOWN_COUNT,
6
- });
7
- return [introShownCount?.value || 0, introShownCountStatus];
8
- };
9
- export { useViewIntroShownCount };
@@ -1,2 +0,0 @@
1
- declare const usePaymentInstrumentUpdateEvents: () => void;
2
- export { usePaymentInstrumentUpdateEvents };
@@ -1,28 +0,0 @@
1
- import { useEvent } from "@lookiero/event";
2
- import { useCallback, useEffect } from "react";
3
- import { useCreateNotification } from "../../../shared/notifications";
4
- import { MESSAGING_CONTEXT_ID } from "../../delivery/baseBootstrap";
5
- import { I18nMessages } from "../i18n/i18n";
6
- import { useToast } from "./useToast";
7
- const PAYMENT_ERROR = "ERROR";
8
- const PAYMENT_SUCCESS = "PAYMENT_INSTRUMENT_UPDATED";
9
- const usePaymentInstrumentUpdateEvents = () => {
10
- const { subscribe, unsubscribe } = useEvent();
11
- const { showError, showSuccess } = useToast();
12
- const [createNotification] = useCreateNotification({ contextId: MESSAGING_CONTEXT_ID });
13
- const onSuccess = useCallback(({ message }) => showSuccess({ message: message.id }), [showSuccess]);
14
- const onError = useCallback(({ error }) => {
15
- if (error.toaster) {
16
- showError({ message: error.toaster.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR });
17
- }
18
- }, [showError]);
19
- useEffect(() => {
20
- subscribe({ event: PAYMENT_ERROR }, onError);
21
- subscribe({ event: PAYMENT_SUCCESS }, onSuccess);
22
- return () => {
23
- unsubscribe({ event: PAYMENT_ERROR }, onError);
24
- unsubscribe({ event: PAYMENT_SUCCESS }, onSuccess);
25
- };
26
- }, [subscribe, unsubscribe, createNotification, onError, onSuccess]);
27
- };
28
- export { usePaymentInstrumentUpdateEvents };
@@ -1,7 +0,0 @@
1
- import { FC } from "react";
2
- interface CheckoutSuccessModalProps {
3
- readonly visible: boolean;
4
- readonly onDismiss: () => void;
5
- }
6
- declare const CheckoutSuccessModal: FC<CheckoutSuccessModalProps>;
7
- export { CheckoutSuccessModal };
@@ -1,25 +0,0 @@
1
- import { Button } from "@lookiero/aurora-next/build/components/atoms/Button/Button";
2
- import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
3
- import { useI18nMessage } from "@lookiero/i18n-react";
4
- import React from "react";
5
- import { View } from "react-native";
6
- import { Modal } from "../../../../../../shared/ui/components/layouts/modal/Modal";
7
- import { I18nMessages } from "../../../../i18n/i18n";
8
- import { style } from "./CheckoutSuccessModal.style";
9
- const CheckoutSuccessModal = ({ visible, onDismiss }) => {
10
- const titleText = useI18nMessage({ id: I18nMessages.CHECKOUT_SUCCESS_MODAL_TITLE });
11
- const descriptionText = useI18nMessage({ id: I18nMessages.CHECKOUT_SUCCESS_MODAL_DESCRIPTION });
12
- const buttonText = useI18nMessage({ id: I18nMessages.CHECKOUT_SUCCESS_MODAL_BUTTON });
13
- return (React.createElement(Modal, { visible: visible, onClose: onDismiss },
14
- React.createElement(View, { style: style.modal },
15
- React.createElement(Text, { level: 1, style: style.modalTitle, body: true }, titleText),
16
- React.createElement(Text, { level: 3, style: style.modalDescription, body: true }, descriptionText),
17
- React.createElement(Button
18
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
19
- // @ts-ignore
20
- , {
21
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
22
- // @ts-ignore
23
- style: style.button, onPress: onDismiss }, buttonText))));
24
- };
25
- export { CheckoutSuccessModal };
@@ -1,16 +0,0 @@
1
- declare const style: {
2
- button: {
3
- flex: number;
4
- };
5
- modal: {
6
- padding: number;
7
- };
8
- modalDescription: {
9
- marginVertical: number;
10
- textAlign: "center";
11
- };
12
- modalTitle: {
13
- textAlign: "center";
14
- };
15
- };
16
- export { style };
@@ -1,19 +0,0 @@
1
- import { StyleSheet } from "react-native";
2
- import { theme } from "../../../../theme/theme";
3
- const { spaceXL } = theme();
4
- const style = StyleSheet.create({
5
- button: {
6
- flex: 0,
7
- },
8
- modal: {
9
- padding: spaceXL,
10
- },
11
- modalDescription: {
12
- marginVertical: spaceXL,
13
- textAlign: "center",
14
- },
15
- modalTitle: {
16
- textAlign: "center",
17
- },
18
- });
19
- export { style };
@@ -1,6 +0,0 @@
1
- import { FC } from "react";
2
- type IntroProps = {
3
- readonly customerId: string;
4
- };
5
- declare const Intro: FC<IntroProps>;
6
- export { Intro };
@@ -1,52 +0,0 @@
1
- import { Button } from "@lookiero/aurora-next/build/components/atoms/Button/Button";
2
- import { Icon } from "@lookiero/aurora-next/build/components/primitives/Icon/Icon";
3
- import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
4
- import { useI18nMessage } from "@lookiero/i18n-react";
5
- import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
6
- import React from "react";
7
- import { Platform, View } from "react-native";
8
- import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
9
- import { useIncrementIntroShownCount } from "../../../domain/uiSetting/react/useIncrementIntroShownCount";
10
- import { useViewFiveItemsDiscountByCustomerId } from "../../../projection/checkout/react/useViewFiveItemsDiscountByCustomerId";
11
- import { Body } from "../../components/layouts/body/Body";
12
- import { SafeAreaScrollView } from "../../components/templates/SafeAreaScrollView";
13
- import { I18nMessages } from "../../i18n/i18n";
14
- import { HEADER_HEIGHT } from "../navigation/components/header/Header.style";
15
- import { style } from "./Intro.style";
16
- const Bullet = ({ text }) => (React.createElement(View, { style: style.bullet },
17
- React.createElement(Icon, { name: "rounded-tick", style: style.tickIcon }),
18
- React.createElement(Text, { level: 2, detail: true }, text)));
19
- const Intro = ({ customerId }) => {
20
- const titleText = useI18nMessage({ id: I18nMessages.INTRO_TITLE });
21
- const subTitleText = useI18nMessage({ id: I18nMessages.INTRO_SUBTITLE });
22
- const discountText = useI18nMessage({ id: I18nMessages.INTRO_DISCOUNT });
23
- const bulletOneText = useI18nMessage({ id: I18nMessages.INTRO_BULLET_ONE });
24
- const bulletTwoText = useI18nMessage({ id: I18nMessages.INTRO_BULLET_TWO });
25
- const bulletThreeText = useI18nMessage({ id: I18nMessages.INTRO_BULLET_THREE });
26
- const buttonText = useI18nMessage({ id: I18nMessages.INTRO_BUTTON });
27
- const [fiveItemsDiscount, fiveItemsDiscountStatus] = useViewFiveItemsDiscountByCustomerId({
28
- customerId,
29
- });
30
- const [incrementIntroShownCount, incrementIntroShownCountStatus] = useIncrementIntroShownCount();
31
- if (fiveItemsDiscountStatus === QueryStatus.LOADING)
32
- return React.createElement(Spinner, null);
33
- return (React.createElement(SafeAreaScrollView, { scrollerPaddingTop: Platform.OS === "web" || Platform.OS === "android" ? HEADER_HEIGHT : 0 },
34
- React.createElement(Body, { style: { column: style.bodyColumn } },
35
- React.createElement(View, { style: style.intro },
36
- React.createElement(View, { style: style.content },
37
- React.createElement(Text, { level: 3, style: style.title, heading: true }, titleText),
38
- React.createElement(Text, { level: 3, style: style.subtitle, body: true }, subTitleText),
39
- fiveItemsDiscount !== 0 && (React.createElement(View, { style: style.discountContainer },
40
- React.createElement(View, { style: style.discount },
41
- React.createElement(Text, { level: 2, heading: true },
42
- "- ",
43
- fiveItemsDiscount),
44
- React.createElement(Text, { level: 3, style: style.percentage, heading: true }, "%")),
45
- React.createElement(Text, { level: 3, body: true }, discountText))),
46
- React.createElement(View, { style: style.description },
47
- React.createElement(Bullet, { text: bulletOneText }),
48
- React.createElement(Bullet, { text: bulletTwoText }),
49
- React.createElement(Bullet, { text: bulletThreeText }))),
50
- React.createElement(Button, { disabled: incrementIntroShownCountStatus === CommandStatus.LOADING, onPress: incrementIntroShownCount }, buttonText)))));
51
- };
52
- export { Intro };
@@ -1,52 +0,0 @@
1
- declare const style: {
2
- bodyColumn: {
3
- paddingHorizontal: number;
4
- };
5
- bullet: {
6
- alignItems: "center";
7
- flexDirection: "row";
8
- marginVertical: number;
9
- };
10
- content: {
11
- alignItems: "center";
12
- };
13
- description: {
14
- borderWidth: number;
15
- marginBottom: number;
16
- padding: number;
17
- width: string;
18
- };
19
- discount: {
20
- alignItems: "flex-end";
21
- flexDirection: "row";
22
- justifyContent: "center";
23
- marginBottom: number;
24
- };
25
- discountContainer: {
26
- alignItems: "center";
27
- backgroundColor: string;
28
- marginBottom: number;
29
- padding: number;
30
- textAlign: "center";
31
- width: string;
32
- };
33
- intro: {
34
- flex: number;
35
- justifyContent: "space-between";
36
- };
37
- percentage: {
38
- marginLeft: number;
39
- };
40
- subtitle: {
41
- marginBottom: number;
42
- textAlign: "center";
43
- };
44
- tickIcon: {
45
- marginRight: number;
46
- };
47
- title: {
48
- marginBottom: number;
49
- textAlign: "center";
50
- };
51
- };
52
- export { style };
@@ -1,55 +0,0 @@
1
- import { StyleSheet } from "react-native";
2
- import { theme } from "../../theme/theme";
3
- const { borderSize, colorAccent, spaceXS, spaceS, spaceM, spaceL, spaceXL } = theme();
4
- const style = StyleSheet.create({
5
- bodyColumn: {
6
- paddingHorizontal: spaceXL,
7
- },
8
- bullet: {
9
- alignItems: "center",
10
- flexDirection: "row",
11
- marginVertical: spaceS,
12
- },
13
- content: {
14
- alignItems: "center",
15
- },
16
- description: {
17
- borderWidth: borderSize,
18
- marginBottom: spaceXL,
19
- padding: spaceM,
20
- width: "100%",
21
- },
22
- discount: {
23
- alignItems: "flex-end",
24
- flexDirection: "row",
25
- justifyContent: "center",
26
- marginBottom: spaceS,
27
- },
28
- discountContainer: {
29
- alignItems: "center",
30
- backgroundColor: colorAccent,
31
- marginBottom: spaceL,
32
- padding: spaceM,
33
- textAlign: "center",
34
- width: "100%",
35
- },
36
- intro: {
37
- flex: 1,
38
- justifyContent: "space-between",
39
- },
40
- percentage: {
41
- marginLeft: spaceXS,
42
- },
43
- subtitle: {
44
- marginBottom: spaceXL,
45
- textAlign: "center",
46
- },
47
- tickIcon: {
48
- marginRight: spaceS,
49
- },
50
- title: {
51
- marginBottom: spaceM,
52
- textAlign: "center",
53
- },
54
- });
55
- export { style };
@@ -1,15 +0,0 @@
1
- declare const style: {
2
- content: {
3
- paddingHorizontal: number;
4
- };
5
- feedbackContainer: {
6
- borderTopColor: string;
7
- borderTopWidth: number;
8
- marginVertical: number;
9
- };
10
- sliderContainer: {
11
- marginBottom: number;
12
- minHeight: number;
13
- };
14
- };
15
- export { style };
@@ -1,18 +0,0 @@
1
- import { StyleSheet } from "react-native";
2
- import { theme } from "../../theme/theme";
3
- const { borderSize, colorGrayscaleM, spaceXL } = theme();
4
- const style = StyleSheet.create({
5
- content: {
6
- paddingHorizontal: spaceXL,
7
- },
8
- feedbackContainer: {
9
- borderTopColor: colorGrayscaleM,
10
- borderTopWidth: borderSize,
11
- marginVertical: spaceXL,
12
- },
13
- sliderContainer: {
14
- marginBottom: spaceXL,
15
- minHeight: 500,
16
- },
17
- });
18
- export { style };
@@ -1,26 +0,0 @@
1
- import { FC } from "react";
2
- import { ImageStyle, StyleProp } from "react-native";
3
- import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
4
- import { ColorProjection, MediaProjection } from "../../../../../../projection/checkoutItem/checkoutItem";
5
- import { Country } from "../../../../../../projection/shared/country";
6
- import { PriceProjection } from "../../../../../../projection/shared/price";
7
- import { SizeProjection } from "../../../../../../projection/shared/size";
8
- interface ProductVariantStyle {
9
- readonly image: StyleProp<ImageStyle>;
10
- }
11
- interface ProductVariantProps {
12
- readonly media: MediaProjection[];
13
- readonly brand: string;
14
- readonly name: string;
15
- readonly price: PriceProjection;
16
- readonly size: SizeProjection;
17
- readonly color: ColorProjection;
18
- readonly status?: CheckoutItemStatus;
19
- readonly discarded?: boolean;
20
- readonly country: Country;
21
- readonly style?: Partial<ProductVariantStyle>;
22
- readonly onPress?: () => void;
23
- }
24
- declare const ProductVariant: FC<ProductVariantProps>;
25
- export type { ProductVariantStyle };
26
- export { ProductVariant };
@@ -1,44 +0,0 @@
1
- import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
2
- import { useI18nMessage } from "@lookiero/i18n-react";
3
- import React from "react";
4
- import { Image, Pressable, View } from "react-native";
5
- import Svg, { Line } from "react-native-svg";
6
- import { CheckoutItemStatus } from "../../../../../../domain/checkoutItem/model/checkoutItem";
7
- import { size } from "../../../../../../projection/shared/size";
8
- import { Icon } from "../../../../../../shared/ui/components/atoms/icon/Icon";
9
- import { Price } from "../../../../components/atoms/price/Price";
10
- import { useMediaImage } from "../../../../hooks/useMediaImage";
11
- import { COLOR_I18N_PREFIX, I18nMessages } from "../../../../i18n/i18n";
12
- import { theme } from "../../../../theme/theme";
13
- import { IMAGE_WIDTH, style } from "./ProductVariant.style";
14
- const { colorContent } = theme();
15
- const ProductVariant = ({ media, brand, name, price, size: sizeProjection, color, status, discarded, country, style: customStyle, onPress, }) => {
16
- const uniqueText = useI18nMessage({ id: I18nMessages.ITEM_UNIQUE });
17
- const colorLabel = useI18nMessage({ id: color.label, prefix: COLOR_I18N_PREFIX });
18
- const sizeChangeText = useI18nMessage({ id: I18nMessages.PRODUCT_VARIANT_SIZE_CHANGE });
19
- const cdnImageUrl = useMediaImage();
20
- return (React.createElement(Pressable, { pointerEvents: onPress ? "auto" : "none", style: style.container, testID: "product-variant", onPress: onPress },
21
- React.createElement(View, { style: style.row },
22
- React.createElement(View, null,
23
- React.createElement(Image, { resizeMode: "contain", style: [style.media, customStyle?.image], testID: "product-variant-media", source: {
24
- uri: cdnImageUrl({
25
- url: media[0]?.url,
26
- width: IMAGE_WIDTH,
27
- }),
28
- } }),
29
- discarded && (React.createElement(Svg, { preserveAspectRatio: "none", stroke: colorContent, style: style.discarded, testID: "discarded", viewBox: "0 0 100 100" },
30
- React.createElement(Line, { vectorEffect: "non-scaling-stroke", x1: "100", x2: "0", y1: "0", y2: "100" })))),
31
- React.createElement(View, { style: style.descriptionContainer },
32
- React.createElement(View, null,
33
- React.createElement(Text, { level: 2, style: style.brand, detail: true }, brand),
34
- React.createElement(Text, { level: 2, detail: true }, name),
35
- React.createElement(Text, { level: 2, style: style.priceAndColor, detail: true },
36
- sizeProjection.unique ? uniqueText : size({ size: sizeProjection, country }),
37
- " / ",
38
- colorLabel),
39
- status === CheckoutItemStatus.REPLACED && (React.createElement(View, { style: style.sizeChange },
40
- React.createElement(Text, { level: 3, style: style.sizeChangeText, detail: true }, sizeChangeText)))),
41
- React.createElement(Price, { price: price, variant: "detail" }))),
42
- onPress && React.createElement(Icon, { name: "arrow-right" })));
43
- };
44
- export { ProductVariant };
@@ -1,45 +0,0 @@
1
- declare const IMAGE_WIDTH = 96;
2
- declare const style: {
3
- brand: {
4
- color: string;
5
- };
6
- container: {
7
- flexDirection: "row";
8
- justifyContent: "space-between";
9
- };
10
- descriptionContainer: {
11
- justifyContent: "space-between";
12
- marginLeft: number;
13
- };
14
- discarded: {
15
- height: string;
16
- left: number;
17
- position: "absolute";
18
- top: number;
19
- width: string;
20
- zIndex: number;
21
- };
22
- media: {
23
- borderColor: string;
24
- borderWidth: number;
25
- height: number;
26
- width: number;
27
- };
28
- priceAndColor: {
29
- color: string;
30
- };
31
- row: {
32
- flexDirection: "row";
33
- };
34
- sizeChange: {
35
- width?: string | undefined;
36
- backgroundColor: string;
37
- marginTop: number;
38
- paddingHorizontal: number;
39
- paddingVertical: number;
40
- };
41
- sizeChangeText: {
42
- textTransform: "uppercase";
43
- };
44
- };
45
- export { style, IMAGE_WIDTH };
@@ -1,53 +0,0 @@
1
- import { Platform, StyleSheet } from "react-native";
2
- import { theme } from "../../../../theme/theme";
3
- const { borderSize, colorGrayscaleL, colorInfo, spaceXS, spaceS, spaceM } = theme();
4
- const IMAGE_WIDTH = 96;
5
- const IMAGE_HEIGHT = 120;
6
- const style = StyleSheet.create({
7
- brand: {
8
- color: colorGrayscaleL,
9
- },
10
- container: {
11
- flexDirection: "row",
12
- justifyContent: "space-between",
13
- },
14
- descriptionContainer: {
15
- justifyContent: "space-between",
16
- marginLeft: spaceS,
17
- },
18
- discarded: {
19
- height: "100%",
20
- left: 0,
21
- position: "absolute",
22
- top: 0,
23
- width: "100%",
24
- zIndex: 10,
25
- },
26
- media: {
27
- borderColor: colorGrayscaleL,
28
- borderWidth: borderSize,
29
- height: IMAGE_HEIGHT,
30
- width: IMAGE_WIDTH,
31
- },
32
- priceAndColor: {
33
- color: colorGrayscaleL,
34
- },
35
- row: {
36
- flexDirection: "row",
37
- },
38
- sizeChange: {
39
- backgroundColor: colorInfo,
40
- marginTop: spaceM,
41
- paddingHorizontal: spaceS,
42
- paddingVertical: spaceXS,
43
- ...Platform.select({
44
- web: {
45
- width: "fit-content",
46
- },
47
- }),
48
- },
49
- sizeChangeText: {
50
- textTransform: "uppercase",
51
- },
52
- });
53
- export { style, IMAGE_WIDTH };
@@ -1,7 +0,0 @@
1
- import { FC } from "react";
2
- interface SizeChangeModalProps {
3
- readonly visible: boolean;
4
- readonly onDismiss: () => void;
5
- }
6
- declare const SizeChangeModal: FC<SizeChangeModalProps>;
7
- export { SizeChangeModal };
@@ -1,25 +0,0 @@
1
- import { Button } from "@lookiero/aurora-next/build/components/atoms/Button/Button";
2
- import { Text } from "@lookiero/aurora-next/build/components/primitives/Text/Text";
3
- import { useI18nMessage } from "@lookiero/i18n-react";
4
- import React from "react";
5
- import { View } from "react-native";
6
- import { Modal } from "../../../../../../shared/ui/components/layouts/modal/Modal";
7
- import { I18nMessages } from "../../../../i18n/i18n";
8
- import { style } from "./SizeChangeModal.style";
9
- const SizeChangeModal = ({ visible, onDismiss }) => {
10
- const titleText = useI18nMessage({ id: I18nMessages.SIZE_CHANGE_MODAL_TITLE });
11
- const descriptionText = useI18nMessage({ id: I18nMessages.SIZE_CHANGE_MODAL_DESCRIPTION });
12
- const buttonText = useI18nMessage({ id: I18nMessages.SIZE_CHANGE_MODAL_BUTTON });
13
- return (React.createElement(Modal, { visible: visible, onClose: onDismiss },
14
- React.createElement(View, { style: style.modal },
15
- React.createElement(Text, { level: 1, style: style.modalTitle, body: true }, titleText),
16
- React.createElement(Text, { level: 3, style: style.modalDescription, body: true }, descriptionText),
17
- React.createElement(Button
18
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
19
- // @ts-ignore
20
- , {
21
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
22
- // @ts-ignore
23
- style: style.button, onPress: onDismiss }, buttonText))));
24
- };
25
- export { SizeChangeModal };
@@ -1,16 +0,0 @@
1
- declare const style: {
2
- button: {
3
- flex: number;
4
- };
5
- modal: {
6
- padding: number;
7
- };
8
- modalDescription: {
9
- marginVertical: number;
10
- textAlign: "center";
11
- };
12
- modalTitle: {
13
- textAlign: "center";
14
- };
15
- };
16
- export { style };
@@ -1,19 +0,0 @@
1
- import { StyleSheet } from "react-native";
2
- import { theme } from "../../../../theme/theme";
3
- const { spaceXL } = theme();
4
- const style = StyleSheet.create({
5
- button: {
6
- flex: 0,
7
- },
8
- modal: {
9
- padding: spaceXL,
10
- },
11
- modalDescription: {
12
- marginVertical: spaceXL,
13
- textAlign: "center",
14
- },
15
- modalTitle: {
16
- textAlign: "center",
17
- },
18
- });
19
- export { style };
@@ -1,17 +0,0 @@
1
- import { Command } from "@lookiero/messaging";
2
- import { NotificationLevel } from "../model/notification";
3
- declare const CREATE_NOTIFICATION = "create_notification";
4
- interface CreateNotificationPayload {
5
- readonly aggregateId: string;
6
- readonly level: NotificationLevel;
7
- readonly bodyI18nKey: string;
8
- readonly titleI18nKey: string | undefined;
9
- }
10
- interface CreateNotification extends Command<typeof CREATE_NOTIFICATION>, CreateNotificationPayload {
11
- }
12
- interface CreateNotificationFunction {
13
- (payload: CreateNotificationPayload): CreateNotification;
14
- }
15
- declare const createNotification: CreateNotificationFunction;
16
- export type { CreateNotification };
17
- export { CREATE_NOTIFICATION, createNotification };
@@ -1,7 +0,0 @@
1
- import { command } from "@lookiero/messaging";
2
- const CREATE_NOTIFICATION = "create_notification";
3
- const createNotification = ({ aggregateId, ...payload }) => ({
4
- ...command({ aggregateId, name: CREATE_NOTIFICATION }),
5
- ...payload,
6
- });
7
- export { CREATE_NOTIFICATION, createNotification };
@@ -1,21 +0,0 @@
1
- import { CommandStatus } from "@lookiero/messaging-react";
2
- import { Logger } from "../../../../../logging/Logger";
3
- import { NotificationLevel } from "../../../../domain/notification/model/notification";
4
- interface CreateNotificationFunctionArgs {
5
- readonly aggregateId?: string;
6
- readonly level: NotificationLevel;
7
- readonly bodyI18nKey: string;
8
- readonly titleI18nKey?: string;
9
- }
10
- interface CreateNotificationFunction {
11
- (args: CreateNotificationFunctionArgs): Promise<void>;
12
- }
13
- interface UseCreateNotificationFunctionArgs {
14
- readonly contextId: string;
15
- readonly logger: Logger;
16
- }
17
- interface UseCreateNotificationFunction {
18
- (args: UseCreateNotificationFunctionArgs): [create: CreateNotificationFunction, status: CommandStatus];
19
- }
20
- declare const useCreateNotification: UseCreateNotificationFunction;
21
- export { useCreateNotification };
@@ -1,22 +0,0 @@
1
- import { useCommand } from "@lookiero/messaging-react";
2
- import { useCallback } from "react";
3
- import { v4 as uuid } from "uuid";
4
- import { createNotification } from "../../../../domain/notification/command/createNotification";
5
- const useCreateNotification = ({ contextId, logger }) => {
6
- const [commandBus, status] = useCommand({ contextId });
7
- const create = useCallback(async ({ aggregateId, level, titleI18nKey, bodyI18nKey }) => {
8
- try {
9
- await commandBus(createNotification({
10
- aggregateId: aggregateId || uuid(),
11
- level,
12
- titleI18nKey,
13
- bodyI18nKey,
14
- }));
15
- }
16
- catch (error) {
17
- logger.captureException(error);
18
- }
19
- }, [commandBus, logger]);
20
- return [create, status];
21
- };
22
- export { useCreateNotification };
@@ -1,12 +0,0 @@
1
- import { FC } from "react";
2
- import { ToastStyle } from "../../../../ui/components/molecules/toast/Toast";
3
- import { NotificationProjection } from "../../../projection/notification/notification";
4
- interface NotificationItemProps {
5
- readonly notification: NotificationProjection;
6
- readonly onRemove: (notificationId: string) => void;
7
- readonly autoHideTimeout?: number;
8
- readonly testID?: string;
9
- readonly style?: ToastStyle;
10
- }
11
- declare const NotificationItem: FC<NotificationItemProps>;
12
- export { NotificationItem };
@@ -1,24 +0,0 @@
1
- import { useI18nMessage } from "@lookiero/i18n-react";
2
- import React from "react";
3
- import { useCallback, useEffect } from "react";
4
- import { Toast, ToastVariant } from "../../../../ui/components/molecules/toast/Toast";
5
- import { NotificationLevel } from "../../../domain/notification/model/notification";
6
- const toastVariantForNotificationLevel = {
7
- [NotificationLevel.INFO]: ToastVariant.INFO,
8
- [NotificationLevel.ERROR]: ToastVariant.ERROR,
9
- [NotificationLevel.SUCCESS]: ToastVariant.SUCCESS,
10
- };
11
- const NotificationItem = ({ notification, onRemove, autoHideTimeout, testID = "notification-item", style: customStyle, }) => {
12
- const title = useI18nMessage({ id: notification.titleI18nKey }) || undefined;
13
- const body = useI18nMessage({ id: notification.bodyI18nKey || "" });
14
- const handleOnClose = useCallback(() => onRemove(notification.id), [notification.id, onRemove]);
15
- useEffect(() => {
16
- if (!autoHideTimeout) {
17
- return;
18
- }
19
- const hideTimeout = setTimeout(handleOnClose, autoHideTimeout);
20
- return () => clearTimeout(hideTimeout);
21
- }, [autoHideTimeout, handleOnClose]);
22
- return (React.createElement(Toast, { body: body, style: customStyle, testID: testID, title: title, variant: toastVariantForNotificationLevel[notification.level], onClose: handleOnClose }));
23
- };
24
- export { NotificationItem };
@@ -1,9 +0,0 @@
1
- import { FC } from "react";
2
- import { NotificationProjection } from "../../../projection/notification/notification";
3
- interface NotificationsProps {
4
- readonly notifications?: NotificationProjection[];
5
- readonly onRemove: (notificationId: string) => void;
6
- readonly autoHideTimeout?: number;
7
- }
8
- declare const Notifications: FC<NotificationsProps>;
9
- export { Notifications };
@@ -1,20 +0,0 @@
1
- import React from "react";
2
- import { View } from "react-native";
3
- import { useSafeAreaInsets } from "react-native-safe-area-context";
4
- import { Column } from "../../../../ui/components/layouts/column/Column";
5
- import { Row } from "../../../../ui/components/layouts/row/Row";
6
- import { Stack } from "../../../../ui/components/layouts/stack/Stack";
7
- import { useScreenSize } from "../../../../ui/hooks/useScreenSize";
8
- import { NotificationItem } from "./NotificationItem";
9
- import { style } from "./Notifications.style";
10
- const NOTIFICATIONS_AUTOHIDE_TIMEOUT = 10000;
11
- const Notifications = ({ notifications = [], onRemove, autoHideTimeout = NOTIFICATIONS_AUTOHIDE_TIMEOUT, }) => {
12
- const { top: safeAreaInsetTop } = useSafeAreaInsets();
13
- const screenSize = useScreenSize();
14
- const isSmallDevice = screenSize === "S";
15
- return (React.createElement(View, { pointerEvents: "box-none", style: style.notifications, testID: "notifications" },
16
- React.createElement(Row, { style: [style.row, isSmallDevice && style.rowSmall, { paddingTop: safeAreaInsetTop }] },
17
- React.createElement(Column, null,
18
- React.createElement(Stack, null, notifications.map((notification) => (React.createElement(NotificationItem, { key: notification.id, autoHideTimeout: autoHideTimeout, notification: notification, style: { toast: style.toast }, testID: notification.id, onRemove: onRemove }))))))));
19
- };
20
- export { Notifications };
@@ -1,36 +0,0 @@
1
- import { StyleSheet } from "react-native";
2
- declare const style: StyleSheet.NamedStyles<any> | StyleSheet.NamedStyles<{
3
- notifications: {
4
- flexDirection: "column";
5
- top: number;
6
- width: string;
7
- zIndex: number;
8
- left: number;
9
- } | {
10
- flexDirection: "column";
11
- top: number;
12
- width: string;
13
- zIndex: number;
14
- position: "fixed";
15
- left: number;
16
- } | {
17
- flexDirection: "column";
18
- top: number;
19
- width: string;
20
- zIndex: number;
21
- position: "absolute";
22
- left: number;
23
- };
24
- row: {
25
- flex: number;
26
- justifyContent: "center";
27
- };
28
- rowSmall: {
29
- paddingLeft: number;
30
- paddingRight: number;
31
- };
32
- toast: {
33
- marginTop: number;
34
- };
35
- }>;
36
- export { style };
@@ -1,31 +0,0 @@
1
- import { Platform, StyleSheet } from "react-native";
2
- import { theme } from "../../../../../infrastructure/ui/theme/theme";
3
- const { spaceM } = theme();
4
- const style = StyleSheet.create({
5
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
6
- // @ts-ignore
7
- notifications: {
8
- left: 0,
9
- ...Platform.select({
10
- web: { position: "fixed" },
11
- ios: { position: "absolute" },
12
- android: { position: "absolute" },
13
- }),
14
- flexDirection: "column",
15
- top: 0,
16
- width: "100%",
17
- zIndex: 20,
18
- },
19
- row: {
20
- flex: 1,
21
- justifyContent: "center",
22
- },
23
- rowSmall: {
24
- paddingLeft: spaceM,
25
- paddingRight: spaceM,
26
- },
27
- toast: {
28
- marginTop: spaceM,
29
- },
30
- });
31
- export { style };
@@ -1,13 +0,0 @@
1
- import { TrackingPage } from "../../../infrastructure/tracking/tracking";
2
- import { Country } from "../../../projection/shared/country";
3
- interface UsePageViewFunctionArgs {
4
- readonly page: TrackingPage;
5
- readonly country: Country;
6
- readonly checkoutId?: string;
7
- readonly checkoutItemId?: string;
8
- }
9
- interface UsePageViewFunction {
10
- (agrs: UsePageViewFunctionArgs): void;
11
- }
12
- declare const usePageView: UsePageViewFunction;
13
- export { usePageView };
@@ -1,27 +0,0 @@
1
- import { useLayoutEffect } from "react";
2
- import { PROJECT } from "../../../infrastructure/tracking/tracking";
3
- import { TrackingEvent, TrackingEventCategory } from "../tracking";
4
- import { useEmitUserEvent } from "./useEmitUserEvent";
5
- const usePageView = ({ page, country, checkoutId, checkoutItemId }) => {
6
- const emitUserEvent = useEmitUserEvent();
7
- useLayoutEffect(() => {
8
- if (!checkoutId) {
9
- return;
10
- }
11
- const baseTrackingEvent = {
12
- event: TrackingEvent.PAGEVIEW,
13
- eventCategory: TrackingEventCategory.NAVIGATION,
14
- section: `${PROJECT}_${page}`,
15
- store: country,
16
- checkoutId,
17
- };
18
- const pageViewTrackingEvent = checkoutItemId
19
- ? {
20
- ...baseTrackingEvent,
21
- checkoutItemId,
22
- }
23
- : baseTrackingEvent;
24
- emitUserEvent(pageViewTrackingEvent);
25
- }, [checkoutId, checkoutItemId, country, emitUserEvent, page]);
26
- };
27
- export { usePageView };
@@ -1,6 +0,0 @@
1
- declare const style: {
2
- error: {
3
- color: string;
4
- };
5
- };
6
- export { style };
@@ -1,9 +0,0 @@
1
- import { StyleSheet } from "react-native";
2
- import { theme } from "../../../../../infrastructure/ui/theme/theme";
3
- const { colorPrimary } = theme();
4
- const style = StyleSheet.create({
5
- error: {
6
- color: colorPrimary,
7
- },
8
- });
9
- export { style };