@lookiero/checkout 9.11.0 → 9.12.0-beta.0

package/dist/src/ExpoRoot.js

@@ -24,7 +24,7 @@ const order = {
     coupon: "MYLOOKIERO",
 };
 const customer = {
-    customerId: "74cb4f76-3f14-4983-81a6-2ee2a9a275d4",
+    customerId: "8107b5fe-8209-4b8f-86ef-85657cc496be",
     country: Country.ES,
     segment: Segment.WOMEN,
 };

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.js

@@ -1,12 +1,15 @@
 import React, { useCallback } from "react";
-import { Button, BUTTON_VARIANT } from "@lookiero/aurora";
+import { TouchableOpacity } from "react-native";
+import { ALIGN, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
 import { style } from "./ButtonCheckoutQuestionItem.style";
+const ACTIVE_OPACITY = 0.6;
 const ButtonCheckoutQuestionItem = ({ checkoutQuestion, checkoutQuestionParentId, testID, }) => {
     const { feedback, onChange } = useCheckoutQuestionFeedbackForId({ id: checkoutQuestionParentId });
     const optionText = useI18nMessage({ id: checkoutQuestion.name });
     const handleOnPress = useCallback(() => onChange({ checkoutQuestionId: checkoutQuestionParentId, checkoutQuestionFeedback: checkoutQuestion.id }), [onChange, checkoutQuestion.id, checkoutQuestionParentId]);
-    return (React.createElement(Button, { accessibilityLabel: testID, style: style.button, testID: testID, variant: feedback === checkoutQuestion.id ? BUTTON_VARIANT.PRIMARY : BUTTON_VARIANT.SECONDARY, onPress: handleOnPress }, optionText));
+    return (React.createElement(TouchableOpacity, { accessibilityLabel: testID, activeOpacity: ACTIVE_OPACITY, style: [style.button, feedback === checkoutQuestion.id && style.buttonActive], testID: testID, onPress: handleOnPress },
+        React.createElement(Text, { align: ALIGN.CENTER, level: 3, style: feedback === checkoutQuestion.id && style.textActive, action: true }, optionText)));
 };
 export { ButtonCheckoutQuestionItem };

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.style.d.ts

@@ -1,5 +1,21 @@
-import { ViewStyle } from "react-native";
 declare const style: {
-    button: ViewStyle;
+    button: {
+        alignContent: "center";
+        borderColor: string;
+        borderRadius: number;
+        borderWidth: number;
+        flex: number;
+        height: number;
+        justifyContent: "center";
+        marginHorizontal: number;
+        paddingLeft: number;
+        paddingRight: number;
+    };
+    buttonActive: {
+        backgroundColor: string;
+    };
+    textActive: {
+        color: string;
+    };
 };
 export { style };

package/dist/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.style.js

@@ -1,13 +1,25 @@
 import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
-const { colorBorderActionSecondary, borderWidth2, borderStyle } = theme();
+const { colorBorderActionSecondary, colorBgActionPrimaryActive, colorTextActionPrimary, borderWidth2, borderRadiusFull, space6, space16, } = theme();
+const HEIGHT = space16;
 const style = StyleSheet.create({
     button: {
+        alignContent: "center",
         borderColor: colorBorderActionSecondary,
-        borderStyle: borderStyle,
+        borderRadius: borderRadiusFull,
         borderWidth: borderWidth2,
         flex: 1,
+        height: HEIGHT,
+        justifyContent: "center",
         marginHorizontal: 12,
+        paddingLeft: space6,
+        paddingRight: space6,
+    },
+    buttonActive: {
+        backgroundColor: colorBgActionPrimaryActive,
+    },
+    textActive: {
+        color: colorTextActionPrimary,
     },
 });
 export { style };

package/dist/src/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "9.11.0";
+export declare const VERSION = "9.12.0-beta.0";

package/dist/src/version.js

@@ -1 +1 @@
-export const VERSION = "9.11.0";
+export const VERSION = "9.12.0-beta.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lookiero/checkout",
-  "version": "9.11.0",
+  "version": "9.12.0-beta.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "sideEffects": "false",

package/src/ExpoRoot.tsx

@@ -32,7 +32,7 @@ const order: Order = {
 };
 
 const customer: Customer = {
-  customerId: "74cb4f76-3f14-4983-81a6-2ee2a9a275d4",
+  customerId: "8107b5fe-8209-4b8f-86ef-85657cc496be",
   country: Country.ES,
   segment: Segment.WOMEN,
 };

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.style.ts

@@ -1,16 +1,37 @@
-import { StyleSheet, ViewStyle } from "react-native";
+import { StyleSheet } from "react-native";
 import { theme } from "@lookiero/sty-psp-ui";
 
-const { colorBorderActionSecondary, borderWidth2, borderStyle } = theme();
+const {
+  colorBorderActionSecondary,
+  colorBgActionPrimaryActive,
+  colorTextActionPrimary,
+  borderWidth2,
+  borderRadiusFull,
+  space6,
+  space16,
+} = theme();
+
+const HEIGHT = space16;
 
 const style = StyleSheet.create({
   button: {
+    alignContent: "center",
     borderColor: colorBorderActionSecondary,
-    borderStyle: borderStyle,
+    borderRadius: borderRadiusFull,
     borderWidth: borderWidth2,
     flex: 1,
+    height: HEIGHT,
+    justifyContent: "center",
     marginHorizontal: 12,
-  } as ViewStyle,
+    paddingLeft: space6,
+    paddingRight: space6,
+  },
+  buttonActive: {
+    backgroundColor: colorBgActionPrimaryActive,
+  },
+  textActive: {
+    color: colorTextActionPrimary,
+  },
 });
 
 export { style };

package/src/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.tsx

@@ -1,10 +1,13 @@
 import React, { useCallback } from "react";
-import { Button, BUTTON_VARIANT } from "@lookiero/aurora";
+import { TouchableOpacity } from "react-native";
+import { ALIGN, Text } from "@lookiero/aurora";
 import { useI18nMessage } from "@lookiero/i18n-react";
 import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
 import { CheckoutQuestionItem, CheckoutQuestionItemProps } from "../CheckoutQuestionItem";
 import { style } from "./ButtonCheckoutQuestionItem.style";
 
+const ACTIVE_OPACITY = 0.6;
+
 const ButtonCheckoutQuestionItem: CheckoutQuestionItem = ({
   checkoutQuestion,
   checkoutQuestionParentId,
@@ -19,15 +22,17 @@ const ButtonCheckoutQuestionItem: CheckoutQuestionItem = ({
   );
 
   return (
-    <Button
+    <TouchableOpacity
       accessibilityLabel={testID}
-      style={style.button}
+      activeOpacity={ACTIVE_OPACITY}
+      style={[style.button, feedback === checkoutQuestion.id && style.buttonActive]}
       testID={testID}
-      variant={feedback === checkoutQuestion.id ? BUTTON_VARIANT.PRIMARY : BUTTON_VARIANT.SECONDARY}
       onPress={handleOnPress}
     >
-      {optionText}
-    </Button>
+      <Text align={ALIGN.CENTER} level={3} style={feedback === checkoutQuestion.id && style.textActive} action>
+        {optionText}
+      </Text>
+    </TouchableOpacity>
   );
 };