@lookiero/checkout 15.2.3 → 15.3.0-beta.0

package/src/infrastructure/ui/views/item/components/selectModal/SelectModal.tsx

@@ -1,12 +1,12 @@
-import React, { FC, useCallback, useMemo } from "react";
-import { StyleProp, TextStyle, TouchableHighlight, View, ViewStyle } from "react-native";
-import { Text } from "@lookiero/sty-psp-ui";
-import { Modal } from "@lookiero/sty-psp-ui";
+import React, { FC, useMemo } from "react";
+import { StyleProp, TextStyle, Pressable, View, ViewStyle } from "react-native";
+import { Checkbox, Modal, Text } from "@lookiero/sty-psp-ui";
+import { Tradename } from "@lookiero/sty-sp-tradename";
+import { useStaticInfo } from "../../../../hooks/useStaticInfo";
 import { style as modalStyle } from "./SelectModal.style";
 
 interface SelectModalStyle {
   readonly modalContent: StyleProp<ViewStyle>;
-  readonly option: StyleProp<ViewStyle>;
   readonly optionText: StyleProp<TextStyle>;
 }
 
@@ -38,15 +38,8 @@ const SelectModal: FC<SelectModalProps> = ({
   onChange = () => void 0,
   onClose = () => void 0,
 }) => {
-  const handleOnPressOption = useCallback(
-    (value: string) => {
-      onChange(value);
-      onClose();
-    },
-    [onClose, onChange],
-  );
-
   const style = useMemo(() => modalStyle(), []);
+  const { tradename } = useStaticInfo();
 
   return (
     <Modal
@@ -63,25 +56,36 @@ const SelectModal: FC<SelectModalProps> = ({
             {title}
           </Text>
         )}
-        {options.map(({ label, value: optionValue }) => (
-          <TouchableHighlight
-            key={optionValue}
-            accessibilityLabel={optionValue}
-            disabled={value === optionValue}
-            style={[style.option, customStyle?.option]}
-            testID={optionValue}
-            underlayColor={style.underlayColor}
-            accessible
-            onPress={value !== optionValue ? () => handleOnPressOption(optionValue) : undefined}
-          >
-            <Text
-              level={3}
-              style={[style.optionText, value === optionValue && style.textActive, customStyle?.optionText]}
-            >
-              {label}
-            </Text>
-          </TouchableHighlight>
-        ))}
+        <View accessibilityRole="radiogroup" style={style.container} testID="options-radiogroup">
+          {options.map(({ label, value: optionValue }) => {
+            const checked = value === optionValue;
+
+            return (
+              <Pressable
+                key={optionValue}
+                accessibilityLabel={label}
+                accessibilityRole="radio"
+                accessibilityState={{ checked, disabled: checked }}
+                disabled={checked}
+                testID={optionValue}
+                style={[
+                  style.wrapper,
+                  checked && style.wrapperChecked,
+                  tradename === Tradename.LOOKIERO && style.wrapperLookiero,
+                ]}
+                accessible
+                onPress={() => {
+                  onChange(optionValue);
+                  onClose();
+                }}
+              >
+                <Checkbox checked={checked} />
+
+                <Text style={style.text}>{label}</Text>
+              </Pressable>
+            );
+          })}
+        </View>
       </View>
     </Modal>
   );

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

@@ -258,7 +258,6 @@ exports[`SelectField component matches the snapshot 1`] = `
                 style={
                   [
                     {
-                      "paddingBottom": 24,
                       "paddingHorizontal": 24,
                     },
                     undefined,
@@ -266,65 +265,302 @@ exports[`SelectField component matches the snapshot 1`] = `
                 }
               >
                 <View
-                  accessibilityLabel="optionValue"
-                  accessibilityState={
+                  accessibilityRole="radiogroup"
+                  style={
                     {
-                      "disabled": false,
+                      "gap": 12,
                     }
                   }
-                  accessibilityValue={
-                    {
-                      "max": undefined,
-                      "min": undefined,
-                      "now": undefined,
-                      "text": undefined,
+                  testID="options-radiogroup"
+                >
+                  <View
+                    accessibilityLabel="Option label"
+                    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="optionValue"
-                >
-                  <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="optionValue"
+                  >
+                    <View
+                      style={
                         [
                           {
-                            "lineHeight": 24,
+                            "alignItems": "center",
+                            "borderRadius": 9999,
+                            "borderWidth": 2,
+                            "height": 22,
+                            "justifyContent": "center",
+                            "width": 22,
                           },
-                          false,
                           undefined,
-                        ],
+                          {
+                            "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,
+                          },
+                        ]
+                      }
+                    >
+                      Option label
+                    </Text>
+                  </View>
+                  <View
+                    accessibilityLabel="Selected label"
+                    accessibilityRole="radio"
+                    accessibilityState={
+                      {
+                        "busy": undefined,
+                        "checked": false,
+                        "disabled": false,
+                        "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={
+                      [
+                        {
+                          "alignItems": "center",
+                          "borderColor": "#DAD8D8",
+                          "borderWidth": 1,
+                          "flex": 1,
+                          "flexDirection": "row",
+                          "padding": 16,
+                        },
+                        false,
+                        {
+                          "borderRadius": 8,
+                        },
                       ]
                     }
+                    testID="selectedValue"
                   >
-                    Option label
-                  </Text>
+                    <View
+                      style={
+                        [
+                          {
+                            "alignItems": "center",
+                            "borderRadius": 9999,
+                            "borderWidth": 2,
+                            "height": 22,
+                            "justifyContent": "center",
+                            "width": 22,
+                          },
+                          undefined,
+                          {
+                            "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,
+                          },
+                        ]
+                      }
+                    >
+                      Selected label
+                    </Text>
+                  </View>
                 </View>
               </View>
             </View>