@lookiero/checkout 5.0.4 → 5.1.0-beta.0

package/dist/infrastructure/ui/components/layouts/banner/Banner.d.ts

@@ -0,0 +1,7 @@
+import { FC, ReactNode } from "react";
+interface BannerProps {
+    readonly children?: ReactNode;
+    readonly text: string;
+}
+declare const Banner: FC<BannerProps>;
+export { Banner };

package/dist/infrastructure/ui/components/layouts/banner/Banner.js

@@ -0,0 +1,8 @@
+import { ALIGN, Text } from "@lookiero/aurora";
+import React from "react";
+import { View } from "react-native";
+import { style } from "./Banner.style";
+const Banner = ({ children, text }) => (React.createElement(View, { style: style.container },
+    React.createElement(Text, { align: ALIGN.CENTER, level: 2, detail: true }, text),
+    children));
+export { Banner };

package/dist/infrastructure/ui/components/layouts/banner/Banner.style.d.ts

@@ -0,0 +1,9 @@
+declare const style: {
+    container: {
+        alignItems: "center";
+        backgroundColor: string;
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+};
+export { style };

package/dist/infrastructure/ui/components/layouts/banner/Banner.style.js

@@ -0,0 +1,12 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../theme/theme";
+const { colorInfo, spaceM, spaceL } = theme();
+const style = StyleSheet.create({
+    container: {
+        alignItems: "center",
+        backgroundColor: colorInfo,
+        paddingHorizontal: spaceL,
+        paddingVertical: spaceM,
+    },
+});
+export { style };

package/dist/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/icons/icon.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { SvgProps } from "react-native-svg";
+type Icon = FC<SvgProps>;
+export type { Icon };

package/dist/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/icons/icon.js

@@ -0,0 +1 @@
+export {};

package/dist/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.js

@@ -2,12 +2,11 @@ import { useIntl } from "@lookiero/i18n-react";
 import React, { useCallback, useMemo } from "react";
 import { InputField } from "../../../../../../../shared/ui/components/molecules/inputField/InputField";
 import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
-const TEXTAREA_MIN_HEIGHT = 96;
 const TextareaCheckoutQuestionItem = ({ checkoutQuestion, checkoutQuestionParentId, testID, }) => {
     const { formatMessage } = useIntl();
     const placeholderText = useMemo(() => (checkoutQuestion.placeholder ? formatMessage({ id: checkoutQuestion.placeholder }) : ""), [formatMessage, checkoutQuestion.placeholder]);
     const { feedback, onChange } = useCheckoutQuestionFeedbackForId({ id: checkoutQuestionParentId });
     const handleOnChange = useCallback((value) => onChange({ checkoutQuestionId: checkoutQuestionParentId, checkoutQuestionFeedback: value }), [onChange, checkoutQuestionParentId]);
-    return (React.createElement(InputField, { label: placeholderText, minHeight: TEXTAREA_MIN_HEIGHT, placeholder: placeholderText, testID: testID, value: feedback, multiline: true, onChange: handleOnChange }));
+    return (React.createElement(InputField, { label: placeholderText, placeholder: placeholderText, testID: testID, value: feedback, multiline: true, onChange: handleOnChange }));
 };
 export { TextareaCheckoutQuestionItem };

package/dist/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.js

@@ -2,12 +2,11 @@ import { useIntl } from "@lookiero/i18n-react";
 import React, { useCallback, useMemo } from "react";
 import { InputField } from "../../../../../../../shared/ui/components/molecules/inputField/InputField";
 import { useReturnQuestionFeedbackForId } from "../../behaviors/useReturnQuestionFeedback";
-const TEXTAREA_MIN_HEIGHT = 96;
 const TextareaReturnQuestionItem = ({ returnQuestion, returnQuestionParentId, testID, }) => {
     const { formatMessage } = useIntl();
     const placeholderText = useMemo(() => (returnQuestion.placeholder ? formatMessage({ id: returnQuestion.placeholder }) : ""), [formatMessage, returnQuestion.placeholder]);
     const { feedback, onChange } = useReturnQuestionFeedbackForId({ id: returnQuestionParentId });
     const handleOnChange = useCallback((value) => onChange({ returnQuestionId: returnQuestionParentId, returnQuestionFeedback: value }), [onChange, returnQuestionParentId]);
-    return (React.createElement(InputField, { label: placeholderText, minHeight: TEXTAREA_MIN_HEIGHT, placeholder: placeholderText, testID: testID, value: feedback, multiline: true, onChange: handleOnChange }));
+    return (React.createElement(InputField, { label: placeholderText, placeholder: placeholderText, testID: testID, value: feedback, multiline: true, onChange: handleOnChange }));
 };
 export { TextareaReturnQuestionItem };

package/dist/infrastructure/ui/components/templates/header/defaultHeader/DefaultHeader.style.d.ts

@@ -0,0 +1,9 @@
+declare const HEADER_HEIGHT: number;
+declare const style: {
+    logo: {
+        left: number;
+        position: "absolute";
+        top: number;
+    };
+};
+export { style, HEADER_HEIGHT };

package/dist/infrastructure/ui/components/templates/header/defaultHeader/DefaultHeader.style.js

@@ -0,0 +1,12 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../theme/theme";
+const { spaceXXXL } = theme();
+const HEADER_HEIGHT = spaceXXXL;
+const style = StyleSheet.create({
+    logo: {
+        left: 0,
+        position: "absolute",
+        top: 0,
+    },
+});
+export { style, HEADER_HEIGHT };

package/dist/infrastructure/ui/components/templates/header/logo/Logo.style.d.ts

@@ -0,0 +1,7 @@
+declare const style: {
+    logo: {
+        height: number;
+        width: number;
+    };
+};
+export { style };

package/dist/infrastructure/ui/components/templates/header/logo/Logo.style.js

@@ -0,0 +1,8 @@
+import { StyleSheet } from "react-native";
+const style = StyleSheet.create({
+    logo: {
+        height: 54,
+        width: 217,
+    },
+});
+export { style };

package/dist/infrastructure/ui/theme/theme.d.ts

@@ -0,0 +1,10 @@
+import { DefaultTheme } from "@lookiero/aurora";
+type Remove$PrefixFromKeys<T> = {
+    [K in keyof T as K extends `$${infer F}` ? F : K]: T[K];
+};
+type AuroraTheme = Remove$PrefixFromKeys<typeof DefaultTheme>;
+interface ThemeFunction {
+    (): AuroraTheme;
+}
+declare const theme: ThemeFunction;
+export { theme };

package/dist/infrastructure/ui/theme/theme.js

@@ -0,0 +1,3 @@
+import { Theme } from "@lookiero/aurora";
+const theme = () => Theme.get();
+export { theme };

package/dist/infrastructure/ui/views/notFound/NotFound.d.ts

@@ -0,0 +1,10 @@
+import { FC } from "react";
+import { Country } from "../../../../projection/shared/country";
+import { Layout } from "../../components/layouts/layout/Layout";
+interface NotFoundProps {
+    readonly customerId: string;
+    readonly country: Country;
+    readonly layout: Layout;
+}
+declare const NotFound: FC<NotFoundProps>;
+export { NotFound };

package/dist/infrastructure/ui/views/notFound/NotFound.js

@@ -0,0 +1,40 @@
+import { Button, Text } from "@lookiero/aurora";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import { QueryStatus } from "@lookiero/messaging-react";
+import React, { useCallback } from "react";
+import { Image } from "react-native";
+import { useNavigate } from "react-router-native";
+import { useTrackPageView } from "../../../../shared/tracking/infrastructure/useTrackPageView";
+import { AspectRatioView } from "../../../../shared/ui/components/atoms/aspectRatioView/AspectRatioView";
+import { Spinner } from "../../../../shared/ui/components/atoms/spinner/Spinner";
+import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
+import { TrackingPage } from "../../../tracking/tracking";
+import { Body } from "../../components/layouts/body/Body";
+import { I18nMessages } from "../../i18n/i18n";
+import { Routes } from "../../routing/routes";
+import { useBasePath } from "../../routing/useBasePath";
+import { style } from "./NotFound.style";
+const NotFound = ({ customerId, country, layout: Layout }) => {
+    const descriptionText = useI18nMessage({ id: I18nMessages.NOT_FOUND_DESCRIPTION });
+    const buttonText = useI18nMessage({ id: I18nMessages.NOT_FOUND_BUTTON });
+    const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
+    useTrackPageView({
+        page: TrackingPage.NOT_FOUND,
+        country,
+        checkoutId: checkout?.id,
+    });
+    const navigate = useNavigate();
+    const basePath = useBasePath();
+    const handleOnPress = useCallback(() => navigate(`${basePath}/${Routes.HOME}`), [basePath, navigate]);
+    const dependenciesLoadedStatuses = [QueryStatus.ERROR, QueryStatus.SUCCESS];
+    const dependenciesLoaded = dependenciesLoadedStatuses.includes(checkoutStatus);
+    if (!dependenciesLoaded)
+        return React.createElement(Spinner, null);
+    return (React.createElement(Layout, { style: { scrollView: style.container } },
+        React.createElement(Body, { style: { column: style.bodyColumn } },
+            React.createElement(AspectRatioView, { aspectRatio: 1.25 },
+                React.createElement(Image, { resizeMode: "contain", source: require("../../../../public/images/not-found.png"), style: style.image, testID: "not-found-image" })),
+            React.createElement(Text, { level: 1, style: style.description }, descriptionText),
+            React.createElement(Button, { onPress: handleOnPress }, buttonText))));
+};
+export { NotFound };

package/dist/infrastructure/ui/views/notFound/NotFound.style.d.ts

@@ -0,0 +1,17 @@
+declare const style: {
+    bodyColumn: {
+        paddingHorizontal: number;
+    };
+    container: {
+        flex: number;
+        paddingBottom: number;
+    };
+    description: {
+        marginBottom: number;
+        textAlign: "center";
+    };
+    image: {
+        flex: number;
+    };
+};
+export { style };

package/dist/infrastructure/ui/views/notFound/NotFound.style.js

@@ -0,0 +1,20 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../theme/theme";
+const { spaceXL, spaceXXL } = theme();
+const style = StyleSheet.create({
+    bodyColumn: {
+        paddingHorizontal: spaceXL,
+    },
+    container: {
+        flex: 1,
+        paddingBottom: spaceXXL,
+    },
+    description: {
+        marginBottom: spaceXL,
+        textAlign: "center",
+    },
+    image: {
+        flex: 1,
+    },
+});
+export { style };

package/dist/infrastructure/ui/views/summary/components/fiveItemsDiscountBanner/FiveItemsDiscountBanner.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+interface FiveItemsDiscountBannerProps {
+    readonly fiveItemsDiscount: number;
+}
+declare const FiveItemsDiscountBanner: FC<FiveItemsDiscountBannerProps>;
+export { FiveItemsDiscountBanner };

package/dist/infrastructure/ui/views/summary/components/fiveItemsDiscountBanner/FiveItemsDiscountBanner.js

@@ -0,0 +1,15 @@
+import { Text } from "@lookiero/aurora";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import React from "react";
+import { View } from "react-native";
+import { I18nMessages } from "../../../../i18n/i18n";
+import { style } from "./FiveItemsDiscountBanner.style";
+const FiveItemsDiscountBanner = ({ fiveItemsDiscount }) => {
+    const bannerText = useI18nMessage({
+        id: I18nMessages.SUMMARY_BANNER,
+        values: { discount: fiveItemsDiscount.toString() },
+    });
+    return (React.createElement(View, { style: style.container },
+        React.createElement(Text, { level: 3 }, bannerText)));
+};
+export { FiveItemsDiscountBanner };

package/dist/infrastructure/ui/views/summary/components/fiveItemsDiscountBanner/FiveItemsDiscountBanner.style.d.ts

@@ -0,0 +1,9 @@
+declare const style: {
+    container: {
+        alignItems: "center";
+        backgroundColor: string;
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+};
+export { style };

package/dist/infrastructure/ui/views/summary/components/fiveItemsDiscountBanner/FiveItemsDiscountBanner.style.js

@@ -0,0 +1,12 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../theme/theme";
+const { colorAccent, spaceXL } = theme();
+const style = StyleSheet.create({
+    container: {
+        alignItems: "center",
+        backgroundColor: colorAccent,
+        paddingHorizontal: spaceXL,
+        paddingVertical: 12,
+    },
+});
+export { style };

package/dist/infrastructure/ui/views/summary/components/pricing/icons/ArrowDown.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SvgProps } from "react-native-svg";
+declare const ArrowDown: (props: SvgProps) => JSX.Element;
+export { ArrowDown };

package/dist/infrastructure/ui/views/summary/components/pricing/icons/ArrowDown.js

@@ -0,0 +1,5 @@
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+const ArrowDown = (props) => (React.createElement(Svg, { viewBox: "0 0 58 10", ...props },
+    React.createElement(Path, { d: "M1.198 1.23 28.27 8.698M55.802 1.23 28.73 8.698", strokeLinecap: "round", strokeWidth: 2 })));
+export { ArrowDown };

package/dist/infrastructure/ui/views/summary/components/pricing/icons/ArrowUp.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SvgProps } from "react-native-svg";
+declare const ArrowUp: (props: SvgProps) => JSX.Element;
+export { ArrowUp };

