@lookiero/checkout 6.5.0 → 6.5.1-beta.0

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

@@ -0,0 +1,21 @@
+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,6 @@
+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,4 @@
+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,6 @@
+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,5 @@
+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,19 @@
+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,3 @@
+import { Layout } from "../Layout";
+declare const DummyLayout: Layout;
+export { DummyLayout };

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

@@ -0,0 +1,18 @@
+/* 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,13 @@
+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/templates/header/defaultHeader/DefaultHeader.d.ts

@@ -0,0 +1,6 @@
+import { FC } from "react";
+interface DefaultHeaderProps {
+    readonly onPressMenu?: () => void;
+}
+declare const DefaultHeader: FC<DefaultHeaderProps>;
+export { DefaultHeader };

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { ButtonIcon } from "@lookiero/aurora";
+import { Header } from "../Header";
+import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
+import { Logo } from "../logo/Logo";
+import { style } from "./DefaultHeader.style";
+const DefaultHeader = ({ onPressMenu }) => (React.createElement(Header, { testID: "default-header" },
+    React.createElement(Logo, null),
+    React.createElement(ButtonIconPlaceholder, null),
+    React.createElement(ButtonIcon, { name: "menu", style: style.button, testID: "menu-button-icon", onPress: onPressMenu })));
+export { DefaultHeader };

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

@@ -0,0 +1,8 @@
+declare const style: {
+    button: {
+        alignSelf: "auto";
+        height: number;
+        width: number;
+    };
+};
+export { style };

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

@@ -0,0 +1,11 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+const { space10 } = theme();
+const style = StyleSheet.create({
+    button: {
+        alignSelf: "auto",
+        height: space10,
+        width: space10,
+    },
+});
+export { style };

package/dist/src/infrastructure/ui/views/feedback/Feedback.js

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect, useRef } from "react";
 import { Spinner } from "@lookiero/aurora";
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import { useLogger } from "@lookiero/sty-psp-logging";
+import { useScreenSize } from "@lookiero/sty-psp-ui";
 import { CheckoutQuestionType } from "../../../../projection/checkoutQuestion/checkoutQuestion";
 import { useGiveCheckoutFeedback } from "../../../domain/checkoutFeedback/react/useGiveCheckoutFeedback";
 import { useViewFirstAvailableCheckoutByCustomerId } from "../../../projection/checkout/react/useViewFirstAvailableCheckoutByCustomerId";
@@ -17,6 +18,8 @@ import { style } from "./Feedback.style";
 import { CheckoutQuestionsForm } from "./components/checkoutQuestionsForm/CheckoutQuestionsForm";
 const Feedback = ({ layout: Layout }) => {
     const logger = useLogger();
+    const screenSize = useScreenSize();
+    const isDesktop = screenSize === "L";
     const { customer: { customerId, country, segment }, } = useStaticInfo();
     const [checkout, checkoutStatus] = useViewFirstAvailableCheckoutByCustomerId({ customerId });
     const [checkoutQuestions, checkoutQuestionsStatus] = useListCheckoutQuestionsByCheckoutId({
@@ -78,8 +81,8 @@ const Feedback = ({ layout: Layout }) => {
     if (!dependenciesLoaded)
         return React.createElement(Spinner, null);
     return (React.createElement(CheckoutQuestionFeedbackProvider, { feedback: {}, onChanged: handleOnChangedFeedback },
-        React.createElement(Layout, { style: { scrollView: style.container } },
-            React.createElement(Body, { style: { column: style.bodyColumn } },
+        React.createElement(Layout, null,
+            React.createElement(Body, { style: { row: [style.container, isDesktop && style.containerDesktop] } },
                 React.createElement(CheckoutQuestionsForm, { checkoutQuestions: checkoutQuestions || [], submitButtonDisabled: giveCheckoutFeedbackStatus === CommandStatus.LOADING, onSubmit: handleOnSubmit })))));
 };
 export { Feedback };

package/dist/src/infrastructure/ui/views/feedback/Feedback.style.d.ts

@@ -1,10 +1,11 @@
 declare const style: {
-    bodyColumn: {
-        paddingBottom: number;
+    container: {
+        justifyContent: "flex-start";
         paddingHorizontal: number;
+        paddingVertical: number;
     };
-    container: {
-        paddingBottom: number;
+    containerDesktop: {
+        paddingHorizontal: number;
     };
 };
 export { style };

package/dist/src/infrastructure/ui/views/feedback/Feedback.style.js

@@ -1,13 +1,14 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { space8, space10 } = theme();
+const { space3, space6, space8 } = theme();
 const style = StyleSheet.create({
-    bodyColumn: {
-        paddingBottom: space8,
-        paddingHorizontal: space8,
-    },
     container: {
-        paddingBottom: space10,
+        justifyContent: "flex-start",
+        paddingHorizontal: space6,
+        paddingVertical: space8,
+    },
+    containerDesktop: {
+        paddingHorizontal: space3,
     },
 });
 export { style };

package/dist/src/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.js

@@ -1,5 +1,4 @@
 import React, { useCallback, useMemo } from "react";
-import { View } from "react-native";
 import { Button } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { CheckoutQuestionType, } from "../../../../../../projection/checkoutQuestion/checkoutQuestion";
@@ -12,7 +11,6 @@ import { HostSelectCheckoutQuestionItem } from "../../../../components/organisms
 import { IconCheckoutQuestionItem } from "../../../../components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/IconCheckoutQuestionItem";
 import { TextareaCheckoutQuestionItem } from "../../../../components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem";
 import { I18nMessages } from "../../../../i18n/i18n";
-import { style } from "./CheckoutQuestionsForm.style";
 const checkoutQuestionItems = {
     [CheckoutQuestionType.HOST_DEFAULT]: HostDefaultCheckoutQuestionItem,
     [CheckoutQuestionType.HOST_TEXTAREA]: HostDefaultCheckoutQuestionItem,
@@ -33,7 +31,6 @@ const CheckoutQuestionsForm = ({ checkoutQuestions, submitButtonDisabled, onSubm
     return (React.createElement(React.Fragment, null,
         React.createElement(CheckoutQuestionItemProvider, { checkoutQuestionItems: checkoutQuestionItems },
             React.createElement(CheckoutQuestions, { checkoutQuestions: filteredCheckoutQuestions })),
-        React.createElement(View, { style: style.buttonContainer },
-            React.createElement(Button, { busy: submitButtonDisabled, testID: "checkout-feedback-button", onPress: handlePress }, buttonText))));
+        React.createElement(Button, { busy: submitButtonDisabled, testID: "checkout-feedback-button", onPress: handlePress }, buttonText)));
 };
 export { CheckoutQuestionsForm };

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

@@ -0,0 +1,13 @@
+import { FC } from "react";
+import { LayoutRectangle } from "react-native";
+import { PricingProjection } from "../../../../../../projection/pricing/pricing";
+interface StickyPricingProps {
+    readonly pricing: PricingProjection;
+    readonly totalCheckoutItemsKept: number;
+    readonly collapsed: boolean;
+    readonly onPress: () => void;
+    readonly onSubmit: () => void;
+    readonly onLayout?: ({ width, height }: LayoutRectangle) => void;
+}
+declare const StickyPricing: FC<StickyPricingProps>;
+export { StickyPricing };

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

@@ -0,0 +1,9 @@
+import React from "react";
+import { Sticky } from "@lookiero/sty-psp-ui";
+import { Body } from "../../../../components/layouts/body/Body";
+import { Pricing } from "../pricing/Pricing";
+import { style } from "./StickyPricing.style";
+const StickyPricing = ({ pricing, totalCheckoutItemsKept, collapsed, onPress, onSubmit, onLayout, }) => (React.createElement(Sticky, { style: style.sticky, onLayout: onLayout },
+    React.createElement(Body, null,
+        React.createElement(Pricing, { balanceDiscount: pricing.balanceDiscount, collapsed: collapsed, discount: pricing.discount, discountPercentage: pricing.discountPercentage, pendingToPay: pricing.pendingToPay, service: pricing.service, subtotal: pricing.subtotal, totalCheckoutItemsKept: totalCheckoutItemsKept, onPress: onPress, onSubmit: onSubmit }))));
+export { StickyPricing };

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

@@ -0,0 +1,7 @@
+declare const style: {
+    sticky: {
+        paddingBottom: number;
+        paddingTop: number;
+    };
+};
+export { style };

package/{src/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.style.ts → dist/src/infrastructure/ui/views/summary/components/stickyPricing/StickyPricing.style.js}

@@ -1,13 +1,10 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-
-const { space6, space8 } = theme();
-
+const { space3, space4 } = theme();
 const style = StyleSheet.create({
-  buttonContainer: {
-    paddingHorizontal: space6,
-    paddingVertical: space8,
-  },
+    sticky: {
+        paddingBottom: space4,
+        paddingTop: space3,
+    },
 });
-
 export { style };

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "6.5.0";
+export declare const VERSION = "6.5.1-beta.0";

package/dist/src/version.js

@@ -1 +1 @@
-export const VERSION = "6.5.0";
+export const VERSION = "6.5.1-beta.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "6.5.0",
+  "version": "6.5.1-beta.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": "false",

package/src/infrastructure/ui/views/feedback/Feedback.style.ts

@@ -1,15 +1,16 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { space8, space10 } = theme();
+const { space3, space6, space8 } = theme();
 
 const style = StyleSheet.create({
-  bodyColumn: {
-    paddingBottom: space8,
-    paddingHorizontal: space8,
-  },
   container: {
-    paddingBottom: space10,
+    justifyContent: "flex-start",
+    paddingHorizontal: space6,
+    paddingVertical: space8,
+  },
+  containerDesktop: {
+    paddingHorizontal: space3,
   },
 });
 

package/src/infrastructure/ui/views/feedback/Feedback.tsx

@@ -2,7 +2,7 @@ import React, { FC, useCallback, useEffect, useRef } from "react";
 import { Spinner } from "@lookiero/aurora";
 import { CommandStatus, QueryStatus } from "@lookiero/messaging-react";
 import { useLogger } from "@lookiero/sty-psp-logging";
-import { Layout } from "@lookiero/sty-psp-ui";
+import { Layout, useScreenSize } from "@lookiero/sty-psp-ui";
 import { CheckoutFeedbackProjection } from "../../../../projection/checkoutFeedback/checkoutFeedback";
 import { CheckoutQuestionType } from "../../../../projection/checkoutQuestion/checkoutQuestion";
 import { useGiveCheckoutFeedback } from "../../../domain/checkoutFeedback/react/useGiveCheckoutFeedback";
@@ -33,6 +33,8 @@ interface FeedbackProps {
 
 const Feedback: FC<FeedbackProps> = ({ layout: Layout }) => {
   const logger = useLogger();
+  const screenSize = useScreenSize();
+  const isDesktop = screenSize === "L";
   const {
     customer: { customerId, country, segment },
   } = useStaticInfo();
@@ -114,8 +116,8 @@ const Feedback: FC<FeedbackProps> = ({ layout: Layout }) => {
 
   return (
     <CheckoutQuestionFeedbackProvider feedback={{}} onChanged={handleOnChangedFeedback}>
-      <Layout style={{ scrollView: style.container }}>
-        <Body style={{ column: style.bodyColumn }}>
+      <Layout>
+        <Body style={{ row: [style.container, isDesktop && style.containerDesktop] }}>
           <CheckoutQuestionsForm
             checkoutQuestions={checkoutQuestions || []}
             submitButtonDisabled={giveCheckoutFeedbackStatus === CommandStatus.LOADING}

package/src/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.tsx

@@ -1,5 +1,4 @@
 import React, { FC, useCallback, useMemo } from "react";
-import { View } from "react-native";
 import { Button } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { CheckoutFeedbackProjection } from "../../../../../../projection/checkoutFeedback/checkoutFeedback";
@@ -19,7 +18,6 @@ import { HostSelectCheckoutQuestionItem } from "../../../../components/organisms
 import { IconCheckoutQuestionItem } from "../../../../components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/IconCheckoutQuestionItem";
 import { TextareaCheckoutQuestionItem } from "../../../../components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem";
 import { I18nMessages } from "../../../../i18n/i18n";
-import { style } from "./CheckoutQuestionsForm.style";
 
 const checkoutQuestionItems: CheckoutQuestionItems = {
   [CheckoutQuestionType.HOST_DEFAULT]: HostDefaultCheckoutQuestionItem,
@@ -61,11 +59,9 @@ const CheckoutQuestionsForm: FC<CheckoutQuestionsFormProps> = ({
         <CheckoutQuestions checkoutQuestions={filteredCheckoutQuestions} />
       </CheckoutQuestionItemProvider>
 
-      <View style={style.buttonContainer}>
-        <Button busy={submitButtonDisabled} testID="checkout-feedback-button" onPress={handlePress}>
-          {buttonText}
-        </Button>
-      </View>
+      <Button busy={submitButtonDisabled} testID="checkout-feedback-button" onPress={handlePress}>
+        {buttonText}
+      </Button>
     </>
   );
 };