@lookiero/checkout 5.3.0 → 6.0.0-beta.1

package/src/infrastructure/ui/components/templates/header/Header.style.ts

@@ -0,0 +1,22 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+
+const { colorBgBase, space2, space12 } = theme();
+
+export const HEADER_HEIGHT = space12;
+
+const style = StyleSheet.create({
+  header: {
+    alignItems: "center",
+    backgroundColor: colorBgBase,
+    flexDirection: "row",
+    flexGrow: 0,
+    flexWrap: "nowrap",
+    justifyContent: "space-between",
+    overflow: "visible",
+    paddingHorizontal: space2,
+    width: "100%",
+  },
+});
+
+export { style };

package/src/infrastructure/ui/components/templates/header/Header.test.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Text } from "react-native";
+import { render } from "../../../test/render";
+import { Header } from "./Header";
+
+describe("Header template", () => {
+  it("matches the snapshot", () => {
+    const { toJSON } = render(
+      <Header>
+        <Text>Header content</Text>
+      </Header>,
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders correctly", () => {
+    const { getByText } = render(
+      <Header>
+        <Text>Header content</Text>
+      </Header>,
+    );
+
+    expect(getByText("Header content")).toBeTruthy();
+  });
+});

package/src/infrastructure/ui/components/templates/header/Header.tsx

@@ -0,0 +1,17 @@
+import React, { FC, useMemo } from "react";
+import { Platform, SafeAreaView, View, ViewProps } from "react-native";
+import { style } from "./Header.style";
+
+type HeaderProps = ViewProps;
+
+const Header: FC<HeaderProps> = ({ children, style: customStyle, ...props }) => {
+  const Component = useMemo(() => (Platform.OS === "android" ? SafeAreaView : View), []);
+
+  return (
+    <Component {...props} style={[style.header, customStyle]}>
+      {children}
+    </Component>
+  );
+};
+
+export { Header };

package/src/infrastructure/ui/components/templates/header/__snapshots__/Header.test.tsx.snap

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Header template matches the snapshot 1`] = `
+<View
+  style={
+    [
+      {
+        "backgroundColor": "#FFFFFF",
+        "flex": 1,
+      },
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignSelf": "center",
+          "left": 0,
+          "marginHorizontal": "auto",
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+          "width": "100%",
+          "zIndex": 5,
+        },
+      ]
+    }
+  >
+    <RCTSafeAreaView />
+  </View>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "backgroundColor": "#FFFFFF",
+          "flexDirection": "row",
+          "flexGrow": 0,
+          "flexWrap": "nowrap",
+          "justifyContent": "space-between",
+          "overflow": "visible",
+          "paddingHorizontal": 8,
+          "width": "100%",
+        },
+        undefined,
+      ]
+    }
+  >
+    <Text>
+      Header content
+    </Text>
+  </View>
+</View>
+`;

package/src/infrastructure/ui/components/templates/header/buttonIconPlaceholder/ButtonIconPlaceholder.style.ts

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

package/src/infrastructure/ui/components/templates/header/buttonIconPlaceholder/ButtonIconPlaceholder.tsx

@@ -0,0 +1,7 @@
+import React, { FC } from "react";
+import { View } from "react-native";
+import { style } from "./ButtonIconPlaceholder.style";
+
+const ButtonIconPlaceholder: FC = () => <View style={style.buttonIconPlaceholder} />;
+
+export { ButtonIconPlaceholder };

package/src/infrastructure/ui/components/templates/header/checkoutHeader/CheckoutHeader.style.ts

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

package/src/infrastructure/ui/components/templates/header/checkoutHeader/CheckoutHeader.test.tsx

@@ -0,0 +1,23 @@
+import { fireEvent } from "@testing-library/react-native";
+import React from "react";
+import { render } from "../../../../test/render";
+import { CheckoutHeader } from "./CheckoutHeader";
+
+const mockOnBack = jest.fn();
+
+describe("CheckoutHeader template", () => {
+  it("matches the snapshot", () => {
+    const { toJSON } = render(<CheckoutHeader onBack={mockOnBack} />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders correctly", () => {
+    const { getByTestId } = render(<CheckoutHeader onBack={mockOnBack} />);
+
+    expect(getByTestId("checkout-header")).toBeTruthy();
+
+    fireEvent.press(getByTestId("arrow-left-button-icon"));
+    expect(mockOnBack).toHaveBeenCalled();
+  });
+});

package/src/infrastructure/ui/components/templates/header/checkoutHeader/CheckoutHeader.tsx

@@ -0,0 +1,28 @@
+import React, { FC } from "react";
+import { Box, ButtonIcon, Text } from "@lookiero/aurora";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import { I18nMessages } from "../../../../i18n/i18n";
+import { Header } from "../Header";
+import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
+import style from "./CheckoutHeader.style";
+
+interface CheckoutHeaderProps {
+  readonly onBack?: () => void;
+}
+const CheckoutHeader: FC<CheckoutHeaderProps> = ({ onBack }) => {
+  const title = useI18nMessage({ id: I18nMessages.HEADER_COMPLETE_CHECKOUT_TITLE });
+
+  return (
+    <Box>
+      <Header testID="checkout-header">
+        <ButtonIcon name="arrow_left" style={style.button} testID="arrow-left-button-icon" onPress={onBack} />
+        <Text level={3} action>
+          {title}
+        </Text>
+        <ButtonIconPlaceholder />
+      </Header>
+    </Box>
+  );
+};
+
+export { CheckoutHeader };

package/src/infrastructure/ui/components/templates/header/checkoutHeader/__snapshots__/CheckoutHeader.test.tsx.snap

@@ -0,0 +1,213 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CheckoutHeader template matches the snapshot 1`] = `
+<View
+  style={
+    [
+      {
+        "backgroundColor": "#FFFFFF",
+        "flex": 1,
+      },
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignSelf": "center",
+          "left": 0,
+          "marginHorizontal": "auto",
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+          "width": "100%",
+          "zIndex": 5,
+        },
+      ]
+    }
+  >
+    <RCTSafeAreaView />
+  </View>
+  <View
+    style={
+      [
+        {
+          "width": "100%",
+        },
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "alignItems": "center",
+            "backgroundColor": "#FFFFFF",
+            "flexDirection": "row",
+            "flexGrow": 0,
+            "flexWrap": "nowrap",
+            "justifyContent": "space-between",
+            "overflow": "visible",
+            "paddingHorizontal": 8,
+            "width": "100%",
+          },
+          undefined,
+        ]
+      }
+      testID="checkout-header"
+    >
+      <View
+        accessibilityRole="button"
+        accessibilityState={
+          {
+            "busy": undefined,
+            "checked": undefined,
+            "disabled": undefined,
+            "expanded": undefined,
+            "selected": undefined,
+          }
+        }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
+        accessible={true}
+        collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          [
+            [
+              {
+                "_container": {
+                  "overflow": "hidden",
+                },
+                "_pressed": {
+                  "bottom": 0,
+                  "left": 0,
+                  "right": 0,
+                  "top": 0,
+                },
+                "alignSelf": "flex-start",
+                "container": {
+                  "overflow": "hidden",
+                },
+                "height": 40,
+                "overflow": "visible",
+                "padding": 8,
+                "pressed": {
+                  "bottom": 0,
+                  "left": 0,
+                  "right": 0,
+                  "top": 0,
+                },
+                "width": 40,
+              },
+            ],
+            {
+              "opacity": 1,
+            },
+          ]
+        }
+        testID="arrow-left-button-icon"
+      >
+        <View
+          style={
+            [
+              {
+                "position": "relative",
+              },
+            ]
+          }
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            allowFontScaling={false}
+            importantForAccessibility="no"
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "#0C0A0A",
+                  "fontFamily": "auroraicons",
+                  "fontSize": 24,
+                  "fontStyle": "normal",
+                  "fontWeight": "normal",
+                  "height": 24,
+                  "width": 24,
+                },
+              ]
+            }
+          >
+            
+          </Text>
+          <View
+            collapsable={false}
+            style={
+              {
+                "backgroundColor": "#F45545",
+                "borderColor": "#FFFFFF",
+                "borderRadius": 9999,
+                "borderWidth": 2,
+                "height": 10,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+                "transform": [
+                  {
+                    "scale": 0,
+                  },
+                ],
+                "width": 10,
+              }
+            }
+          />
+        </View>
+      </View>
+      <Text
+        allowFontScaling={false}
+        selectable={false}
+        style={
+          [
+            {
+              "color": "#0C0A0A",
+              "fontFamily": "AreaNormal-Extrabold",
+              "fontSize": 15,
+              "letterSpacing": -0.2,
+              "lineHeight": 20,
+              "paddingBottom": 0,
+              "paddingLeft": 0,
+              "paddingRight": 0,
+              "paddingTop": 2,
+            },
+          ]
+        }
+      >
+        header.complete_checkout_title
+      </Text>
+      <View
+        style={
+          {
+            "flexGrow": 0,
+            "height": 40,
+            "width": 40,
+          }
+        }
+      />
+    </View>
+  </View>
+</View>
+`;