package/dist/infrastructure/ui/views/summary/components/pricing/icons/ArrowUp.js

@@ -0,0 +1,5 @@
+import React from "react";
+import Svg, { Path } from "react-native-svg";
+const ArrowUp = (props) => (React.createElement(Svg, { viewBox: "0 0 58 10", ...props },
+    React.createElement(Path, { d: "M1.698 8.77 28.77 1.302M56.302 8.77 29.23 1.302", strokeLinecap: "round", strokeWidth: 2 })));
+export { ArrowUp };

package/dist/infrastructure/ui/views/summary/components/stickyPricing/StickyPricing.style.d.ts

@@ -0,0 +1,6 @@
+declare const style: {
+    container: {
+        paddingHorizontal: number;
+    };
+};
+export { style };

package/dist/infrastructure/ui/views/summary/components/stickyPricing/StickyPricing.style.js

@@ -0,0 +1,9 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../theme/theme";
+const { spaceXL } = theme();
+const style = StyleSheet.create({
+    container: {
+        paddingHorizontal: spaceXL,
+    },
+});
+export { style };

package/dist/shared/ui/components/atoms/icon/Icon.d.ts

@@ -0,0 +1,14 @@
+import { COLOR } from "@lookiero/aurora";
+import glyphs from "@lookiero/aurora-iconfont/dist/glyphs.json";
+import { FC } from "react";
+import { StyleProp, TextStyle } from "react-native";
+type IconStyle = StyleProp<TextStyle>;
+type IconName = keyof typeof glyphs;
+interface IconProps {
+    readonly color?: COLOR;
+    readonly name: IconName;
+    readonly style?: IconStyle;
+}
+declare const Icon: FC<IconProps>;
+export type { IconName, IconStyle };
+export { Icon };

