@lookiero/checkout 9.13.0 → 10.0.0-beta.0

package/dist/src/infrastructure/ui/Root.d.ts

@@ -7,8 +7,8 @@ import { Locale } from "@lookiero/sty-psp-locale";
 import { SentryEnvironment, SentryLoggerFunctionArgs } from "@lookiero/sty-psp-logging";
 import { Layout } from "@lookiero/sty-psp-ui";
 import { Customer } from "../../projection/customer/customer";
-import { Order } from "../../projection/order/order";
-import { Subscription } from "../../projection/subscription/subscription";
+import { OrderProjection } from "../../projection/order/order";
+import { SubscriptionProjection } from "../../projection/subscription/subscription";
 import { KameleoonEnvironment } from "../ab-testing/kameleoonEnvironment";
 interface RootFunctionArgs {
     readonly Messaging: MessagingRoot;
@@ -24,13 +24,13 @@ interface RootFunction {
 }
 interface RootProps {
     readonly basePath: string;
-    readonly locale?: Locale;
+    readonly locale: Locale;
     readonly customer: Customer;
-    readonly order: Order | undefined;
-    readonly subscription: Subscription | undefined;
+    readonly order: OrderProjection;
+    readonly subscription: SubscriptionProjection;
     readonly layout: Layout;
     readonly onNotAccessible: () => void;
-    readonly onCheckoutSubmitted?: () => void;
+    readonly onCheckoutFlowSuccess: () => void;
     readonly useRedirect: () => Record<string, string>;
     readonly useRoutes?: typeof reactRouterUseRoutes;
 }

package/dist/src/infrastructure/ui/Root.js

@@ -2,7 +2,6 @@
 import React, { useCallback } from "react";
 import { Platform } from "react-native";
 import { useRoutes as reactRouterUseRoutes } from "react-router-native";
-import { Locale } from "@lookiero/sty-psp-locale";
 import { sentryLogger, sentryLoggerHOC } from "@lookiero/sty-psp-logging";
 import { QueryBusProvider } from "./hooks/useQueryBus";
 import { Routing } from "./routing/Routing";
@@ -10,11 +9,11 @@ const root = ({ Messaging, I18n, queryBus, getAuthToken, development, sentry, ka
     const logger = sentryLogger(sentry);
     const kameleoon = kameleoonConfig();
     // eslint-disable-next-line react/display-name, react/prop-types
-    const Root = ({ basePath, locale = Locale.en_GB, customer, order, subscription, layout, onNotAccessible, onCheckoutSubmitted, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
+    const Root = ({ basePath, locale, customer, order, subscription, layout, onNotAccessible, onCheckoutFlowSuccess, useRedirect, useRoutes = reactRouterUseRoutes, }) => {
         const handleOnI18nError = useCallback((error) => logger.captureException(error), []);
         return (React.createElement(Messaging, { includeReactQueryDevTools: Platform.OS === "web" },
             React.createElement(QueryBusProvider, { queryBus: queryBus },
-                React.createElement(Routing, { I18n: I18n, basePath: basePath, customer: customer, getAuthToken: getAuthToken, kameleoon: kameleoon, layout: layout, locale: locale, order: order, subscription: subscription, useRedirect: useRedirect, useRoutes: useRoutes, onCheckoutSubmitted: onCheckoutSubmitted, onI18nError: development ? undefined : handleOnI18nError, onNotAccessible: onNotAccessible }))));
+                React.createElement(Routing, { I18n: I18n, basePath: basePath, customer: customer, getAuthToken: getAuthToken, kameleoon: kameleoon, layout: layout, locale: locale, order: order, subscription: subscription, useRedirect: useRedirect, useRoutes: useRoutes, onCheckoutFlowSuccess: onCheckoutFlowSuccess, onI18nError: development ? undefined : handleOnI18nError, onNotAccessible: onNotAccessible }))));
     };
     const hoc = sentryLoggerHOC({ logger });
     /**

package/dist/src/infrastructure/ui/components/atoms/fiveItemsDiscountBanner/FiveItemsDiscountBanner.js

@@ -1,11 +1,10 @@
 import React from "react";
 import { ALIGN, DISPLAY, InfoBox, INFOBOX_TYPE, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { DOMAIN, I18nMessages } from "../../../i18n/i18n";
+import { I18nMessages } from "../../../i18n/i18n";
 import { style } from "./FiveItemsDiscountBanner.style";
 const FiveItemsDiscountBanner = ({ fiveItemsDiscount }) => {
     const bannerText = useI18nMessage({
-        domain: DOMAIN,
         id: I18nMessages.BANNER_DISCOUNT_TEXT,
         values: {
             discount: fiveItemsDiscount.toString(),

package/dist/src/infrastructure/ui/components/atoms/fiveItemsDiscountBanner/FiveItemsDiscountBanner.style.js

@@ -1,9 +1,8 @@
 import { StyleSheet } from "react-native";
-import { theme } from "@lookiero/sty-psp-ui";
-const { fontMap } = theme();
+// TODO: get the font family from Aurora
 const style = StyleSheet.create({
     textBold: {
-        fontFamily: fontMap.Action,
+        fontFamily: "AreaNormal-Extrabold",
     },
 });
 export { style };

package/dist/src/infrastructure/ui/components/atoms/price/Price.js

@@ -2,7 +2,6 @@ import React from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nNumber } from "@lookiero/i18n-react";
-import { DOMAIN } from "../../../i18n/i18n";
 import { style } from "./Price.style";
 const PRICE_VARIANT = {
     default: { detail: true, level: 1 },
@@ -13,13 +12,11 @@ const PRICE_VARIANT = {
 const Price = ({ price, variant = "default", withPercentage = false }) => {
     const isDiscounted = price.discountedPrice && price.discountedPrice.percentage > 0;
     const productPrice = useI18nNumber({
-        domain: DOMAIN,
         value: price.amount / 100,
         style: "currency",
         currency: price.currency,
     });
     const productDiscountedPrice = useI18nNumber({
-        domain: DOMAIN,
         value: (price.discountedPrice?.amount || 0) / 100,
         style: "currency",
         currency: price.currency,

package/dist/src/infrastructure/ui/components/layouts/layout/Layout.d.ts

@@ -0,0 +1,22 @@
+import { FC, ReactNode, RefObject } from "react";
+import { LayoutChangeEvent, ScrollView, StyleProp, ViewStyle } from "react-native";
+
+interface LayoutStyle {
+  readonly safeAreaView: StyleProp<ViewStyle>;
+  readonly scrollView: StyleProp<ViewStyle>;
+  readonly header: StyleProp<ViewStyle>;
+}
+interface LayoutProps {
+  readonly children: ReactNode;
+  readonly header?: JSX.Element | null;
+  readonly footer?: JSX.Element | null;
+  readonly panel?: JSX.Element | null;
+  readonly stickyHeader?: boolean;
+  readonly stickyHeaderHiddenOnScroll?: boolean;
+  readonly scrollRef?: RefObject<ScrollView>;
+  readonly scrollEnabled?: boolean;
+  readonly style?: Partial<LayoutStyle>;
+  readonly onLayout?: (event: LayoutChangeEvent) => void;
+}
+type Layout = FC<LayoutProps>;
+export type { Layout };

package/dist/src/infrastructure/ui/components/layouts/layout/Layout.js

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

package/dist/src/infrastructure/ui/components/layouts/layout/components/footer/Footer.d.ts

@@ -0,0 +1,7 @@
+import { FC, ReactNode } from "react";
+
+interface FooterProps {
+  readonly children: ReactNode;
+}
+declare const Footer: FC<FooterProps>;
+export { Footer };

package/dist/src/infrastructure/ui/components/layouts/layout/components/footer/Footer.js

@@ -0,0 +1,5 @@
+import React from "react";
+import { Platform } from "react-native";
+
+const Footer = ({ children }) => (Platform.OS !== "web" ? React.createElement(React.Fragment, null, children) : null);
+export { Footer };

package/dist/src/infrastructure/ui/components/layouts/layout/components/header/Header.d.ts

@@ -0,0 +1,7 @@
+import { FC, ReactNode } from "react";
+
+interface HeaderProps {
+  readonly children: ReactNode;
+}
+declare const Header: FC<HeaderProps>;
+export { Header };

package/dist/src/infrastructure/ui/components/layouts/layout/components/header/Header.js

@@ -0,0 +1,6 @@
+import React from "react";
+import { View } from "react-native";
+import { style } from "./Header.style";
+
+const Header = ({ children }) => React.createElement(View, { style: style.header }, children);
+export { Header };

package/dist/src/infrastructure/ui/components/layouts/layout/components/header/Header.style.d.ts

@@ -0,0 +1,4 @@
+declare const style: {
+  header: {};
+};
+export { style };

package/dist/src/infrastructure/ui/components/layouts/layout/components/header/Header.style.js

@@ -0,0 +1,20 @@
+import { Platform, StyleSheet } from "react-native";
+import { HEADER_HEIGHT } from "../../../../templates/header/Header.style";
+
+const style = StyleSheet.create({
+  header: {
+    ...Platform.select({
+      web: {
+        position: "sticky",
+        top: 0,
+        zIndex: 10,
+        height: HEADER_HEIGHT,
+      },
+      native: {
+        position: "relative",
+        height: HEADER_HEIGHT,
+      },
+    }),
+  },
+});
+export { style };

package/dist/src/infrastructure/ui/components/layouts/layout/dummyLayout/DummyLayout.d.ts

@@ -0,0 +1,4 @@
+import { Layout } from "../Layout";
+
+declare const DummyLayout: Layout;
+export { DummyLayout };

package/dist/src/infrastructure/ui/components/layouts/layout/dummyLayout/DummyLayout.js

@@ -0,0 +1,43 @@
+/* eslint-disable react/prop-types */
+import React from "react";
+import { View } from "react-native";
+import { GestureHandlerRootView, ScrollView as RNGHScrollView } from "react-native-gesture-handler";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { Footer as DefaultFooter } from "../../../templates/footer/Footer";
+import { DefaultHeader } from "../../../templates/header/defaultHeader/DefaultHeader";
+import { Footer } from "../components/footer/Footer";
+import { Header } from "../components/header/Header";
+import { style } from "./DummyLayout.style";
+
+const DummyLayout = ({
+  children,
+  header = React.createElement(DefaultHeader, null),
+  footer = React.createElement(DefaultFooter, null),
+  panel,
+  style: customStyle,
+  scrollEnabled,
+  onLayout,
+}) =>
+  React.createElement(
+    SafeAreaView,
+    { style: [style.safeAreaView, customStyle?.safeAreaView] },
+    React.createElement(
+      GestureHandlerRootView,
+      { style: { flex: 1 } },
+      React.createElement(
+        RNGHScrollView,
+        {
+          contentContainerStyle: [style.scrollView, customStyle?.scrollView],
+          scrollEnabled: scrollEnabled,
+          scrollEventThrottle: 16,
+          showsVerticalScrollIndicator: false,
+          stickyHeaderIndices: [0],
+        },
+        React.createElement(Header, null, header),
+        panel,
+        React.createElement(View, { style: style.children, onLayout: onLayout }, children),
+      ),
+    ),
+    React.createElement(Footer, null, footer),
+  );
+export { DummyLayout };

package/dist/src/infrastructure/ui/components/layouts/layout/dummyLayout/DummyLayout.style.d.ts

@@ -0,0 +1,12 @@
+declare const style: {
+  children: {
+    flex: number;
+  };
+  safeAreaView: {
+    flex: number;
+  };
+  scrollView: {
+    flexGrow: number;
+  };
+};
+export { style };

package/dist/src/infrastructure/ui/components/layouts/layout/dummyLayout/DummyLayout.style.js

@@ -0,0 +1,14 @@
+import { StyleSheet } from "react-native";
+
+const style = StyleSheet.create({
+  children: {
+    flex: 1,
+  },
+  safeAreaView: {
+    flex: 1,
+  },
+  scrollView: {
+    flexGrow: 1,
+  },
+});
+export { style };

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.js

@@ -1,16 +1,12 @@
 import React, { useCallback } from "react";
-import { TouchableOpacity } from "react-native";
-import { ALIGN, Text } from "@lookiero/aurora";
+import { Button, BUTTON_VARIANT } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { DOMAIN } from "../../../../../i18n/i18n";
 import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
 import { style } from "./ButtonCheckoutQuestionItem.style";
-const ACTIVE_OPACITY = 0.6;
 const ButtonCheckoutQuestionItem = ({ checkoutQuestion, checkoutQuestionParentId, testID, }) => {
     const { feedback, onChange } = useCheckoutQuestionFeedbackForId({ id: checkoutQuestionParentId });
-    const optionText = useI18nMessage({ domain: DOMAIN, id: checkoutQuestion.name });
+    const optionText = useI18nMessage({ id: checkoutQuestion.name });
     const handleOnPress = useCallback(() => onChange({ checkoutQuestionId: checkoutQuestionParentId, checkoutQuestionFeedback: checkoutQuestion.id }), [onChange, checkoutQuestion.id, checkoutQuestionParentId]);
-    return (React.createElement(TouchableOpacity, { accessibilityLabel: testID, activeOpacity: ACTIVE_OPACITY, style: [style.button, feedback === checkoutQuestion.id && style.buttonActive], testID: testID, onPress: handleOnPress },
-        React.createElement(Text, { align: ALIGN.CENTER, level: 3, style: feedback === checkoutQuestion.id && style.textActive, action: true }, optionText)));
+    return (React.createElement(Button, { accessibilityLabel: testID, style: style.button, testID: testID, variant: feedback === checkoutQuestion.id ? BUTTON_VARIANT.PRIMARY : BUTTON_VARIANT.SECONDARY, onPress: handleOnPress }, optionText));
 };
 export { ButtonCheckoutQuestionItem };

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.style.d.ts

@@ -1,21 +1,5 @@
+import { ViewStyle } from "react-native";
 declare const style: {
-    button: {
-        alignContent: "center";
-        borderColor: string;
-        borderRadius: number;
-        borderWidth: number;
-        flex: number;
-        height: number;
-        justifyContent: "center";
-        marginHorizontal: number;
-        paddingLeft: number;
-        paddingRight: number;
-    };
-    buttonActive: {
-        backgroundColor: string;
-    };
-    textActive: {
-        color: string;
-    };
+    button: ViewStyle;
 };
 export { style };

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.style.js

@@ -1,25 +1,13 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { colorBorderActionSecondary, colorBgActionPrimaryActive, colorTextActionPrimary, borderWidth2, borderRadiusFull, space6, space16, } = theme();
-const HEIGHT = space16;
+const { colorBorderActionSecondary, borderWidth2, borderStyle } = theme();
 const style = StyleSheet.create({
     button: {
-        alignContent: "center",
         borderColor: colorBorderActionSecondary,
-        borderRadius: borderRadiusFull,
+        borderStyle: borderStyle,
         borderWidth: borderWidth2,
         flex: 1,
-        height: HEIGHT,
-        justifyContent: "center",
         marginHorizontal: 12,
-        paddingLeft: space6,
-        paddingRight: space6,
-    },
-    buttonActive: {
-        backgroundColor: colorBgActionPrimaryActive,
-    },
-    textActive: {
-        color: colorTextActionPrimary,
     },
 });
 export { style };

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/hostDefaultCheckoutQuestionItem/HostDefaultCheckoutQuestionItem.js

@@ -2,10 +2,9 @@ import React from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { DOMAIN } from "../../../../../i18n/i18n";
 import { style } from "./HostDefaultCheckoutQuestionItem.style";
 const HostDefaultCheckoutQuestionItem = ({ checkoutQuestion, children, }) => {
-    const titleText = useI18nMessage({ domain: DOMAIN, id: checkoutQuestion.name });
+    const titleText = useI18nMessage({ id: checkoutQuestion.name });
     return (React.createElement(React.Fragment, null,
         React.createElement(Text, { level: 3, style: style.title }, titleText),
         React.createElement(View, { style: style.content }, children)));

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/hostSelectCheckoutQuestionItem/HostSelectCheckoutQuestionItem.js

@@ -2,10 +2,9 @@ import React from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { DOMAIN } from "../../../../../i18n/i18n";
 import { style } from "./HostSelectCheckoutQuestionItem.style";
 const HostSelectCheckoutQuestionItem = ({ checkoutQuestion, children, }) => {
-    const titleText = useI18nMessage({ domain: DOMAIN, id: checkoutQuestion.name });
+    const titleText = useI18nMessage({ id: checkoutQuestion.name });
     return (React.createElement(React.Fragment, null,
         React.createElement(Text, { level: 3, style: style.title }, titleText),
         React.createElement(View, { style: style.content }, children)));

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

@@ -1,15 +1,14 @@
 import React, { useCallback, useMemo } from "react";
-import { useI18n } from "@lookiero/i18n-react";
+import { useIntl } from "@lookiero/i18n-react";
 import { InputField, TextInput } from "@lookiero/sty-psp-ui";
-import { DOMAIN } from "../../../../../i18n/i18n";
 import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
 import { style } from "./TextareaCheckoutQuestionItem.style";
 const TextareaCheckoutQuestionItem = ({ checkoutQuestion, checkoutQuestionParentId, testID, }) => {
-    const { formatMessage } = useI18n({ domain: DOMAIN });
+    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, value: feedback, input: ({ onBlur, onFocus, style }) => (React.createElement(TextInput, { placeholder: placeholderText, style: style, testID: testID, textAlignVertical: "top", value: feedback, multiline: true, onBlur: onBlur, onChange: handleOnChange, onFocus: onFocus })), style: {
+    return (React.createElement(InputField, { label: placeholderText, value: feedback, input: ({ onBlur, onFocus, style }) => (React.createElement(TextInput, { placeholder: placeholderText, style: style, testID: testID, value: feedback, multiline: true, onBlur: onBlur, onChange: handleOnChange, onFocus: onFocus })), style: {
             inputField: style.inputField,
             input: { container: style.inputContainer, input: style.input },
         } }));

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.style.d.ts

@@ -1,6 +1,7 @@
 declare const style: {
     input: {
         paddingTop: number;
+        height?: "auto" | undefined;
     };
     inputContainer: {
         alignItems?: "flex-start" | undefined;

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

@@ -8,6 +8,7 @@ const style = StyleSheet.create({
         ...Platform.select({
             android: {
                 paddingTop: space2,
+                height: "auto",
             },
         }),
     },

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/hostDefaultReturnQuestionItem/HostDefaultReturnQuestionItem.js

@@ -1,12 +1,12 @@
 /* eslint-disable react/prop-types */
 import React from "react";
 import { Text, View } from "@lookiero/aurora";
-import { useI18n } from "@lookiero/i18n-react";
+import { useIntl } from "@lookiero/i18n-react";
 import { returnQuestionWithTranslationKey } from "../../../../../../../projection/returnQuestion/returnQuestion.typeguard";
-import { DOMAIN, I18nMessages } from "../../../../../i18n/i18n";
+import { I18nMessages } from "../../../../../i18n/i18n";
 import { style } from "./HostDefaultReturnQuestionItem.style";
 const HostDefaultReturnQuestionItem = ({ returnQuestion, children, }) => {
-    const { formatMessage } = useI18n({ domain: DOMAIN });
+    const { formatMessage } = useIntl();
     const isAllOptions = returnQuestion.translationKey === I18nMessages.RETURN_QUESTION_MAIN_ALL_OPINION;
     return (React.createElement(React.Fragment, null,
         returnQuestionWithTranslationKey(returnQuestion) && returnQuestion.translationKey !== " " && !isAllOptions ? (React.createElement(View, { style: style.title },

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/hostRadioGroupReturnQuestionItem/HostRadioGroupReturnQuestionItem.js

@@ -2,11 +2,10 @@
 import React, { useMemo } from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
-import { useI18n } from "@lookiero/i18n-react";
-import { DOMAIN } from "../../../../../i18n/i18n";
+import { useIntl } from "@lookiero/i18n-react";
 import { style } from "./HostRadioGroupReturnQuestionItem.style";
 const HostRadioGroupReturnQuestionItem = ({ returnQuestion, children, testID, }) => {
-    const { formatMessage } = useI18n({ domain: DOMAIN });
+    const { formatMessage } = useIntl();
     const placeholderText = useMemo(() => (returnQuestion.metadata.placeholder ? formatMessage({ id: returnQuestion.metadata.placeholder }) : ""), [formatMessage, returnQuestion.metadata.placeholder]);
     return (React.createElement(React.Fragment, null,
         React.createElement(View, { style: style.wrapper, testID: testID },

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem.js

@@ -2,21 +2,21 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { TouchableHighlight, View } from "react-native";
 import { ButtonIcon } from "@lookiero/aurora";
-import { useI18n } from "@lookiero/i18n-react";
+import { useIntl } from "@lookiero/i18n-react";
 import { InputField, Modal, TextInput } from "@lookiero/sty-psp-ui";
-import { DOMAIN } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedback, useReturnQuestionFeedbackForReturnQuestion, } from "../../behaviors/useReturnQuestionFeedback";
 import { deepestReturnQuestionWithFeedbackForReturnQuestion, feedbackForReturnQuestion, } from "../../util/returnQuestionFeedback";
 import { style, containerUnderlayColor } from "./HostSelectReturnQuestionItem.style";
 const HostSelectReturnQuestionItem = ({ returnQuestion, children, portalHostName, testID, }) => {
-    const { formatMessage } = useI18n({ domain: DOMAIN });
+    const { formatMessage } = useIntl();
     const placeholderText = useMemo(() => (returnQuestion.metadata.placeholder ? formatMessage({ id: returnQuestion.metadata.placeholder }) : ""), [formatMessage, returnQuestion.metadata.placeholder]);
     const [modalVisible, setModalVisible] = useState(false);
     const handleOnPress = useCallback(() => setModalVisible(true), []);
     const handleOnModalClose = useCallback(() => setModalVisible(false), []);
     const feedback = useReturnQuestionFeedback();
     const { onChange } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion });
-    const translate = useCallback((returnQuestionName) => formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }), [formatMessage]);
+    const intl = useIntl();
+    const translate = useCallback((returnQuestionName) => intl.formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }), [intl]);
     const inputValue = feedbackForReturnQuestion({ feedback, returnQuestion, translate }).join(" / ");
     const [deepestReturnQuestionWithFeedback, isLeaf] = deepestReturnQuestionWithFeedbackForReturnQuestion({
         feedback,

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/hostStackReturnQuestionItem/modal/HostStackReturnQuestionItem.js

@@ -3,14 +3,13 @@ import React, { useCallback, useMemo } from "react";
 import { View } from "react-native";
 import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
 import { COLOR, Text } from "@lookiero/aurora";
-import { useI18n } from "@lookiero/i18n-react";
+import { useIntl } from "@lookiero/i18n-react";
 import { returnQuestionHasChildren } from "../../../../../../../../projection/returnQuestion/returnQuestion.typeguard";
-import { DOMAIN } from "../../../../../../i18n/i18n";
 import ReturnQuestion from "../../../ReturnQuestion";
 import { useReturnQuestionFeedbackForReturnQuestion } from "../../../behaviors/useReturnQuestionFeedback";
 import { style } from "./HostStackReturnQuestionItem.style";
 const HostStackReturnQuestionItem = ({ returnQuestion, children, portalHostName, }) => {
-    const { formatMessage } = useI18n({ domain: DOMAIN });
+    const { formatMessage } = useIntl();
     const { feedback } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion });
     const feedbackReturnQuestion = feedback
         ? returnQuestion.children?.find((returnQuestion) => returnQuestion.id === feedback)

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/modalOptionReturnQuestionItems/ModalOptionReturnQuestionItems.js

@@ -1,14 +1,13 @@
 import React from "react";
 import { View } from "react-native";
 import { COLOR, Text } from "@lookiero/aurora";
-import { useI18n } from "@lookiero/i18n-react";
+import { useIntl } from "@lookiero/i18n-react";
 import { Modal } from "@lookiero/sty-psp-ui";
 import { returnQuestionHasChildren } from "../../../../../../../projection/returnQuestion/returnQuestion.typeguard";
-import { DOMAIN } from "../../../../../i18n/i18n";
 import ReturnQuestion from "../../ReturnQuestion";
 import { style } from "./ModalOptionReturnQuestionItems.style";
 const ModalOptionReturnQuestionItems = ({ portalHostName, returnQuestion, visible, onClose, }) => {
-    const { formatMessage } = useI18n({ domain: DOMAIN });
+    const { formatMessage } = useIntl();
     const title = formatMessage({ id: returnQuestion.translationKey });
     return (React.createElement(Modal, { portalHostName: portalHostName, visible: visible, scroll: true, showCloseButton: true, onClose: onClose },
         React.createElement(View, { style: style.modalContent },

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/optionReturnQuestionItem/OptionReturnQuestionItem.js

@@ -3,12 +3,11 @@ import React, { useCallback } from "react";
 import { TouchableHighlight } from "react-native";
 import { Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
-import { DOMAIN } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedbackForReturnQuestion } from "../../behaviors/useReturnQuestionFeedback";
 import { containerUnderlayColor, style } from "./OptionReturnQuestionItem.style";
 const OptionReturnQuestionItem = ({ returnQuestion, returnQuestionParent, testID, }) => {
     const { onChange } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion: returnQuestionParent });
-    const optionText = useI18nMessage({ domain: DOMAIN, id: returnQuestion.translationKey });
+    const optionText = useI18nMessage({ id: returnQuestion.translationKey });
     const handleOnPress = useCallback(() => onChange({ returnQuestionId: returnQuestionParent.id, returnQuestionFeedback: returnQuestion.id }), [onChange, returnQuestion.id, returnQuestionParent.id]);
     return (React.createElement(TouchableHighlight, { accessibilityLabel: testID, style: style.container, testID: testID, underlayColor: containerUnderlayColor, onPress: handleOnPress },
         React.createElement(Text, { level: 3, style: style.text }, optionText)));

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/radioReturnQuestionItem/RadioReturnQuestionItem.js

@@ -1,20 +1,19 @@
 /* eslint-disable react/prop-types */
 import React, { useCallback, useEffect, useState } from "react";
 import { View, Option, OPTION_VARIANT, SIZE } from "@lookiero/aurora";
-import { useI18n } from "@lookiero/i18n-react";
-import { DOMAIN } from "../../../../../i18n/i18n";
+import { useIntl } from "@lookiero/i18n-react";
 import { useReturnQuestionFeedback, useReturnQuestionFeedbackForReturnQuestion, } from "../../behaviors/useReturnQuestionFeedback";
 import { deepestReturnQuestionWithFeedbackForReturnQuestion, feedbackForReturnQuestion, } from "../../util/returnQuestionFeedback";
 import { ModalOptionReturnQuestionItems } from "../modalOptionReturnQuestionItems/ModalOptionReturnQuestionItems";
 import { style } from "./RadioReturnQuestionItem.style";
 const RadioReturnQuestionItem = ({ returnQuestion, returnQuestionParent, testID, portalHostName, }) => {
-    const { formatMessage } = useI18n({ domain: DOMAIN });
+    const intl = useIntl();
     const [modalVisible, setModalVisible] = useState(false);
     const { feedback: feedbackId, onChange, clear, } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion: returnQuestionParent });
     const feedback = useReturnQuestionFeedback();
-    const translate = useCallback((returnQuestionName) => formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }), [formatMessage]);
+    const translate = useCallback((returnQuestionName) => intl.formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }), [intl]);
     const inputValue = feedbackForReturnQuestion({ feedback, returnQuestion, translate }).join(" / ");
-    const optionText = formatMessage({ id: returnQuestion.translationKey });
+    const optionText = intl.formatMessage({ id: returnQuestion.translationKey });
     const hasChildren = Boolean(returnQuestion.children && returnQuestion.children.length > 0);
     const handleOnModalClose = useCallback(() => {
         // Uncomment if we want to clear current selection (and update callback's dependencies)

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/returnQuestionFeedbackItem/ReturnQuestionFeedbackItem.js

@@ -2,17 +2,17 @@
 import React, { useCallback } from "react";
 import { View } from "react-native";
 import { Text } from "@lookiero/aurora";
-import { useI18nMessage, useI18n } from "@lookiero/i18n-react";
-import { DOMAIN, I18nMessages } from "../../../../../i18n/i18n";
+import { useI18nMessage, useIntl } from "@lookiero/i18n-react";
+import { I18nMessages } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedback } from "../../behaviors/useReturnQuestionFeedback";
 import { feedbackForReturnQuestion } from "../../util/returnQuestionFeedback";
 import { style } from "./ReturnQuestionFeedbackItem.style";
 const ReturnQuestionFeedbackItem = ({ returnQuestion }) => {
-    const titleText = useI18nMessage({ domain: DOMAIN, id: returnQuestion.translationKey });
-    const unansweredText = useI18nMessage({ domain: DOMAIN, id: I18nMessages.FEEDBACK_UNANSWERED });
+    const titleText = useI18nMessage({ id: returnQuestion.translationKey });
+    const unansweredText = useI18nMessage({ id: I18nMessages.FEEDBACK_UNANSWERED });
     const returnQuestionFeedback = useReturnQuestionFeedback();
-    const { formatMessage } = useI18n({ domain: DOMAIN });
-    const translate = useCallback((returnQuestionName) => formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }), [formatMessage]);
+    const intl = useIntl();
+    const translate = useCallback((returnQuestionName) => intl.formatMessage({ id: returnQuestionName, defaultMessage: returnQuestionName }), [intl]);
     const feedback = feedbackForReturnQuestion({ feedback: returnQuestionFeedback, returnQuestion, translate }).join(" / ");
     return (React.createElement(View, { style: style.container },
         React.createElement(Text, { level: 2, style: style.title, detailBold: true }, titleText),

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

@@ -1,18 +1,17 @@
 /* eslint-disable react/prop-types */
 import React, { useCallback, useMemo } from "react";
 import { View } from "@lookiero/aurora";
-import { useI18n } from "@lookiero/i18n-react";
+import { useIntl } from "@lookiero/i18n-react";
 import { InputField, TextInput } from "@lookiero/sty-psp-ui";
-import { DOMAIN } from "../../../../../i18n/i18n";
 import { useReturnQuestionFeedbackForReturnQuestion } from "../../behaviors/useReturnQuestionFeedback";
 import { style } from "./TextareaReturnQuestionItem.style";
 const TextareaReturnQuestionItem = ({ returnQuestion, returnQuestionParent, testID, }) => {
-    const { formatMessage } = useI18n({ domain: DOMAIN });
+    const { formatMessage } = useIntl();
     const placeholderText = useMemo(() => (returnQuestion.metadata.placeholder ? formatMessage({ id: returnQuestion.metadata.placeholder }) : ""), [formatMessage, returnQuestion.metadata.placeholder]);
     const { feedback, onChange } = useReturnQuestionFeedbackForReturnQuestion({ returnQuestion: returnQuestionParent });
     const handleOnChange = useCallback((value) => onChange({ returnQuestionId: returnQuestionParent.id, returnQuestionFeedback: value }), [onChange, returnQuestionParent.id]);
     return (React.createElement(View, { style: style.wrapper, testID: "textarea-return-question-item" },
-        React.createElement(InputField, { label: placeholderText, value: feedback, input: ({ onBlur, onFocus, style }) => (React.createElement(TextInput, { placeholder: placeholderText, style: style, testID: testID, textAlignVertical: "top", value: feedback, multiline: true, onBlur: onBlur, onChange: handleOnChange, onFocus: onFocus })), style: {
+        React.createElement(InputField, { label: placeholderText, value: feedback, input: ({ onBlur, onFocus, style }) => (React.createElement(TextInput, { placeholder: placeholderText, style: style, testID: testID, value: feedback, multiline: true, onBlur: onBlur, onChange: handleOnChange, onFocus: onFocus })), style: {
                 inputField: style.inputField,
                 input: { container: style.inputContainer, input: style.input },
             } })));

package/dist/src/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.style.d.ts

@@ -1,6 +1,7 @@
 declare const style: {
     input: {
         paddingTop: number;
+        height?: "auto" | undefined;
     };
     inputContainer: {
         alignItems?: "flex-start" | undefined;

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

@@ -8,6 +8,7 @@ const style = StyleSheet.create({
         ...Platform.select({
             android: {
                 paddingTop: space2,
+                height: "auto",
             },
         }),
     },

package/dist/src/infrastructure/ui/components/templates/footer/Footer.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+declare const Footer: FC;
+export { Footer };