package/src/infrastructure/ui/components/templates/header/defaultHeader/DefaultHeader.test.tsx

@@ -0,0 +1,23 @@
+import { fireEvent } from "@testing-library/react-native";
+import React from "react";
+import { render } from "../../../../test/render";
+import { DefaultHeader } from "./DefaultHeader";
+
+const mockOnPressMenu = jest.fn();
+
+describe("DefaultHeader template", () => {
+  it("matches the snapshot", () => {
+    const { toJSON } = render(<DefaultHeader />);
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders correctly", () => {
+    const { getByTestId } = render(<DefaultHeader onPressMenu={mockOnPressMenu} />);
+
+    expect(getByTestId("default-header")).toBeTruthy();
+
+    fireEvent.press(getByTestId("menu-button-icon"));
+    expect(mockOnPressMenu).toHaveBeenCalled();
+  });
+});

package/src/infrastructure/ui/components/templates/header/defaultHeader/DefaultHeader.tsx

@@ -0,0 +1,18 @@
+import React, { FC } from "react";
+import { ButtonIcon } from "@lookiero/aurora";
+import { Header } from "../Header";
+import { ButtonIconPlaceholder } from "../buttonIconPlaceholder/ButtonIconPlaceholder";
+import { Logo } from "../logo/Logo";
+
+interface DefaultHeaderProps {
+  readonly onPressMenu?: () => void;
+}
+const DefaultHeader: FC<DefaultHeaderProps> = ({ onPressMenu }) => (
+  <Header testID="default-header">
+    <Logo />
+    <ButtonIconPlaceholder />
+    <ButtonIcon name="menu" testID="menu-button-icon" onPress={onPressMenu} />
+  </Header>
+);
+
+export { DefaultHeader };

