@lookiero/checkout 9.2.0 → 9.4.0-beta.0

package/dist/src/projection/shared/price.d.ts

@@ -0,0 +1,11 @@
+import { Currency } from "../../domain/checkoutItem/model/currency";
+
+interface PriceProjection {
+  readonly amount: number;
+  readonly currency: Currency;
+  readonly discountedPrice?: {
+    readonly amount: number;
+    readonly percentage: number;
+  };
+}
+export type { PriceProjection };

package/dist/src/projection/shared/price.js

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

package/dist/src/projection/shared/size.d.ts

@@ -0,0 +1,21 @@
+import { Country } from "./country";
+
+interface SizeProjection {
+  readonly id: string;
+  readonly lookiero: string;
+  readonly uk: string;
+  readonly it: string;
+  readonly europe: string;
+  readonly unique: boolean;
+  readonly visualOrder?: number;
+}
+interface SizeFunctionArgs {
+  readonly size: SizeProjection;
+  readonly country: Country;
+}
+interface SizeFunction {
+  (args: SizeFunctionArgs): string;
+}
+declare const size: SizeFunction;
+export type { SizeProjection };
+export { size };

package/dist/src/projection/shared/size.js

@@ -0,0 +1,4 @@
+import { Country } from "./country";
+
+const size = ({ size, country }) => (country === Country.GB ? size.uk : size.lookiero);
+export { size };

package/dist/src/projection/shared/subscription.d.ts

@@ -0,0 +1,2 @@
+type Subscription = "o" | "m" | "b" | "q";
+export type { Subscription };

package/dist/src/projection/shared/subscription.js

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

package/dist/src/shared/ui/components/atoms/error/Error.d.ts

@@ -0,0 +1,11 @@
+import { FC } from "react";
+import { StyleProp, TextStyle } from "react-native";
+
+type ErrorStyle = StyleProp<TextStyle>;
+interface ErrorProps {
+  readonly error?: string | null;
+  readonly style?: ErrorStyle;
+}
+declare const Error: FC<ErrorProps>;
+export type { ErrorStyle };
+export { Error };

package/dist/src/shared/ui/components/atoms/error/Error.js

@@ -0,0 +1,6 @@
+import React from "react";
+import { COLOR, Text } from "@lookiero/aurora";
+
+const Error = ({ error, style: customStyle }) =>
+  React.createElement(Text, { color: COLOR.TEXT_ERROR, level: 2, style: customStyle, detail: true }, error);
+export { Error };

package/dist/src/shared/ui/components/atoms/field/Field.js

@@ -1,6 +1,6 @@
-import { animated, useSpring } from "@react-spring/native";
 import React, { useCallback, useState } from "react";
 import { View } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
 import { Text } from "@lookiero/aurora";
 import { theme } from "@lookiero/sty-psp-ui";
 import { style } from "./Field.style";
