@lookiero/checkout 4.0.0-beta.4 → 4.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 (89) hide show
  1. package/dist/infrastructure/ui/routing/Routing.js +1 -1
  2. package/dist/infrastructure/ui/views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal.d.ts +1 -1
  3. package/dist/infrastructure/ui/views/checkout/components/checkoutPaymentModal/CheckoutPaymentModal.js +1 -0
  4. package/dist/projection/shared/order.d.ts +1 -1
  5. package/package.json +1 -1
  6. package/dist/domain/checkoutBooking/event/createNotificationWhenCheckoutBookingExpired.d.ts +0 -6
  7. package/dist/domain/checkoutBooking/event/createNotificationWhenCheckoutBookingExpired.js +0 -13
  8. package/dist/infrastructure/domain/uiSetting/react/useIncrementIntroShownCount.d.ts +0 -10
  9. package/dist/infrastructure/domain/uiSetting/react/useIncrementIntroShownCount.js +0 -11
  10. package/dist/infrastructure/projection/uiSetting/react/useShouldIntroBeShown.d.ts +0 -6
  11. package/dist/infrastructure/projection/uiSetting/react/useShouldIntroBeShown.js +0 -7
  12. package/dist/infrastructure/projection/uiSetting/react/useViewIntroShownCount.d.ts +0 -6
  13. package/dist/infrastructure/projection/uiSetting/react/useViewIntroShownCount.js +0 -9
  14. package/dist/infrastructure/ui/components/templates/SafeAreaScrollView.d.ts +0 -13
  15. package/dist/infrastructure/ui/components/templates/SafeAreaScrollView.js +0 -19
  16. package/dist/infrastructure/ui/components/templates/SafeAreaScrollView.style.ts.d.ts +0 -6
  17. package/dist/infrastructure/ui/components/templates/SafeAreaScrollView.style.ts.js +0 -7
  18. package/dist/infrastructure/ui/components/templates/header/header/Header.d.ts +0 -3
  19. package/dist/infrastructure/ui/components/templates/header/header/Header.js +0 -10
  20. package/dist/infrastructure/ui/components/templates/header/header/Header.style.d.ts +0 -9
  21. package/dist/infrastructure/ui/components/templates/header/header/Header.style.js +0 -12
  22. package/dist/infrastructure/ui/components/templates/safeAreaScrollView/SafeAreaScrollView.d.ts +0 -13
  23. package/dist/infrastructure/ui/components/templates/safeAreaScrollView/SafeAreaScrollView.js +0 -19
  24. package/dist/infrastructure/ui/components/templates/safeAreaScrollView/SafeAreaScrollView.style.ts.d.ts +0 -6
  25. package/dist/infrastructure/ui/components/templates/safeAreaScrollView/SafeAreaScrollView.style.ts.js +0 -7
  26. package/dist/infrastructure/ui/hooks/usePaymentInstrumentUpdateEvents.d.ts +0 -2
  27. package/dist/infrastructure/ui/hooks/usePaymentInstrumentUpdateEvents.js +0 -28
  28. package/dist/infrastructure/ui/hooks/useToast.d.ts +0 -11
  29. package/dist/infrastructure/ui/hooks/useToast.js +0 -49
  30. package/dist/infrastructure/ui/views/checkout/components/checkoutSuccessModal/CheckoutSuccessModal.d.ts +0 -7
  31. package/dist/infrastructure/ui/views/checkout/components/checkoutSuccessModal/CheckoutSuccessModal.js +0 -25
  32. package/dist/infrastructure/ui/views/checkout/components/checkoutSuccessModal/CheckoutSuccessModal.style.d.ts +0 -16
  33. package/dist/infrastructure/ui/views/checkout/components/checkoutSuccessModal/CheckoutSuccessModal.style.js +0 -19
  34. package/dist/infrastructure/ui/views/intro/Intro.d.ts +0 -6
  35. package/dist/infrastructure/ui/views/intro/Intro.js +0 -52
  36. package/dist/infrastructure/ui/views/intro/Intro.style.d.ts +0 -52
  37. package/dist/infrastructure/ui/views/intro/Intro.style.js +0 -55
  38. package/dist/infrastructure/ui/views/item/Item.style.d.ts +0 -15
  39. package/dist/infrastructure/ui/views/item/Item.style.js +0 -18
  40. package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.d.ts +0 -26
  41. package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.js +0 -44
  42. package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.style.d.ts +0 -45
  43. package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.style.js +0 -53
  44. package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.d.ts +0 -7
  45. package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.js +0 -25
  46. package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.style.d.ts +0 -16
  47. package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.style.js +0 -19
  48. package/dist/infrastructure/ui/views/navigation/Navigation.d.ts +0 -21
  49. package/dist/infrastructure/ui/views/navigation/Navigation.js +0 -45
  50. package/dist/infrastructure/ui/views/navigation/Navigation.style.d.ts +0 -5
  51. package/dist/infrastructure/ui/views/navigation/Navigation.style.js +0 -30
  52. package/dist/infrastructure/ui/views/navigation/components/header/Header.d.ts +0 -46
  53. package/dist/infrastructure/ui/views/navigation/components/header/Header.js +0 -120
  54. package/dist/infrastructure/ui/views/navigation/components/header/Header.style.d.ts +0 -31
  55. package/dist/infrastructure/ui/views/navigation/components/header/Header.style.js +0 -34
  56. package/dist/infrastructure/ui/views/navigation/components/header/Logo.d.ts +0 -7
  57. package/dist/infrastructure/ui/views/navigation/components/header/Logo.js +0 -11
  58. package/dist/infrastructure/ui/views/navigation/components/header/Logo.style.d.ts +0 -7
  59. package/dist/infrastructure/ui/views/navigation/components/header/Logo.style.js +0 -8
  60. package/dist/infrastructure/ui/views/summary/components/checkoutItemsTabs/CheckoutItemsTabs.d.ts +0 -12
  61. package/dist/infrastructure/ui/views/summary/components/checkoutItemsTabs/CheckoutItemsTabs.js +0 -24
  62. package/dist/infrastructure/ui/views/summary/components/checkoutItemsTabs/CheckoutItemsTabs.style.d.ts +0 -15
  63. package/dist/infrastructure/ui/views/summary/components/checkoutItemsTabs/CheckoutItemsTabs.style.js +0 -18
  64. package/dist/shared/notifications/domain/notification/command/createNotification.d.ts +0 -17
  65. package/dist/shared/notifications/domain/notification/command/createNotification.js +0 -7
  66. package/dist/shared/notifications/infrastructure/domain/notification/react/useCreateNotification.d.ts +0 -21
  67. package/dist/shared/notifications/infrastructure/domain/notification/react/useCreateNotification.js +0 -22
  68. package/dist/shared/notifications/infrastructure/ui/components/NotificationItem.d.ts +0 -12
  69. package/dist/shared/notifications/infrastructure/ui/components/NotificationItem.js +0 -24
  70. package/dist/shared/notifications/infrastructure/ui/components/Notifications.d.ts +0 -9
  71. package/dist/shared/notifications/infrastructure/ui/components/Notifications.js +0 -20
  72. package/dist/shared/notifications/infrastructure/ui/components/Notifications.style.d.ts +0 -36
  73. package/dist/shared/notifications/infrastructure/ui/components/Notifications.style.js +0 -31
  74. package/dist/shared/tracking/infrastructure/usePageView.d.ts +0 -13
  75. package/dist/shared/tracking/infrastructure/usePageView.js +0 -27
  76. package/dist/shared/ui/components/atoms/error/Error.style.d.ts +0 -6
  77. package/dist/shared/ui/components/atoms/error/Error.style.js +0 -9
  78. package/dist/shared/ui/components/layouts/slider/Bullets.d.ts +0 -10
  79. package/dist/shared/ui/components/layouts/slider/Bullets.js +0 -29
  80. package/dist/shared/ui/components/layouts/slider/Bullets.style.d.ts +0 -12
  81. package/dist/shared/ui/components/layouts/slider/Bullets.style.js +0 -15
  82. package/dist/shared/ui/components/layouts/slider/Pagination.d.ts +0 -14
  83. package/dist/shared/ui/components/layouts/slider/Pagination.js +0 -11
  84. package/dist/shared/ui/components/layouts/slider/Pagination.style.d.ts +0 -23
  85. package/dist/shared/ui/components/layouts/slider/Pagination.style.js +0 -27
  86. package/dist/shared/ui/components/layouts/slider/Slider.d.ts +0 -15
  87. package/dist/shared/ui/components/layouts/slider/Slider.js +0 -132
  88. package/dist/shared/ui/components/layouts/slider/Slider.style.d.ts +0 -11
  89. package/dist/shared/ui/components/layouts/slider/Slider.style.js +0 -12
