@lookiero/checkout 5.3.0 → 6.0.0-beta.0

package/src/infrastructure/ui/views/item/components/selectModal/__snapshots__/SelecModal.test.tsx.snap

@@ -0,0 +1,297 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SelectField 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
+    accessibilityState={
+      {
+        "expanded": true,
+      }
+    }
+    pointerEvents="auto"
+    style={
+      {
+        "height": "100%",
+        "overflow": "hidden",
+        "position": "absolute",
+        "width": "100%",
+        "zIndex": 100,
+      }
+    }
+    testID="select-field"
+  >
+    <View
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": undefined,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessible={true}
+      focusable={true}
+      onClick={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        {
+          "backgroundColor": "rgba(12, 10, 10, 0.7)",
+          "height": "100%",
+          "opacity": 0,
+          "position": "absolute",
+          "width": "100%",
+          "zIndex": 1,
+        }
+      }
+    />
+    <View
+      pointerEvents="box-none"
+      style={
+        [
+          {
+            "alignItems": "center",
+            "flexBasis": "auto",
+            "flexWrap": "wrap",
+            "justifyContent": "flex-start",
+            "width": "100%",
+          },
+          {
+            "paddingHorizontal": 24,
+          },
+          [
+            {
+              "alignContent": "center",
+              "flex": 1,
+              "justifyContent": "center",
+              "paddingHorizontal": 0,
+            },
+            {
+              "justifyContent": "flex-end",
+            },
+            undefined,
+          ],
+        ]
+      }
+    >
+      <View
+        onLayout={[Function]}
+        pointerEvents="auto"
+        style={
+          {
+            "backgroundColor": "#FFFFFF",
+            "borderBottomLeftRadius": 0,
+            "borderBottomRightRadius": 0,
+            "borderRadius": 16,
+            "maxHeight": 800,
+            "opacity": 1,
+            "position": "absolute",
+            "transform": [
+              {
+                "translateY": 800,
+              },
+              {
+                "scale": 1,
+              },
+            ],
+            "width": "100%",
+            "zIndex": 3,
+          }
+        }
+      >
+        <View
+          style={
+            [
+              {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "padding": 24,
+              },
+              undefined,
+            ]
+          }
+        >
+          <View />
+          <View
+            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}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            style={
+              {
+                "flexGrow": 0,
+                "opacity": 1,
+                "padding": 0,
+              }
+            }
+            testID="button-icon"
+          >
+            <Text
+              accessibilityElementsHidden={true}
+              allowFontScaling={false}
+              importantForAccessibility="no"
+              selectable={false}
+              style={
+                [
+                  {
+                    "color": "#0C0A0A",
+                    "fontFamily": "auroraicons",
+                    "fontSize": 24,
+                    "fontStyle": "normal",
+                    "fontWeight": "normal",
+                    "height": 24,
+                    "width": 24,
+                  },
+                ]
+              }
+              testID="icon"
+            >
+              
+            </Text>
+          </View>
+        </View>
+        <RCTScrollView
+          keyboardShouldPersistTaps="handled"
+          showsVerticalScrollIndicator={false}
+        >
+          <View>
+            <View
+              style={
+                {
+                  "paddingBottom": 0,
+                }
+              }
+            >
+              <View
+                style={
+                  [
+                    {
+                      "paddingBottom": 24,
+                      "paddingHorizontal": 24,
+                    },
+                    undefined,
+                  ]
+                }
+              >
+                <View
+                  accessibilityLabel="optionValue"
+                  accessibilityState={
+                    {
+                      "disabled": false,
+                    }
+                  }
+                  accessibilityValue={
+                    {
+                      "max": undefined,
+                      "min": undefined,
+                      "now": undefined,
+                      "text": undefined,
+                    }
+                  }
+                  accessible={true}
+                  focusable={true}
+                  onClick={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
+                  style={
+                    [
+                      {
+                        "borderBottomColor": "#DAD8D8",
+                        "borderBottomWidth": 1,
+                        "paddingVertical": 20,
+                      },
+                      undefined,
+                    ]
+                  }
+                  testID="optionValue"
+                >
+                  <Text
+                    allowFontScaling={false}
+                    selectable={false}
+                    style={
+                      [
+                        {
+                          "color": "#0C0A0A",
+                          "fontFamily": "AreaNormal-Semibold",
+                          "fontSize": 15,
+                          "letterSpacing": -0.2,
+                          "lineHeight": 24,
+                          "paddingBottom": 0,
+                          "paddingLeft": 0,
+                          "paddingRight": 0,
+                          "paddingTop": 2,
+                        },
+                      ]
+                    }
+                  >
+                    Option label
+                  </Text>
+                </View>
+              </View>
+            </View>
+          </View>
+        </RCTScrollView>
+      </View>
+    </View>
+  </View>
+</View>
+`;

package/src/infrastructure/ui/views/item/components/sizeWithoutStockModal/SizeWithoutStockModal.style.ts

@@ -0,0 +1,20 @@
+import { StyleSheet } from "react-native";
+import { theme } from "@lookiero/sty-psp-ui";
+
+const { space1, space6, colorTextMedium } = theme();
+
+const style = StyleSheet.create({
+  description: {
+    color: colorTextMedium,
+    marginBottom: space6,
+    width: "100%",
+  },
+  modalContent: {
+    paddingHorizontal: space6,
+  },
+  title: {
+    marginBottom: space1,
+    width: "100%",
+  },
+});
+export { style };

package/src/infrastructure/ui/views/item/components/sizeWithoutStockModal/SizeWithoutStockModal.test.tsx

@@ -0,0 +1,47 @@
+import { fireEvent } from "@testing-library/react-native";
+import React from "react";
+import { I18nMessages } from "../../../../i18n/i18n";
+import { render } from "../../../../test/render";
+import { SizeWithoutStockModal } from "./SizeWithoutStockModal";
+
+const mockOnDismiss = jest.fn();
+
+type ModalProps = {
+  readonly visible?: boolean;
+};
+const renderModal = ({ visible = true }: ModalProps = {}) =>
+  render(<SizeWithoutStockModal visible={visible} onDismiss={mockOnDismiss} />);
+
+beforeAll(() => {
+  jest.useFakeTimers();
+});
+
+afterAll(() => {
+  jest.runOnlyPendingTimers();
+  jest.useRealTimers();
+});
+
+describe("SizeWithoutStockModal component", () => {
+  it("matches the snapshot", () => {
+    const { toJSON } = renderModal();
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders correctly", async () => {
+    const { getByText } = renderModal();
+
+    expect(getByText(I18nMessages.SIZE_WITHOUT_STOCK_MODAL_TITLE)).toBeTruthy();
+    expect(getByText(I18nMessages.SIZE_WITHOUT_STOCK_MODAL_DESCRIPTION)).toBeTruthy();
+
+    fireEvent.press(getByText(I18nMessages.SIZE_WITHOUT_STOCK_MODAL_BUTTON));
+
+    expect(mockOnDismiss).toHaveBeenCalled();
+  });
+
+  it("does NOT render SizeWithoutStockModal", () => {
+    const { queryByText } = renderModal({ visible: false });
+
+    expect(queryByText(I18nMessages.SIZE_WITHOUT_STOCK_MODAL_TITLE)).not.toBeTruthy();
+  });
+});

package/src/infrastructure/ui/views/item/components/sizeWithoutStockModal/SizeWithoutStockModal.tsx

@@ -0,0 +1,33 @@
+import React, { FC } from "react";
+import { View } from "react-native";
+import { Button, Text } from "@lookiero/aurora";
+import { useI18nMessage } from "@lookiero/i18n-react";
+import { Modal } from "@lookiero/sty-psp-ui";
+import { I18nMessages } from "../../../../i18n/i18n";
+import { style } from "./SizeWithoutStockModal.style";
+
+interface SizeWithoutStockModalProps {
+  readonly visible: boolean;
+  readonly onDismiss: () => void;
+}
+const SizeWithoutStockModal: FC<SizeWithoutStockModalProps> = ({ visible, onDismiss }) => {
+  const titleText = useI18nMessage({ id: I18nMessages.SIZE_WITHOUT_STOCK_MODAL_TITLE });
+  const descriptionText = useI18nMessage({ id: I18nMessages.SIZE_WITHOUT_STOCK_MODAL_DESCRIPTION });
+  const buttonText = useI18nMessage({ id: I18nMessages.SIZE_WITHOUT_STOCK_MODAL_BUTTON });
+
+  return (
+    <Modal visible={visible} showCloseButton onClose={onDismiss}>
+      <View style={style.modalContent}>
+        <Text level={3} style={style.title} heading>
+          {titleText}
+        </Text>
+        <Text level={3} style={style.description}>
+          {descriptionText}
+        </Text>
+        <Button onPress={onDismiss}>{buttonText}</Button>
+      </View>
+    </Modal>
+  );
+};
+
+export { SizeWithoutStockModal };