@lookiero/checkout 3.6.0-beta.15 → 3.6.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/infrastructure/ui/components/organisms/checkoutQuestions/CheckoutQuestion.js +1 -1
  2. package/dist/infrastructure/ui/components/organisms/checkoutQuestions/components/CheckoutQuestionItem.d.ts +0 -1
  3. package/dist/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.js +2 -2
  4. package/dist/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/IconCheckoutQuestionItem.js +3 -3
  5. package/dist/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.js +2 -2
  6. package/dist/infrastructure/ui/components/organisms/returnQuestions/ReturnQuestion.js +1 -1
  7. package/dist/infrastructure/ui/components/organisms/returnQuestions/components/ReturnQuestionItem.d.ts +0 -1
  8. package/dist/infrastructure/ui/components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem.js +2 -2
  9. package/dist/infrastructure/ui/components/organisms/returnQuestions/components/optionReturnQuestionItem/OptionReturnQuestionItem.js +2 -2
  10. package/dist/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.js +2 -2
  11. package/dist/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.js +1 -1
  12. package/dist/infrastructure/ui/views/item/components/itemActions/ItemActions.js +1 -1
  13. package/dist/infrastructure/ui/views/item/components/returnQuestionsForm/ReturnQuestionsForm.js +1 -1
  14. package/dist/infrastructure/ui/views/summary/components/pricing/Pricing.js +2 -2
  15. package/dist/shared/notifications/infrastructure/ui/components/modalNotifications/ModalNotificationItem.js +1 -1
  16. package/dist/shared/ui/components/atoms/input/Input.js +2 -2
  17. package/dist/shared/ui/components/molecules/selectField/SelectField.js +1 -1
  18. package/package.json +1 -1
@@ -2,7 +2,7 @@ import React, { memo } from "react";
2
2
  import { useCheckoutQuestionItem } from "./behaviors/useCheckoutQuestionItem";
