@lookiero/checkout 5.3.0-beta.2 → 6.0.0-beta.0

package/src/infrastructure/ui/components/atoms/fiveItemsDiscountBanner/FiveItemsDiscountBanner.tsx

@@ -0,0 +1,34 @@
+import React, { FC } from "react";
+import { ALIGN, DISPLAY, InfoBox, INFOBOX_TYPE, Text } from "@lookiero/aurora";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import { I18nMessages } from "../../../i18n/i18n";
+import { style } from "./FiveItemsDiscountBanner.style";
+
+interface FiveItemsDiscountBannerProps {
+  readonly fiveItemsDiscount: number;
+}
+const FiveItemsDiscountBanner: FC<FiveItemsDiscountBannerProps> = ({ fiveItemsDiscount }) => {
+  const bannerText = useI18nMessage({
+    id: I18nMessages.BANNER_DISCOUNT_TEXT,
+    values: {
+      discount: fiveItemsDiscount.toString(),
+      b: (chunks) => (
+        <Text as="span" display={DISPLAY.INLINE} level={2} style={style.textBold}>
+          {chunks}
+        </Text>
+      ),
+    },
+  });
+
+  return (
+    <InfoBox
+      contentAlign={ALIGN.CENTER}
+      icon="info"
+      testID="five-items-discount-banner"
+      text={bannerText}
+      type={INFOBOX_TYPE.SQUARED}
+    />
+  );
+};
+
+export { FiveItemsDiscountBanner };

package/src/infrastructure/ui/components/atoms/fiveItemsDiscountBanner/__snapshots__/FiveItemsDiscountBanner.test.tsx.snap

@@ -0,0 +1,115 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FiveItemsDiscountBanner component 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={[]}
+    testID="five-items-discount-banner"
+  >
+    <View
+      style={
+        [
+          {
+            "backgroundColor": "#F1E4DB",
+            "borderRadius": 0,
+            "padding": 12,
+            "width": "100%",
+          },
+        ]
+      }
+    >
+      <View
+        style={
+          [
+            {
+              "flexDirection": "row",
+              "justifyContent": "center",
+            },
+          ]
+        }
+      >
+        <Text
+          accessibilityElementsHidden={true}
+          allowFontScaling={false}
+          importantForAccessibility="no"
+          selectable={false}
+          style={
+            [
+              {
+                "color": "#0C0A0A",
+                "fontFamily": "auroraicons",
+                "fontSize": 24,
+                "fontStyle": "normal",
+                "fontWeight": "normal",
+                "height": 24,
+                "marginRight": 8,
+                "width": 24,
+              },
+            ]
+          }
+        >
+          
+        </Text>
+        <View
+          style={
+            [
+              {
+                "flexShrink": 1,
+              },
+            ]
+          }
+        >
+          <Text
+            allowFontScaling={false}
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "#0C0A0A",
+                  "fontFamily": "AreaNormal-Semibold",
+                  "fontSize": 12,
+                  "letterSpacing": 0.1,
+                  "lineHeight": 16,
+                  "paddingBottom": 0,
+                  "paddingLeft": 0,
+                  "paddingRight": 0,
+                  "paddingTop": 5,
+                },
+              ]
+            }
+          >
+            summary.banner.text
+          </Text>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;

package/src/infrastructure/ui/components/atoms/price/Price.style.ts

@@ -0,0 +1,22 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+
+const { colorTextError, colorTextMedium, space2 } = theme();
+
+const style = StyleSheet.create({
+  discountedPercentage: {
+    color: colorTextError,
+  },
+  discountedPriceInfo: {
+    alignItems: "flex-end",
+    marginLeft: space2,
+  },
+  discountedPriceText: {
+    color: colorTextMedium,
+  },
+  price: {
+    flexDirection: "row",
+  },
+});
+
+export { style };