package/dist/shared/ui/components/atoms/icon/Icon.js

@@ -0,0 +1,4 @@
+import { Icon as AuroraIcon } from "@lookiero/aurora";
+import React from "react";
+const Icon = ({ color, name, style: customStyle }) => (React.createElement(AuroraIcon, { color: color, name: name, style: customStyle, testID: "icon" }));
+export { Icon };

package/dist/shared/ui/components/atoms/icon/Icon.style.d.ts

@@ -0,0 +1,13 @@
+declare const style: {
+    icon: {
+        fontFamily: string;
+        fontSize: number;
+        fontStyle: "normal";
+        fontWeight: "normal";
+        height: number;
+        minHeight: number;
+        minWidth: number;
+        width: number;
+    };
+};
+export { style };

package/dist/shared/ui/components/atoms/icon/Icon.style.js

@@ -0,0 +1,16 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../../infrastructure/ui/theme/theme";
+const { iconFamily, iconSize } = theme();
+const style = StyleSheet.create({
+    icon: {
+        fontFamily: iconFamily,
+        fontSize: iconSize,
+        fontStyle: "normal",
+        fontWeight: "normal",
+        height: iconSize,
+        minHeight: iconSize,
+        minWidth: iconSize,
+        width: iconSize,
+    },
+});
+export { style };

