@lookiero/checkout 15.2.3 → 15.3.0-beta.0

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

@@ -714,7 +714,6 @@ exports[`ItemActions component matches the snapshot 1`] = `
                   style={
                     [
                       {
-                        "paddingBottom": 24,
                         "paddingHorizontal": 24,
                       },
                       undefined,
@@ -734,7 +733,7 @@ exports[`ItemActions component matches the snapshot 1`] = `
                           "lineHeight": 36,
                         },
                         {
-                          "marginBottom": 4,
+                          "marginBottom": 12,
                         },
                       ]
                     }
@@ -742,128 +741,306 @@ exports[`ItemActions component matches the snapshot 1`] = `
                     item.change_size_button
                   </Text>
                   <View
-                    accessibilityLabel="2875e66d-4e2a-47b1-a58b-61e316dcc66a"
-                    accessibilityState={
+                    accessibilityRole="radiogroup"
+                    style={
                       {
-                        "disabled": true,
+                        "gap": 12,
                       }
                     }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
+                    testID="options-radiogroup"
+                  >
+                    <View
+                      accessibilityLabel="S"
+                      accessibilityRole="radio"
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": true,
+                          "disabled": true,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
                       }
-                    }
-                    accessible={true}
-                    focusable={false}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      [
+                      accessibilityValue={
                         {
-                          "borderBottomColor": "#DAD8D8",
-                          "borderBottomWidth": 1,
-                          "paddingVertical": 20,
-                        },
-                        undefined,
-                      ]
-                    }
-                    testID="2875e66d-4e2a-47b1-a58b-61e316dcc66a"
-                  >
-                    <Text
+                          "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={
                         [
                           {
-                            "color": "#0C0A0A",
-                            "fontFamily": "AreaNormal-Semibold",
-                            "fontSize": 15,
-                            "fontStyle": "normal",
-                            "fontWeight": "300",
-                            "letterSpacing": -0.2,
-                            "lineHeight": 20,
+                            "alignItems": "center",
+                            "borderColor": "#DAD8D8",
+                            "borderWidth": 1,
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "padding": 16,
+                          },
+                          {
+                            "borderColor": "#0C0A0A",
+                            "borderWidth": 2,
+                            "padding": 15,
+                          },
+                          {
+                            "borderRadius": 8,
                           },
+                        ]
+                      }
+                      testID="2875e66d-4e2a-47b1-a58b-61e316dcc66a"
+                    >
+                      <View
+                        style={
                           [
                             {
-                              "lineHeight": 24,
+                              "alignItems": "center",
+                              "borderRadius": 9999,
+                              "borderWidth": 2,
+                              "height": 22,
+                              "justifyContent": "center",
+                              "width": 22,
                             },
+                            undefined,
                             {
-                              "color": "#837C7C",
+                              "backgroundColor": "#F4A584",
+                              "borderColor": "#F4A584",
                             },
-                            undefined,
-                          ],
-                        ]
-                      }
-                    >
-                      S
-                    </Text>
-                  </View>
-                  <View
-                    accessibilityLabel="4016fcfc-a08e-4800-bc07-0d7dd59848fc"
-                    accessibilityState={
-                      {
-                        "disabled": false,
-                      }
-                    }
-                    accessibilityValue={
-                      {
-                        "max": undefined,
-                        "min": undefined,
-                        "now": undefined,
-                        "text": undefined,
+                          ]
+                        }
+                        testID="animated-checked"
+                      >
+                        <View
+                          style={
+                            {
+                              "opacity": 1,
+                              "scale": 1,
+                            }
+                          }
+                        >
+                          <Text
+                            accessibilityElementsHidden={true}
+                            allowFontScaling={false}
+                            importantForAccessibility="no"
+                            selectable={false}
+                            style={
+                              [
+                                {
+                                  "color": "#0C0A0A",
+                                  "fontFamily": "AreaNormal-Semibold",
+                                  "fontSize": 15,
+                                  "fontStyle": "normal",
+                                  "fontWeight": "300",
+                                  "letterSpacing": -0.2,
+                                  "lineHeight": 20,
+                                },
+                                [
+                                  {
+                                    "fontFamily": "auroraicons",
+                                    "fontSize": 24,
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                    "height": 24,
+                                    "lineHeight": 24,
+                                    "minHeight": 24,
+                                    "minWidth": 24,
+                                    "width": 24,
+                                  },
+                                  [
+                                    {
+                                      "color": "#0C0A0A",
+                                    },
+                                    undefined,
+                                  ],
+                                ],
+                              ]
+                            }
+                            testID="icon"
+                          >
+                            
+                          </Text>
+                        </View>
+                      </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "color": "#0C0A0A",
+                              "fontFamily": "AreaNormal-Semibold",
+                              "fontSize": 15,
+                              "fontStyle": "normal",
+                              "fontWeight": "300",
+                              "letterSpacing": -0.2,
+                              "lineHeight": 20,
+                            },
+                            {
+                              "color": "#0C0A0A",
+                              "flex": 1,
+                              "marginLeft": 16,
+                            },
+                          ]
+                        }
+                      >
+                        S
+                      </Text>
+                    </View>
+                    <View
+                      accessibilityLabel="M"
+                      accessibilityRole="radio"
+                      accessibilityState={
+                        {
+                          "busy": undefined,
+                          "checked": false,
+                          "disabled": false,
+                          "expanded": undefined,
+                          "selected": undefined,
+                        }
                       }
-                    }
-                    accessible={true}
-                    focusable={true}
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      [
+                      accessibilityValue={
                         {
-                          "borderBottomColor": "#DAD8D8",
-                          "borderBottomWidth": 1,
-                          "paddingVertical": 20,
-                        },
-                        undefined,
-                      ]
-                    }
-                    testID="4016fcfc-a08e-4800-bc07-0d7dd59848fc"
-                  >
-                    <Text
+                          "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={
                         [
                           {
-                            "color": "#0C0A0A",
-                            "fontFamily": "AreaNormal-Semibold",
-                            "fontSize": 15,
-                            "fontStyle": "normal",
-                            "fontWeight": "300",
-                            "letterSpacing": -0.2,
-                            "lineHeight": 20,
+                            "alignItems": "center",
+                            "borderColor": "#DAD8D8",
+                            "borderWidth": 1,
+                            "flex": 1,
+                            "flexDirection": "row",
+                            "padding": 16,
                           },
+                          false,
+                          {
+                            "borderRadius": 8,
+                          },
+                        ]
+                      }
+                      testID="4016fcfc-a08e-4800-bc07-0d7dd59848fc"
+                    >
+                      <View
+                        style={
                           [
                             {
-                              "lineHeight": 24,
+                              "alignItems": "center",
+                              "borderRadius": 9999,
+                              "borderWidth": 2,
+                              "height": 22,
+                              "justifyContent": "center",
+                              "width": 22,
                             },
-                            false,
                             undefined,
-                          ],
-                        ]
-                      }
-                    >
-                      M
-                    </Text>
+                            {
+                              "backgroundColor": "#FFFFFF",
+                              "borderColor": "#DAD8D8",
+                            },
+                          ]
+                        }
+                        testID="animated-checked"
+                      >
+                        <View
+                          style={
+                            {
+                              "opacity": 0,
+                              "scale": 0,
+                            }
+                          }
+                        >
+                          <Text
+                            accessibilityElementsHidden={true}
+                            allowFontScaling={false}
+                            importantForAccessibility="no"
+                            selectable={false}
+                            style={
+                              [
+                                {
+                                  "color": "#0C0A0A",
+                                  "fontFamily": "AreaNormal-Semibold",
+                                  "fontSize": 15,
+                                  "fontStyle": "normal",
+                                  "fontWeight": "300",
+                                  "letterSpacing": -0.2,
+                                  "lineHeight": 20,
+                                },
+                                [
+                                  {
+                                    "fontFamily": "auroraicons",
+                                    "fontSize": 24,
+                                    "fontStyle": "normal",
+                                    "fontWeight": "normal",
+                                    "height": 24,
+                                    "lineHeight": 24,
+                                    "minHeight": 24,
+                                    "minWidth": 24,
+                                    "width": 24,
+                                  },
+                                  [
+                                    {
+                                      "color": "#0C0A0A",
+                                    },
+                                    undefined,
+                                  ],
+                                ],
+                              ]
+                            }
+                            testID="icon"
+                          >
+                            
+                          </Text>
+                        </View>
+                      </View>
+                      <Text
+                        style={
+                          [
+                            {
+                              "color": "#0C0A0A",
+                              "fontFamily": "AreaNormal-Semibold",
+                              "fontSize": 15,
+                              "fontStyle": "normal",
+                              "fontWeight": "300",
+                              "letterSpacing": -0.2,
+                              "lineHeight": 20,
+                            },
+                            {
+                              "color": "#0C0A0A",
+                              "flex": 1,
+                              "marginLeft": 16,
+                            },
+                          ]
+                        }
+                      >
+                        M
+                      </Text>
+                    </View>
                   </View>
                 </View>
               </View>

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

@@ -3,20 +3,34 @@ import React from "react";
 import { render } from "../../../../test/render";
 import { SelectModal } from "./SelectModal";
 
+jest.mock("../../../../hooks/useStaticInfo", () => ({
+  useStaticInfo: () => ({ tradename: "LOOKIERO" }),
+}));
+
 const mockOnChange = jest.fn();
-const options = [{ label: "Option label", value: "optionValue" }];
+const mockOnClose = jest.fn();
+const options = [
+  { label: "Option label", value: "optionValue" },
+  { label: "Selected label", value: "selectedValue" },
+];
 
-const renderSelectField = () =>
+const renderSelectField = (value?: string) =>
   render(
     <SelectModal
       modalVisible={true}
       options={options}
       testID="select-field"
-      value={undefined}
+      value={value}
       onChange={mockOnChange}
+      onClose={mockOnClose}
     />,
   );
 
+beforeEach(() => {
+  mockOnChange.mockClear();
+  mockOnClose.mockClear();
+});
+
 beforeAll(() => {
   jest.useFakeTimers();
 });
@@ -33,12 +47,53 @@ describe("SelectField component", () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it("renders correctly", () => {
-    const { getByTestId, getByText } = renderSelectField();
+  it("renders all options as radio buttons", () => {
+    const { getByRole } = renderSelectField();
+
+    expect(getByRole("radio", { name: "Option label" })).toBeTruthy();
+    expect(getByRole("radio", { name: "Selected label" })).toBeTruthy();
+  });
+
+  it("renders options inside a radiogroup", () => {
+    const { getByTestId } = renderSelectField();
+    const container = getByTestId("options-radiogroup");
+
+    expect(container.props.accessibilityRole).toBe("radiogroup");
+  });
+
+  it("unselected option has checked false", () => {
+    const { getByRole } = renderSelectField("selectedValue");
+
+    expect(getByRole("radio", { name: "Option label", checked: false })).toBeTruthy();
+  });
+
+  it("selected option has checked true", () => {
+    const { getByRole } = renderSelectField("selectedValue");
+
+    expect(getByRole("radio", { name: "Selected label", checked: true })).toBeTruthy();
+  });
+
+  it("accessibilityLabel uses label text, not value key", () => {
+    const { getByRole, queryByRole } = renderSelectField();
+
+    expect(getByRole("radio", { name: "Option label" })).toBeTruthy();
+    expect(queryByRole("radio", { name: "optionValue" })).toBeNull();
+  });
 
-    fireEvent.press(getByTestId("select-field"));
-    fireEvent.press(getByText("Option label"));
+  it("pressing an unselected option calls onChange and onClose", () => {
+    const { getByRole } = renderSelectField("selectedValue");
+
+    fireEvent.press(getByRole("radio", { name: "Option label" }));
 
     expect(mockOnChange).toHaveBeenCalledWith("optionValue");
+    expect(mockOnClose).toHaveBeenCalledTimes(1);
+  });
+
+  it("pressing the selected option does not call onChange", () => {
+    const { getByRole } = renderSelectField("selectedValue");
+
+    fireEvent.press(getByRole("radio", { name: "Selected label" }));
+
+    expect(mockOnChange).not.toHaveBeenCalled();
   });
 });

package/src/infrastructure/ui/views/item/components/selectModal/SelectModal.style.ts

@@ -2,34 +2,51 @@ import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
 const style = () => {
-  const { borderWidth1, colorBgPrimaryLight, colorBorderInteractive, colorTextMedium, space1, space5, space6 } =
-    theme();
+  const {
+    colorText,
+    colorBorderInputFocus,
+    colorBorderInteractive,
+    space025,
+    space3,
+    space4,
+    space6,
+    borderWidth1,
+    borderWidth2,
+    borderRadius3,
+  } = theme();
 
-  const styles = StyleSheet.create({
+  return StyleSheet.create({
+    container: {
+      gap: space3,
+    },
     modalContent: {
-      paddingBottom: space6,
       paddingHorizontal: space6,
     },
     modalTitle: {
-      marginBottom: space1,
+      marginBottom: space3,
+    },
+    text: {
+      color: colorText,
+      flex: 1,
+      marginLeft: space4,
     },
-    option: {
-      borderBottomColor: colorBorderInteractive,
-      borderBottomWidth: borderWidth1,
-      paddingVertical: space5,
+    wrapper: {
+      alignItems: "center",
+      borderColor: colorBorderInteractive,
+      borderWidth: borderWidth1,
+      flex: 1,
+      flexDirection: "row",
+      padding: space4,
     },
-    optionText: {
-      lineHeight: space6,
+    wrapperChecked: {
+      borderColor: colorBorderInputFocus,
+      borderWidth: borderWidth2,
+      padding: space4 - space025,
     },
-    textActive: {
-      color: colorTextMedium,
+    wrapperLookiero: {
+      borderRadius: borderRadius3,
     },
   });
-
-  return {
-    ...styles,
-    underlayColor: colorBgPrimaryLight,
-  };
 };
 
 export { style };