package/src/infrastructure/ui/components/atoms/price/Price.test.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { Currency } from "../../../../../domain/checkoutItem/model/currency";
+import { PriceProjection } from "../../../../../projection/shared/price";
+import { render } from "../../../test/render";
+import { Price } from "./Price";
+
+const price: PriceProjection = {
+  amount: 2995,
+  currency: Currency.EUR,
+};
+
+const discountedPrice: PriceProjection = {
+  amount: 3499,
+  currency: Currency.EUR,
+  discountedPrice: {
+    amount: 1749.5,
+    percentage: 50,
+  },
+};
+
+describe("Price atom", () => {
+  it("matches the snapshot for a non-discounted price", async () => {
+    const { toJSON } = render(<Price price={price} />);
+
+    expect(toJSON()).toMatchSnapshot("non-discounted price");
+  });
+
+  it("matches the snapshot for a discounted price", async () => {
+    const { toJSON } = render(<Price price={discountedPrice} />);
+
+    expect(toJSON()).toMatchSnapshot("discounted price");
+  });
+
+  it("renders the non-discounted price text", async () => {
+    const { findByTestId } = render(<Price price={discountedPrice} />);
+
+    const priceText = await findByTestId("price-text");
+
+    expect(priceText).toBeTruthy();
+  });
+
+  it("renders the discounted price text", async () => {
+    const { findByTestId } = render(<Price price={discountedPrice} />);
+
+    const discountedPriceText = await findByTestId("discounted-price-text");
+
+    expect(discountedPriceText).toBeTruthy();
+  });
+});

package/src/infrastructure/ui/components/atoms/price/Price.tsx

@@ -0,0 +1,70 @@
+import React, { FC } from "react";
+import { View } from "react-native";
+import { Text } from "@lookiero/aurora";
+import { useI18nNumber } from "@lookiero/i18n-react";
+import { PriceProjection } from "../../../../../projection/shared/price";
+import { style } from "./Price.style";
+
+type PriceVariant = "default" | "detail" | "subtotal" | "total";
+
+interface PriceVariantProps {
+  readonly body?: boolean;
+  readonly detail?: boolean;
+  readonly action?: boolean;
+  readonly level?: 1 | 2 | 3;
+}
+
+const PRICE_VARIANT: Partial<Record<PriceVariant, PriceVariantProps>> = {
+  default: { detail: true, level: 1 },
+  detail: { detail: true, level: 2 },
+  subtotal: { detail: true, level: 1 },
+  total: { action: true, level: 2 },
+};
+
+interface PriceProps {
+  readonly price: PriceProjection;
+  readonly variant?: PriceVariant;
+  readonly withPercentage?: boolean;
+}
+const Price: FC<PriceProps> = ({ price, variant = "default", withPercentage = false }) => {
+  const isDiscounted = price.discountedPrice && price.discountedPrice.percentage > 0;
+  const productPrice = useI18nNumber({
+    value: price.amount / 100,
+    style: "currency",
+    currency: price.currency,
+  });
+  const productDiscountedPrice = useI18nNumber({
+    value: (price.discountedPrice?.amount || 0) / 100,
+    style: "currency",
+    currency: price.currency,
+  });
+
+  const priceValue = isDiscounted ? productDiscountedPrice : productPrice;
+
+  return (
+    <View style={style.price} testID="price">
+      <Text {...PRICE_VARIANT[variant]} testID="price-text">
+        {priceValue}
+      </Text>
+      {isDiscounted && (
+        <View style={style.discountedPriceInfo}>
+          <Text
+            {...PRICE_VARIANT[variant]}
+            style={style.discountedPriceText}
+            testID="discounted-price-text"
+            lineThrough
+          >
+            {productPrice}
+          </Text>
+          {withPercentage ? (
+            <Text {...PRICE_VARIANT[variant]} style={style.discountedPercentage} testID="discounted-percentage-text">
+              {`-${price.discountedPrice.percentage}%`}
+            </Text>
+          ) : null}
+        </View>
+      )}
+    </View>
+  );
+};
+
+export { Price };

package/src/infrastructure/ui/components/atoms/price/__snapshots__/Price.test.tsx.snap

@@ -0,0 +1,159 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Price atom matches the snapshot for a discounted price: discounted price 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={
+      {
+        "flexDirection": "row",
+      }
+    }
+    testID="price"
+  >
+    <Text
+      allowFontScaling={false}
+      selectable={false}
+      style={
+        [
+          {
+            "color": "#0C0A0A",
+            "fontFamily": "AreaNormal-Semibold",
+            "fontSize": 13,
+            "letterSpacing": 0.1,
+            "lineHeight": 17,
+            "paddingBottom": 0,
+            "paddingLeft": 0,
+            "paddingRight": 0,
+            "paddingTop": 4,
+          },
+        ]
+      }
+      testID="price-text"
+    >
+      €17.50
+    </Text>
+    <View
+      style={
+        {
+          "alignItems": "flex-end",
+          "marginLeft": 8,
+        }
+      }
+    >
+      <Text
+        allowFontScaling={false}
+        selectable={false}
+        style={
+          [
+            {
+              "color": "#837C7C",
+              "fontFamily": "AreaNormal-Semibold",
+              "fontSize": 13,
+              "letterSpacing": 0.1,
+              "lineHeight": 17,
+              "paddingBottom": 0,
+              "paddingLeft": 0,
+              "paddingRight": 0,
+              "paddingTop": 4,
+              "textDecorationLine": "line-through",
+            },
+          ]
+        }
+        testID="discounted-price-text"
+      >
+        €34.99
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`Price atom matches the snapshot for a non-discounted price: non-discounted price 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={
+      {
+        "flexDirection": "row",
+      }
+    }
+    testID="price"
+  >
+    <Text
+      allowFontScaling={false}
+      selectable={false}
+      style={
+        [
+          {
+            "color": "#0C0A0A",
+            "fontFamily": "AreaNormal-Semibold",
+            "fontSize": 13,
+            "letterSpacing": 0.1,
+            "lineHeight": 17,
+            "paddingBottom": 0,
+            "paddingLeft": 0,
+            "paddingRight": 0,
+            "paddingTop": 4,
+          },
+        ]
+      }
+      testID="price-text"
+    >
+      €29.95
+    </Text>
+  </View>
+</View>
+`;