3
3
  const CheckoutQuestion = ({ checkoutQuestion, checkoutQuestionParentId, }) => {
4
4
  const Item = useCheckoutQuestionItem({ type: checkoutQuestion.type });
5
- return (React.createElement(Item, { checkoutQuestion: checkoutQuestion, checkoutQuestionParentId: checkoutQuestionParentId, testID: checkoutQuestion.name.replaceAll(".", "-").replaceAll("_", "-") },
5
+ return (React.createElement(Item, { checkoutQuestion: checkoutQuestion, checkoutQuestionParentId: checkoutQuestionParentId },
6
6
  React.createElement(React.Fragment, null, checkoutQuestion.children?.map((childCheckoutQuestion) => (React.createElement(CheckoutQuestion, { key: childCheckoutQuestion.id, checkoutQuestion: childCheckoutQuestion, checkoutQuestionParentId: checkoutQuestion.id }))))));
7
7
  };
8
8
  export default memo(CheckoutQuestion);
@@ -5,7 +5,6 @@ interface CheckoutQuestionItemProps {
5
5
  readonly checkoutQuestionParentId: string;
6
6
  readonly children?: ReactNode;
7
7
  readonly portalHostName?: string;
8
- readonly testID: string;
9
8
  }
10
9
  type CheckoutQuestionItem = FC<CheckoutQuestionItemProps>;
11
10
  export type { CheckoutQuestionItem, CheckoutQuestionItemProps };
@@ -5,10 +5,10 @@ import { theme } from "../../../../../theme/theme";
5
5
  import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
6
6
  import { style } from "./ButtonCheckoutQuestionItem.style";
7
7
  const { colorAccent, colorBase } = theme();
8
- const ButtonCheckoutQuestionItem = ({ checkoutQuestion, checkoutQuestionParentId, testID, }) => {
8
+ const ButtonCheckoutQuestionItem = ({ checkoutQuestion, checkoutQuestionParentId, }) => {
9
9
  const { feedback, onChange } = useCheckoutQuestionFeedbackForId({ id: checkoutQuestionParentId });
10
10
  const optionText = useI18nMessage({ id: checkoutQuestion.name });
11
11
  const handleOnPress = useCallback(() => onChange({ checkoutQuestionId: checkoutQuestionParentId, checkoutQuestionFeedback: checkoutQuestion.id }), [onChange, checkoutQuestion.id, checkoutQuestionParentId]);
12
- return (React.createElement(Button, { accessibilityLabel: testID, style: [style.button, { backgroundColor: feedback === checkoutQuestion.id ? colorAccent : colorBase }], testID: testID, variant: BUTTON_VARIANT.SECONDARY, onPress: handleOnPress }, optionText));
12
+ return (React.createElement(Button, { style: [style.button, { backgroundColor: feedback === checkoutQuestion.id ? colorAccent : colorBase }], variant: BUTTON_VARIANT.SECONDARY, onPress: handleOnPress }, optionText));
13
13
  };
14
14
  export { ButtonCheckoutQuestionItem };
@@ -16,12 +16,12 @@ const ICON = {
16
16
  // eslint-disable-next-line @typescript-eslint/naming-convention
17
17
  "checkout_question.icon.good": Happy,
18
18
  };
19
- const IconCheckoutQuestionItem = ({ checkoutQuestion, checkoutQuestionParentId, testID, }) => {
19
+ const IconCheckoutQuestionItem = ({ checkoutQuestion, checkoutQuestionParentId, }) => {
20
20
  const Icon = ICON[checkoutQuestion.name];
21
21
  const { feedback, onChange } = useCheckoutQuestionFeedbackForId({ id: checkoutQuestionParentId });
22
22
  const handleOnPress = useCallback(() => onChange({ checkoutQuestionId: checkoutQuestionParentId, checkoutQuestionFeedback: checkoutQuestion.id }), [onChange, checkoutQuestion.id, checkoutQuestionParentId]);
23
23
  invariant(Icon, "CheckoutQuestion icon does not exist");
24
- return (React.createElement(Pressable, { accessibilityLabel: testID, testID: testID, onPress: handleOnPress },
25
- React.createElement(Icon, { fill: feedback === checkoutQuestion.id ? colorAccent : "none", style: style.icon })));
24
+ return (React.createElement(Pressable, { onPress: handleOnPress },
25
+ React.createElement(Icon, { fill: feedback === checkoutQuestion.id ? colorAccent : "none", style: style.icon, testID: checkoutQuestion.name })));
26
26
  };
27
27
  export { IconCheckoutQuestionItem };
@@ -3,11 +3,11 @@ import React, { useCallback, useMemo } from "react";
3
3
  import { InputField } from "../../../../../../../shared/ui/components/molecules/inputField/InputField";
4
4
  import { useCheckoutQuestionFeedbackForId } from "../../behaviors/useCheckoutQuestionFeedback";
5
5
  const TEXTAREA_MIN_HEIGHT = 96;
6
- const TextareaCheckoutQuestionItem = ({ checkoutQuestion, checkoutQuestionParentId, testID, }) => {
6
+ const TextareaCheckoutQuestionItem = ({ checkoutQuestion, checkoutQuestionParentId, }) => {
7
7
  const { formatMessage } = useIntl();
8
8
  const placeholderText = useMemo(() => (checkoutQuestion.placeholder ? formatMessage({ id: checkoutQuestion.placeholder }) : ""), [formatMessage, checkoutQuestion.placeholder]);
9
9
  const { feedback, onChange } = useCheckoutQuestionFeedbackForId({ id: checkoutQuestionParentId });
10
10
  const handleOnChange = useCallback((value) => onChange({ checkoutQuestionId: checkoutQuestionParentId, checkoutQuestionFeedback: value }), [onChange, checkoutQuestionParentId]);
11
- return (React.createElement(InputField, { label: placeholderText, minHeight: TEXTAREA_MIN_HEIGHT, placeholder: placeholderText, testID: testID, value: feedback, multiline: true, onChange: handleOnChange }));
11
+ return (React.createElement(InputField, { label: placeholderText, minHeight: TEXTAREA_MIN_HEIGHT, placeholder: placeholderText, value: feedback, multiline: true, onChange: handleOnChange }));
12
12
  };
13
13
  export { TextareaCheckoutQuestionItem };
@@ -2,7 +2,7 @@ import React, { memo } from "react";
2
2
  import { useReturnQuestionItem } from "./behaviors/useReturnQuestionItem";
3
3
  const ReturnQuestion = ({ returnQuestion, returnQuestionParentId, portalHostName, }) => {
4
4
  const Item = useReturnQuestionItem({ type: returnQuestion.type });
5
- return (React.createElement(Item, { portalHostName: portalHostName, returnQuestion: returnQuestion, returnQuestionParentId: returnQuestionParentId, testID: returnQuestion.name.replaceAll(".", "-").replaceAll("_", "-") },
5
+ return (React.createElement(Item, { portalHostName: portalHostName, returnQuestion: returnQuestion, returnQuestionParentId: returnQuestionParentId },
6
6
  React.createElement(React.Fragment, null, returnQuestion.children?.map((childReturnQuestion) => (React.createElement(ReturnQuestion, { key: childReturnQuestion.id, portalHostName: portalHostName, returnQuestion: childReturnQuestion, returnQuestionParentId: returnQuestion.id }))))));
7
7
  };
8
8
  export default memo(ReturnQuestion);
@@ -5,7 +5,6 @@ interface ReturnQuestionItemProps {
5
5
  readonly returnQuestionParentId: string;
6
6
  readonly children?: ReactNode;
7
7
  readonly portalHostName?: string;
8
- readonly testID: string;
9
8
  }
10
9
  type ReturnQuestionItem = FC<ReturnQuestionItemProps>;
11
10
  export type { ReturnQuestionItem, ReturnQuestionItemProps };
@@ -7,7 +7,7 @@ import { InputField } from "../../../../../../../shared/ui/components/molecules/
7
7
  import { useReturnQuestionFeedback, useReturnQuestionFeedbackForId } from "../../behaviors/useReturnQuestionFeedback";
8
8
  import { deepestReturnQuestionWithFeedbackForReturnQuestion, feedbackForReturnQuestion, } from "../../util/returnQuestionFeedback";
9
9
  import { style, containerUnderlayColor } from "./HostSelectReturnQuestionItem.style";
10
- const HostSelectReturnQuestionItem = ({ returnQuestion, children, portalHostName, testID, }) => {
10
+ const HostSelectReturnQuestionItem = ({ returnQuestion, children, portalHostName, }) => {
11
11
  const { formatMessage } = useIntl();
12
12
  const placeholderText = useMemo(() => (returnQuestion.placeholder ? formatMessage({ id: returnQuestion.placeholder }) : ""), [formatMessage, returnQuestion.placeholder]);
13
13
  const [modalVisible, setModalVisible] = useState(false);
@@ -31,7 +31,7 @@ const HostSelectReturnQuestionItem = ({ returnQuestion, children, portalHostName
31
31
  // deepestReturnQuestionWithFeedback needs to be as a dependency in order to be re-evaluated whenever it changes
32
32
  }, [handleOnModalClose, deepestReturnQuestionWithFeedback, isLeaf]);
33
33
  return (React.createElement(React.Fragment, null,
34
- React.createElement(TouchableHighlight, { accessibilityLabel: testID, style: style.container, testID: testID, underlayColor: containerUnderlayColor, accessible: true, onPress: handleOnPress },
34
+ React.createElement(TouchableHighlight, { style: style.container, underlayColor: containerUnderlayColor, onPress: handleOnPress },
35
35
  React.createElement(View, { pointerEvents: "none" },
36
36
  React.createElement(InputField, { editable: false, icon: "arrow-down", label: placeholderText, value: inputValue }))),
37
37
  React.createElement(Modal, { portalHostName: portalHostName, visible: modalVisible, header: deepestReturnQuestionWithFeedback && (React.createElement(ButtonIcon, { name: "arrow-left", testID: "modal-back-button", onPress: handleOnBackButtonPress })), scroll: true, showCloseButton: true, onClose: handleOnModalClose },
@@ -4,11 +4,11 @@ import React, { useCallback } from "react";
4
4
  import { TouchableHighlight } from "react-native";
5
5
  import { useReturnQuestionFeedbackForId } from "../../behaviors/useReturnQuestionFeedback";
6
6
  import { containerUnderlayColor, style } from "./OptionReturnQuestionItem.style";
7
- const OptionReturnQuestionItem = ({ returnQuestion, returnQuestionParentId, testID, }) => {
7
+ const OptionReturnQuestionItem = ({ returnQuestion, returnQuestionParentId, }) => {
8
8
  const { onChange } = useReturnQuestionFeedbackForId({ id: returnQuestionParentId });
9
9
  const optionText = useI18nMessage({ id: returnQuestion.name });
10
10
  const handleOnPress = useCallback(() => onChange({ returnQuestionId: returnQuestionParentId, returnQuestionFeedback: returnQuestion.id }), [onChange, returnQuestion.id, returnQuestionParentId]);
11
- return (React.createElement(TouchableHighlight, { accessibilityLabel: testID, style: style.container, testID: testID, underlayColor: containerUnderlayColor, onPress: handleOnPress },
11
+ return (React.createElement(TouchableHighlight, { style: style.container, underlayColor: containerUnderlayColor, onPress: handleOnPress },
12
12
  React.createElement(Text, { level: 3, style: style.text }, optionText)));
13
13
  };
14
14
  export { OptionReturnQuestionItem };
@@ -3,11 +3,11 @@ import React, { useCallback, useMemo } from "react";
3
3
  import { InputField } from "../../../../../../../shared/ui/components/molecules/inputField/InputField";
4
4
  import { useReturnQuestionFeedbackForId } from "../../behaviors/useReturnQuestionFeedback";
5
5
  const TEXTAREA_MIN_HEIGHT = 96;
6
- const TextareaReturnQuestionItem = ({ returnQuestion, returnQuestionParentId, testID, }) => {
6
+ const TextareaReturnQuestionItem = ({ returnQuestion, returnQuestionParentId, }) => {
7
7
  const { formatMessage } = useIntl();
8
8
  const placeholderText = useMemo(() => (returnQuestion.placeholder ? formatMessage({ id: returnQuestion.placeholder }) : ""), [formatMessage, returnQuestion.placeholder]);
9
9
  const { feedback, onChange } = useReturnQuestionFeedbackForId({ id: returnQuestionParentId });
10
10
  const handleOnChange = useCallback((value) => onChange({ returnQuestionId: returnQuestionParentId, returnQuestionFeedback: value }), [onChange, returnQuestionParentId]);
11
- return (React.createElement(InputField, { label: placeholderText, minHeight: TEXTAREA_MIN_HEIGHT, placeholder: placeholderText, testID: testID, value: feedback, multiline: true, onChange: handleOnChange }));
11
+ return (React.createElement(InputField, { label: placeholderText, minHeight: TEXTAREA_MIN_HEIGHT, placeholder: placeholderText, value: feedback, multiline: true, onChange: handleOnChange }));
12
12
  };
13
13
  export { TextareaReturnQuestionItem };
@@ -32,6 +32,6 @@ const CheckoutQuestionsForm = ({ checkoutQuestions, submitButtonDisabled, onSubm
32
32
  return (React.createElement(React.Fragment, null,
33
33
  React.createElement(CheckoutQuestionItemProvider, { checkoutQuestionItems: checkoutQuestionItems },
34
34
  React.createElement(CheckoutQuestions, { checkoutQuestions: filteredCheckoutQuestions })),
35
- React.createElement(Button, { busy: submitButtonDisabled, style: style.button, testID: "checkout-feedback-button", onPress: handlePress }, buttonText)));
35
+ React.createElement(Button, { busy: submitButtonDisabled, style: style.button, onPress: handlePress }, buttonText)));
36
36
  };
37
37
  export { CheckoutQuestionsForm };
@@ -29,7 +29,7 @@ const ItemActions = ({ productVariants, currentProductVariant, country, onSizeSe
29
29
  inputField: { input: disabledSizeSelector && style.inputDisabled },
30
30
  }, onChange: onReplace })),
31
31
  React.createElement(View, { style: style.returnButtonContainer },
32
- React.createElement(Button, { testID: "return-button", variant: BUTTON_VARIANT.SECONDARY, onPress: onReturn },
32
+ React.createElement(Button, { variant: BUTTON_VARIANT.SECONDARY, onPress: onReturn },
33
33
  React.createElement(Text, { align: ALIGN.CENTER, level: 3, selectable: false, style: style.buttonText, action: true, upperCase: true }, returnButtonText)))))));
34
34
  };
35
35
  export { ItemActions };
@@ -35,7 +35,7 @@ const ReturnQuestionsForm = ({ returnQuestions, visible, onSubmit, onClose }) =>
35
35
  React.createElement(View, { style: style.returnQuestionsContainer },
36
36
  React.createElement(Text, { level: 2, style: style.title }, titleText),
37
37
  React.createElement(ReturnQuestions, { portalHostName: RETURN_QUESTION_FORM_PORTAL_HOST_NAME, returnQuestions: returnQuestions }),
38
- React.createElement(Button, { style: style.submit, testID: "return-questions-button", onPress: handleOnSubmit },
38
+ React.createElement(Button, { style: style.submit, onPress: handleOnSubmit },
39
39
  React.createElement(Text, { align: ALIGN.CENTER, level: 3, selectable: false, style: style.buttonText, action: true, upperCase: true }, submitButtonText))))));
40
40
  };
41
41
  export { ReturnQuestionsForm };
@@ -40,7 +40,7 @@ const Pricing = ({ pendingToPay, subtotal, balanceDiscount, discount, discountPe
40
40
  totalCheckoutItemsKeptText),
41
41
  React.createElement(Price, { price: pendingToPay, variant: "detail" })),
42
42
  React.createElement(View, { style: style.collapsedContent },
43
- React.createElement(Button, { busy: busy, testID: "confirm-checkout-button", small: true, onPress: onSubmit },
43
+ React.createElement(Button, { busy: busy, testID: "cta-confirm-checkout", small: true, onPress: onSubmit },
44
44
  React.createElement(Text, { align: ALIGN.CENTER, level: 3, selectable: false, style: style.buttonText, action: true, upperCase: true }, submitButtonText))))) : (React.createElement(animated.View, { style: { opacity: notCollapsedStyle.opacitiy } },
45
45
  React.createElement(Row, { text: `${subtotalText} ${totalCheckoutItemsKeptText}` },
46
46
  React.createElement(Price, { price: subtotal, variant: "subtotal" })),
@@ -52,6 +52,6 @@ const Pricing = ({ pendingToPay, subtotal, balanceDiscount, discount, discountPe
52
52
  React.createElement(View, { style: style.divider }),
53
53
  React.createElement(Row, { level: 2, text: totalText },
54
54
  React.createElement(Price, { price: pendingToPay, variant: "total" })),
55
- React.createElement(Button, { busy: busy, testID: "confirm-checkout-button", onPress: onSubmit }, submitButtonText)))));
55
+ React.createElement(Button, { busy: busy, testID: "cta-confirm-checkout", onPress: onSubmit }, submitButtonText)))));
56
56
  };
57
57
  export { Pricing };
@@ -26,7 +26,7 @@ const ModalNotificationItem = ({ visible, notification, onRemove, testID = "moda
26
26
  React.createElement(View, { style: style.modal },
27
27
  React.createElement(Text, { align: ALIGN.CENTER, level: 1, style: style.title }, titleText),
28
28
  React.createElement(Text, { level: 3, style: style.description }, bodyText),
29
- React.createElement(Button, { style: style.button, testID: "modal-notification-button", onPress: handleOnClose },
29
+ React.createElement(Button, { style: style.button, onPress: handleOnClose },
30
30
  React.createElement(Text, { align: ALIGN.CENTER, level: 3, selectable: false, style: style.buttonText, action: true, upperCase: true }, acceptText)))));
31
31
  };
32
32
  export { ModalNotificationItem };
@@ -6,7 +6,7 @@ const MIN_HEIGHT = 56;
6
6
  const MAX_HEIGHT = 242; // 10 lines
7
7
  const { colorGrayscaleL } = theme();
8
8
  const clamp = (min, max, value) => Math.min(Math.max(min, value), max);
9
- const Input = ({ minHeight = MIN_HEIGHT, maxHeight = MAX_HEIGHT, style: customStyle, placeholderTextColor = colorGrayscaleL, onChange, onContentSizeChange, value, multiline, testID = "input", ...restOfProps }) => {
9
+ const Input = ({ minHeight = MIN_HEIGHT, maxHeight = MAX_HEIGHT, style: customStyle, placeholderTextColor = colorGrayscaleL, onChange, onContentSizeChange, value, multiline, ...restOfProps }) => {
10
10
  const [height, setHeight] = useState(minHeight);
11
11
  // When content height has became smaller the onContentSizeChange does in fact triggered but the internal height is incorrect.
12
12
  const handleOnContentSizeChange = useCallback((event) => {
@@ -32,6 +32,6 @@ const Input = ({ minHeight = MIN_HEIGHT, maxHeight = MAX_HEIGHT, style: customSt
32
32
  }, [maxHeight, minHeight, multiline]);
33
33
  useLayoutEffect(handleOnContentSizeChangeWeb, [handleOnContentSizeChangeWeb, value]);
34
34
  const textInputRef = useRef(null);
35
- return (React.createElement(TextInput, { ref: textInputRef, accessibilityLabel: testID, multiline: multiline, numberOfLines: !!multiline ? undefined : 1, placeholderTextColor: placeholderTextColor, style: [style.input, customStyle, { height }], testID: testID, textAlignVertical: "top", value: value, accessible: true, onChange: onChange, onContentSizeChange: handleOnContentSizeChange, ...restOfProps }));
35
+ return (React.createElement(TextInput, { ...restOfProps, ref: textInputRef, multiline: multiline, numberOfLines: !!multiline ? undefined : 1, placeholderTextColor: placeholderTextColor, style: [style.input, customStyle, { height }], testID: "input", textAlignVertical: "top", value: value, onChange: onChange, onContentSizeChange: handleOnContentSizeChange }));
36
36
  };
37
37
  export { Input };
@@ -22,7 +22,7 @@ const SelectField = ({ title, placeholder, value, options, style: customStyle, o
22
22
  React.createElement(Modal, { testID: "select-field-modal", visible: modalVisible, scroll: true, showCloseButton: true, onClose: handleOnModalClose },
23
23
  React.createElement(View, { style: [style.modalContent, customStyle?.modalContent] },
24
24
  title && (React.createElement(Text, { level: 2, style: style.modalTitle }, title)),
25
- options.map(({ label, value: optionValue }) => (React.createElement(TouchableHighlight, { key: optionValue, disabled: value === optionValue, style: [style.option, customStyle?.option], testID: optionValue, underlayColor: colorGrayscaleS, onPress: value !== optionValue ? () => handleOnPressOption(optionValue) : undefined },
25
+ options.map(({ label, value: optionValue }) => (React.createElement(TouchableHighlight, { key: optionValue, disabled: value === optionValue, style: [style.option, customStyle?.option], underlayColor: colorGrayscaleS, onPress: value !== optionValue ? () => handleOnPressOption(optionValue) : undefined },
26
26
  React.createElement(Text, { color: value === optionValue ? COLOR.GRAYSCALE_M : COLOR.CONTENT, level: 3, style: [style.optionText, customStyle?.optionText] }, label))))))));
27
27
  };
28
28
  export { SelectField };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lookiero/checkout",
3
- "version": "3.6.0-beta.15",
3
+ "version": "3.6.0-beta.2",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "files": [