@lookiero/checkout 3.8.0-beta.0 → 3.8.0-beta.10
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.
- package/dist/infrastructure/projection/checkout/checkout.js +14 -0
- package/dist/infrastructure/ui/components/layouts/layout/dummyLayout/useScrollViewRef.d.ts +15 -0
- package/dist/infrastructure/ui/components/layouts/layout/dummyLayout/useScrollViewRef.js +14 -0
- package/dist/infrastructure/ui/components/organisms/checkoutQuestions/CheckoutQuestion.js +1 -1
- package/dist/infrastructure/ui/components/organisms/checkoutQuestions/components/CheckoutQuestionItem.d.ts +0 -1
- package/dist/infrastructure/ui/components/organisms/checkoutQuestions/components/buttonCheckoutQuestionItem/ButtonCheckoutQuestionItem.js +2 -2
- package/dist/infrastructure/ui/components/organisms/checkoutQuestions/components/iconCheckoutQuestionItem/IconCheckoutQuestionItem.js +3 -3
- package/dist/infrastructure/ui/components/organisms/checkoutQuestions/components/textareaCheckoutQuestionItem/TextareaCheckoutQuestionItem.js +2 -2
- package/dist/infrastructure/ui/components/organisms/returnQuestions/ReturnQuestion.js +1 -1
- package/dist/infrastructure/ui/components/organisms/returnQuestions/components/ReturnQuestionItem.d.ts +0 -1
- package/dist/infrastructure/ui/components/organisms/returnQuestions/components/hostSelectReturnQuestionItem/HostSelectReturnQuestionItem.js +2 -2
- package/dist/infrastructure/ui/components/organisms/returnQuestions/components/optionReturnQuestionItem/OptionReturnQuestionItem.js +2 -2
- package/dist/infrastructure/ui/components/organisms/returnQuestions/components/textareaReturnQuestionItem/TextareaReturnQuestionItem.js +2 -2
- package/dist/infrastructure/ui/views/feedback/components/checkoutQuestionsForm/CheckoutQuestionsForm.js +1 -1
- package/dist/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.js +4 -6
- package/dist/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.style.d.ts +3 -10
- package/dist/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.style.js +3 -10
- package/dist/infrastructure/ui/views/item/components/itemActions/ItemActions.js +3 -4
- package/dist/infrastructure/ui/views/item/components/itemActions/ItemActions.style.d.ts +0 -3
- package/dist/infrastructure/ui/views/item/components/itemActions/ItemActions.style.js +0 -3
- package/dist/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.js +9 -10
- package/dist/infrastructure/ui/views/item/components/returnQuestionsFeedback/ReturnQuestionsFeedback.style.d.ts +0 -1
- package/dist/infrastructure/ui/views/item/components/returnQuestionsFeedback/ReturnQuestionsFeedback.style.js +0 -1
- package/dist/infrastructure/ui/views/item/components/returnQuestionsForm/ReturnQuestionsForm.js +2 -3
- package/dist/infrastructure/ui/views/item/components/returnQuestionsForm/ReturnQuestionsForm.style.d.ts +0 -3
- package/dist/infrastructure/ui/views/item/components/returnQuestionsForm/ReturnQuestionsForm.style.js +0 -3
- package/dist/infrastructure/ui/views/item/components/sizeWithoutStockModal/SizeWithoutStockModal.js +3 -4
- package/dist/infrastructure/ui/views/item/components/sizeWithoutStockModal/SizeWithoutStockModal.style.d.ts +3 -10
- package/dist/infrastructure/ui/views/item/components/sizeWithoutStockModal/SizeWithoutStockModal.style.js +3 -10
- package/dist/infrastructure/ui/views/item/views/productVariant/ProductVariant.style.js +1 -1
- package/dist/infrastructure/ui/views/summary/components/pricing/Pricing.js +5 -6
- package/dist/infrastructure/ui/views/summary/components/pricing/Pricing.style.d.ts +0 -6
- package/dist/infrastructure/ui/views/summary/components/pricing/Pricing.style.js +0 -6
- package/dist/shared/notifications/infrastructure/ui/components/modalNotifications/ModalNotificationItem.js +3 -4
- package/dist/shared/notifications/infrastructure/ui/components/modalNotifications/ModalNotificationItem.style.d.ts +3 -10
- package/dist/shared/notifications/infrastructure/ui/components/modalNotifications/ModalNotificationItem.style.js +3 -10
- package/dist/shared/ui/components/atoms/input/Input.js +2 -2
- package/dist/shared/ui/components/layouts/carousel/Carousel.d.ts +11 -0
- package/dist/shared/ui/components/layouts/carousel/Carousel.js +31 -0
- package/dist/shared/ui/components/layouts/carousel/Carousel.style.d.ts +15 -0
- package/dist/shared/ui/components/layouts/carousel/Carousel.style.js +7 -0
- package/dist/shared/ui/components/layouts/carousel/Carousel2.d.ts +25 -0
- package/dist/shared/ui/components/layouts/carousel/Carousel2.js +67 -0
- package/dist/shared/ui/components/layouts/carousel/DragComponent.d.ts +3 -0
- package/dist/shared/ui/components/layouts/carousel/DragComponent.js +48 -0
- package/dist/shared/ui/components/layouts/modal/Modal.js +1 -1
- package/dist/shared/ui/components/layouts/slider/Bullets.js +3 -4
- package/dist/shared/ui/components/layouts/slider/Bullets2.d.ts +10 -0
- package/dist/shared/ui/components/layouts/slider/Bullets2.js +30 -0
- package/dist/shared/ui/components/layouts/slider/SliderDots.d.ts +8 -0
- package/dist/shared/ui/components/layouts/slider/SliderDots.js +16 -0
- package/dist/shared/ui/components/layouts/slider/SliderDots.style.d.ts +12 -0
- package/dist/shared/ui/components/layouts/slider/SliderDots.style.js +15 -0
- package/dist/shared/ui/components/molecules/selectField/SelectField.js +3 -3
- package/package.json +4 -1
- package/dist/domain/checkoutBooking/event/createNotificationWhenCheckoutBookingExpired.d.ts +0 -6
- package/dist/domain/checkoutBooking/event/createNotificationWhenCheckoutBookingExpired.js +0 -13
- package/dist/infrastructure/domain/uiSetting/react/useIncrementIntroShownCount.d.ts +0 -10
- package/dist/infrastructure/domain/uiSetting/react/useIncrementIntroShownCount.js +0 -11
- package/dist/infrastructure/projection/uiSetting/react/useShouldIntroBeShown.d.ts +0 -6
- package/dist/infrastructure/projection/uiSetting/react/useShouldIntroBeShown.js +0 -7
- package/dist/infrastructure/projection/uiSetting/react/useViewIntroShownCount.d.ts +0 -6
- package/dist/infrastructure/projection/uiSetting/react/useViewIntroShownCount.js +0 -9
- package/dist/infrastructure/ui/components/templates/SafeAreaScrollView.d.ts +0 -13
- package/dist/infrastructure/ui/components/templates/SafeAreaScrollView.js +0 -19
- package/dist/infrastructure/ui/components/templates/SafeAreaScrollView.style.ts.d.ts +0 -6
- package/dist/infrastructure/ui/components/templates/SafeAreaScrollView.style.ts.js +0 -7
- package/dist/infrastructure/ui/components/templates/header/header/Header.d.ts +0 -3
- package/dist/infrastructure/ui/components/templates/header/header/Header.js +0 -10
- package/dist/infrastructure/ui/components/templates/header/header/Header.style.d.ts +0 -9
- package/dist/infrastructure/ui/components/templates/header/header/Header.style.js +0 -12
- package/dist/infrastructure/ui/components/templates/safeAreaScrollView/SafeAreaScrollView.d.ts +0 -13
- package/dist/infrastructure/ui/components/templates/safeAreaScrollView/SafeAreaScrollView.js +0 -19
- package/dist/infrastructure/ui/components/templates/safeAreaScrollView/SafeAreaScrollView.style.ts.d.ts +0 -6
- package/dist/infrastructure/ui/components/templates/safeAreaScrollView/SafeAreaScrollView.style.ts.js +0 -7
- package/dist/infrastructure/ui/hooks/usePaymentInstrumentUpdateEvents.d.ts +0 -2
- package/dist/infrastructure/ui/hooks/usePaymentInstrumentUpdateEvents.js +0 -28
- package/dist/infrastructure/ui/hooks/useToast.d.ts +0 -11
- package/dist/infrastructure/ui/hooks/useToast.js +0 -49
- package/dist/infrastructure/ui/views/checkout/components/checkoutSuccessModal/CheckoutSuccessModal.d.ts +0 -7
- package/dist/infrastructure/ui/views/checkout/components/checkoutSuccessModal/CheckoutSuccessModal.js +0 -25
- package/dist/infrastructure/ui/views/checkout/components/checkoutSuccessModal/CheckoutSuccessModal.style.d.ts +0 -16
- package/dist/infrastructure/ui/views/checkout/components/checkoutSuccessModal/CheckoutSuccessModal.style.js +0 -19
- package/dist/infrastructure/ui/views/intro/Intro.d.ts +0 -6
- package/dist/infrastructure/ui/views/intro/Intro.js +0 -52
- package/dist/infrastructure/ui/views/intro/Intro.style.d.ts +0 -52
- package/dist/infrastructure/ui/views/intro/Intro.style.js +0 -55
- package/dist/infrastructure/ui/views/item/Item.style.d.ts +0 -15
- package/dist/infrastructure/ui/views/item/Item.style.js +0 -18
- package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.d.ts +0 -26
- package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.js +0 -44
- package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.style.d.ts +0 -45
- package/dist/infrastructure/ui/views/item/components/productVariant/ProductVariant.style.js +0 -53
- package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.d.ts +0 -7
- package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.js +0 -25
- package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.style.d.ts +0 -16
- package/dist/infrastructure/ui/views/item/components/sizeChangeModal/SizeChangeModal.style.js +0 -19
- package/dist/infrastructure/ui/views/navigation/Navigation.d.ts +0 -21
- package/dist/infrastructure/ui/views/navigation/Navigation.js +0 -45
- package/dist/infrastructure/ui/views/navigation/Navigation.style.d.ts +0 -5
- package/dist/infrastructure/ui/views/navigation/Navigation.style.js +0 -30
- package/dist/infrastructure/ui/views/navigation/components/header/Header.d.ts +0 -46
- package/dist/infrastructure/ui/views/navigation/components/header/Header.js +0 -120
- package/dist/infrastructure/ui/views/navigation/components/header/Header.style.d.ts +0 -31
- package/dist/infrastructure/ui/views/navigation/components/header/Header.style.js +0 -34
- package/dist/infrastructure/ui/views/navigation/components/header/Logo.d.ts +0 -7
- package/dist/infrastructure/ui/views/navigation/components/header/Logo.js +0 -11
- package/dist/infrastructure/ui/views/navigation/components/header/Logo.style.d.ts +0 -7
- package/dist/infrastructure/ui/views/navigation/components/header/Logo.style.js +0 -8
- package/dist/infrastructure/ui/views/summary/components/checkoutItemsTabs/CheckoutItemsTabs.d.ts +0 -12
- package/dist/infrastructure/ui/views/summary/components/checkoutItemsTabs/CheckoutItemsTabs.js +0 -24
- package/dist/infrastructure/ui/views/summary/components/checkoutItemsTabs/CheckoutItemsTabs.style.d.ts +0 -15
- package/dist/infrastructure/ui/views/summary/components/checkoutItemsTabs/CheckoutItemsTabs.style.js +0 -18
- package/dist/shared/notifications/domain/notification/command/createNotification.d.ts +0 -17
- package/dist/shared/notifications/domain/notification/command/createNotification.js +0 -7
- package/dist/shared/notifications/infrastructure/domain/notification/react/useCreateNotification.d.ts +0 -21
- package/dist/shared/notifications/infrastructure/domain/notification/react/useCreateNotification.js +0 -22
- package/dist/shared/notifications/infrastructure/ui/components/NotificationItem.d.ts +0 -12
- package/dist/shared/notifications/infrastructure/ui/components/NotificationItem.js +0 -24
- package/dist/shared/notifications/infrastructure/ui/components/Notifications.d.ts +0 -9
- package/dist/shared/notifications/infrastructure/ui/components/Notifications.js +0 -20
- package/dist/shared/notifications/infrastructure/ui/components/Notifications.style.d.ts +0 -36
- package/dist/shared/notifications/infrastructure/ui/components/Notifications.style.js +0 -31
- package/dist/shared/tracking/infrastructure/usePageView.d.ts +0 -13
- package/dist/shared/tracking/infrastructure/usePageView.js +0 -27
- package/dist/shared/ui/components/atoms/error/Error.style.d.ts +0 -6
- package/dist/shared/ui/components/atoms/error/Error.style.js +0 -9
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
const toCheckoutProjection = (checkoutDto) => ({
|
|
2
2
|
...checkoutDto,
|
|
3
|
+
items: checkoutDto.items.map((item) => ({
|
|
4
|
+
...item,
|
|
5
|
+
productVariant: {
|
|
6
|
+
...item.productVariant,
|
|
7
|
+
media: [
|
|
8
|
+
...item.productVariant.media,
|
|
9
|
+
...item.productVariant.media,
|
|
10
|
+
...item.productVariant.media,
|
|
11
|
+
...item.productVariant.media,
|
|
12
|
+
...item.productVariant.media,
|
|
13
|
+
...item.productVariant.media,
|
|
14
|
+
],
|
|
15
|
+
},
|
|
16
|
+
})),
|
|
3
17
|
expiresOn: new Date(checkoutDto.expiresOn),
|
|
4
18
|
});
|
|
5
19
|
export { toCheckoutProjection };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { FC, ReactNode, Ref } from "react";
|
|
2
|
+
import { GestureType, ScrollView } from "react-native-gesture-handler";
|
|
3
|
+
interface ContextShape {
|
|
4
|
+
readonly scrollViewRef: Ref<ScrollView>;
|
|
5
|
+
readonly panGestureRef: Ref<GestureType>;
|
|
6
|
+
}
|
|
7
|
+
interface ScrollViewRefContextProviderProps {
|
|
8
|
+
readonly children: ReactNode;
|
|
9
|
+
}
|
|
10
|
+
declare const ScrollViewRefContextProvider: FC<ScrollViewRefContextProviderProps>;
|
|
11
|
+
interface UseScrollViewRefFunction {
|
|
12
|
+
(): ContextShape;
|
|
13
|
+
}
|
|
14
|
+
declare const useScrollViewRef: UseScrollViewRefFunction;
|
|
15
|
+
export { useScrollViewRef, ScrollViewRefContextProvider };
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React, { createContext, useContext, useRef } from "react";
|
|
2
|
+
import invariant from "tiny-invariant";
|
|
3
|
+
const ScrollViewRefContext = createContext(null);
|
|
4
|
+
const ScrollViewRefContextProvider = ({ children }) => {
|
|
5
|
+
const scrollViewRef = useRef(null);
|
|
6
|
+
const panGestureRef = useRef(null);
|
|
7
|
+
return (React.createElement(ScrollViewRefContext.Provider, { value: { scrollViewRef, panGestureRef } }, children));
|
|
8
|
+
};
|
|
9
|
+
const useScrollViewRef = () => {
|
|
10
|
+
const ref = useContext(ScrollViewRefContext);
|
|
11
|
+
invariant(ref, "Your are trying to use the useScrollViewRef hook without wrapping your app with the <ScrollViewRefContextProvider>.");
|
|
12
|
+
return ref;
|
|
13
|
+
};
|
|
14
|
+
export { useScrollViewRef, ScrollViewRefContextProvider };
|
|
@@ -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
|
|
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,
|
|
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, {
|
|
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,
|
|
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, {
|
|
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,
|
|
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,
|
|
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
|
|
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,
|
|
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, {
|
|
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,
|
|
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, {
|
|
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,
|
|
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,
|
|
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,
|
|
35
|
+
React.createElement(Button, { busy: submitButtonDisabled, style: style.button, onPress: handlePress }, buttonText)));
|
|
36
36
|
};
|
|
37
37
|
export { CheckoutQuestionsForm };
|
package/dist/infrastructure/ui/views/item/components/getOutOfCheckoutModal/GetOutOfCheckoutModal.js
CHANGED
|
@@ -12,11 +12,9 @@ const GetOutOfCheckoutModal = ({ visible, onDismiss, onConfirm }) => {
|
|
|
12
12
|
const confirmButtonText = useI18nMessage({ id: I18nMessages.GET_OUT_OF_CHECKOUT_MODAL_CONFIRM_BUTTON });
|
|
13
13
|
return (React.createElement(Modal, { visible: visible, onClose: onDismiss },
|
|
14
14
|
React.createElement(View, { style: style.modal },
|
|
15
|
-
React.createElement(Text, { align: ALIGN.CENTER, level: 1
|
|
16
|
-
React.createElement(Text, { level: 3, style: style.
|
|
17
|
-
React.createElement(Button, { style: style.button, onPress: onDismiss },
|
|
18
|
-
|
|
19
|
-
React.createElement(Button, { style: [style.button, style.confirmButton], variant: BUTTON_VARIANT.SECONDARY, onPress: onConfirm },
|
|
20
|
-
React.createElement(Text, { align: ALIGN.CENTER, level: 3, selectable: false, style: style.buttonText, action: true, upperCase: true }, confirmButtonText)))));
|
|
15
|
+
React.createElement(Text, { align: ALIGN.CENTER, level: 1 }, titleText),
|
|
16
|
+
React.createElement(Text, { level: 3, style: style.modalDescription }, descriptionText),
|
|
17
|
+
React.createElement(Button, { style: style.button, onPress: onDismiss }, dismissButtonText),
|
|
18
|
+
React.createElement(Button, { style: [style.button, style.confirmButton], variant: BUTTON_VARIANT.SECONDARY, onPress: onConfirm }, confirmButtonText))));
|
|
21
19
|
};
|
|
22
20
|
export { GetOutOfCheckoutModal };
|
|
@@ -2,22 +2,15 @@ declare const style: {
|
|
|
2
2
|
button: {
|
|
3
3
|
flex: number;
|
|
4
4
|
};
|
|
5
|
-
buttonText: {
|
|
6
|
-
width: string;
|
|
7
|
-
};
|
|
8
5
|
confirmButton: {
|
|
9
6
|
marginTop: number;
|
|
10
7
|
};
|
|
11
|
-
description: {
|
|
12
|
-
marginVertical: number;
|
|
13
|
-
textAlign: "center";
|
|
14
|
-
width: string;
|
|
15
|
-
};
|
|
16
8
|
modal: {
|
|
17
9
|
padding: number;
|
|
18
10
|
};
|
|
19
|
-
|
|
20
|
-
|
|
11
|
+
modalDescription: {
|
|
12
|
+
marginVertical: number;
|
|
13
|
+
textAlign: "center";
|
|
21
14
|
};
|
|
22
15
|
};
|
|
23
16
|
export { style };
|
|
@@ -5,22 +5,15 @@ const style = StyleSheet.create({
|
|
|
5
5
|
button: {
|
|
6
6
|
flex: 0,
|
|
7
7
|
},
|
|
8
|
-
buttonText: {
|
|
9
|
-
width: "100%",
|
|
10
|
-
},
|
|
11
8
|
confirmButton: {
|
|
12
9
|
marginTop: spaceXL,
|
|
13
10
|
},
|
|
14
|
-
description: {
|
|
15
|
-
marginVertical: spaceXL,
|
|
16
|
-
textAlign: "center",
|
|
17
|
-
width: "100%",
|
|
18
|
-
},
|
|
19
11
|
modal: {
|
|
20
12
|
padding: spaceXL,
|
|
21
13
|
},
|
|
22
|
-
|
|
23
|
-
|
|
14
|
+
modalDescription: {
|
|
15
|
+
marginVertical: spaceXL,
|
|
16
|
+
textAlign: "center",
|
|
24
17
|
},
|
|
25
18
|
});
|
|
26
19
|
export { style };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Button, BUTTON_VARIANT } from "@lookiero/aurora";
|
|
2
2
|
import { useI18nMessage } from "@lookiero/i18n-react";
|
|
3
3
|
import React, { useMemo } from "react";
|
|
4
4
|
import { View } from "react-native";
|
|
@@ -20,7 +20,7 @@ const ItemActions = ({ productVariants, currentProductVariant, country, onSizeSe
|
|
|
20
20
|
(sizeSelectorOptions.length === 1 && sizeSelectorOptions[0]?.value === currentProductVariant.id), [sizeSelectorOptions, currentProductVariant.id]);
|
|
21
21
|
return (React.createElement(Sticky, { onLayout: onLayout },
|
|
22
22
|
React.createElement(Body, { style: { column: style.container } },
|
|
23
|
-
React.createElement(Button, {
|
|
23
|
+
React.createElement(Button, { onPress: onKeep }, keepButtonText),
|
|
24
24
|
React.createElement(View, { style: style.row },
|
|
25
25
|
!currentProductVariant.size.unique && productVariants && (React.createElement(SelectField, { ...(disabledSizeSelector && {
|
|
26
26
|
onPress: onSizeSelectorPress,
|
|
@@ -29,7 +29,6 @@ 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, {
|
|
33
|
-
React.createElement(Text, { align: ALIGN.CENTER, level: 3, selectable: false, style: style.buttonText, action: true, upperCase: true }, returnButtonText)))))));
|
|
32
|
+
React.createElement(Button, { variant: BUTTON_VARIANT.SECONDARY, onPress: onReturn }, returnButtonText))))));
|
|
34
33
|
};
|
|
35
34
|
export { ItemActions };
|
|
@@ -2,9 +2,6 @@ import { StyleSheet } from "react-native";
|
|
|
2
2
|
import { theme } from "../../../../theme/theme";
|
|
3
3
|
const { colorGrayscaleL, spaceL, spaceXL } = theme();
|
|
4
4
|
const style = StyleSheet.create({
|
|
5
|
-
buttonText: {
|
|
6
|
-
width: "100%",
|
|
7
|
-
},
|
|
8
5
|
container: {
|
|
9
6
|
paddingHorizontal: spaceXL,
|
|
10
7
|
},
|
package/dist/infrastructure/ui/views/item/components/productVariantSlider/ProductVariantSlider.js
CHANGED
|
@@ -1,20 +1,19 @@
|
|
|
1
|
-
import React, { useCallback
|
|
1
|
+
import React, { useCallback } from "react";
|
|
2
2
|
import { Image } from "react-native";
|
|
3
|
-
import {
|
|
3
|
+
import { Carousel2, } from "../../../../../../shared/ui/components/layouts/carousel/Carousel2";
|
|
4
|
+
import { Bullets } from "../../../../../../shared/ui/components/layouts/slider/Bullets";
|
|
4
5
|
import { useMediaImage } from "../../../../hooks/useMediaImage";
|
|
5
6
|
import { style } from "./ProductVariantSlider.style";
|
|
6
7
|
const ProductVariantSlider = ({ producVariantMedia, onChanged }) => {
|
|
7
8
|
const cdnImageUrl = useMediaImage();
|
|
8
|
-
const
|
|
9
|
-
const
|
|
10
|
-
setActive(activeIndex);
|
|
11
|
-
onChanged?.(activeIndex);
|
|
12
|
-
}, [onChanged]);
|
|
13
|
-
return (React.createElement(Slider, { active: active, onChanged: handleOnActiveChanged }, producVariantMedia.map((media) => (React.createElement(Image, { key: media.perspective, resizeMode: "contain", style: style.image, testID: "product-variant-image", source: {
|
|
9
|
+
const handleOnActiveChanged = useCallback((activeIndex) => onChanged?.(activeIndex), [onChanged]);
|
|
10
|
+
const renderItem = useCallback(({ item }) => (React.createElement(Image, { resizeMode: "contain", style: style.image, testID: "product-variant-image", source: {
|
|
14
11
|
uri: cdnImageUrl({
|
|
15
|
-
url:
|
|
12
|
+
url: item.url,
|
|
16
13
|
width: 600,
|
|
17
14
|
}),
|
|
18
|
-
} })))
|
|
15
|
+
} })), [cdnImageUrl]);
|
|
16
|
+
const renderBullets = useCallback(({ activeIndex, count, onChange }) => React.createElement(Bullets, { activeIndex: activeIndex, count: count, onChange: onChange }), []);
|
|
17
|
+
return (React.createElement(Carousel2, { bullets: renderBullets, data: producVariantMedia, onActiveIndexChanged: handleOnActiveChanged }, renderItem));
|
|
19
18
|
};
|
|
20
19
|
export { ProductVariantSlider };
|
package/dist/infrastructure/ui/views/item/components/returnQuestionsForm/ReturnQuestionsForm.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { PortalHost } from "@gorhom/portal";
|
|
2
|
-
import {
|
|
2
|
+
import { Button, Text } from "@lookiero/aurora";
|
|
3
3
|
import { useI18nMessage } from "@lookiero/i18n-react";
|
|
4
4
|
import React, { useCallback } from "react";
|
|
5
5
|
import { View } from "react-native";
|
|
@@ -35,7 +35,6 @@ 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,
|
|
39
|
-
React.createElement(Text, { align: ALIGN.CENTER, level: 3, selectable: false, style: style.buttonText, action: true, upperCase: true }, submitButtonText))))));
|
|
38
|
+
React.createElement(Button, { style: style.submit, onPress: handleOnSubmit }, submitButtonText)))));
|
|
40
39
|
};
|
|
41
40
|
export { ReturnQuestionsForm };
|
|
@@ -2,9 +2,6 @@ import { StyleSheet } from "react-native";
|
|
|
2
2
|
import { theme } from "../../../../theme/theme";
|
|
3
3
|
const { spaceS, spaceXL } = theme();
|
|
4
4
|
const style = StyleSheet.create({
|
|
5
|
-
buttonText: {
|
|
6
|
-
width: "100%",
|
|
7
|
-
},
|
|
8
5
|
returnQuestionsContainer: {
|
|
9
6
|
paddingHorizontal: spaceXL,
|
|
10
7
|
},
|
package/dist/infrastructure/ui/views/item/components/sizeWithoutStockModal/SizeWithoutStockModal.js
CHANGED
|
@@ -11,9 +11,8 @@ const SizeWithoutStockModal = ({ visible, onDismiss }) => {
|
|
|
11
11
|
const buttonText = useI18nMessage({ id: I18nMessages.SIZE_WITHOUT_STOCK_MODAL_BUTTON });
|
|
12
12
|
return (React.createElement(Modal, { visible: visible, onClose: onDismiss },
|
|
13
13
|
React.createElement(View, { style: style.modal },
|
|
14
|
-
React.createElement(Text, { align: ALIGN.CENTER, level: 1
|
|
15
|
-
React.createElement(Text, { level: 3, style: style.
|
|
16
|
-
React.createElement(Button, { style: style.button, onPress: onDismiss },
|
|
17
|
-
React.createElement(Text, { align: ALIGN.CENTER, level: 3, selectable: false, style: style.buttonText, action: true, upperCase: true }, buttonText)))));
|
|
14
|
+
React.createElement(Text, { align: ALIGN.CENTER, level: 1 }, titleText),
|
|
15
|
+
React.createElement(Text, { level: 3, style: style.modalDescription }, descriptionText),
|
|
16
|
+
React.createElement(Button, { style: style.button, onPress: onDismiss }, buttonText))));
|
|
18
17
|
};
|
|
19
18
|
export { SizeWithoutStockModal };
|
|
@@ -2,19 +2,12 @@ declare const style: {
|
|
|
2
2
|
button: {
|
|
3
3
|
flex: number;
|
|
4
4
|
};
|
|
5
|
-
buttonText: {
|
|
6
|
-
width: string;
|
|
7
|
-
};
|
|
8
|
-
description: {
|
|
9
|
-
marginVertical: number;
|
|
10
|
-
textAlign: "center";
|
|
11
|
-
width: string;
|
|
12
|
-
};
|
|
13
5
|
modal: {
|
|
14
6
|
padding: number;
|
|
15
7
|
};
|
|
16
|
-
|
|
17
|
-
|
|
8
|
+
modalDescription: {
|
|
9
|
+
marginVertical: number;
|
|
10
|
+
textAlign: "center";
|
|
18
11
|
};
|
|
19
12
|
};
|
|
20
13
|
export { style };
|
|
@@ -5,19 +5,12 @@ const style = StyleSheet.create({
|
|
|
5
5
|
button: {
|
|
6
6
|
flex: 0,
|
|
7
7
|
},
|
|
8
|
-
buttonText: {
|
|
9
|
-
width: "100%",
|
|
10
|
-
},
|
|
11
|
-
description: {
|
|
12
|
-
marginVertical: spaceXL,
|
|
13
|
-
textAlign: "center",
|
|
14
|
-
width: "100%",
|
|
15
|
-
},
|
|
16
8
|
modal: {
|
|
17
9
|
padding: spaceXL,
|
|
18
10
|
},
|
|
19
|
-
|
|
20
|
-
|
|
11
|
+
modalDescription: {
|
|
12
|
+
marginVertical: spaceXL,
|
|
13
|
+
textAlign: "center",
|
|
21
14
|
},
|
|
22
15
|
});
|
|
23
16
|
export { style };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Button, Text } from "@lookiero/aurora";
|
|
2
2
|
import { useI18nMessage } from "@lookiero/i18n-react";
|
|
3
3
|
import { animated, useSpring } from "@react-spring/native";
|
|
4
4
|
import React from "react";
|
|
@@ -33,15 +33,14 @@ const Pricing = ({ pendingToPay, subtotal, balanceDiscount, discount, discountPe
|
|
|
33
33
|
return (React.createElement(Pressable, { testID: "pricing", onPress: collapsible ? onPress : null },
|
|
34
34
|
collapsible && (React.createElement(View, { style: style.iconContainer }, collapsed ? (React.createElement(ArrowUp, { stroke: colorGrayscaleS, style: style.icon, testID: "arrow-up" })) : (React.createElement(ArrowDown, { stroke: colorGrayscaleS, style: style.icon, testID: "arrow-down" })))),
|
|
35
35
|
collapsed && collapsible ? (React.createElement(animated.View, { style: [style.collapsed, { opacity: collapsedStyle.opacitiy }] },
|
|
36
|
-
React.createElement(View,
|
|
36
|
+
React.createElement(View, null,
|
|
37
37
|
React.createElement(Text, { level: 1, style: style.totalCollapsed, detail: true },
|
|
38
38
|
totalText,
|
|
39
39
|
" ",
|
|
40
40
|
totalCheckoutItemsKeptText),
|
|
41
41
|
React.createElement(Price, { price: pendingToPay, variant: "detail" })),
|
|
42
|
-
React.createElement(View,
|
|
43
|
-
React.createElement(Button, { busy: busy,
|
|
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 } },
|
|
42
|
+
React.createElement(View, null,
|
|
43
|
+
React.createElement(Button, { busy: busy, small: true, onPress: onSubmit }, submitButtonText)))) : (React.createElement(animated.View, { style: { opacity: notCollapsedStyle.opacitiy } },
|
|
45
44
|
React.createElement(Row, { text: `${subtotalText} ${totalCheckoutItemsKeptText}` },
|
|
46
45
|
React.createElement(Price, { price: subtotal, variant: "subtotal" })),
|
|
47
46
|
discount && discount.amount !== 0 && (React.createElement(Row, { text: discountText },
|
|
@@ -52,6 +51,6 @@ const Pricing = ({ pendingToPay, subtotal, balanceDiscount, discount, discountPe
|
|
|
52
51
|
React.createElement(View, { style: style.divider }),
|
|
53
52
|
React.createElement(Row, { level: 2, text: totalText },
|
|
54
53
|
React.createElement(Price, { price: pendingToPay, variant: "total" })),
|
|
55
|
-
React.createElement(Button, { busy: busy,
|
|
54
|
+
React.createElement(Button, { busy: busy, onPress: onSubmit }, submitButtonText)))));
|
|
56
55
|
};
|
|
57
56
|
export { Pricing };
|
|
@@ -2,16 +2,10 @@ import { StyleSheet } from "react-native";
|
|
|
2
2
|
import { theme } from "../../../../theme/theme";
|
|
3
3
|
const { colorContent, spaceXS, spaceL } = theme();
|
|
4
4
|
const style = StyleSheet.create({
|
|
5
|
-
buttonText: {
|
|
6
|
-
width: "100%",
|
|
7
|
-
},
|
|
8
5
|
collapsed: {
|
|
9
6
|
flexDirection: "row",
|
|
10
7
|
justifyContent: "space-between",
|
|
11
8
|
},
|
|
12
|
-
collapsedContent: {
|
|
13
|
-
flex: 1,
|
|
14
|
-
},
|
|
15
9
|
divider: {
|
|
16
10
|
backgroundColor: colorContent,
|
|
17
11
|
height: 1,
|
|
@@ -24,9 +24,8 @@ const ModalNotificationItem = ({ visible, notification, onRemove, testID = "moda
|
|
|
24
24
|
}, [notification.id, onRemove]);
|
|
25
25
|
return (React.createElement(Modal, { testID: testID, visible: visible, onClose: handleOnClose },
|
|
26
26
|
React.createElement(View, { style: style.modal },
|
|
27
|
-
React.createElement(Text, { align: ALIGN.CENTER, level: 1
|
|
28
|
-
React.createElement(Text, { level: 3, style: style.
|
|
29
|
-
React.createElement(Button, { style: style.button,
|
|
30
|
-
React.createElement(Text, { align: ALIGN.CENTER, level: 3, selectable: false, style: style.buttonText, action: true, upperCase: true }, acceptText)))));
|
|
27
|
+
React.createElement(Text, { align: ALIGN.CENTER, level: 1 }, titleText),
|
|
28
|
+
React.createElement(Text, { level: 3, style: style.modalDescription }, bodyText),
|
|
29
|
+
React.createElement(Button, { style: style.button, onPress: handleOnClose }, acceptText))));
|
|
31
30
|
};
|
|
32
31
|
export { ModalNotificationItem };
|
|
@@ -2,19 +2,12 @@ declare const style: {
|
|
|
2
2
|
button: {
|
|
3
3
|
flex: number;
|
|
4
4
|
};
|
|
5
|
-
buttonText: {
|
|
6
|
-
width: string;
|
|
7
|
-
};
|
|
8
|
-
description: {
|
|
9
|
-
marginVertical: number;
|
|
10
|
-
textAlign: "center";
|
|
11
|
-
width: string;
|
|
12
|
-
};
|
|
13
5
|
modal: {
|
|
14
6
|
padding: number;
|
|
15
7
|
};
|
|
16
|
-
|
|
17
|
-
|
|
8
|
+
modalDescription: {
|
|
9
|
+
marginVertical: number;
|
|
10
|
+
textAlign: "center";
|
|
18
11
|
};
|
|
19
12
|
};
|
|
20
13
|
export { style };
|
|
@@ -5,19 +5,12 @@ const style = StyleSheet.create({
|
|
|
5
5
|
button: {
|
|
6
6
|
flex: 0,
|
|
7
7
|
},
|
|
8
|
-
buttonText: {
|
|
9
|
-
width: "100%",
|
|
10
|
-
},
|
|
11
|
-
description: {
|
|
12
|
-
marginVertical: spaceXL,
|
|
13
|
-
textAlign: "center",
|
|
14
|
-
width: "100%",
|
|
15
|
-
},
|
|
16
8
|
modal: {
|
|
17
9
|
padding: spaceXL,
|
|
18
10
|
},
|
|
19
|
-
|
|
20
|
-
|
|
11
|
+
modalDescription: {
|
|
12
|
+
marginVertical: spaceXL,
|
|
13
|
+
textAlign: "center",
|
|
21
14
|
},
|
|
22
15
|
});
|
|
23
16
|
export { style };
|
|
@@ -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,
|
|
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,
|
|
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 };
|