package/src/infrastructure/ui/components/templates/header/defaultHeader/__snapshots__/DefaultHeader.test.tsx.snap

@@ -0,0 +1,195 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DefaultHeader template matches the snapshot 1`] = `
+<View
+  style={
+    [
+      {
+        "backgroundColor": "#FFFFFF",
+        "flex": 1,
+      },
+    ]
+  }
+>
+  <View
+    style={
+      [
+        {
+          "alignSelf": "center",
+          "left": 0,
+          "marginHorizontal": "auto",
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+          "width": "100%",
+          "zIndex": 5,
+        },
+      ]
+    }
+  >
+    <RCTSafeAreaView />
+  </View>
+  <View
+    style={
+      [
+        {
+          "alignItems": "center",
+          "backgroundColor": "#FFFFFF",
+          "flexDirection": "row",
+          "flexGrow": 0,
+          "flexWrap": "nowrap",
+          "justifyContent": "space-between",
+          "overflow": "visible",
+          "paddingHorizontal": 8,
+          "width": "100%",
+        },
+        undefined,
+      ]
+    }
+    testID="default-header"
+  >
+    <Image
+      resizeMode="cover"
+      source={
+        {
+          "uri": "data:image/png;base64,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",
+        }
+      }
+      style={
+        {
+          "height": 48,
+          "width": 134,
+        }
+      }
+    />
+    <View
+      style={
+        {
+          "flexGrow": 0,
+          "height": 40,
+          "width": 40,
+        }
+      }
+    />
+    <View
+      accessibilityRole="button"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      pointerEvents="none"
+      style={
+        [
+          [
+            {
+              "_container": {
+                "overflow": "hidden",
+              },
+              "_pressed": {
+                "bottom": 0,
+                "left": 0,
+                "right": 0,
+                "top": 0,
+              },
+              "alignSelf": "flex-start",
+              "container": {
+                "overflow": "hidden",
+              },
+              "overflow": "visible",
+              "padding": 8,
+              "pressed": {
+                "bottom": 0,
+                "left": 0,
+                "right": 0,
+                "top": 0,
+              },
+            },
+          ],
+          {
+            "opacity": 1,
+          },
+        ]
+      }
+      testID="menu-button-icon"
+    >
+      <View
+        style={
+          [
+            {
+              "position": "relative",
+            },
+          ]
+        }
+      >
+        <Text
+          accessibilityElementsHidden={true}
+          allowFontScaling={false}
+          importantForAccessibility="no"
+          selectable={false}
+          style={
+            [
+              {
+                "color": "#0C0A0A",
+                "fontFamily": "auroraicons",
+                "fontSize": 24,
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+                "height": 24,
+                "width": 24,
+              },
+            ]
+          }
+        >
+          
+        </Text>
+        <View
+          collapsable={false}
+          style={
+            {
+              "backgroundColor": "#F45545",
+              "borderColor": "#FFFFFF",
+              "borderRadius": 9999,
+              "borderWidth": 2,
+              "height": 10,
+              "position": "absolute",
+              "right": 0,
+              "top": 0,
+              "transform": [
+                {
+                  "scale": 0,
+                },
+              ],
+              "width": 10,
+            }
+          }
+        />
+      </View>
+    </View>
+  </View>
+</View>
+`;