package/src/infrastructure/ui/components/layouts/body/Body.style.ts

@@ -0,0 +1,10 @@
+import { StyleSheet } from "react-native";
+
+const style = StyleSheet.create({
+  row: {
+    flex: 1,
+    justifyContent: "center",
+  },
+});
+
+export { style };

package/src/infrastructure/ui/components/layouts/body/Body.test.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { Text } from "react-native";
+import { useScreenSize } from "@lookiero/sty-psp-ui";
+import { render } from "../../../test/render";
+import { Body } from "./Body";
+
+jest.mock("@lookiero/sty-psp-ui", () => ({
+  ...jest.requireActual("@lookiero/sty-psp-ui"),
+  useScreenSize: jest.fn(),
+}));
+
+describe("Body layout", () => {
+  it("matches the snapshot for a small screen", () => {
+    (useScreenSize as jest.Mock).mockReturnValue("S");
+
+    const { toJSON } = render(
+      <Body>
+        <Text>Body content</Text>
+      </Body>,
+    );
+
+    expect(toJSON()).toMatchSnapshot("small");
+  });
+
+  it("matches the snapshot for the default screen", () => {
+    (useScreenSize as jest.Mock).mockReturnValue("L");
+
+    const { toJSON } = render(
+      <Body>
+        <Text>Body content</Text>
+      </Body>,
+    );
+
+    expect(toJSON()).toMatchSnapshot("default");
+  });
+});

package/src/infrastructure/ui/components/layouts/body/Body.tsx

@@ -0,0 +1,19 @@
+import React, { FC, ReactNode } from "react";
+import { StyleProp, ViewStyle } from "react-native";
+import { Column, Row } from "@lookiero/sty-psp-ui";
+import { style } from "./Body.style";
+
+type BodyStyle = "row" | "column";
+
+interface BodyProps {
+  readonly children: ReactNode;
+  readonly style?: Partial<Record<BodyStyle, StyleProp<ViewStyle>>>;
+}
+
+const Body: FC<BodyProps> = ({ children, style: customStyle }) => (
+  <Row style={[style.row, customStyle?.row]}>
+    <Column style={customStyle?.column}>{children}</Column>
+  </Row>
+);
+
+export { Body };

package/src/infrastructure/ui/components/layouts/body/__snapshots__/Body.test.tsx.snap

@@ -0,0 +1,143 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Body layout matches the snapshot for a small screen: small 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",
+          "flexBasis": "auto",
+          "flexWrap": "wrap",
+          "justifyContent": "flex-start",
+          "width": "100%",
+        },
+        {
+          "paddingHorizontal": 24,
+        },
+        [
+          {
+            "flex": 1,
+            "justifyContent": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "width": "100%",
+          },
+          undefined,
+          undefined,
+        ]
+      }
+    >
+      <Text>
+        Body content
+      </Text>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`Body layout matches the snapshot for the default screen: default 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",
+          "flexBasis": "auto",
+          "flexWrap": "wrap",
+          "justifyContent": "flex-start",
+          "width": "100%",
+        },
+        {
+          "paddingHorizontal": 24,
+        },
+        [
+          {
+            "flex": 1,
+            "justifyContent": "center",
+          },
+          undefined,
+        ],
+      ]
+    }
+  >
+    <View
+      style={
+        [
+          {
+            "width": "100%",
+          },
+          undefined,
+          undefined,
+        ]
+      }
+    >
+      <Text>
+        Body content
+      </Text>
+    </View>
+  </View>
+</View>
+`;

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

@@ -0,0 +1,25 @@
+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 };