package/dist/shared/ui/components/atoms/input/Input.js

@@ -1,12 +1,12 @@
-import { Theme } from "@lookiero/aurora";
 import React, { useCallback, useLayoutEffect, useRef, useState } from "react";
 import { Platform, TextInput, } from "react-native";
-import { style, borderWidth1, paddingVertical } from "./Input.style";
+import { theme } from "../../../../../infrastructure/ui/theme/theme";
+import { style, borderSize, paddingVertical } from "./Input.style";
 const MIN_HEIGHT = 56;
 const MAX_HEIGHT = 242; // 10 lines
-const { colorTextMedium } = Theme.get();
+const { colorGrayscaleL } = theme();
 const clamp = (min, max, value) => Math.min(Math.max(min, value), max);
-const Input = ({ minHeight = MIN_HEIGHT, maxHeight = MAX_HEIGHT, style: customStyle, placeholderTextColor = colorTextMedium, onChange, onContentSizeChange, value, multiline, testID = "input", ...restOfProps }) => {
+const Input = ({ minHeight = MIN_HEIGHT, maxHeight = MAX_HEIGHT, style: customStyle, placeholderTextColor = colorGrayscaleL, onChange, onContentSizeChange, value, multiline, testID = "input", ...restOfProps }) => {
     const [height, setHeight] = useState(minHeight);
     // When content height has became smaller the onContentSizeChange does in fact triggered but the internal height is incorrect.
     const handleOnContentSizeChange = useCallback((event) => {
@@ -15,7 +15,7 @@ const Input = ({ minHeight = MIN_HEIGHT, maxHeight = MAX_HEIGHT, style: customSt
             return;
         }
         const nativePadding = Platform.OS === "ios" ? paddingVertical * 2 : 0;
-        setHeight(clamp(minHeight, maxHeight, event.nativeEvent.contentSize.height + borderWidth1 * 2 + nativePadding));
+        setHeight(clamp(minHeight, maxHeight, event.nativeEvent.contentSize.height + borderSize * 2 + nativePadding));
     }, [maxHeight, minHeight, multiline, onContentSizeChange]);
     const handleOnContentSizeChangeWeb = useCallback(() => {
         if (!multiline || Platform.OS !== "web") {
@@ -27,7 +27,7 @@ const Input = ({ minHeight = MIN_HEIGHT, maxHeight = MAX_HEIGHT, style: customSt
                 return;
             }
             element.style.height = "0px";
-            element.style.height = `${clamp(minHeight, maxHeight, element.scrollHeight + borderWidth1 * 2)}px`;
+            element.style.height = `${clamp(minHeight, maxHeight, element.scrollHeight + borderSize * 2)}px`;
         });
     }, [maxHeight, minHeight, multiline]);
     useLayoutEffect(handleOnContentSizeChangeWeb, [handleOnContentSizeChangeWeb, value]);

package/dist/shared/ui/components/atoms/input/Input.style.d.ts

@@ -1,4 +1,4 @@
-declare const borderWidth1: number;
+declare const borderSize: number;
 declare const paddingVertical: number;
 declare const style: {
     input: {
@@ -6,7 +6,6 @@ declare const style: {
         textOverflow?: string | undefined;
         appearance?: string | undefined;
         outlineWidth?: number | undefined;
-        borderRadius: number;
         borderWidth: number;
         color: string;
         display: "flex";
@@ -18,4 +17,4 @@ declare const style: {
         paddingTop: number;
     };
 };
-export { style, borderWidth1, paddingVertical };
+export { style, borderSize, paddingVertical };

package/dist/shared/ui/components/atoms/input/Input.style.js

@@ -1,19 +1,18 @@
-import { Theme } from "@lookiero/aurora";
 import { Platform, StyleSheet } from "react-native";
-const { borderRadius2, borderWidth1, colorText, fontBodyHeight3, fontBodyLetterSpacing3, fontBodySize3, fontMap, space4, } = Theme.get();
-const paddingVertical = space4;
+import { theme } from "../../../../../infrastructure/ui/theme/theme";
+const { borderSize, colorContent, fontBodySize3, fontBodyHeight3, fontBodyLetterSpacing3, fontMap, spaceM } = theme();
+const paddingVertical = spaceM;
 // paddingVertical not working in iOS in multiline mode
 const style = StyleSheet.create({
     input: {
-        borderRadius: borderRadius2,
-        borderWidth: borderWidth1,
-        color: colorText,
+        borderWidth: borderSize,
+        color: colorContent,
         display: "flex",
         fontFamily: fontMap.Body,
         fontSize: fontBodySize3,
         letterSpacing: fontBodyLetterSpacing3,
         paddingBottom: paddingVertical,
-        paddingHorizontal: space4,
+        paddingHorizontal: spaceM,
         paddingTop: paddingVertical,
         ...Platform.select({
             web: {
@@ -25,4 +24,4 @@ const style = StyleSheet.create({
         }),
     },
 });
-export { style, borderWidth1, paddingVertical };
+export { style, borderSize, paddingVertical };

package/dist/shared/ui/components/molecules/buttonIcon/ButtonIcon.d.ts

@@ -0,0 +1,16 @@
+import { FC } from "react";
+import { StyleProp, TouchableHighlightProps, ViewStyle } from "react-native";
+import { IconName, IconStyle } from "../../atoms/icon/Icon";
+interface ButtonIconStyle {
+    readonly button: StyleProp<ViewStyle>;
+    readonly icon: IconStyle;
+}
+interface ButtonIconBaseProps {
+    readonly name: IconName;
+    readonly testID?: string;
+    readonly style?: Partial<ButtonIconStyle>;
+}
+interface ButtonIconProps extends Omit<TouchableHighlightProps, keyof ButtonIconBaseProps>, ButtonIconBaseProps {
+}
+declare const ButtonIcon: FC<ButtonIconProps>;
+export { ButtonIcon };

package/dist/shared/ui/components/molecules/buttonIcon/ButtonIcon.js

@@ -0,0 +1,7 @@
+import React from "react";
+import { TouchableHighlight } from "react-native";
+import { Icon } from "../../atoms/icon/Icon";
+import { buttonIconUnderlayColor, style } from "./ButtonIcon.style";
+const ButtonIcon = ({ name, style: customStyle, testID = "button-icon", onPress, ...restProps }) => (React.createElement(TouchableHighlight, { style: [style.buttonIcon, customStyle?.button], testID: testID, underlayColor: buttonIconUnderlayColor, onPress: onPress, ...restProps },
+    React.createElement(Icon, { name: name, style: customStyle?.icon })));
+export { ButtonIcon };

package/dist/shared/ui/components/molecules/buttonIcon/ButtonIcon.style.d.ts

@@ -0,0 +1,8 @@
+declare const buttonIconUnderlayColor: string;
+declare const style: {
+    buttonIcon: {
+        flexGrow: number;
+        padding: number;
+    };
+};
+export { style, buttonIconUnderlayColor };

package/dist/shared/ui/components/molecules/buttonIcon/ButtonIcon.style.js

@@ -0,0 +1,11 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../../infrastructure/ui/theme/theme";
+const { spaceS, colorGrayscaleS } = theme();
+const buttonIconUnderlayColor = colorGrayscaleS;
+const style = StyleSheet.create({
+    buttonIcon: {
+        flexGrow: 0,
+        padding: spaceS,
+    },
+});
+export { style, buttonIconUnderlayColor };

package/dist/shared/ui/components/molecules/inputField/InputField.d.ts

@@ -1,13 +1,11 @@
-import { IconName } from "@lookiero/aurora";
+import { IconName, InputProperties } from "@lookiero/aurora";
 import { FC } from "react";
 import { StyleProp, TextStyle, ViewStyle } from "react-native";
 import { ErrorStyle } from "../../atoms/error/Error";
 import { FieldStyle } from "../../atoms/field/Field";
-import { InputProps, InputStyle } from "../../atoms/input/Input";
 type IconStyle = StyleProp<TextStyle>;
 type InputFieldStyle = FieldStyle & {
     readonly inputField: StyleProp<ViewStyle>;
-    readonly input: InputStyle;
     readonly error: ErrorStyle;
     readonly icon: IconStyle;
 };
@@ -19,7 +17,7 @@ interface InputFieldBaseProps {
     readonly onChange?: (value: string) => void;
     readonly icon?: IconName;
 }
-interface InputFieldProps extends Omit<InputProps, keyof InputFieldBaseProps>, InputFieldBaseProps {
+interface InputFieldProps extends Omit<InputProperties, keyof InputFieldBaseProps>, InputFieldBaseProps {
 }
 declare const InputField: FC<InputFieldProps>;
 export type { InputFieldStyle };

package/dist/shared/ui/components/molecules/inputField/InputField.js

@@ -1,25 +1,27 @@
-import { COLOR, Icon, Theme } from "@lookiero/aurora";
+import { COLOR, Icon, Theme, Input } from "@lookiero/aurora";
 import React, { useCallback, useState } from "react";
 import { View } from "react-native";
 import { Error } from "../../atoms/error/Error";
 import { Field } from "../../atoms/field/Field";
-import { Input } from "../../atoms/input/Input";
 import { style } from "./InputField.style";
 const { colorBgBase, colorBorderInput, colorBorderInputError, colorBorderInputFocus, colorText, colorTextError, colorTextMedium, iconSize, space6, } = Theme.get();
 const inputPaddingRightWithIcon = iconSize + space6;
-const InputField = ({ label, placeholder, value, multiline = false, minHeight, error, style: customStyle, onChange = () => void 0, icon, ...inputRestProps }) => {
+const InputField = ({ label, placeholder, value, multiline = false, error, style: customStyle, onChange = () => void 0, icon, testID = "input", ...inputRestProps }) => {
     const [isFocused, setIsFocused] = useState(false);
     const handleOnChange = useCallback((text) => onChange(text), [onChange]);
     const handleOnBlur = useCallback(() => setIsFocused(false), []);
     const handleOnFocus = useCallback(() => setIsFocused(true), []);
     const borderColor = error ? colorBorderInputError : isFocused ? colorBorderInputFocus : colorBorderInput;
     const color = error ? colorTextError : isFocused ? colorText : colorTextMedium;
-    return (React.createElement(View, { style: customStyle?.inputField, testID: "input-field" },
+    return (React.createElement(View, { style: [style.inputField, { borderColor }, customStyle?.inputField], testID: "input-field" },
         React.createElement(Field, { isFocused: isFocused || !!value, label: label, style: {
                 field: [style.field, customStyle?.field],
                 fieldText: [{ color }, customStyle?.fieldText],
             } }),
-        React.createElement(Input, { minHeight: minHeight, multiline: multiline, placeholder: placeholder, placeholderTextColor: isFocused ? colorTextMedium : colorBgBase, style: [!!icon && { paddingRight: inputPaddingRightWithIcon }, { borderColor, color }, customStyle?.input], value: value, onBlur: handleOnBlur, onChangeText: handleOnChange, onFocus: handleOnFocus, ...inputRestProps }),
+        React.createElement(Input, { multiline: multiline, placeholder: placeholder, placeholderTextColor: isFocused ? colorTextMedium : colorBgBase, style: [!!icon && { paddingRight: inputPaddingRightWithIcon }, style.input, { color }], testID: testID, value: value, onBlur: handleOnBlur, 
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            onChange: handleOnChange, onFocus: handleOnFocus, ...inputRestProps }),
         !!icon && React.createElement(Icon, { color: COLOR.GRAYSCALE_L, name: icon, style: [style.icon, customStyle?.icon], testID: "icon" }),
         !!error && React.createElement(Error, { error: error, style: [style.error, customStyle?.error] })));
 };

package/dist/shared/ui/components/molecules/inputField/InputField.style.d.ts

@@ -17,5 +17,13 @@ declare const style: {
         width: number;
         zIndex: number;
     };
+    input: {
+        textOverflow?: string | undefined;
+        maxHeight: number;
+    };
+    inputField: {
+        borderRadius: number;
+        borderWidth: number;
+    };
 };
 export { style };

package/dist/shared/ui/components/molecules/inputField/InputField.style.js

@@ -1,6 +1,6 @@
 import { Theme } from "@lookiero/aurora";
-import { StyleSheet } from "react-native";
-const { space1, space4, space6 } = Theme.get();
+import { StyleSheet, Platform } from "react-native";
+const { space1, space4, space6, borderRadius2, borderWidth1 } = Theme.get();
 const style = StyleSheet.create({
     error: {
         marginLeft: space6,
@@ -20,5 +20,17 @@ const style = StyleSheet.create({
         width: 16,
         zIndex: 4,
     },
+    input: {
+        maxHeight: 242,
+        ...Platform.select({
+            web: {
+                textOverflow: "ellipsis",
+            },
+        }),
+    },
+    inputField: {
+        borderRadius: borderRadius2,
+        borderWidth: borderWidth1,
+    },
 });
 export { style };

package/dist/shared/ui/components/molecules/selectField/SelectField.d.ts

@@ -0,0 +1,27 @@
+import { FC } from "react";
+import { StyleProp, TextStyle, TouchableHighlightProps, ViewStyle } from "react-native";
+import { InputFieldStyle } from "../inputField/InputField";
+interface SelectFieldStyle {
+    readonly selectField: StyleProp<ViewStyle>;
+    readonly modalContent: StyleProp<ViewStyle>;
+    readonly option: StyleProp<ViewStyle>;
+    readonly optionText: StyleProp<TextStyle>;
+    readonly inputField: Partial<InputFieldStyle>;
+}
+interface Option {
+    readonly label: string;
+    readonly value: string;
+}
+interface SelectFieldBaseProps {
+    readonly title?: string;
+    readonly placeholder: string;
+    readonly value: string | undefined;
+    readonly options: Option[];
+    readonly style?: Partial<SelectFieldStyle>;
+    readonly onChange?: (value: string) => void;
+}
+interface SelectFieldProps extends Omit<TouchableHighlightProps, keyof SelectFieldBaseProps>, SelectFieldBaseProps {
+}
+declare const SelectField: FC<SelectFieldProps>;
+export type { Option };
+export { SelectField };

package/dist/shared/ui/components/molecules/selectField/SelectField.js

@@ -0,0 +1,28 @@
+import { COLOR, Text } from "@lookiero/aurora";
+import React, { useCallback, useMemo, useState } from "react";
+import { TouchableHighlight, View } from "react-native";
+import { theme } from "../../../../../infrastructure/ui/theme/theme";
+import { Modal } from "../../layouts/modal/Modal";
+import { InputField } from "../inputField/InputField";
+import { style } from "./SelectField.style";
+const { colorGrayscaleS } = theme();
+const SelectField = ({ title, placeholder, value, options, style: customStyle, onChange = () => void 0, testID, ...touchableRestProps }) => {
+    const [modalVisible, setModalVisible] = useState(false);
+    const handleOnPressSelectField = useCallback(() => setModalVisible(true), []);
+    const handleOnModalClose = useCallback(() => setModalVisible(false), []);
+    const handleOnPressOption = useCallback((value) => {
+        onChange(value);
+        handleOnModalClose();
+    }, [handleOnModalClose, onChange]);
+    const selectedValue = useMemo(() => options.find((option) => option.value === value), [options, value]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TouchableHighlight, { accessibilityLabel: testID, style: customStyle?.selectField, testID: testID, underlayColor: colorGrayscaleS, accessible: true, onPress: handleOnPressSelectField, ...touchableRestProps },
+            React.createElement(View, { pointerEvents: "none" },
+                React.createElement(InputField, { editable: false, icon: "arrow-down", label: placeholder, style: customStyle?.inputField, value: selectedValue?.label }))),
+        React.createElement(Modal, { testID: "select-field-modal", visible: modalVisible, scroll: true, showCloseButton: true, onClose: handleOnModalClose },
+            React.createElement(View, { style: [style.modalContent, customStyle?.modalContent] },
+                title && (React.createElement(Text, { level: 2, style: style.modalTitle }, title)),
+                options.map(({ label, value: optionValue }) => (React.createElement(TouchableHighlight, { key: optionValue, accessibilityLabel: optionValue, disabled: value === optionValue, style: [style.option, customStyle?.option], testID: optionValue, underlayColor: colorGrayscaleS, accessible: true, onPress: value !== optionValue ? () => handleOnPressOption(optionValue) : undefined },
+                    React.createElement(Text, { color: value === optionValue ? COLOR.GRAYSCALE_M : COLOR.CONTENT, level: 3, style: [style.optionText, customStyle?.optionText] }, label))))))));
+};
+export { SelectField };

package/dist/shared/ui/components/molecules/selectField/SelectField.style.d.ts

@@ -0,0 +1,19 @@
+declare const style: {
+    modalContent: {
+        paddingBottom: number;
+        paddingHorizontal: number;
+    };
+    modalTitle: {
+        marginBottom: number;
+        textAlign: "center";
+    };
+    option: {
+        borderBottomColor: string;
+        borderBottomWidth: number;
+        paddingVertical: number;
+    };
+    optionText: {
+        lineHeight: number;
+    };
+};
+export { style };

package/dist/shared/ui/components/molecules/selectField/SelectField.style.js

@@ -0,0 +1,22 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../../infrastructure/ui/theme/theme";
+const { borderSize, colorGrayscaleS, spaceM, spaceL, spaceXL } = theme();
+const style = StyleSheet.create({
+    modalContent: {
+        paddingBottom: spaceL,
+        paddingHorizontal: spaceXL,
+    },
+    modalTitle: {
+        marginBottom: spaceM,
+        textAlign: "center",
+    },
+    option: {
+        borderBottomColor: colorGrayscaleS,
+        borderBottomWidth: borderSize,
+        paddingVertical: spaceM,
+    },
+    optionText: {
+        lineHeight: 24,
+    },
+});
+export { style };

package/dist/shared/ui/components/molecules/toast/Toast.d.ts

@@ -0,0 +1,25 @@
+import { FC } from "react";
+import { StyleProp, TextStyle, ViewStyle } from "react-native";
+declare enum ToastVariant {
+    INFO = "INFO",
+    ERROR = "ERROR",
+    SUCCESS = "SUCCESS"
+}
+interface ToastStyle {
+    readonly toast?: StyleProp<ViewStyle>;
+    readonly content?: StyleProp<ViewStyle>;
+    readonly title?: StyleProp<TextStyle>;
+    readonly body?: StyleProp<TextStyle>;
+    readonly closeButton?: StyleProp<ViewStyle>;
+}
+interface ToastProps {
+    readonly body: string;
+    readonly title?: string;
+    readonly onClose?: () => void;
+    readonly testID?: string;
+    readonly variant?: ToastVariant;
+    readonly style?: ToastStyle;
+}
+declare const Toast: FC<ToastProps>;
+export type { ToastStyle };
+export { Toast, ToastVariant };

package/dist/shared/ui/components/molecules/toast/Toast.js

@@ -0,0 +1,22 @@
+import { COLOR, Text } from "@lookiero/aurora";
+import React from "react";
+import { View } from "react-native";
+import { useScreenSize } from "../../../hooks/useScreenSize";
+import { ButtonIcon } from "../buttonIcon/ButtonIcon";
+import { style } from "./Toast.style";
+var ToastVariant;
+(function (ToastVariant) {
+    ToastVariant["INFO"] = "INFO";
+    ToastVariant["ERROR"] = "ERROR";
+    ToastVariant["SUCCESS"] = "SUCCESS";
+})(ToastVariant || (ToastVariant = {}));
+const styleVariant = (variant) => variant.toLowerCase();
+const Toast = ({ body, title, onClose, testID, variant = ToastVariant.INFO, style: customStyle, }) => {
+    const screenSize = useScreenSize();
+    return (React.createElement(View, { style: [style.toast, style[styleVariant(variant)], customStyle?.toast], testID: testID },
+        React.createElement(View, { style: style.content },
+            title && (React.createElement(Text, { level: screenSize === "S" ? 3 : 2, style: [style.title, customStyle?.title], testID: "toast-title" }, title)),
+            React.createElement(Text, { color: COLOR.CONTENT, level: 2, style: customStyle?.body, testID: "toast-body", detail: true }, body)),
+        onClose && (React.createElement(ButtonIcon, { name: "close", style: { button: [style.button, customStyle?.closeButton] }, testID: "toast-close-button", onPress: onClose }))));
+};
+export { Toast, ToastVariant };

package/dist/shared/ui/components/molecules/toast/Toast.style.d.ts

@@ -0,0 +1,34 @@
+declare const style: {
+    button: {
+        marginLeft: number;
+        padding: number;
+    };
+    content: {
+        flex: number;
+        padding: number;
+    };
+    error: {
+        backgroundColor: string;
+    };
+    info: {
+        backgroundColor: string;
+    };
+    success: {
+        backgroundColor: string;
+    };
+    title: {
+        marginBottom: number;
+    };
+    toast: {
+        alignItems: "flex-start";
+        flexDirection: "row";
+        shadowColor: string;
+        shadowOffset: {
+            width: number;
+            height: number;
+        };
+        shadowOpacity: number;
+        shadowRadius: number;
+    };
+};
+export { style };

package/dist/shared/ui/components/molecules/toast/Toast.style.js

@@ -0,0 +1,34 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../../../../infrastructure/ui/theme/theme";
+const { colorAlert, colorInfo, colorAccent, spaceS, spaceM, elevationColor, elevationOffset, elevationOpacityM, elevationRadius, } = theme();
+const style = StyleSheet.create({
+    button: {
+        marginLeft: spaceS,
+        padding: spaceM,
+    },
+    content: {
+        flex: 1,
+        padding: spaceM,
+    },
+    error: {
+        backgroundColor: colorAlert,
+    },
+    info: {
+        backgroundColor: colorInfo,
+    },
+    success: {
+        backgroundColor: colorAccent,
+    },
+    title: {
+        marginBottom: spaceS,
+    },
+    toast: {
+        alignItems: "flex-start",
+        flexDirection: "row",
+        shadowColor: elevationColor,
+        shadowOffset: elevationOffset,
+        shadowOpacity: elevationOpacityM,
+        shadowRadius: elevationRadius,
+    },
+});
+export { style };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "5.0.4",
+  "version": "5.1.0-beta.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "files": [
@@ -67,7 +67,7 @@
   "devDependencies": {
     "@babel/core": "^7.20.0",
     "@expo/webpack-config": "^0.17.4",
-    "@lookiero/aurora": "^4.0.1",
+    "@lookiero/aurora": "^4.0.4-beta.0",
     "@lookiero/aurora-fonts": "2.0.0",
     "@lookiero/aurora-iconfont": "3.0.0",
     "@lookiero/data-sources": "^0.3",