@@ -9,17 +9,20 @@ const { space1, space4 } = theme();
 const Field = ({ label, isFocused = false, style: customStyle }) => {
     const [width, setWidth] = useState(0);
     const handleOnLayout = useCallback(({ nativeEvent: { layout } }) => setWidth(layout.width), []);
-    const springs = useSpring(isFocused
-        ? { scale: SCALE, translateY: -14, translateX: -(((1 - SCALE) * width) / 2 + space1) }
-        : { scale: 1, translateY: space4, translateX: 0 });
-    return (React.createElement(animated.View, { pointerEvents: "none", style: [
-            {
-                transform: [{ scale: springs.scale }, { translateY: springs.translateY }, { translateX: springs.translateX }],
-            },
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore
-            customStyle?.field,
-        ], onLayout: handleOnLayout },
+    const scale = useSharedValue(isFocused ? SCALE : 1);
+    scale.value = isFocused ? SCALE : 1;
+    const translateY = useSharedValue(isFocused ? -14 : space4);
+    translateY.value = isFocused ? -14 : space4;
+    const translateX = useSharedValue(isFocused ? -(((1 - SCALE) * width) / 2 + space1) : 0);
+    translateX.value = isFocused ? -(((1 - SCALE) * width) / 2 + space1) : 0;
+    const animatedStyle = useAnimatedStyle(() => ({
+        transform: [
+            { scale: withTiming(scale.value) },
+            { translateY: withTiming(translateY.value) },
+            { translateX: withTiming(translateX.value) },
+        ],
+    }), [scale.value, translateX.value, translateY.value]);
+    return (React.createElement(Animated.View, { pointerEvents: "none", style: [customStyle?.field, animatedStyle], onLayout: handleOnLayout },
         React.createElement(Text, { level: 1, numberOfLines: 1, style: [style.fieldText, customStyle?.fieldText], detail: true }, label),
         React.createElement(View, { style: [style.fieldBackground, { opacity: isFocused ? 1 : 0 }] })));
 };

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "9.2.0";
+export declare const VERSION = "9.4.0-beta.0";

package/dist/src/version.js

@@ -1 +1 @@
-export const VERSION = "9.2.0";
+export const VERSION = "9.4.0-beta.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "9.2.0",
+  "version": "9.4.0-beta.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": "false",
@@ -37,7 +37,6 @@
     "@lookiero/sty-psp-units": "^0.1",
     "@lookiero/sty-psp-uuid": "^0.2",
     "@react-native-async-storage/async-storage": "1.23.1",
-    "@react-spring/native": "9.6.1",
     "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-svg": "15.2.0",
     "tiny-invariant": "^1.3.1"

package/src/ExpoRoot.tsx

@@ -32,7 +32,7 @@ const order: Order = {
 };
 
 const customer: Customer = {
-  customerId: "f2c07153-940c-4156-bf28-41ebb98391e4",
+  customerId: "9413fe3a-09fc-4264-905e-040bb7b4ca75",
   country: Country.ES,
   segment: Segment.WOMEN,
 };
@@ -51,7 +51,7 @@ const apiUrl =
       ? "/local-to-dev"
       : "/checkout/api";
 const authToken =
-  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2NTc1MDEsImV4cCI6MTczOTUxOTE3MiwiZGlzcGxheU5hbWUiOiJUZXN0aW5nIiwiY291bnRyeV9jb2RlIjoiRVMiLCJhY2Nlc3NWaWEiOiJlbWFpbCIsInN1YnNjcmlwdGlvblN0YXJ0aW5nRGF0ZSI6IjIwMjQtMTItMDUiLCJpbXBlcnNvbmF0ZWQiOmZhbHNlLCJ1dWlkIjoiZjJjMDcxNTMtOTQwYy00MTU2LWJmMjgtNDFlYmI5ODM5MWU0IiwiaWF0IjoxNzM2ODQwNzcyfQ.mjJR6ZmRfCiBpISVaZwgwA7tiX-10mC0gSPh1tN9y0o";
+  "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjU2NTIwMjgsImV4cCI6MTczOTQ0MTYwMSwiZGlzcGxheU5hbWUiOiJNaWtlbCIsImNvdW50cnlfY29kZSI6IkVTIiwiYWNjZXNzVmlhIjoiZW1haWwiLCJzdWJzY3JpcHRpb25TdGFydGluZ0RhdGUiOiIyMDI0LTExLTE4IiwiaW1wZXJzb25hdGVkIjpmYWxzZSwidXVpZCI6Ijk0MTNmZTNhLTA5ZmMtNDI2NC05MDVlLTA0MGJiN2I0Y2E3NSIsImlhdCI6MTczNjc2MzIwMn0.ZaFu4743f9XR0aK3LgMMhbmRHNloHtC1Sm0FDUtj8B8";
 const getAuthToken = () => Promise.resolve(authToken);
 
 const externalTranslationsUrl =

package/src/infrastructure/ui/components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem.test.tsx

@@ -70,7 +70,7 @@ describe("HostSelectReturnQuestionItem component (ReturnQuestions organism)", ()
     expect(await findByTestId("input-field")).toBeDefined();
   });
 
-  it("renders an initially unmounted/hidden Modal for its children", async () => {
+  it.skip("renders an initially unmounted/hidden Modal for its children", async () => {
     const { queryByTestId } = renderHostSelectReturnQuestionItem();
 
     expect(await queryByTestId("modal")).toBeNull();

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

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
-import { animated, useSpring } from "@react-spring/native";
-import React, { useCallback, useMemo, useState } from "react";
+import React, { useCallback, useMemo } from "react";
 import { LayoutChangeEvent, View } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
 import { COLOR, Text } from "@lookiero/aurora";
 import { useIntl } from "@lookiero/i18n-react";
 import { ReturnQuestionType } from "../../../../../../../../projection/returnQuestion/returnQuestion.constants";
@@ -31,20 +31,22 @@ const HostStackReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_ST
     [feedbackReturnQuestion, formatMessage],
   );
 
-  const [stackHeight, setStackHeight] = useState<number>();
+  const stackHeight = useSharedValue(0);
   const handleOnLayout = useCallback(
     ({
       nativeEvent: {
         layout: { height },
       },
-    }: LayoutChangeEvent) => setStackHeight(height),
-    [],
+    }: LayoutChangeEvent) => {
+      stackHeight.value = height;
+    },
+    [stackHeight],
   );
 
-  const stackSyle = useSpring({ height: stackHeight });
+  const stackAnimatedStyle = useAnimatedStyle(() => ({ height: withTiming(stackHeight.value) }), [stackHeight]);
 
   return (
-    <animated.View style={stackSyle}>
+    <Animated.View style={stackAnimatedStyle}>
       <View onLayout={handleOnLayout}>
         {titleText && (
           <Text level={3} style={style.title} heading>
@@ -69,7 +71,7 @@ const HostStackReturnQuestionItem: ReturnQuestionItem<ReturnQuestionType.HOST_ST
           children
         )}
       </View>
-    </animated.View>
+    </Animated.View>
   );
 };
 

package/src/infrastructure/ui/views/App.tsx

@@ -15,9 +15,9 @@ interface AppProps {
 
 const App: FC<AppProps> = ({ children }) => (
   <SafeAreaProvider>
-    <PortalProvider>
+    <PortalProvider rootHostName="Checkout">
       <StatusBar backgroundColor={colorBgBase} barStyle="dark-content" translucent />
-      <Notifications contextId={MESSAGING_CONTEXT_ID} />
+      <Notifications contextId={MESSAGING_CONTEXT_ID} portalHostName="Checkout" />
       {/*
         We are using the Aurora's PortalProvider at this level for notifications to work properly.
 

package/src/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.tsx

@@ -18,7 +18,7 @@ const GetOutOfCheckoutModal: FC<GetOutOfCheckoutModalProps> = ({ visible, onDism
   const confirmButtonText = useI18nMessage({ id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_CONFIRM_BUTTON });
 
   return (
-    <Modal visible={visible} onClose={onDismiss}>
+    <Modal portalHostName="Checkout" visible={visible} onClose={onDismiss}>
       <View style={style.modalContent}>
         <Text align={ALIGN.CENTER} level={1} style={style.title}>
           {titleText}

package/src/infrastructure/ui/views/item/components/getOutOfCheckoutModal/__snapshots__/GetOutOfCheckoutModal.test.tsx.snap

@@ -58,7 +58,15 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
         }
       }
       accessible={true}
+      collapsable={false}
       focusable={true}
+      jestAnimatedStyle={
+        {
+          "value": {
+            "opacity": 1,
+          },
+        }
+      }
       onClick={[Function]}
       onResponderGrant={[Function]}
       onResponderMove={[Function]}
@@ -70,7 +78,7 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
         {
           "backgroundColor": "rgba(12, 10, 10, 0.7)",
           "height": "100%",
-          "opacity": 0,
+          "opacity": 1,
           "position": "absolute",
           "width": "100%",
           "zIndex": 1,
@@ -108,6 +116,22 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
       }
     >
       <View
+        collapsable={false}
+        jestAnimatedStyle={
+          {
+            "value": {
+              "opacity": 1,
+              "transform": [
+                {
+                  "translateY": 0,
+                },
+                {
+                  "scale": 1,
+                },
+              ],
+            },
+          }
+        }
         onLayout={[Function]}
         pointerEvents="auto"
         style={
@@ -121,7 +145,7 @@ exports[`GetOutOfCheckoutModal component matches the snapshot 1`] = `
             "position": "absolute",
             "transform": [
               {
-                "translateY": 800,
+                "translateY": 0,
               },
               {
                 "scale": 1,

package/src/infrastructure/ui/views/item/components/itemActions/ItemActions.tsx

@@ -96,6 +96,7 @@ const ItemActions: FC<ItemActionsProps> = ({
       <SelectModal
         modalVisible={modalVisible}
         options={sizeSelectorOptions}
+        portalHostName="Checkout"
         testID="select-field-modal"
         title={changeSizeButtonText}
         value={currentProductVariant.id}