@lookiero/checkout 0.8.3-beta.4 → 0.8.3

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.
@@ -0,0 +1,2 @@
1
+ declare const usePaymentInstrumentEvents: () => void;
2
+ export { usePaymentInstrumentEvents };
@@ -6,12 +6,16 @@ import { I18nMessages } from "../i18n/i18n";
6
6
  import { useToast } from "./useToast";
7
7
  const PAYMENT_ERROR = "ERROR";
8
8
  const PAYMENT_SUCCESS = "PAYMENT_INSTRUMENT_UPDATED";
9
- const usePaymentInstrumentUpdateEvents = () => {
9
+ const usePaymentInstrumentEvents = () => {
10
10
  const { subscribe, unsubscribe } = useEvent();
11
11
  const { showError, showSuccess } = useToast();
12
12
  const [createNotification] = useCreateNotification({ contextId: MESSAGING_CONTEXT_ID });
13
13
  const onSuccess = useCallback(({ message }) => showSuccess({ message: message.id }), [showSuccess]);
14
- const onError = useCallback(({ error }) => showError({ message: error.toaster?.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR }), [showError]);
14
+ const onError = useCallback(({ error }) => {
15
+ if (error.toaster) {
16
+ showError({ message: error.toaster.id || I18nMessages.CHECKOUT_TOAST_PAYMENT_ERROR });
17
+ }
18
+ }, [showError]);
15
19
  useEffect(() => {
16
20
  subscribe({ event: PAYMENT_ERROR }, onError);
17
21
  subscribe({ event: PAYMENT_SUCCESS }, onSuccess);
@@ -21,4 +25,4 @@ const usePaymentInstrumentUpdateEvents = () => {
21
25
  };
22
26
  }, [subscribe, unsubscribe, createNotification, onError, onSuccess]);
23
27
  };
24
- export { usePaymentInstrumentUpdateEvents };
28
+ export { usePaymentInstrumentEvents };
@@ -28,18 +28,14 @@ const IN_APP_NOTIFICATION_DEFAULTS = {
28
28
  ...NOTIFICATION_DEFAULTS,
29
29
  style: [style.container, style.inAppContainer],
30
30
  };
31
- const iOSInAppBrowser = window.screen.height > 667 && /FBIOS/.test(navigator.userAgent);
31
+ const iOSInAppBrowser = window.screen?.height > 667 && /FBIOS/.test(navigator.userAgent);
32
32
  const getNotificationDefaults = () => (iOSInAppBrowser ? IN_APP_NOTIFICATION_DEFAULTS : NOTIFICATION_DEFAULTS);
33
33
  const useToast = () => {
34
34
  const Stack = useStack();
35
35
  const intl = useIntl();
36
36
  const translate = useCallback((message) => intl.formatMessage({ id: message, defaultMessage: message }), [intl]);
37
- const showError = useCallback(({ message }) => {
38
- Stack.alert(uuid(), Notification, { ...getNotificationDefaults(), text: translate(message) });
39
- }, [Stack, translate]);
40
- const showSuccess = useCallback(({ message }) => {
41
- Stack.success(uuid(), Notification, { ...getNotificationDefaults(), text: translate(message) });
42
- }, [Stack, translate]);
37
+ const showError = useCallback(({ message }) => Stack.alert(uuid(), Notification, { ...getNotificationDefaults(), text: translate(message) }), [Stack, translate]);
38
+ const showSuccess = useCallback(({ message }) => Stack.success(uuid(), Notification, { ...getNotificationDefaults(), text: translate(message) }), [Stack, translate]);
43
39
  return {
44
40
  showError,
45
41
  showSuccess,
@@ -1,10 +1,10 @@
1
1
  import { PaymentInstrumentSelect, PaymentMethod, Section } from "@lookiero/payments-front";
2
2
  import React, { useRef } from "react";
3
- import { usePaymentInstrumentUpdateEvents } from "../../../../hooks/usePaymentInstrumentUpdateEvents";
3
+ import { usePaymentInstrumentEvents } from "../../../../hooks/usePaymentInstrumentEvents";
4
4
  const PaymentInstrument = ({ useRedirect }) => {
5
5
  const paymentInstrumentSelectRef = useRef(null);
6
6
  const { returnUrl } = useRedirect();
7
- usePaymentInstrumentUpdateEvents();
7
+ usePaymentInstrumentEvents();
8
8
  return (React.createElement(PaymentInstrumentSelect, { ref: paymentInstrumentSelectRef, beforeRedirect: returnUrl ? () => Promise.resolve(returnUrl) : undefined, hasError: false, hidePaymentMethods: [PaymentMethod.GOOGLE_PAY], section: Section.BOX_CHECKOUT }));
9
9
  };
10
10
  export { PaymentInstrument };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lookiero/checkout",
3
- "version": "0.8.3-beta.4",
3
+ "version": "0.8.3",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "files": [
@@ -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,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 };