@@ -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,21 +0,0 @@
1
- import { FC, ReactNode } from "react";
2
- import { Country } from "../../../../projection/shared/country";
3
- interface MenuProps {
4
- readonly isVisible: boolean;
5
- readonly onClose: () => void;
6
- }
7
- type Menu = FC<MenuProps>;
8
- interface TabBarProps {
9
- readonly isPortalBusy: boolean;
10
- readonly panel: boolean;
11
- }
12
- type TabBar = FC<TabBarProps>;
13
- interface NavigationProps {
14
- readonly children: ReactNode;
15
- readonly customerId: string;
16
- readonly country: Country;
17
- readonly onOpenMenu: () => void;
18
- }
19
- declare const Navigation: FC<NavigationProps>;
20
- export type { Menu, TabBar };
21
- export { Navigation };
@@ -1,45 +0,0 @@
1
- import React, { useCallback } from "react";
2
- import { useTrackPressBack } from "../../../../shared/tracking/infrastructure/useTrackPressBack";
3
- import { useTrackPressMenu } from "../../../../shared/tracking/infrastructure/useTrackPressMenu";
4
- import { useTrackPressNext } from "../../../../shared/tracking/infrastructure/useTrackPressNext";
5
- import { useTrackPressPrevious } from "../../../../shared/tracking/infrastructure/useTrackPressPrevious";
6
- import { style } from "./Navigation.style";
7
- import { Header } from "./components/header/Header";
8
- const Navigation = ({ children, customerId, country, onOpenMenu }) => {
9
- const trackPressMenu = useTrackPressMenu();
10
- const handleOnOpenMenu = useCallback(({ page, checkoutId, collapse }) => {
11
- onOpenMenu();
12
- trackPressMenu({
13
- page,
14
- country,
15
- checkoutId,
16
- collapse,
17
- });
18
- }, [country, onOpenMenu, trackPressMenu]);
19
- const trackPressBack = useTrackPressBack();
20
- const handleOnBack = useCallback(({ page, checkoutId }) => trackPressBack({
21
- page,
22
- country,
23
- checkoutId,
24
- }), [country, trackPressBack]);
25
- const trackPressNext = useTrackPressNext();
26
- const handleOnNext = useCallback(({ page, checkoutId, from, to }) => trackPressNext({
27
- page,
28
- country,
29
- checkoutId,
30
- from,
31
- to,
32
- }), [country, trackPressNext]);
33
- const trackPressPrevious = useTrackPressPrevious();
34
- const handleOnPrevious = useCallback(({ page, checkoutId, from, to }) => trackPressPrevious({
35
- page,
36
- country,
37
- checkoutId,
38
- from,
39
- to,
40
- }), [country, trackPressPrevious]);
41
- return (React.createElement(React.Fragment, null,
42
- React.createElement(Header, { customerId: customerId, style: style.header, onBack: handleOnBack, onNext: handleOnNext, onOpenMenu: handleOnOpenMenu, onPrevious: handleOnPrevious }),
43
- children));
44
- };
45
- export { Navigation };
@@ -1,5 +0,0 @@
1
- declare const style: {
2
- header: {};
3
- tabBar: {};
4
- };
5
- export { style };
@@ -1,30 +0,0 @@
1
- import { Platform, StyleSheet } from "react-native";
2
- const style = StyleSheet.create({
3
- header: {
4
- ...Platform.select({
5
- web: {
6
- position: "fixed",
7
- zIndex: 1,
8
- },
9
- native: {
10
- position: "absolute",
11
- zIndex: 1,
12
- },
13
- }),
14
- },
15
- tabBar: {
16
- ...Platform.select({
17
- web: {
18
- position: "fixed",
19
- zIndex: 1,
20
- bottom: 0,
21
- },
22
- native: {
23
- position: "absolute",
24
- zIndex: 1,
25
- bottom: 0,
26
- },
27
- }),
28
- },
29
- });
30
- export { style };
@@ -1,46 +0,0 @@
1
- import { FC } from "react";
2
- import { StyleProp, ViewStyle } from "react-native";
3
- import { TrackingPage } from "../../../../../tracking/tracking";
4
- interface OnOpenMenuFunctionArgs {
5
- readonly page: TrackingPage;
6
- readonly checkoutId: string | undefined;
7
- readonly collapse: boolean;
8
- }
9
- interface OnOpenMenuFunction {
10
- (args: OnOpenMenuFunctionArgs): void;
11
- }
12
- interface OnBackFunctionArgs {
13
- readonly page: TrackingPage;
14
- readonly checkoutId: string | undefined;
15
- }
16
- interface OnBackFunction {
17
- (args: OnBackFunctionArgs): void;
18
- }
19
- interface OnNextFunctionArgs {
20
- readonly page: TrackingPage;
21
- readonly checkoutId: string | undefined;
22
- readonly from: string;
23
- readonly to: string;
24
- }
25
- interface OnNextFunction {
26
- (args: OnNextFunctionArgs): void;
27
- }
28
- interface OnPreviousFunctionArgs {
29
- readonly page: TrackingPage;
30
- readonly checkoutId: string | undefined;
31
- readonly from: string;
32
- readonly to: string;
33
- }
34
- interface OnPreviousFunction {
35
- (args: OnPreviousFunctionArgs): void;
36
- }
37
- interface HeaderProps {
38
- readonly customerId: string;
39
- readonly onOpenMenu: OnOpenMenuFunction;
40
- readonly onBack?: OnBackFunction;
41
- readonly onNext?: OnNextFunction;
42
- readonly onPrevious?: OnPreviousFunction;
43
- readonly style?: StyleProp<ViewStyle>;
44
- }
45
- declare const Header: FC<HeaderProps>;
46
- export { Header };
@@ -1,120 +0,0 @@
1
- import { Text } from "@lookiero/aurora";
2
- import { useI18nMessage } from "@lookiero/i18n-react";
3
- import React, { useCallback } from "react";
4
- import { View } from "react-native";
5
- import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
6
- import { generatePath, useMatch, useNavigate, useParams } from "react-router-native";
7
- import { ButtonIcon } from "../../../../../../shared/ui/components/molecules/buttonIcon/ButtonIcon";
8
- import { useViewFirstAvailableCheckoutByCustomerId } from "../../../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
9
- import { TrackingPage } from "../../../../../tracking/tracking";
10
- import { I18nMessages } from "../../../../i18n/i18n";
11
- import { Routes } from "../../../../routing/routes";
12
- import { useBasePath } from "../../../../routing/useBasePath";
13
- import { HEADER_HEIGHT, style } from "./Header.style";
14
- import { Logo } from "./Logo";
15
- const ButtonIconPlaceholder = () => React.createElement(View, { style: style.buttonIconPlaceholder });
16
- const DefaultHeader = ({ onOpenMenu }) => (React.createElement(View, { style: style.header, testID: "default-header" },
17
- React.createElement(Logo, { style: style.logo }),
18
- React.createElement(ButtonIconPlaceholder, null),
19
- React.createElement(ButtonIcon, { name: "menu", testID: "menu-button-icon", onPress: onOpenMenu })));
20
- const ItemHeader = ({ items, item, onNext, onPrevious }) => {
21
- const title = useI18nMessage({ id: I18nMessages.HEADER_CHECKOUT_TITLE });
22
- const itemIndex = items.indexOf(item);
23
- const isFirstItem = itemIndex === 0;
24
- const isLastItem = itemIndex === items.length - 1;
25
- const basePath = useBasePath();
26
- const navigate = useNavigate();
27
- const navigateToPreviousItem = useCallback(() => {
28
- const previousItemIndex = itemIndex === 0 ? items.length - 1 : itemIndex - 1;
29
- const previousItem = items[previousItemIndex];
30
- onPrevious?.({ from: item.id, to: previousItem.id });
31
- navigate(generatePath(`${basePath}/${Routes.ITEM}`, { id: previousItem.id }));
32
- }, [basePath, item.id, itemIndex, items, navigate, onPrevious]);
33
- const navigateToNextItem = useCallback(() => {
34
- const nextItemIndex = itemIndex === items.length - 1 ? 0 : itemIndex + 1;
35
- const nextItem = items[nextItemIndex];
36
- onNext?.({ from: item.id, to: nextItem.id });
37
- navigate(generatePath(`${basePath}/${Routes.ITEM}`, { id: nextItem.id }));
38
- }, [basePath, item.id, itemIndex, items, navigate, onNext]);
39
- return (React.createElement(View, { style: style.header, testID: "item-header" },
40
- !isFirstItem ? (React.createElement(ButtonIcon, { name: "arrow-left", testID: "arrow-left-button-icon", onPress: navigateToPreviousItem })) : (React.createElement(ButtonIconPlaceholder, null)),
41
- React.createElement(Text, { level: 3, detail: true, upperCase: true }, title),
42
- !isLastItem ? (React.createElement(ButtonIcon, { name: "arrow-right", testID: "arrow-right-button-icon", onPress: navigateToNextItem })) : (React.createElement(ButtonIconPlaceholder, null))));
43
- };
44
- const ItemDetailHeader = ({ onBack }) => {
45
- const title = useI18nMessage({ id: I18nMessages.HEADER_CHECKOUT_TITLE });
46
- const navigate = useNavigate();
47
- const handleOnBack = useCallback(() => {
48
- onBack?.();
49
- navigate(-1);
50
- }, [navigate, onBack]);
51
- return (React.createElement(View, { style: style.header, testID: "item-detail-header" },
52
- React.createElement(ButtonIconPlaceholder, null),
53
- React.createElement(Text, { level: 3, detail: true, upperCase: true }, title),
54
- React.createElement(ButtonIcon, { name: "close", testID: "close-button-icon", onPress: handleOnBack })));
55
- };
56
- const CheckoutHeader = ({ onBack }) => {
57
- const title = useI18nMessage({ id: I18nMessages.HEADER_COMPLETE_CHECKOUT_TITLE });
58
- const basePath = useBasePath();
59
- const navigate = useNavigate();
60
- const handleOnBack = useCallback(() => {
61
- onBack?.();
62
- navigate(`${basePath}/${Routes.SUMMARY}`);
63
- }, [basePath, navigate, onBack]);
64
- return (React.createElement(View, { style: style.header, testID: "checkout-header" },
65
- React.createElement(ButtonIcon, { name: "arrow-left", testID: "arrow-left-button-icon", onPress: handleOnBack }),
66
- React.createElement(Text, { level: 3, detail: true, upperCase: true }, title),
67
- React.createElement(ButtonIconPlaceholder, null)));
68
- };
69
- const Header = ({ customerId, onOpenMenu, onBack, onNext, onPrevious, style: customStyle }) => {
70
- const { id: itemId } = useParams();
71
- const [checkout] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
72
- const currentItem = checkout?.items.find((item) => item.id === itemId);
73
- const basePath = useBasePath();
74
- const itemRouteMatch = useMatch(`${basePath}/${Routes.ITEM}`);
75
- const itemDetailRouteMatch = useMatch(`${basePath}/${Routes.ITEM_DETAIL}`);
76
- const summaryRouteMatch = useMatch(`${basePath}/${Routes.SUMMARY}`);
77
- const checkoutRouteMatch = useMatch(`${basePath}/${Routes.CHECKOUT}`);
78
- const checkoutPaymentRouteMatch = useMatch(`${basePath}/${Routes.CHECKOUT}/${Routes.CHECKOUT_PAYMENT}`);
79
- const feedbackRouteMatch = useMatch(`${basePath}/${Routes.FEEDBACK}`);
80
- const trackingPage = useCallback(() => {
81
- if (itemRouteMatch || itemDetailRouteMatch)
82
- return TrackingPage.ITEM;
83
- if (checkoutRouteMatch || checkoutPaymentRouteMatch)
84
- return TrackingPage.CHECKOUT;
85
- if (summaryRouteMatch)
86
- return TrackingPage.SUMMARY;
87
- if (feedbackRouteMatch)
88
- return TrackingPage.FEEDBACK;
89
- return TrackingPage.NOT_FOUND;
90
- }, [
91
- checkoutPaymentRouteMatch,
92
- checkoutRouteMatch,
93
- feedbackRouteMatch,
94
- itemDetailRouteMatch,
95
- itemRouteMatch,
96
- summaryRouteMatch,
97
- ]);
98
- const { top: safeAreaInsetTop } = useSafeAreaInsets();
99
- const handleOnOpenMenu = useCallback(() => onOpenMenu({ page: trackingPage(), checkoutId: checkout?.id, collapse: false }), [checkout?.id, onOpenMenu, trackingPage]);
100
- const handleOnBack = useCallback(() => onBack?.({ page: trackingPage(), checkoutId: checkout?.id }), [checkout?.id, onBack, trackingPage]);
101
- const handleOnNext = useCallback(({ from, to }) => onNext?.({ page: trackingPage(), checkoutId: checkout?.id, from, to }), [checkout?.id, onNext, trackingPage]);
102
- const handleOnPrevious = useCallback(({ from, to }) => onPrevious?.({ page: trackingPage(), checkoutId: checkout?.id, from, to }), [checkout?.id, onPrevious, trackingPage]);
103
- let header;
104
- if (checkout?.items && currentItem) {
105
- if (itemRouteMatch) {
106
- header = (React.createElement(ItemHeader, { item: currentItem, items: checkout.items, onNext: handleOnNext, onPrevious: handleOnPrevious }));
107
- }
108
- else if (itemDetailRouteMatch) {
109
- header = React.createElement(ItemDetailHeader, { onBack: handleOnBack });
110
- }
111
- }
112
- else if (checkoutRouteMatch || checkoutPaymentRouteMatch) {
113
- header = React.createElement(CheckoutHeader, { onBack: handleOnBack });
114
- }
115
- else {
116
- header = React.createElement(DefaultHeader, { onOpenMenu: handleOnOpenMenu });
117
- }
118
- return (React.createElement(SafeAreaView, { edges: ["top"], style: [style.container, { height: HEADER_HEIGHT + safeAreaInsetTop }, customStyle] }, header));
119
- };
120
- export { Header };
@@ -1,31 +0,0 @@
1
- declare const HEADER_HEIGHT: number;
2
- declare const style: {
3
- buttonIconPlaceholder: {
4
- flexGrow: number;
5
- height: number;
6
- width: number;
7
- };
8
- container: {
9
- flexDirection: "row";
10
- flexGrow: number;
11
- width: string;
12
- };
13
- header: {
14
- alignItems: "center";
15
- backgroundColor: string;
16
- flexDirection: "row";
17
- flexGrow: number;
18
- flexWrap: "nowrap";
19
- height: number;
20
- justifyContent: "space-between";
21
- overflow: "visible";
22
- paddingHorizontal: number;
23
- width: string;
24
- };
25
- logo: {
26
- left: number;
27
- position: "absolute";
28
- top: number;
29
- };
30
- };
31
- export { style, HEADER_HEIGHT };
@@ -1,34 +0,0 @@
1
- import { StyleSheet } from "react-native";
2
- import { theme } from "../../../../theme/theme";
3
- const { colorBase, spaceXXL, spaceXXXL, spaceS } = theme();
4
- const HEADER_HEIGHT = spaceXXXL;
5
- const style = StyleSheet.create({
6
- buttonIconPlaceholder: {
7
- flexGrow: 0,
8
- height: spaceXXL,
9
- width: spaceXXL,
10
- },
11
- container: {
12
- flexDirection: "row",
13
- flexGrow: 0,
14
- width: "100%",
15
- },
16
- header: {
17
- alignItems: "center",
18
- backgroundColor: colorBase,
19
- flexDirection: "row",
20
- flexGrow: 0,
21
- flexWrap: "nowrap",
22
- height: HEADER_HEIGHT,
23
- justifyContent: "space-between",
24
- overflow: "visible",
25
- paddingHorizontal: spaceS,
26
- width: "100%",
27
- },
28
- logo: {
29
- left: 0,
30
- position: "absolute",
31
- top: 0,
32
- },
33
- });
34
- export { style, HEADER_HEIGHT };
@@ -1,7 +0,0 @@
1
- import { FC } from "react";
2
- import { StyleProp, ViewStyle } from "react-native";
3
- interface LogoProps {
4
- readonly style?: StyleProp<ViewStyle>;
5
- }
6
- declare const Logo: FC<LogoProps>;
7
- export { Logo };