@roomstay/frontend 2.6.57 → 2.6.59

package/dist/src/components/generic/DateRangePicker/FloatingDateRangePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"FloatingDateRangePicker.js","sourceRoot":"/","sources":["src/components/generic/DateRangePicker/FloatingDateRangePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Placement } from '@popperjs/core';\nimport classNames from 'classnames';\nimport * as dayjs from 'dayjs';\nimport React, { useRef, useState } from 'react';\n\nimport DateRangePicker, { DatePickerProps } from '@/components/generic/DateRangePicker/DateRangePicker';\nimport { Overlay } from '@/components/generic/Overlay/Overlay';\n\nimport { EBookingWizardTheme } from '../BookingWizard/BookingWizard';\nimport styles from './DateRangePicker.module.scss';\n\nexport interface FloatingDateRangePickerProps extends Omit<DatePickerProps, 'selectedStartDate' | 'selectedEndDate' | 'onStartDateChanged' | 'onEndDateChanged'> {\n    children?: React.ReactNode;\n    startDate?: dayjs.Dayjs | null;\n    endDate?: dayjs.Dayjs | null;\n    overlayOffset?: [number, number];\n    fixedStartDate?: boolean;\n    container?: HTMLElement;\n\n    selectedDateChanged?: (startDate: dayjs.Dayjs, endDate: dayjs.Dayjs) => void;\n\n    className?: string;\n\n    overlay?: {\n        placement?: Placement;\n        fallbackPlacements?: Placement;\n    };\n}\n\nexport interface FloatingDateRangePickerHandle {\n    closePicker: () => void;\n    openPicker: () => void;\n    toggle: () => void;\n}\n\nconst FloatingDateRangePicker = React.forwardRef<FloatingDateRangePickerHandle, FloatingDateRangePickerProps>((props, ref) => {\n    const {\n        children,\n        startDate: startDateProp,\n        endDate: endDateProp,\n        selectedDateChanged: selectedDateChangedProp,\n        className,\n        overlay,\n        showYearOnCalendar,\n        yearDisplayOption,\n        ...DatePickerProps\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(false);\n\n    const [startDate, setStartDate] = useState<dayjs.Dayjs | null>(null);\n\n    const thisElement = useRef<HTMLDivElement | null>(null);\n\n    React.useImperativeHandle(\n        ref,\n        () => ({\n            closePicker: onOverlayClose,\n            openPicker: onOverlayOpen,\n            toggle: () => setIsOpen(!isOpen),\n        }),\n        []\n    );\n\n    const selectedDateChanged = (endDate: dayjs.Dayjs) => {\n        if (selectedDateChangedProp && startDate) {\n            selectedDateChangedProp(startDate, endDate);\n        }\n\n        if (endDate) {\n            setIsOpen(false);\n        }\n    };\n\n    const onStartDateChangedHandler = (date: any) => {\n        setStartDate(date);\n    };\n\n    const onOverlayClose = () => {\n        setIsOpen(false);\n    };\n\n    const onOverlayOpen = () => {\n        setIsOpen(true);\n    };\n\n    const inner = (\n        <div className=\"d-flex align-items-center flex-column\">\n            <DateRangePicker\n                selectedStartDate={startDateProp}\n                selectedEndDate={endDateProp}\n                onStartDateChanged={onStartDateChangedHandler}\n                onEndDateChanged={selectedDateChanged}\n                showYearOnCalendar={showYearOnCalendar}\n                yearDisplayOption={yearDisplayOption}\n                {...DatePickerProps}\n            />\n        </div>\n    );\n\n    return (\n        <>\n            <div ref={thisElement} className={className} onClick={onOverlayOpen}>\n                {children}\n            </div>\n            <Overlay\n                offset={props.overlayOffset}\n                open={isOpen}\n                onClose={onOverlayClose}\n                container={props.container || thisElement.current?.parentElement?.parentElement}\n                followElement={props.container || thisElement.current}\n                {...(overlay || {})}\n                className={classNames(styles['floating-roomstay-calendar'], {\n                    [styles['--small']]: DatePickerProps.small,\n                    [styles['--specific']]: props.theme === EBookingWizardTheme.Specific,\n                    [styles['--single']]: !DatePickerProps.showMultipleMonths,\n                })}\n            >\n                {inner}\n            </Overlay>\n        </>\n    );\n});\n\nFloatingDateRangePicker.displayName = 'FloatingDateRangePicker';\n\nexport default FloatingDateRangePicker;\n"]}
+{"version":3,"file":"FloatingDateRangePicker.js","sourceRoot":"/","sources":["src/components/generic/DateRangePicker/FloatingDateRangePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Placement } from '@popperjs/core';\nimport classNames from 'classnames';\nimport * as dayjs from 'dayjs';\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport DateRangePicker, { DatePickerProps } from '@/components/generic/DateRangePicker/DateRangePicker';\nimport { Overlay } from '@/components/generic/Overlay/Overlay';\n\nimport { EBookingWizardTheme } from '../BookingWizard/BookingWizard';\nimport styles from './DateRangePicker.module.scss';\n\nexport interface FloatingDateRangePickerProps extends Omit<DatePickerProps, 'selectedStartDate' | 'selectedEndDate' | 'onStartDateChanged' | 'onEndDateChanged'> {\n    children?: React.ReactNode;\n    startDate?: dayjs.Dayjs | null;\n    endDate?: dayjs.Dayjs | null;\n    overlayOffset?: [number, number];\n    fixedStartDate?: boolean;\n    container?: HTMLElement;\n\n    selectedDateChanged?: (startDate: dayjs.Dayjs, endDate: dayjs.Dayjs) => void;\n\n    className?: string;\n\n    overlay?: {\n        placement?: Placement;\n        fallbackPlacements?: Placement;\n    };\n    notes?: React.ReactNode;\n    onOverlayOpenChange?: (isOpen: boolean) => void;\n}\n\nexport interface FloatingDateRangePickerHandle {\n    closePicker: () => void;\n    openPicker: () => void;\n    toggle: () => void;\n}\n\nconst FloatingDateRangePicker = React.forwardRef<FloatingDateRangePickerHandle, FloatingDateRangePickerProps>((props, ref) => {\n    const {\n        children,\n        notes,\n        startDate: startDateProp,\n        endDate: endDateProp,\n        selectedDateChanged: selectedDateChangedProp,\n        className,\n        overlay,\n        showYearOnCalendar,\n        yearDisplayOption,\n        onOverlayOpenChange,\n        ...DatePickerProps\n    } = props;\n\n    const [isOpen, setIsOpen] = useState(false);\n\n    const [startDate, setStartDate] = useState<dayjs.Dayjs | null>(null);\n\n    const thisElement = useRef<HTMLDivElement | null>(null);\n\n    React.useImperativeHandle(\n        ref,\n        () => ({\n            closePicker: onOverlayClose,\n            openPicker: onOverlayOpen,\n            toggle: () => setIsOpen(!isOpen),\n        }),\n        []\n    );\n\n    const selectedDateChanged = (endDate: dayjs.Dayjs) => {\n        if (selectedDateChangedProp && startDate) {\n            selectedDateChangedProp(startDate, endDate);\n        }\n\n        if (endDate) {\n            setIsOpen(false);\n        }\n    };\n\n    const onStartDateChangedHandler = (date: any) => {\n        setStartDate(date);\n    };\n\n    const onOverlayClose = () => {\n        setIsOpen(false);\n    };\n\n    const onOverlayOpen = () => {\n        setIsOpen(true);\n    };\n\n    useEffect(() => {\n        onOverlayOpenChange?.(isOpen);\n        return () => {\n            onOverlayOpenChange?.(false);\n        };\n    }, [isOpen]);\n\n    const inner = (\n        <div className=\"d-flex align-items-center flex-column\">\n            <DateRangePicker\n                selectedStartDate={startDateProp}\n                selectedEndDate={endDateProp}\n                onStartDateChanged={onStartDateChangedHandler}\n                onEndDateChanged={selectedDateChanged}\n                showYearOnCalendar={showYearOnCalendar}\n                yearDisplayOption={yearDisplayOption}\n                {...DatePickerProps}\n            />\n        </div>\n    );\n\n    return (\n        <>\n            <div ref={thisElement} className={className} onClick={onOverlayOpen}>\n                {children}\n            </div>\n            <Overlay\n                offset={props.overlayOffset}\n                open={isOpen}\n                onClose={onOverlayClose}\n                container={props.container || thisElement.current?.parentElement?.parentElement}\n                followElement={props.container || thisElement.current}\n                {...(overlay || {})}\n                className={classNames(styles['floating-roomstay-calendar'], {\n                    [styles['--small']]: DatePickerProps.small,\n                    [styles['--specific']]: props.theme === EBookingWizardTheme.Specific,\n                    [styles['--images']]: props.theme === EBookingWizardTheme.Images,\n                    [styles['--single']]: !DatePickerProps.showMultipleMonths,\n                })}\n            >\n                {inner}\n                {notes}\n            </Overlay>\n        </>\n    );\n});\n\nFloatingDateRangePicker.displayName = 'FloatingDateRangePicker';\n\nexport default FloatingDateRangePicker;\n"]}

package/dist/src/components/generic/Event/EventCard.js

@@ -39,7 +39,11 @@ const EventCard_module_scss_1 = __importDefault(require("./EventCard.module.scss
 const EventCard = ({ event, ratio }) => {
     var _a, _b, _c, _d, _e, _f;
     const [collapsed, setCollapsed] = (0, react_1.useState)(true);
-    const toggleCollapse = () => setCollapsed(!collapsed);
+    const toggleCollapse = (_event) => {
+        setCollapsed(!collapsed);
+        _event.preventDefault();
+        _event.stopPropagation();
+    };
     const displayEventTime = () => {
         const startDate = event.startDate ? (0, dayjs_1.default)(event.startDate) : undefined;
         const endDate = event.endDate ? (0, dayjs_1.default)(event.endDate) : undefined;
@@ -75,7 +79,7 @@ const EventCard = ({ event, ratio }) => {
                 react_1.default.createElement("div", { className: "u-pad-top--light" },
                     react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Accent }, [(_d = event === null || event === void 0 ? void 0 : event.address) === null || _d === void 0 ? void 0 : _d.line1, (_e = event === null || event === void 0 ? void 0 : event.address) === null || _e === void 0 ? void 0 : _e.line2, (_f = event === null || event === void 0 ? void 0 : event.address) === null || _f === void 0 ? void 0 : _f.city].filter((item) => !!item).join(', ')),
                     react_1.default.createElement(Text_1.default, { className: "u-text-overflow-ellipsis-3", color: Color_1.Color.DarkGrey, type: Text_1.TextType.Small }, event.summary)),
-                event.url && (react_1.default.createElement("a", { href: event.url, target: "_blank", rel: "noreferrer" },
+                event.url && (react_1.default.createElement("a", { href: event.url, target: "_blank", rel: "noreferrer", className: (0, classnames_1.default)(EventCard_module_scss_1.default.link) },
                     react_1.default.createElement(Text_1.default, { className: (0, classnames_1.default)(EventCard_module_scss_1.default.footer, 'u-flex', 'u-flex-gap--light', 'u-flex-align-center'), type: Text_1.TextType.Label, color: Color_1.Color.Accent },
                         react_1.default.createElement("div", null, "More Info"),
                         react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowRight }))))))));

package/dist/src/components/generic/Event/EventCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"EventCard.js","sourceRoot":"/","sources":["src/components/generic/Event/EventCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import { IRoomstayEvent } from '@roomstay/core';\nimport classNames from 'classnames';\nimport dayjs from 'dayjs';\nimport React, { FC, useState } from 'react';\n\nimport AutoAutoHeight from '@/animations/AutoAutoHeight';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport RatioImage from '@/components/generic/RatioImage/RatioImage';\nimport Text, { TextType } from '@/components/generic/Text';\nimport { Color } from '@/util/Color';\nimport { TextAlign } from '@/util/TextAlignment';\n\nimport styles from './EventCard.module.scss';\n\nexport interface EventCardInterface {\n    ratio: number;\n    event: IRoomstayEvent;\n}\n\nconst EventCard: FC<EventCardInterface> = ({ event, ratio }) => {\n    const [collapsed, setCollapsed] = useState<boolean>(true);\n\n    const toggleCollapse = () => setCollapsed(!collapsed);\n\n    const displayEventTime = () => {\n        const startDate = event.startDate ? dayjs(event.startDate) : undefined;\n        const endDate = event.endDate ? dayjs(event.endDate) : undefined;\n        if ([startDate, endDate].some((date) => !date)) {\n            return `${startDate ? startDate.format(`ddd, MMM D, h:mmA`) : 'Now'}${endDate ? ` - ${endDate.format(`ddd, MMM D, h:mmA`)}` : ''}`;\n        } else {\n            if (startDate!.isSame(endDate, 'date')) {\n                return `${startDate!.format(`ddd, MMM D, h:mmA`)} - ${endDate!.format(`h:mmA`)}`;\n            } else return `${startDate!.format(`ddd, MMM D, h:mmA`)} - ${endDate!.format(`ddd, MMM D, h:mmA`)}`;\n        }\n    };\n\n    return (\n        <div className={styles.root}>\n            <RatioImage\n                src={`${event?.image?.url}`}\n                ratio={ratio}\n                style={{\n                    backgroundRepeat: 'no-repeat',\n                    backgroundPosition: 'top center',\n                }}\n            />\n            <div className={styles.categoryMask}>\n                <Text align={TextAlign.Right} color={Color.White} bold>\n                    {event.tags?.[0]?.display_name}\n                </Text>\n            </div>\n            <div className={styles.content}>\n                <div className={classNames(styles.header, 'u-cursor-pointer')} onClick={toggleCollapse}>\n                    <div>\n                        <Text\n                            className={classNames({\n                                'u-text-overflow-ellipsis-1': collapsed,\n                                'u-text-overflow-ellipsis-2': !collapsed,\n                            })}\n                            bold\n                            color={Color.Navy}\n                        >\n                            {event.name}\n                        </Text>\n                        <Text color={Color.Accent} bold>\n                            {event.eventTimeDescription ? event.eventTimeDescription : displayEventTime()}\n                        </Text>\n                    </div>\n                    <div className={styles.collapButton}>\n                        <Icon color={Color.Accent} icon={collapsed ? IconType.ArrowUp3 : IconType.ArrowDown3} size=\"18px\" />\n                    </div>\n                </div>\n                <AutoAutoHeight open={!collapsed}>\n                    <div className=\"u-pad-top--light\">\n                        <Text type={TextType.Small} color={Color.Accent}>\n                            {[event?.address?.line1, event?.address?.line2, event?.address?.city].filter((item) => !!item).join(', ')}\n                        </Text>\n                        <Text className=\"u-text-overflow-ellipsis-3\" color={Color.DarkGrey} type={TextType.Small}>\n                            {event.summary}\n                        </Text>\n                    </div>\n                    {event.url && (\n                        <a href={event.url} target=\"_blank\" rel=\"noreferrer\">\n                            <Text className={classNames(styles.footer, 'u-flex', 'u-flex-gap--light', 'u-flex-align-center')} type={TextType.Label} color={Color.Accent}>\n                                {/*TODO translation*/}\n                                <div>More Info</div>\n                                <Icon icon={IconType.ArrowRight} />\n                            </Text>\n                        </a>\n                    )}\n                </AutoAutoHeight>\n            </div>\n        </div>\n    );\n};\n\nexport default EventCard;\n"]}
+{"version":3,"file":"EventCard.js","sourceRoot":"/","sources":["src/components/generic/Event/EventCard.tsx"],"names":[],"mappings":"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","sourcesContent":["import { IRoomstayEvent } from '@roomstay/core';\nimport classNames from 'classnames';\nimport dayjs from 'dayjs';\nimport React, { FC, useState } from 'react';\n\nimport AutoAutoHeight from '@/animations/AutoAutoHeight';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport RatioImage from '@/components/generic/RatioImage/RatioImage';\nimport Text, { TextType } from '@/components/generic/Text';\nimport { Color } from '@/util/Color';\nimport { TextAlign } from '@/util/TextAlignment';\n\nimport styles from './EventCard.module.scss';\n\nexport interface EventCardInterface {\n    ratio: number;\n    event: IRoomstayEvent;\n}\n\nconst EventCard: FC<EventCardInterface> = ({ event, ratio }) => {\n    const [collapsed, setCollapsed] = useState<boolean>(true);\n\n    const toggleCollapse = (_event: any) => {\n        setCollapsed(!collapsed);\n        _event.preventDefault();\n        _event.stopPropagation();\n    };\n\n    const displayEventTime = () => {\n        const startDate = event.startDate ? dayjs(event.startDate) : undefined;\n        const endDate = event.endDate ? dayjs(event.endDate) : undefined;\n        if ([startDate, endDate].some((date) => !date)) {\n            return `${startDate ? startDate.format(`ddd, MMM D, h:mmA`) : 'Now'}${endDate ? ` - ${endDate.format(`ddd, MMM D, h:mmA`)}` : ''}`;\n        } else {\n            if (startDate!.isSame(endDate, 'date')) {\n                return `${startDate!.format(`ddd, MMM D, h:mmA`)} - ${endDate!.format(`h:mmA`)}`;\n            } else return `${startDate!.format(`ddd, MMM D, h:mmA`)} - ${endDate!.format(`ddd, MMM D, h:mmA`)}`;\n        }\n    };\n\n    return (\n        <div className={styles.root}>\n            <RatioImage\n                src={`${event?.image?.url}`}\n                ratio={ratio}\n                style={{\n                    backgroundRepeat: 'no-repeat',\n                    backgroundPosition: 'top center',\n                }}\n            />\n            <div className={styles.categoryMask}>\n                <Text align={TextAlign.Right} color={Color.White} bold>\n                    {event.tags?.[0]?.display_name}\n                </Text>\n            </div>\n            <div className={styles.content}>\n                <div className={classNames(styles.header, 'u-cursor-pointer')} onClick={toggleCollapse}>\n                    <div>\n                        <Text\n                            className={classNames({\n                                'u-text-overflow-ellipsis-1': collapsed,\n                                'u-text-overflow-ellipsis-2': !collapsed,\n                            })}\n                            bold\n                            color={Color.Navy}\n                        >\n                            {event.name}\n                        </Text>\n                        <Text color={Color.Accent} bold>\n                            {event.eventTimeDescription ? event.eventTimeDescription : displayEventTime()}\n                        </Text>\n                    </div>\n                    <div className={styles.collapButton}>\n                        <Icon color={Color.Accent} icon={collapsed ? IconType.ArrowUp3 : IconType.ArrowDown3} size=\"18px\" />\n                    </div>\n                </div>\n                <AutoAutoHeight open={!collapsed}>\n                    <div className=\"u-pad-top--light\">\n                        <Text type={TextType.Small} color={Color.Accent}>\n                            {[event?.address?.line1, event?.address?.line2, event?.address?.city].filter((item) => !!item).join(', ')}\n                        </Text>\n                        <Text className=\"u-text-overflow-ellipsis-3\" color={Color.DarkGrey} type={TextType.Small}>\n                            {event.summary}\n                        </Text>\n                    </div>\n\n                    {event.url && (\n                        <a href={event.url} target=\"_blank\" rel=\"noreferrer\" className={classNames(styles.link)}>\n                            <Text className={classNames(styles.footer, 'u-flex', 'u-flex-gap--light', 'u-flex-align-center')} type={TextType.Label} color={Color.Accent}>\n                                {/*TODO translation*/}\n                                <div>More Info</div>\n                                <Icon icon={IconType.ArrowRight} />\n                            </Text>\n                        </a>\n                    )}\n                </AutoAutoHeight>\n            </div>\n        </div>\n    );\n};\n\nexport default EventCard;\n"]}

package/dist/src/components/generic/PaymentCard/PaymentCardInput.js

@@ -54,6 +54,7 @@ const Fade_1 = __importDefault(require("../../../animations/Fade"));
 const BEButton_1 = __importDefault(require("../BEButton"));
 const PaymentCardInput_module_scss_1 = __importDefault(require("./PaymentCardInput.module.scss"));
 const PaymentCardInput = ({ card, onSubmit, onDeleteClicked, onMarkedAsDefaultClicked }) => {
+    var _a, _b;
     const { user, fullName } = (0, LoggedInUserHook_1.useMember)();
     const { t } = (0, react_i18next_1.useTranslation)();
     const [errors, setErrors] = (0, react_1.useState)({});
@@ -63,6 +64,15 @@ const PaymentCardInput = ({ card, onSubmit, onDeleteClicked, onMarkedAsDefaultCl
     const [isMarkingAsDefault, setIsMarkingAsDefault] = (0, react_1.useState)(false);
     const isCardDefault = (user === null || user === void 0 ? void 0 : user.defaultCard) === (card === null || card === void 0 ? void 0 : card.cardId);
     const inputsDisabled = !!(card === null || card === void 0 ? void 0 : card.cardId);
+    const formatExpiry = (expiry) => {
+        if (!/^\d{4}$/.test(expiry)) {
+            return '••/••';
+        }
+        const month = expiry.slice(0, 2);
+        const year = expiry.slice(2);
+        return `${month}/${year}`;
+    };
+    const last4Digits = (_a = card === null || card === void 0 ? void 0 : card.cardNumber) === null || _a === void 0 ? void 0 : _a.substring(((_b = card === null || card === void 0 ? void 0 : card.cardNumber) === null || _b === void 0 ? void 0 : _b.length) - 4);
     const css = {
         fontSize: '13px',
         lineHeight: '18px',
@@ -83,7 +93,7 @@ const PaymentCardInput = ({ card, onSubmit, onDeleteClicked, onMarkedAsDefaultCl
                 successColor: '#4F8A10',
                 errorColor: '#D8000C',
                 showCardIcon: false,
-                placeholder: '5913 2207 9578 4291',
+                placeholder: inputsDisabled ? `•••• •••• •••• ${last4Digits}` : '5913 2207 9578 4291',
                 disabled: inputsDisabled,
             },
         },
@@ -91,7 +101,12 @@ const PaymentCardInput = ({ card, onSubmit, onDeleteClicked, onMarkedAsDefaultCl
             name: 'card-name',
             label: t(Translation_1.Translation.Step.Confirmation.Inputs.NameOnCard),
             type: 'text',
-            vgsProps: { validations: ['required'], css, disabled: inputsDisabled, placeholder: fullName },
+            vgsProps: {
+                validations: ['required'],
+                css,
+                disabled: inputsDisabled,
+                placeholder: inputsDisabled ? '—' : fullName,
+            },
         },
         {
             name: 'expiration-date',
@@ -101,7 +116,7 @@ const PaymentCardInput = ({ card, onSubmit, onDeleteClicked, onMarkedAsDefaultCl
                 validations: ['required', 'validCardExpirationDate'],
                 css,
                 disabled: inputsDisabled,
-                placeholder: '12/27',
+                placeholder: inputsDisabled ? formatExpiry(card.expiry) : '12/27',
             },
         },
         {
@@ -112,7 +127,7 @@ const PaymentCardInput = ({ card, onSubmit, onDeleteClicked, onMarkedAsDefaultCl
                 validations: ['required', 'validCardSecurityCode'],
                 css,
                 disabled: inputsDisabled,
-                placeholder: '552',
+                placeholder: inputsDisabled ? '•••' : '552',
             },
         },
     ], 'members');

package/dist/src/components/generic/PaymentCard/PaymentCardInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaymentCardInput.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/PaymentCardInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import { IRoomstayMemberCards } from '@roomstay/core';\nimport React, { FC, useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport AutoAutoHeight from '@/animations/AutoAutoHeight';\nimport Alert, { AlertType } from '@/components/generic/Alert';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport InputGroup from '@/components/generic/InputGroup/InputGroup';\nimport { CardTypeSelect } from '@/components/generic/PaymentCard/CardTypeSelect';\nimport { PaymentCard as GenericPaymentCard } from '@/components/generic/PaymentCard/PaymentCard';\nimport Text, { TextType } from '@/components/generic/Text';\nimport { useMember } from '@/hooks/LoggedInUserHook';\nimport { useVgsCollect } from '@/hooks/VGSHooks';\nimport { ECardType } from '@/models/PaymentCard';\nimport { Translation } from '@/translations/Translation';\nimport { getAuth } from '@/util/AsyncAuth';\nimport { Color } from '@/util/Color';\n\nimport FadeAnimation from '../../../animations/Fade';\nimport BEButton from '../BEButton';\nimport styles from './PaymentCardInput.module.scss';\n\nexport interface PaymentCardInputProps {\n    card: IRoomstayMemberCards;\n    onSubmit?: (card: IRoomstayMemberCards) => Promise<IRoomstayMemberCards>;\n    onDeleteClicked: (card: IRoomstayMemberCards) => Promise<void>;\n    onMarkedAsDefaultClicked: (card: IRoomstayMemberCards) => Promise<void>;\n}\n\nexport const PaymentCardInput: FC<PaymentCardInputProps> = ({ card, onSubmit, onDeleteClicked, onMarkedAsDefaultClicked }) => {\n    const { user, fullName } = useMember();\n    const { t } = useTranslation();\n\n    const [errors, setErrors] = useState<{ [x: string]: string }>({});\n    const [cardType, setCardType] = useState<ECardType | null>(null);\n\n    const [isSavingVGSDetails, setIsSavingVGSDetails] = useState(false);\n    const [isDeletingCard, setIsDeletingCard] = useState(false);\n    const [isMarkingAsDefault, setIsMarkingAsDefault] = useState(false);\n\n    const isCardDefault = user?.defaultCard === card?.cardId;\n\n    const inputsDisabled = !!card?.cardId;\n\n    const css = {\n        fontSize: '13px',\n        lineHeight: '18px',\n        '&::placeholder': {\n            color: '#8B8F9A',\n            opacity: 1,\n        },\n    };\n\n    const {\n        fields: [cardNumber, cardHolder, expiryDate, securityCode],\n        triggerFieldUpdate,\n        vgsForm,\n    } = useVgsCollect(\n        [\n            {\n                name: 'credit-card',\n                label: t(Translation.Step.Confirmation.Inputs.CardNumber),\n                type: 'card-number',\n                vgsProps: {\n                    validations: ['required', 'validCardNumber'],\n                    css,\n                    autoComplete: ['cc-number'],\n                    successColor: '#4F8A10',\n                    errorColor: '#D8000C',\n                    showCardIcon: false,\n                    placeholder: '5913 2207 9578 4291',\n                    disabled: inputsDisabled,\n                },\n            },\n            {\n                name: 'card-name',\n                label: t(Translation.Step.Confirmation.Inputs.NameOnCard),\n                type: 'text',\n                vgsProps: { validations: ['required'], css, disabled: inputsDisabled, placeholder: fullName },\n            },\n            {\n                name: 'expiration-date',\n                label: t(Translation.Step.Confirmation.Inputs.CardExpiry),\n                type: 'card-expiration-date',\n                vgsProps: {\n                    validations: ['required', 'validCardExpirationDate'],\n                    css,\n                    disabled: inputsDisabled,\n                    placeholder: '12/27',\n                },\n            },\n            {\n                name: 'security-code',\n                label: t(Translation.Step.Confirmation.Inputs.SecurityCode),\n                type: 'card-security-code',\n                vgsProps: {\n                    validations: ['required', 'validCardSecurityCode'],\n                    css,\n                    disabled: inputsDisabled,\n                    placeholder: '552',\n                },\n            },\n        ],\n        'members'\n    );\n\n    useEffect(() => {\n        triggerFieldUpdate();\n    }, [card]);\n\n    useEffect(() => {\n        if (cardNumber?.state.cardType) {\n            setCardType(cardNumber.state.cardType);\n        }\n    }, [cardNumber]);\n\n    const inputNames = ['credit-card', 'card-name', 'expiration-date', 'security-code'];\n    const setErrorsOnFaults = (faults: any) => {\n        const newErrors: { [x: string]: string } = {};\n\n        Object.keys(faults).forEach((input) => {\n            let name = '';\n\n            switch (input) {\n                case 'credit-card':\n                    name = t(Translation.Step.Confirmation.Inputs.CardNumber);\n                    break;\n                case 'expiration-date':\n                    name = t(Translation.Step.Confirmation.Inputs.CardExpiry);\n                    break;\n                case 'security-code':\n                    name = t(Translation.Step.Confirmation.Inputs.SecurityCode);\n                    break;\n                default:\n                    name = t(Translation.Step.Confirmation.Inputs.NameOnCard);\n                    break;\n            }\n\n            newErrors[input] = name + ' ' + faults[input].errorMessages[faults[input].errorMessages.length - 1];\n        });\n\n        setErrors(newErrors);\n    };\n\n    const onChangeSubmit = async (): Promise<void> => {\n        const Auth = await getAuth();\n        if (vgsForm) {\n            setIsSavingVGSDetails(true);\n            Auth.currentAuthenticatedUser().then((cognitoData: any) => {\n                const jwtToken = cognitoData.signInUserSession.idToken.jwtToken;\n\n                vgsForm.submit(\n                    '/members/vgs-hide',\n                    {\n                        serializer: 'deep',\n                        methods: 'POST',\n                        headers: {\n                            Authorization: jwtToken,\n                        },\n                    },\n                    async (status: any, cardData: any) => {\n                        const expMatch = cardData['expiration-date'].match(/^(\\d+)\\s*\\/\\s*(\\d+)$/);\n                        if (!expMatch || expMatch[1].length > 2 || (expMatch[2].length !== 4 && expMatch[2].length !== 2)) {\n                            setErrorsOnFaults({\n                                'expiration-date': {\n                                    errorMessages: [t(Translation.Step.Confirmation.InputErrors.CardExpiry.Invalid)],\n                                },\n                            });\n                            return;\n                        }\n\n                        const expiration = (expMatch[1].length === 1 ? '0' : '') + expMatch[1] + (expMatch[2].length === 2 ? expMatch[2] : expMatch[2].substr(2));\n                        const newCard: IRoomstayMemberCards = {\n                            username: card.username,\n                            cardId: card.cardId as string,\n                            securityCode: cardData['security-code'],\n                            expiry: expiration,\n                            name: cardData['card-name'],\n\n                            cardNumber: cardData['credit-card'],\n                            type: cardType as ECardType,\n                        };\n\n                        const newAddedCard = await onSubmit?.(newCard);\n                        onMarkAsDefault(newAddedCard as IRoomstayMemberCards);\n                        vgsForm.reset();\n                        setIsSavingVGSDetails(false);\n                    },\n                    (error: any) => {\n                        setErrorsOnFaults(error);\n                        setIsSavingVGSDetails(false);\n                    }\n                );\n            });\n        } else {\n            console.error('VGS not on element, problem has occurred');\n        }\n    };\n\n    const onDeleteCardClicked = () => {\n        setIsDeletingCard(true);\n\n        onDeleteClicked?.(card as IRoomstayMemberCards).finally(() => {\n            setIsDeletingCard(false);\n        });\n    };\n\n    const onMarkAsDefault = (newCard: IRoomstayMemberCards) => {\n        setIsMarkingAsDefault(true);\n\n        onMarkedAsDefaultClicked?.(newCard as IRoomstayMemberCards).finally(() => {\n            setIsMarkingAsDefault(false);\n        });\n    };\n\n    const onMarkAsDefaultClicked = () => {\n        onMarkAsDefault(card);\n    };\n\n    return (\n        <>\n            <div className={styles['card-inputs']}>\n                <div className=\"u-marg-bottom--medium u-marg-top--heavy@l-\">\n                    <CardTypeSelect value={cardType || undefined} />\n                </div>\n                <div className=\"u-margin-bottom\">\n                    {inputNames.map((name) => {\n                        const errorMessage = errors[name];\n                        return (\n                            <AutoAutoHeight open={!!errorMessage} key={name}>\n                                <div className=\"u-flex\">\n                                    <Alert type={AlertType.Danger} icon={IconType.Error}>\n                                        <Text type={TextType.Small}>{errorMessage}</Text>\n                                    </Alert>\n                                </div>\n                            </AutoAutoHeight>\n                        );\n                    })}\n                </div>\n                <div className=\"u-marg-bottom\">\n                    <div className=\"u-marg-bottom--light\">\n                        <Text type={TextType.Label} color={Color.Navy} bold>\n                            {t(Translation.Step.Confirmation.Inputs.CardNumber)}\n                        </Text>\n                    </div>\n                    <div className={cardNumber.getClasses()} ref={cardNumber.ref} />\n                </div>\n                <div className=\"u-marg-bottom\">\n                    <InputGroup dimensions=\"2/2\">\n                        <>\n                            <div className=\"u-marg-bottom--light\">\n                                <Text type={TextType.Label} color={Color.Navy} bold>\n                                    {t(Translation.Step.Confirmation.Inputs.CardExpiry)}\n                                </Text>\n                            </div>\n                            <div className={expiryDate.getClasses()} ref={expiryDate.ref} />\n                        </>\n                        <>\n                            <div className=\"u-marg-bottom--light\">\n                                <Text type={TextType.Label} color={Color.Navy} bold>\n                                    {t(Translation.Step.Confirmation.Inputs.SecurityCode)}\n                                </Text>\n                            </div>\n                            <div className={securityCode.getClasses()} ref={securityCode.ref} />\n                        </>\n                    </InputGroup>\n                </div>\n                <div className=\"u-marg-bottom\">\n                    <div className=\"u-marg-bottom--light\">\n                        <Text type={TextType.Label} color={Color.Navy} bold>\n                            {t(Translation.Step.Confirmation.Inputs.NameOnCard)}\n                        </Text>\n                    </div>\n                    <div className={cardHolder.getClasses()} ref={cardHolder.ref} />\n                </div>\n                <div className=\"u-marg-bottom\">\n                    {card?.cardId ? (\n                        <BEButton\n                            className=\"u-marg-top--heavier@l u-marg-top--heavy@l- u-flex u-flex-justify-center\"\n                            isLoading={isDeletingCard}\n                            textColor={Color.Danger}\n                            isText\n                            icon={IconType.Delete}\n                            onClick={onDeleteCardClicked}\n                            stopIconAnimation\n                        >\n                            {t(Translation.UserPortal.PaymentInformationScreen.DeleteCard)}\n                        </BEButton>\n                    ) : (\n                        <BEButton\n                            className=\"u-marg-top--heavier@l u-marg-top--heavy@l- u-flex u-flex-justify-center\"\n                            isLoading={isSavingVGSDetails}\n                            rounded\n                            primary\n                            filled\n                            mobileWidth\n                            onClick={onChangeSubmit}\n                        >\n                            {t(Translation.UserPortal.PaymentInformationScreen.SaveCard)}\n                        </BEButton>\n                    )}\n                </div>\n            </div>\n            <FadeAnimation open={!!card?.cardId}>\n                <div className={styles['card-large']}>\n                    <GenericPaymentCard card={card} />\n                    <div className=\"u-marg-top u-marg-top--heavy@l-\">\n                        <BEButton onClick={onMarkAsDefaultClicked} isLoading={isMarkingAsDefault} disabled={isCardDefault} filled primary size=\"small\">\n                            Mark as Default\n                        </BEButton>\n                    </div>\n                </div>\n            </FadeAnimation>\n        </>\n    );\n};\n"]}
+{"version":3,"file":"PaymentCardInput.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/PaymentCardInput.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,+CAAuD;AACvD,iDAA+C;AAE/C,iFAAyD;AACzD,oEAA8D;AAC9D,yDAA0D;AAC1D,4FAAoE;AACpE,oFAAiF;AACjF,8EAAiG;AACjG,kEAA2D;AAC3D,+DAAqD;AACrD,+CAAiD;AAEjD,4DAAyD;AACzD,gDAA2C;AAC3C,wCAAqC;AAErC,oEAAqD;AACrD,2DAAmC;AACnC,kGAAoD;AAS7C,MAAM,gBAAgB,GAA8B,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,eAAe,EAAE,wBAAwB,EAAE,EAAE,EAAE;;IACzH,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAA,4BAAS,GAAE,CAAC;IACvC,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAA0B,EAAE,CAAC,CAAC;IAClE,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,IAAA,gBAAQ,EAAmB,IAAI,CAAC,CAAC;IAEjE,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IACpE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,CAAC,kBAAkB,EAAE,qBAAqB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAEpE,MAAM,aAAa,GAAG,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,WAAW,OAAK,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,CAAA,CAAC;IAEzD,MAAM,cAAc,GAAG,CAAC,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,CAAA,CAAC;IAEtC,MAAM,YAAY,GAAG,CAAC,MAAc,EAAE,EAAE;QACpC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE;YACzB,OAAO,OAAO,CAAC;SAClB;QACD,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;QACjC,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC;QAC7B,OAAO,GAAG,KAAK,IAAI,IAAI,EAAE,CAAC;IAC9B,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,0CAAE,SAAS,CAAC,CAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,UAAU,0CAAE,MAAM,IAAG,CAAC,CAAC,CAAC;IAE9E,MAAM,GAAG,GAAG;QACR,QAAQ,EAAE,MAAM;QAChB,UAAU,EAAE,MAAM;QAClB,gBAAgB,EAAE;YACd,KAAK,EAAE,SAAS;YAChB,OAAO,EAAE,CAAC;SACb;KACJ,CAAC;IAEF,MAAM,EACF,MAAM,EAAE,CAAC,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,YAAY,CAAC,EAC1D,kBAAkB,EAClB,OAAO,GACV,GAAG,IAAA,wBAAa,EACb;QACI;YACI,IAAI,EAAE,aAAa;YACnB,KAAK,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,UAAU,CAAC;YACzD,IAAI,EAAE,aAAa;YACnB,QAAQ,EAAE;gBACN,WAAW,EAAE,CAAC,UAAU,EAAE,iBAAiB,CAAC;gBAC5C,GAAG;gBACH,YAAY,EAAE,CAAC,WAAW,CAAC;gBAC3B,YAAY,EAAE,SAAS;gBACvB,UAAU,EAAE,SAAS;gBACrB,YAAY,EAAE,KAAK;gBACnB,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC,kBAAkB,WAAW,EAAE,CAAC,CAAC,CAAC,qBAAqB;gBACrF,QAAQ,EAAE,cAAc;aAC3B;SACJ;QACD;YACI,IAAI,EAAE,WAAW;YACjB,KAAK,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,UAAU,CAAC;YACzD,IAAI,EAAE,MAAM;YACZ,QAAQ,EAAE;gBACN,WAAW,EAAE,CAAC,UAAU,CAAC;gBACzB,GAAG;gBACH,QAAQ,EAAE,cAAc;gBACxB,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ;aAC/C;SACJ;QACD;YACI,IAAI,EAAE,iBAAiB;YACvB,KAAK,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,UAAU,CAAC;YACzD,IAAI,EAAE,sBAAsB;YAC5B,QAAQ,EAAE;gBACN,WAAW,EAAE,CAAC,UAAU,EAAE,yBAAyB,CAAC;gBACpD,GAAG;gBACH,QAAQ,EAAE,cAAc;gBACxB,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO;aACpE;SACJ;QACD;YACI,IAAI,EAAE,eAAe;YACrB,KAAK,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,YAAY,CAAC;YAC3D,IAAI,EAAE,oBAAoB;YAC1B,QAAQ,EAAE;gBACN,WAAW,EAAE,CAAC,UAAU,EAAE,uBAAuB,CAAC;gBAClD,GAAG;gBACH,QAAQ,EAAE,cAAc;gBACxB,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;aAC9C;SACJ;KACJ,EACD,SAAS,CACZ,CAAC;IAEF,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,kBAAkB,EAAE,CAAC;IACzB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,KAAK,CAAC,QAAQ,EAAE;YAC5B,WAAW,CAAC,UAAU,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;SAC1C;IACL,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,MAAM,UAAU,GAAG,CAAC,aAAa,EAAE,WAAW,EAAE,iBAAiB,EAAE,eAAe,CAAC,CAAC;IACpF,MAAM,iBAAiB,GAAG,CAAC,MAAW,EAAE,EAAE;QACtC,MAAM,SAAS,GAA4B,EAAE,CAAC;QAE9C,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;YAClC,IAAI,IAAI,GAAG,EAAE,CAAC;YAEd,QAAQ,KAAK,EAAE;gBACX,KAAK,aAAa;oBACd,IAAI,GAAG,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;oBAC1D,MAAM;gBACV,KAAK,iBAAiB;oBAClB,IAAI,GAAG,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;oBAC1D,MAAM;gBACV,KAAK,eAAe;oBAChB,IAAI,GAAG,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;oBAC5D,MAAM;gBACV;oBACI,IAAI,GAAG,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;oBAC1D,MAAM;aACb;YAED,SAAS,CAAC,KAAK,CAAC,GAAG,IAAI,GAAG,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,aAAa,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;QACxG,CAAC,CAAC,CAAC;QAEH,SAAS,CAAC,SAAS,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,GAAwB,EAAE;QAC7C,MAAM,IAAI,GAAG,MAAM,IAAA,mBAAO,GAAE,CAAC;QAC7B,IAAI,OAAO,EAAE;YACT,qBAAqB,CAAC,IAAI,CAAC,CAAC;YAC5B,IAAI,CAAC,wBAAwB,EAAE,CAAC,IAAI,CAAC,CAAC,WAAgB,EAAE,EAAE;gBACtD,MAAM,QAAQ,GAAG,WAAW,CAAC,iBAAiB,CAAC,OAAO,CAAC,QAAQ,CAAC;gBAEhE,OAAO,CAAC,MAAM,CACV,mBAAmB,EACnB;oBACI,UAAU,EAAE,MAAM;oBAClB,OAAO,EAAE,MAAM;oBACf,OAAO,EAAE;wBACL,aAAa,EAAE,QAAQ;qBAC1B;iBACJ,EACD,CAAO,MAAW,EAAE,QAAa,EAAE,EAAE;oBACjC,MAAM,QAAQ,GAAG,QAAQ,CAAC,iBAAiB,CAAC,CAAC,KAAK,CAAC,sBAAsB,CAAC,CAAC;oBAC3E,IAAI,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,EAAE;wBAC/F,iBAAiB,CAAC;4BACd,iBAAiB,EAAE;gCACf,aAAa,EAAE,CAAC,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;6BACnF;yBACJ,CAAC,CAAC;wBACH,OAAO;qBACV;oBAED,MAAM,UAAU,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;oBAC1I,MAAM,OAAO,GAAyB;wBAClC,QAAQ,EAAE,IAAI,CAAC,QAAQ;wBACvB,MAAM,EAAE,IAAI,CAAC,MAAgB;wBAC7B,YAAY,EAAE,QAAQ,CAAC,eAAe,CAAC;wBACvC,MAAM,EAAE,UAAU;wBAClB,IAAI,EAAE,QAAQ,CAAC,WAAW,CAAC;wBAE3B,UAAU,EAAE,QAAQ,CAAC,aAAa,CAAC;wBACnC,IAAI,EAAE,QAAqB;qBAC9B,CAAC;oBAEF,MAAM,YAAY,GAAG,MAAM,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,OAAO,CAAC,CAAA,CAAC;oBAC/C,eAAe,CAAC,YAAoC,CAAC,CAAC;oBACtD,OAAO,CAAC,KAAK,EAAE,CAAC;oBAChB,qBAAqB,CAAC,KAAK,CAAC,CAAC;gBACjC,CAAC,CAAA,EACD,CAAC,KAAU,EAAE,EAAE;oBACX,iBAAiB,CAAC,KAAK,CAAC,CAAC;oBACzB,qBAAqB,CAAC,KAAK,CAAC,CAAC;gBACjC,CAAC,CACJ,CAAC;YACN,CAAC,CAAC,CAAC;SACN;aAAM;YACH,OAAO,CAAC,KAAK,CAAC,0CAA0C,CAAC,CAAC;SAC7D;IACL,CAAC,CAAA,CAAC;IAEF,MAAM,mBAAmB,GAAG,GAAG,EAAE;QAC7B,iBAAiB,CAAC,IAAI,CAAC,CAAC;QAExB,eAAe,aAAf,eAAe,uBAAf,eAAe,CAAG,IAA4B,EAAE,OAAO,CAAC,GAAG,EAAE;YACzD,iBAAiB,CAAC,KAAK,CAAC,CAAC;QAC7B,CAAC,CAAC,CAAC;IACP,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,CAAC,OAA6B,EAAE,EAAE;QACtD,qBAAqB,CAAC,IAAI,CAAC,CAAC;QAE5B,wBAAwB,aAAxB,wBAAwB,uBAAxB,wBAAwB,CAAG,OAA+B,EAAE,OAAO,CAAC,GAAG,EAAE;YACrE,qBAAqB,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC,CAAC,CAAC;IACP,CAAC,CAAC;IAEF,MAAM,sBAAsB,GAAG,GAAG,EAAE;QAChC,eAAe,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC,CAAC;IAEF,OAAO,CACH;QACI,uCAAK,SAAS,EAAE,sCAAM,CAAC,aAAa,CAAC;YACjC,uCAAK,SAAS,EAAC,4CAA4C;gBACvD,8BAAC,+BAAc,IAAC,KAAK,EAAE,QAAQ,IAAI,SAAS,GAAI,CAC9C;YACN,uCAAK,SAAS,EAAC,iBAAiB,IAC3B,UAAU,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE;gBACrB,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;gBAClC,OAAO,CACH,8BAAC,wBAAc,IAAC,IAAI,EAAE,CAAC,CAAC,YAAY,EAAE,GAAG,EAAE,IAAI;oBAC3C,uCAAK,SAAS,EAAC,QAAQ;wBACnB,8BAAC,eAAK,IAAC,IAAI,EAAE,iBAAS,CAAC,MAAM,EAAE,IAAI,EAAE,eAAQ,CAAC,KAAK;4BAC/C,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,IAAG,YAAY,CAAQ,CAC7C,CACN,CACO,CACpB,CAAC;YACN,CAAC,CAAC,CACA;YACN,uCAAK,SAAS,EAAC,eAAe;gBAC1B,uCAAK,SAAS,EAAC,sBAAsB;oBACjC,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,IAAI,EAAE,IAAI,UAC9C,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,UAAU,CAAC,CAChD,CACL;gBACN,uCAAK,SAAS,EAAE,UAAU,CAAC,UAAU,EAAE,EAAE,GAAG,EAAE,UAAU,CAAC,GAAG,GAAI,CAC9D;YACN,uCAAK,SAAS,EAAC,eAAe;gBAC1B,8BAAC,oBAAU,IAAC,UAAU,EAAC,KAAK;oBACxB;wBACI,uCAAK,SAAS,EAAC,sBAAsB;4BACjC,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,IAAI,EAAE,IAAI,UAC9C,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,UAAU,CAAC,CAChD,CACL;wBACN,uCAAK,SAAS,EAAE,UAAU,CAAC,UAAU,EAAE,EAAE,GAAG,EAAE,UAAU,CAAC,GAAG,GAAI,CACjE;oBACH;wBACI,uCAAK,SAAS,EAAC,sBAAsB;4BACjC,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,IAAI,EAAE,IAAI,UAC9C,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,YAAY,CAAC,CAClD,CACL;wBACN,uCAAK,SAAS,EAAE,YAAY,CAAC,UAAU,EAAE,EAAE,GAAG,EAAE,YAAY,CAAC,GAAG,GAAI,CACrE,CACM,CACX;YACN,uCAAK,SAAS,EAAC,eAAe;gBAC1B,uCAAK,SAAS,EAAC,sBAAsB;oBACjC,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,IAAI,EAAE,IAAI,UAC9C,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,UAAU,CAAC,CAChD,CACL;gBACN,uCAAK,SAAS,EAAE,UAAU,CAAC,UAAU,EAAE,EAAE,GAAG,EAAE,UAAU,CAAC,GAAG,GAAI,CAC9D;YACN,uCAAK,SAAS,EAAC,eAAe,IACzB,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,EAAC,CAAC,CAAC,CACZ,8BAAC,kBAAQ,IACL,SAAS,EAAC,yEAAyE,EACnF,SAAS,EAAE,cAAc,EACzB,SAAS,EAAE,aAAK,CAAC,MAAM,EACvB,MAAM,QACN,IAAI,EAAE,eAAQ,CAAC,MAAM,EACrB,OAAO,EAAE,mBAAmB,EAC5B,iBAAiB,UAEhB,CAAC,CAAC,yBAAW,CAAC,UAAU,CAAC,wBAAwB,CAAC,UAAU,CAAC,CACvD,CACd,CAAC,CAAC,CAAC,CACA,8BAAC,kBAAQ,IACL,SAAS,EAAC,yEAAyE,EACnF,SAAS,EAAE,kBAAkB,EAC7B,OAAO,QACP,OAAO,QACP,MAAM,QACN,WAAW,QACX,OAAO,EAAE,cAAc,IAEtB,CAAC,CAAC,yBAAW,CAAC,UAAU,CAAC,wBAAwB,CAAC,QAAQ,CAAC,CACrD,CACd,CACC,CACJ;QACN,8BAAC,cAAa,IAAC,IAAI,EAAE,CAAC,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,CAAA;YAC/B,uCAAK,SAAS,EAAE,sCAAM,CAAC,YAAY,CAAC;gBAChC,8BAAC,yBAAkB,IAAC,IAAI,EAAE,IAAI,GAAI;gBAClC,uCAAK,SAAS,EAAC,iCAAiC;oBAC5C,8BAAC,kBAAQ,IAAC,OAAO,EAAE,sBAAsB,EAAE,SAAS,EAAE,kBAAkB,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,QAAC,OAAO,QAAC,IAAI,EAAC,OAAO,sBAEnH,CACT,CACJ,CACM,CACjB,CACN,CAAC;AACN,CAAC,CAAC;AA9SW,QAAA,gBAAgB,oBA8S3B","sourcesContent":["import { IRoomstayMemberCards } from '@roomstay/core';\nimport React, { FC, useEffect, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport AutoAutoHeight from '@/animations/AutoAutoHeight';\nimport Alert, { AlertType } from '@/components/generic/Alert';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport InputGroup from '@/components/generic/InputGroup/InputGroup';\nimport { CardTypeSelect } from '@/components/generic/PaymentCard/CardTypeSelect';\nimport { PaymentCard as GenericPaymentCard } from '@/components/generic/PaymentCard/PaymentCard';\nimport Text, { TextType } from '@/components/generic/Text';\nimport { useMember } from '@/hooks/LoggedInUserHook';\nimport { useVgsCollect } from '@/hooks/VGSHooks';\nimport { ECardType } from '@/models/PaymentCard';\nimport { Translation } from '@/translations/Translation';\nimport { getAuth } from '@/util/AsyncAuth';\nimport { Color } from '@/util/Color';\n\nimport FadeAnimation from '../../../animations/Fade';\nimport BEButton from '../BEButton';\nimport styles from './PaymentCardInput.module.scss';\n\nexport interface PaymentCardInputProps {\n    card: IRoomstayMemberCards;\n    onSubmit?: (card: IRoomstayMemberCards) => Promise<IRoomstayMemberCards>;\n    onDeleteClicked: (card: IRoomstayMemberCards) => Promise<void>;\n    onMarkedAsDefaultClicked: (card: IRoomstayMemberCards) => Promise<void>;\n}\n\nexport const PaymentCardInput: FC<PaymentCardInputProps> = ({ card, onSubmit, onDeleteClicked, onMarkedAsDefaultClicked }) => {\n    const { user, fullName } = useMember();\n    const { t } = useTranslation();\n\n    const [errors, setErrors] = useState<{ [x: string]: string }>({});\n    const [cardType, setCardType] = useState<ECardType | null>(null);\n\n    const [isSavingVGSDetails, setIsSavingVGSDetails] = useState(false);\n    const [isDeletingCard, setIsDeletingCard] = useState(false);\n    const [isMarkingAsDefault, setIsMarkingAsDefault] = useState(false);\n\n    const isCardDefault = user?.defaultCard === card?.cardId;\n\n    const inputsDisabled = !!card?.cardId;\n\n    const formatExpiry = (expiry: string) => {\n        if (!/^\\d{4}$/.test(expiry)) {\n            return '••/••';\n        }\n        const month = expiry.slice(0, 2);\n        const year = expiry.slice(2);\n        return `${month}/${year}`;\n    };\n\n    const last4Digits = card?.cardNumber?.substring(card?.cardNumber?.length - 4);\n\n    const css = {\n        fontSize: '13px',\n        lineHeight: '18px',\n        '&::placeholder': {\n            color: '#8B8F9A',\n            opacity: 1,\n        },\n    };\n\n    const {\n        fields: [cardNumber, cardHolder, expiryDate, securityCode],\n        triggerFieldUpdate,\n        vgsForm,\n    } = useVgsCollect(\n        [\n            {\n                name: 'credit-card',\n                label: t(Translation.Step.Confirmation.Inputs.CardNumber),\n                type: 'card-number',\n                vgsProps: {\n                    validations: ['required', 'validCardNumber'],\n                    css,\n                    autoComplete: ['cc-number'],\n                    successColor: '#4F8A10',\n                    errorColor: '#D8000C',\n                    showCardIcon: false,\n                    placeholder: inputsDisabled ? `•••• •••• •••• ${last4Digits}` : '5913 2207 9578 4291',\n                    disabled: inputsDisabled,\n                },\n            },\n            {\n                name: 'card-name',\n                label: t(Translation.Step.Confirmation.Inputs.NameOnCard),\n                type: 'text',\n                vgsProps: {\n                    validations: ['required'],\n                    css,\n                    disabled: inputsDisabled,\n                    placeholder: inputsDisabled ? '—' : fullName,\n                },\n            },\n            {\n                name: 'expiration-date',\n                label: t(Translation.Step.Confirmation.Inputs.CardExpiry),\n                type: 'card-expiration-date',\n                vgsProps: {\n                    validations: ['required', 'validCardExpirationDate'],\n                    css,\n                    disabled: inputsDisabled,\n                    placeholder: inputsDisabled ? formatExpiry(card.expiry) : '12/27',\n                },\n            },\n            {\n                name: 'security-code',\n                label: t(Translation.Step.Confirmation.Inputs.SecurityCode),\n                type: 'card-security-code',\n                vgsProps: {\n                    validations: ['required', 'validCardSecurityCode'],\n                    css,\n                    disabled: inputsDisabled,\n                    placeholder: inputsDisabled ? '•••' : '552',\n                },\n            },\n        ],\n        'members'\n    );\n\n    useEffect(() => {\n        triggerFieldUpdate();\n    }, [card]);\n\n    useEffect(() => {\n        if (cardNumber?.state.cardType) {\n            setCardType(cardNumber.state.cardType);\n        }\n    }, [cardNumber]);\n\n    const inputNames = ['credit-card', 'card-name', 'expiration-date', 'security-code'];\n    const setErrorsOnFaults = (faults: any) => {\n        const newErrors: { [x: string]: string } = {};\n\n        Object.keys(faults).forEach((input) => {\n            let name = '';\n\n            switch (input) {\n                case 'credit-card':\n                    name = t(Translation.Step.Confirmation.Inputs.CardNumber);\n                    break;\n                case 'expiration-date':\n                    name = t(Translation.Step.Confirmation.Inputs.CardExpiry);\n                    break;\n                case 'security-code':\n                    name = t(Translation.Step.Confirmation.Inputs.SecurityCode);\n                    break;\n                default:\n                    name = t(Translation.Step.Confirmation.Inputs.NameOnCard);\n                    break;\n            }\n\n            newErrors[input] = name + ' ' + faults[input].errorMessages[faults[input].errorMessages.length - 1];\n        });\n\n        setErrors(newErrors);\n    };\n\n    const onChangeSubmit = async (): Promise<void> => {\n        const Auth = await getAuth();\n        if (vgsForm) {\n            setIsSavingVGSDetails(true);\n            Auth.currentAuthenticatedUser().then((cognitoData: any) => {\n                const jwtToken = cognitoData.signInUserSession.idToken.jwtToken;\n\n                vgsForm.submit(\n                    '/members/vgs-hide',\n                    {\n                        serializer: 'deep',\n                        methods: 'POST',\n                        headers: {\n                            Authorization: jwtToken,\n                        },\n                    },\n                    async (status: any, cardData: any) => {\n                        const expMatch = cardData['expiration-date'].match(/^(\\d+)\\s*\\/\\s*(\\d+)$/);\n                        if (!expMatch || expMatch[1].length > 2 || (expMatch[2].length !== 4 && expMatch[2].length !== 2)) {\n                            setErrorsOnFaults({\n                                'expiration-date': {\n                                    errorMessages: [t(Translation.Step.Confirmation.InputErrors.CardExpiry.Invalid)],\n                                },\n                            });\n                            return;\n                        }\n\n                        const expiration = (expMatch[1].length === 1 ? '0' : '') + expMatch[1] + (expMatch[2].length === 2 ? expMatch[2] : expMatch[2].substr(2));\n                        const newCard: IRoomstayMemberCards = {\n                            username: card.username,\n                            cardId: card.cardId as string,\n                            securityCode: cardData['security-code'],\n                            expiry: expiration,\n                            name: cardData['card-name'],\n\n                            cardNumber: cardData['credit-card'],\n                            type: cardType as ECardType,\n                        };\n\n                        const newAddedCard = await onSubmit?.(newCard);\n                        onMarkAsDefault(newAddedCard as IRoomstayMemberCards);\n                        vgsForm.reset();\n                        setIsSavingVGSDetails(false);\n                    },\n                    (error: any) => {\n                        setErrorsOnFaults(error);\n                        setIsSavingVGSDetails(false);\n                    }\n                );\n            });\n        } else {\n            console.error('VGS not on element, problem has occurred');\n        }\n    };\n\n    const onDeleteCardClicked = () => {\n        setIsDeletingCard(true);\n\n        onDeleteClicked?.(card as IRoomstayMemberCards).finally(() => {\n            setIsDeletingCard(false);\n        });\n    };\n\n    const onMarkAsDefault = (newCard: IRoomstayMemberCards) => {\n        setIsMarkingAsDefault(true);\n\n        onMarkedAsDefaultClicked?.(newCard as IRoomstayMemberCards).finally(() => {\n            setIsMarkingAsDefault(false);\n        });\n    };\n\n    const onMarkAsDefaultClicked = () => {\n        onMarkAsDefault(card);\n    };\n\n    return (\n        <>\n            <div className={styles['card-inputs']}>\n                <div className=\"u-marg-bottom--medium u-marg-top--heavy@l-\">\n                    <CardTypeSelect value={cardType || undefined} />\n                </div>\n                <div className=\"u-margin-bottom\">\n                    {inputNames.map((name) => {\n                        const errorMessage = errors[name];\n                        return (\n                            <AutoAutoHeight open={!!errorMessage} key={name}>\n                                <div className=\"u-flex\">\n                                    <Alert type={AlertType.Danger} icon={IconType.Error}>\n                                        <Text type={TextType.Small}>{errorMessage}</Text>\n                                    </Alert>\n                                </div>\n                            </AutoAutoHeight>\n                        );\n                    })}\n                </div>\n                <div className=\"u-marg-bottom\">\n                    <div className=\"u-marg-bottom--light\">\n                        <Text type={TextType.Label} color={Color.Navy} bold>\n                            {t(Translation.Step.Confirmation.Inputs.CardNumber)}\n                        </Text>\n                    </div>\n                    <div className={cardNumber.getClasses()} ref={cardNumber.ref} />\n                </div>\n                <div className=\"u-marg-bottom\">\n                    <InputGroup dimensions=\"2/2\">\n                        <>\n                            <div className=\"u-marg-bottom--light\">\n                                <Text type={TextType.Label} color={Color.Navy} bold>\n                                    {t(Translation.Step.Confirmation.Inputs.CardExpiry)}\n                                </Text>\n                            </div>\n                            <div className={expiryDate.getClasses()} ref={expiryDate.ref} />\n                        </>\n                        <>\n                            <div className=\"u-marg-bottom--light\">\n                                <Text type={TextType.Label} color={Color.Navy} bold>\n                                    {t(Translation.Step.Confirmation.Inputs.SecurityCode)}\n                                </Text>\n                            </div>\n                            <div className={securityCode.getClasses()} ref={securityCode.ref} />\n                        </>\n                    </InputGroup>\n                </div>\n                <div className=\"u-marg-bottom\">\n                    <div className=\"u-marg-bottom--light\">\n                        <Text type={TextType.Label} color={Color.Navy} bold>\n                            {t(Translation.Step.Confirmation.Inputs.NameOnCard)}\n                        </Text>\n                    </div>\n                    <div className={cardHolder.getClasses()} ref={cardHolder.ref} />\n                </div>\n                <div className=\"u-marg-bottom\">\n                    {card?.cardId ? (\n                        <BEButton\n                            className=\"u-marg-top--heavier@l u-marg-top--heavy@l- u-flex u-flex-justify-center\"\n                            isLoading={isDeletingCard}\n                            textColor={Color.Danger}\n                            isText\n                            icon={IconType.Delete}\n                            onClick={onDeleteCardClicked}\n                            stopIconAnimation\n                        >\n                            {t(Translation.UserPortal.PaymentInformationScreen.DeleteCard)}\n                        </BEButton>\n                    ) : (\n                        <BEButton\n                            className=\"u-marg-top--heavier@l u-marg-top--heavy@l- u-flex u-flex-justify-center\"\n                            isLoading={isSavingVGSDetails}\n                            rounded\n                            primary\n                            filled\n                            mobileWidth\n                            onClick={onChangeSubmit}\n                        >\n                            {t(Translation.UserPortal.PaymentInformationScreen.SaveCard)}\n                        </BEButton>\n                    )}\n                </div>\n            </div>\n            <FadeAnimation open={!!card?.cardId}>\n                <div className={styles['card-large']}>\n                    <GenericPaymentCard card={card} />\n                    <div className=\"u-marg-top u-marg-top--heavy@l-\">\n                        <BEButton onClick={onMarkAsDefaultClicked} isLoading={isMarkingAsDefault} disabled={isCardDefault} filled primary size=\"small\">\n                            Mark as Default\n                        </BEButton>\n                    </div>\n                </div>\n            </FadeAnimation>\n        </>\n    );\n};\n"]}

package/dist/src/components/generic/RadioButtonGroup/RadioButton.d.ts

@@ -7,6 +7,7 @@ export interface RadioButtonProps {
     renderContent?: () => ReactNode;
     className?: string;
     headerRef?: LegacyRef<HTMLDivElement>;
+    style?: React.CSSProperties;
 }
 declare const ForwardedRefRadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLDivElement>>;
 export { ForwardedRefRadioButton as RadioButton };

package/dist/src/components/generic/RadioButtonGroup/RadioButton.js

@@ -31,11 +31,11 @@ const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importStar(require("react"));
 const AutoAutoHeight_1 = __importDefault(require("../../../animations/AutoAutoHeight"));
 const RadioButton_module_scss_1 = __importDefault(require("./RadioButton.module.scss"));
-const RadioButton = ({ checked, onChange, disabled, label, renderContent, className, headerRef }, ref) => {
+const RadioButton = ({ checked, onChange, disabled, label, renderContent, className, headerRef, style }, ref) => {
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)(RadioButton_module_scss_1.default.root, className, {
             [RadioButton_module_scss_1.default.disabled]: disabled,
             [RadioButton_module_scss_1.default.checked]: checked,
-        }), onClick: onChange, ref: ref },
+        }), onClick: onChange, ref: ref, style: style },
         react_1.default.createElement("div", { className: RadioButton_module_scss_1.default.header, ref: headerRef },
             react_1.default.createElement("div", { className: RadioButton_module_scss_1.default.design }),
             react_1.default.createElement("div", { className: RadioButton_module_scss_1.default.text }, label)),

package/dist/src/components/generic/RadioButtonGroup/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sourceRoot":"/","sources":["src/components/generic/RadioButtonGroup/RadioButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,4DAAoC;AACpC,+CAA0F;AAE1F,iFAAyD;AAEzD,wFAA+C;AAY/C,MAAM,WAAW,GAA+D,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,EAAE;IACjK,OAAO,CACH,uCACI,SAAS,EAAE,IAAA,oBAAU,EAAC,iCAAM,CAAC,IAAI,EAAE,SAAS,EAAE;YAC1C,CAAC,iCAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,CAAC,iCAAM,CAAC,OAAO,CAAC,EAAE,OAAO;SAC5B,CAAC,EACF,OAAO,EAAE,QAAQ,EACjB,GAAG,EAAE,GAAG;QAER,uCAAK,SAAS,EAAE,iCAAM,CAAC,MAAM,EAAE,GAAG,EAAE,SAAS;YACzC,uCAAK,SAAS,EAAE,iCAAM,CAAC,MAAM,GAAI;YACjC,uCAAK,SAAS,EAAE,iCAAM,CAAC,IAAI,IAAG,KAAK,CAAO,CACxC;QACL,aAAa,IAAI,OAAO,IAAI,CACzB,8BAAC,wBAAc,IAAC,IAAI;YAChB,uCAAK,SAAS,EAAE,iCAAM,CAAC,OAAO,IAAG,aAAa,EAAE,CAAO,CAC1C,CACpB,CACC,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAG,IAAA,kBAAU,EAAC,WAAW,CAAC,CAAC;AAEpB,8CAAW","sourcesContent":["import classNames from 'classnames';\nimport React, { forwardRef, ForwardRefRenderFunction, LegacyRef, ReactNode } from 'react';\n\nimport AutoAutoHeight from '@/animations/AutoAutoHeight';\n\nimport styles from './RadioButton.module.scss';\n\nexport interface RadioButtonProps {\n    checked: boolean;\n    onChange: JSX.IntrinsicElements['div']['onChange'];\n    label?: ReactNode;\n    disabled?: boolean;\n    renderContent?: () => ReactNode;\n    className?: string;\n    headerRef?: LegacyRef<HTMLDivElement>;\n}\n\nconst RadioButton: ForwardRefRenderFunction<HTMLDivElement, RadioButtonProps> = ({ checked, onChange, disabled, label, renderContent, className, headerRef }, ref) => {\n    return (\n        <div\n            className={classNames(styles.root, className, {\n                [styles.disabled]: disabled,\n                [styles.checked]: checked,\n            })}\n            onClick={onChange}\n            ref={ref}\n        >\n            <div className={styles.header} ref={headerRef}>\n                <div className={styles.design} />\n                <div className={styles.text}>{label}</div>\n            </div>\n            {renderContent && checked && (\n                <AutoAutoHeight open>\n                    <div className={styles.content}>{renderContent()}</div>\n                </AutoAutoHeight>\n            )}\n        </div>\n    );\n};\n\nconst ForwardedRefRadioButton = forwardRef(RadioButton);\n\nexport { ForwardedRefRadioButton as RadioButton };\n"]}
+{"version":3,"file":"RadioButton.js","sourceRoot":"/","sources":["src/components/generic/RadioButtonGroup/RadioButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,4DAAoC;AACpC,+CAA0F;AAE1F,iFAAyD;AAEzD,wFAA+C;AAa/C,MAAM,WAAW,GAA+D,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACxK,OAAO,CACH,uCACI,SAAS,EAAE,IAAA,oBAAU,EAAC,iCAAM,CAAC,IAAI,EAAE,SAAS,EAAE;YAC1C,CAAC,iCAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,CAAC,iCAAM,CAAC,OAAO,CAAC,EAAE,OAAO;SAC5B,CAAC,EACF,OAAO,EAAE,QAAQ,EACjB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK;QAEZ,uCAAK,SAAS,EAAE,iCAAM,CAAC,MAAM,EAAE,GAAG,EAAE,SAAS;YACzC,uCAAK,SAAS,EAAE,iCAAM,CAAC,MAAM,GAAI;YACjC,uCAAK,SAAS,EAAE,iCAAM,CAAC,IAAI,IAAG,KAAK,CAAO,CACxC;QACL,aAAa,IAAI,OAAO,IAAI,CACzB,8BAAC,wBAAc,IAAC,IAAI;YAChB,uCAAK,SAAS,EAAE,iCAAM,CAAC,OAAO,IAAG,aAAa,EAAE,CAAO,CAC1C,CACpB,CACC,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,uBAAuB,GAAG,IAAA,kBAAU,EAAC,WAAW,CAAC,CAAC;AAEpB,8CAAW","sourcesContent":["import classNames from 'classnames';\nimport React, { forwardRef, ForwardRefRenderFunction, LegacyRef, ReactNode } from 'react';\n\nimport AutoAutoHeight from '@/animations/AutoAutoHeight';\n\nimport styles from './RadioButton.module.scss';\n\nexport interface RadioButtonProps {\n    checked: boolean;\n    onChange: JSX.IntrinsicElements['div']['onChange'];\n    label?: ReactNode;\n    disabled?: boolean;\n    renderContent?: () => ReactNode;\n    className?: string;\n    headerRef?: LegacyRef<HTMLDivElement>;\n    style?: React.CSSProperties;\n}\n\nconst RadioButton: ForwardRefRenderFunction<HTMLDivElement, RadioButtonProps> = ({ checked, onChange, disabled, label, renderContent, className, headerRef, style }, ref) => {\n    return (\n        <div\n            className={classNames(styles.root, className, {\n                [styles.disabled]: disabled,\n                [styles.checked]: checked,\n            })}\n            onClick={onChange}\n            ref={ref}\n            style={style}\n        >\n            <div className={styles.header} ref={headerRef}>\n                <div className={styles.design} />\n                <div className={styles.text}>{label}</div>\n            </div>\n            {renderContent && checked && (\n                <AutoAutoHeight open>\n                    <div className={styles.content}>{renderContent()}</div>\n                </AutoAutoHeight>\n            )}\n        </div>\n    );\n};\n\nconst ForwardedRefRadioButton = forwardRef(RadioButton);\n\nexport { ForwardedRefRadioButton as RadioButton };\n"]}

package/dist/src/components/generic/RadioButtonGroup/RadioButtonGroup.d.ts

@@ -11,8 +11,9 @@ export interface IRadioButtonOption<TValue extends string = string> {
 export interface IRadioButtonGroupProps<TValue extends string = string> {
     options?: IRadioButtonOption<TValue>[];
     value?: TValue;
-    onChange?: (value: TValue) => void;
+    onChange?: (value: TValue, optionValue?: TValue) => void;
     renderChildrenContent?: boolean;
+    isSubGroup?: boolean;
 }
-declare const RadioButtonGroup: <TValue extends string = string>({ options, value: valueProp, onChange, renderChildrenContent, }: IRadioButtonGroupProps<TValue>) => ReactElement | null;
+declare const RadioButtonGroup: <TValue extends string = string>({ options, value: valueProp, onChange, renderChildrenContent, isSubGroup, }: IRadioButtonGroupProps<TValue>) => ReactElement | null;
 export default RadioButtonGroup;

package/dist/src/components/generic/RadioButtonGroup/RadioButtonGroup.js

@@ -43,19 +43,19 @@ const Overlay_1 = require("../Overlay/Overlay");
 const RadioButton_1 = require("./RadioButton");
 const Tooltip_1 = __importDefault(require("../Tooltip/Tooltip"));
 const RadioButtonGroup_module_scss_1 = __importDefault(require("./RadioButtonGroup.module.scss"));
-const Option = ({ option: optionProp, value: valueProp, onChange, renderChildrenContent, }) => {
+const Option = ({ option: optionProp, value: valueProp, onChange, renderChildrenContent, isSubOption, }) => {
     const options = optionProp.options;
     const isGroup = !!(options === null || options === void 0 ? void 0 : options.length);
     const [ref, setRef] = (0, react_1.useState)(null);
     const [open, setOpen] = (0, react_1.useState)(false);
     const option = isGroup && valueProp ? options.find(({ value }) => value === valueProp) || optionProp : optionProp;
-    const radioButton = (react_1.default.createElement(RadioButton_1.RadioButton, { headerRef: setRef, className: RadioButtonGroup_module_scss_1.default.item, key: option === null || option === void 0 ? void 0 : option.value, checked: !(option === null || option === void 0 ? void 0 : option.disabled) && (option === null || option === void 0 ? void 0 : option.value) === valueProp, onChange: () => {
+    const radioButton = (react_1.default.createElement(RadioButton_1.RadioButton, { headerRef: setRef, className: RadioButtonGroup_module_scss_1.default.item, style: isSubOption ? undefined : { paddingRight: '35px' }, key: option === null || option === void 0 ? void 0 : option.value, checked: !(option === null || option === void 0 ? void 0 : option.disabled) && (option === null || option === void 0 ? void 0 : option.value) === valueProp, onChange: () => {
             if (option === null || option === void 0 ? void 0 : option.disabled)
                 return;
             if (isGroup)
                 setOpen(!open);
             else if ((option === null || option === void 0 ? void 0 : option.value) && (option === null || option === void 0 ? void 0 : option.value) !== valueProp)
-                onChange === null || onChange === void 0 ? void 0 : onChange(option.value);
+                onChange === null || onChange === void 0 ? void 0 : onChange(option.value, optionProp.value);
         }, label: option === null || option === void 0 ? void 0 : option.label, disabled: option === null || option === void 0 ? void 0 : option.disabled, renderContent: option === null || option === void 0 ? void 0 : option.renderContent }));
     if ((option === null || option === void 0 ? void 0 : option.disabled) && (option === null || option === void 0 ? void 0 : option.disabledReason)) {
         return (react_1.default.createElement(Tooltip_1.default, { key: option === null || option === void 0 ? void 0 : option.value, wrapperClasses: RadioButtonGroup_module_scss_1.default.wrapper, title: option === null || option === void 0 ? void 0 : option.disabledReason }, radioButton));
@@ -63,21 +63,21 @@ const Option = ({ option: optionProp, value: valueProp, onChange, renderChildren
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("div", { key: option === null || option === void 0 ? void 0 : option.value, className: RadioButtonGroup_module_scss_1.default.wrapper },
             radioButton,
-            options && (react_1.default.createElement("div", { className: RadioButtonGroup_module_scss_1.default.childrenIndicator },
+            !isSubOption && (react_1.default.createElement("div", { className: RadioButtonGroup_module_scss_1.default.childrenIndicator, style: (!options && (option === null || option === void 0 ? void 0 : option.value) === valueProp) || (options && open) ? { transform: 'scaleY(-1) translateY(2px)' } : undefined },
                 react_1.default.createElement(Icon_1.default, { size: "24px", icon: Icon_1.IconType.Dropdown })))),
-        options && (react_1.default.createElement(Overlay_1.Overlay, { onClose: () => setOpen(false), className: RadioButtonGroup_module_scss_1.default.overlay, hideStyles: true, containerClassName: "u-w-100", open: open, followElement: ref || undefined, offset: [0, 0], placement: "top-start" },
+        options && (react_1.default.createElement(Overlay_1.Overlay, { onClose: () => setOpen(false), className: RadioButtonGroup_module_scss_1.default.overlay, hideStyles: true, containerClassName: "u-w-100", open: open, followElement: ref || undefined, offset: [0, 0], placement: "bottom-start" },
             react_1.default.createElement(RadioButtonGroup, { options: options.map((option) => {
                     const { renderContent } = option, rest = __rest(option, ["renderContent"]);
                     if (!renderChildrenContent)
                         return rest;
                     return option;
-                }), onChange: (value) => {
-                    onChange === null || onChange === void 0 ? void 0 : onChange(value);
+                }), onChange: (subValue) => {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(optionProp.value, subValue);
                     setOpen(false);
-                }, value: valueProp })))));
+                }, value: valueProp, isSubGroup: true })))));
 };
-const RadioButtonGroup = ({ options = [], value: valueProp, onChange, renderChildrenContent, }) => {
-    return (react_1.default.createElement("div", { className: RadioButtonGroup_module_scss_1.default.root }, options.map((rawOption) => (react_1.default.createElement(Option, { key: rawOption.value, option: rawOption, value: valueProp, onChange: onChange, renderChildrenContent: renderChildrenContent })))));
+const RadioButtonGroup = ({ options = [], value: valueProp, onChange, renderChildrenContent, isSubGroup, }) => {
+    return (react_1.default.createElement("div", { className: RadioButtonGroup_module_scss_1.default.root }, options.map((rawOption) => (react_1.default.createElement(Option, { key: rawOption.value, option: rawOption, value: valueProp, onChange: onChange, renderChildrenContent: renderChildrenContent, isSubOption: isSubGroup })))));
 };
 exports.default = RadioButtonGroup;
 //# sourceMappingURL=RadioButtonGroup.js.map

package/dist/src/components/generic/RadioButtonGroup/RadioButtonGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButtonGroup.js","sourceRoot":"/","sources":["src/components/generic/RadioButtonGroup/RadioButtonGroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { ReactElement, ReactNode, useState } from 'react';\n\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { Overlay } from '@/components/generic/Overlay/Overlay';\nimport { RadioButton } from '@/components/generic/RadioButtonGroup/RadioButton';\nimport Tooltip from '@/components/generic/Tooltip/Tooltip';\n\nimport styles from './RadioButtonGroup.module.scss';\n\nexport interface IRadioButtonOption<TValue extends string = string> {\n    value: TValue;\n    label?: ReactNode;\n    disabled?: boolean;\n    /** Enabled a tooltip that gives more info on why the field is disabled */\n    disabledReason?: string;\n    renderContent?: () => ReactNode;\n    options?: IRadioButtonOption<TValue>[];\n}\n\nexport interface IRadioButtonGroupProps<TValue extends string = string> {\n    options?: IRadioButtonOption<TValue>[];\n    value?: TValue;\n    onChange?: (value: TValue) => void;\n    renderChildrenContent?: boolean;\n}\n\nconst Option = <TValue extends string = string>({\n    option: optionProp,\n    value: valueProp,\n    onChange,\n    renderChildrenContent,\n}: {\n    option: IRadioButtonOption<TValue>;\n    value?: TValue;\n    onChange?: (value: TValue) => void;\n    renderChildrenContent?: boolean;\n}): ReactElement | null => {\n    const options = optionProp.options;\n    const isGroup = !!options?.length;\n    const [ref, setRef] = useState<HTMLDivElement | null>(null);\n    const [open, setOpen] = useState<boolean>(false);\n    const option: IRadioButtonOption<TValue> | undefined = isGroup && valueProp ? options.find(({ value }) => value === valueProp) || optionProp : optionProp;\n    const radioButton = (\n        <RadioButton\n            headerRef={setRef}\n            className={styles.item}\n            key={option?.value}\n            checked={!option?.disabled && option?.value === valueProp}\n            onChange={() => {\n                if (option?.disabled) return;\n                if (isGroup) setOpen(!open);\n                else if (option?.value && option?.value !== valueProp) onChange?.(option.value);\n            }}\n            label={option?.label}\n            disabled={option?.disabled}\n            renderContent={option?.renderContent}\n        />\n    );\n\n    if (option?.disabled && option?.disabledReason) {\n        return (\n            <Tooltip key={option?.value} wrapperClasses={styles.wrapper} title={option?.disabledReason}>\n                {radioButton}\n            </Tooltip>\n        );\n    }\n\n    return (\n        <>\n            <div key={option?.value} className={styles.wrapper}>\n                {radioButton}\n                {options && (\n                    <div className={styles.childrenIndicator}>\n                        <Icon size=\"24px\" icon={IconType.Dropdown} />\n                    </div>\n                )}\n            </div>\n            {options && (\n                <Overlay\n                    onClose={() => setOpen(false)}\n                    className={styles.overlay}\n                    hideStyles\n                    containerClassName=\"u-w-100\"\n                    open={open}\n                    followElement={ref || undefined}\n                    offset={[0, 0]}\n                    placement=\"top-start\"\n                >\n                    <RadioButtonGroup\n                        options={options.map((option) => {\n                            const { renderContent, ...rest } = option;\n                            if (!renderChildrenContent) return rest;\n                            return option;\n                        })}\n                        onChange={(value) => {\n                            onChange?.(value);\n                            setOpen(false);\n                        }}\n                        value={valueProp}\n                    />\n                </Overlay>\n            )}\n        </>\n    );\n};\n\nconst RadioButtonGroup = <TValue extends string = string>({\n    options = [],\n    value: valueProp,\n    onChange,\n    renderChildrenContent,\n}: IRadioButtonGroupProps<TValue>): ReactElement | null => {\n    return (\n        <div className={styles.root}>\n            {options.map((rawOption) => (\n                <Option key={rawOption.value} option={rawOption} value={valueProp} onChange={onChange} renderChildrenContent={renderChildrenContent} />\n            ))}\n        </div>\n    );\n};\n\nexport default RadioButtonGroup;\n"]}
+{"version":3,"file":"RadioButtonGroup.js","sourceRoot":"/","sources":["src/components/generic/RadioButtonGroup/RadioButtonGroup.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAiE;AAEjE,uEAAgE;AAChE,kEAA+D;AAC/D,mFAAgF;AAChF,mFAA2D;AAE3D,kGAAoD;AAoBpD,MAAM,MAAM,GAAG,CAAiC,EAC5C,MAAM,EAAE,UAAU,EAClB,KAAK,EAAE,SAAS,EAChB,QAAQ,EACR,qBAAqB,EACrB,WAAW,GAOd,EAAe,EAAE;IACd,MAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC;IACnC,MAAM,OAAO,GAAG,CAAC,CAAC,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM,CAAA,CAAC;IAClC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,IAAA,gBAAQ,EAAwB,IAAI,CAAC,CAAC;IAC5D,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IACjD,MAAM,MAAM,GAA2C,OAAO,IAAI,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,KAAK,SAAS,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC;IAC1J,MAAM,WAAW,GAAG,CAChB,8BAAC,yBAAW,IACR,SAAS,EAAE,MAAM,EACjB,SAAS,EAAE,sCAAM,CAAC,IAAI,EACtB,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,MAAM,EAAE,EACzD,GAAG,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,EAClB,OAAO,EAAE,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,CAAA,IAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,MAAK,SAAS,EACzD,QAAQ,EAAE,GAAG,EAAE;YACX,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ;gBAAE,OAAO;YAC7B,IAAI,OAAO;gBAAE,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC;iBACvB,IAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,KAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,MAAK,SAAS;gBAAE,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,MAAM,CAAC,KAAK,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;QACtG,CAAC,EACD,KAAK,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,EACpB,QAAQ,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,EAC1B,aAAa,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,aAAa,GACtC,CACL,CAAC;IAEF,IAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,QAAQ,MAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,CAAA,EAAE;QAC5C,OAAO,CACH,8BAAC,iBAAO,IAAC,GAAG,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,EAAE,cAAc,EAAE,sCAAM,CAAC,OAAO,EAAE,KAAK,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,IACrF,WAAW,CACN,CACb,CAAC;KACL;IAED,OAAO,CACH;QACI,uCAAK,GAAG,EAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,EAAE,SAAS,EAAE,sCAAM,CAAC,OAAO;YAC7C,WAAW;YACX,CAAC,WAAW,IAAI,CACb,uCACI,SAAS,EAAE,sCAAM,CAAC,iBAAiB,EACnC,KAAK,EAAE,CAAC,CAAC,OAAO,IAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,MAAK,SAAS,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,4BAA4B,EAAE,CAAC,CAAC,CAAC,SAAS;gBAE/H,8BAAC,cAAI,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAE,eAAQ,CAAC,QAAQ,GAAI,CAC3C,CACT,CACC;QACL,OAAO,IAAI,CACR,8BAAC,iBAAO,IACJ,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAC7B,SAAS,EAAE,sCAAM,CAAC,OAAO,EACzB,UAAU,QACV,kBAAkB,EAAC,SAAS,EAC5B,IAAI,EAAE,IAAI,EACV,aAAa,EAAE,GAAG,IAAI,SAAS,EAC/B,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EACd,SAAS,EAAC,cAAc;YAExB,8BAAC,gBAAgB,IACb,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE;oBAC5B,MAAM,EAAE,aAAa,KAAc,MAAM,EAAf,IAAI,UAAK,MAAM,EAAnC,iBAA0B,CAAS,CAAC;oBAC1C,IAAI,CAAC,qBAAqB;wBAAE,OAAO,IAAI,CAAC;oBACxC,OAAO,MAAM,CAAC;gBAClB,CAAC,CAAC,EACF,QAAQ,EAAE,CAAC,QAAQ,EAAE,EAAE;oBACnB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,UAAU,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;oBACvC,OAAO,CAAC,KAAK,CAAC,CAAC;gBACnB,CAAC,EACD,KAAK,EAAE,SAAS,EAChB,UAAU,SACZ,CACI,CACb,CACF,CACN,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,gBAAgB,GAAG,CAAiC,EACtD,OAAO,GAAG,EAAE,EACZ,KAAK,EAAE,SAAS,EAChB,QAAQ,EACR,qBAAqB,EACrB,UAAU,GACmB,EAAuB,EAAE;IACtD,OAAO,CACH,uCAAK,SAAS,EAAE,sCAAM,CAAC,IAAI,IACtB,OAAO,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CACxB,8BAAC,MAAM,IAAC,GAAG,EAAE,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,qBAAqB,EAAE,qBAAqB,EAAE,WAAW,EAAE,UAAU,GAAI,CACnK,CAAC,CACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,gBAAgB,CAAC","sourcesContent":["import React, { ReactElement, ReactNode, useState } from 'react';\n\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport { Overlay } from '@/components/generic/Overlay/Overlay';\nimport { RadioButton } from '@/components/generic/RadioButtonGroup/RadioButton';\nimport Tooltip from '@/components/generic/Tooltip/Tooltip';\n\nimport styles from './RadioButtonGroup.module.scss';\n\nexport interface IRadioButtonOption<TValue extends string = string> {\n    value: TValue;\n    label?: ReactNode;\n    disabled?: boolean;\n    /** Enabled a tooltip that gives more info on why the field is disabled */\n    disabledReason?: string;\n    renderContent?: () => ReactNode;\n    options?: IRadioButtonOption<TValue>[];\n}\n\nexport interface IRadioButtonGroupProps<TValue extends string = string> {\n    options?: IRadioButtonOption<TValue>[];\n    value?: TValue;\n    onChange?: (value: TValue, optionValue?: TValue) => void;\n    renderChildrenContent?: boolean;\n    isSubGroup?: boolean;\n}\n\nconst Option = <TValue extends string = string>({\n    option: optionProp,\n    value: valueProp,\n    onChange,\n    renderChildrenContent,\n    isSubOption,\n}: {\n    option: IRadioButtonOption<TValue>;\n    value?: TValue;\n    onChange?: (value: TValue, optionValue?: TValue) => void;\n    renderChildrenContent?: boolean;\n    isSubOption?: boolean;\n}): JSX.Element => {\n    const options = optionProp.options;\n    const isGroup = !!options?.length;\n    const [ref, setRef] = useState<HTMLDivElement | null>(null);\n    const [open, setOpen] = useState<boolean>(false);\n    const option: IRadioButtonOption<TValue> | undefined = isGroup && valueProp ? options.find(({ value }) => value === valueProp) || optionProp : optionProp;\n    const radioButton = (\n        <RadioButton\n            headerRef={setRef}\n            className={styles.item}\n            style={isSubOption ? undefined : { paddingRight: '35px' }}\n            key={option?.value}\n            checked={!option?.disabled && option?.value === valueProp}\n            onChange={() => {\n                if (option?.disabled) return;\n                if (isGroup) setOpen(!open);\n                else if (option?.value && option?.value !== valueProp) onChange?.(option.value, optionProp.value);\n            }}\n            label={option?.label}\n            disabled={option?.disabled}\n            renderContent={option?.renderContent}\n        />\n    );\n\n    if (option?.disabled && option?.disabledReason) {\n        return (\n            <Tooltip key={option?.value} wrapperClasses={styles.wrapper} title={option?.disabledReason}>\n                {radioButton}\n            </Tooltip>\n        );\n    }\n\n    return (\n        <>\n            <div key={option?.value} className={styles.wrapper}>\n                {radioButton}\n                {!isSubOption && (\n                    <div\n                        className={styles.childrenIndicator}\n                        style={(!options && option?.value === valueProp) || (options && open) ? { transform: 'scaleY(-1) translateY(2px)' } : undefined}\n                    >\n                        <Icon size=\"24px\" icon={IconType.Dropdown} />\n                    </div>\n                )}\n            </div>\n            {options && (\n                <Overlay\n                    onClose={() => setOpen(false)}\n                    className={styles.overlay}\n                    hideStyles\n                    containerClassName=\"u-w-100\"\n                    open={open}\n                    followElement={ref || undefined}\n                    offset={[0, 0]}\n                    placement=\"bottom-start\"\n                >\n                    <RadioButtonGroup\n                        options={options.map((option) => {\n                            const { renderContent, ...rest } = option;\n                            if (!renderChildrenContent) return rest;\n                            return option;\n                        })}\n                        onChange={(subValue) => {\n                            onChange?.(optionProp.value, subValue);\n                            setOpen(false);\n                        }}\n                        value={valueProp}\n                        isSubGroup\n                    />\n                </Overlay>\n            )}\n        </>\n    );\n};\n\nconst RadioButtonGroup = <TValue extends string = string>({\n    options = [],\n    value: valueProp,\n    onChange,\n    renderChildrenContent,\n    isSubGroup,\n}: IRadioButtonGroupProps<TValue>): ReactElement | null => {\n    return (\n        <div className={styles.root}>\n            {options.map((rawOption) => (\n                <Option key={rawOption.value} option={rawOption} value={valueProp} onChange={onChange} renderChildrenContent={renderChildrenContent} isSubOption={isSubGroup} />\n            ))}\n        </div>\n    );\n};\n\nexport default RadioButtonGroup;\n"]}

package/dist/src/components/generic/date/DatePicker.d.ts

@@ -18,5 +18,10 @@ export interface DatePickerProps {
     }) => void;
     readOnly?: boolean;
     className?: string;
+    /**
+     * Filters availability/calendar results by the provided room code.
+     * If undefined, falls back to the room code from the selected basket row.
+     */
+    roomCode?: string;
 }
 export default function DatePicker(props: DatePickerProps): JSX.Element;

package/dist/src/components/generic/date/DatePicker.js

@@ -100,14 +100,17 @@ function DatePicker(props) {
         arrivalMinNightStay: null,
         arrivalMaxNightStay: null,
     });
+    const { selectedBasketRow } = basketContext;
+    const roomCode = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        return (_b = (_a = props === null || props === void 0 ? void 0 : props.roomCode) !== null && _a !== void 0 ? _a : selectedBasketRow === null || selectedBasketRow === void 0 ? void 0 : selectedBasketRow.getRoomCode()) !== null && _b !== void 0 ? _b : '';
+    }, [props === null || props === void 0 ? void 0 : props.roomCode, selectedBasketRow]);
     const onClickDate = (newDate) => __awaiter(this, void 0, void 0, function* () {
         let newPickingState = null;
-        const selectedBasketRow = basketContext.selectedBasketRow;
         const adults = selectedBasketRow ? selectedBasketRow.getAdults() : 0;
         const children = selectedBasketRow ? selectedBasketRow.getChildren() : 0;
         const infants = selectedBasketRow ? selectedBasketRow.getInfants() : 0;
         const promoCode = selectedBasketRow ? selectedBasketRow.getPromoCode() : '';
-        const roomCode = selectedBasketRow ? selectedBasketRow.getRoomCode() : '';
         const newDatePrice = yield BookingAPI_1.default.Availability.getCheapestPriceForDay(newDate, adults, children, infants, promoCode, roomCode, hotel === null || hotel === void 0 ? void 0 : hotel.hotelID, memberNumber, false);
         switch (pickingState) {
             default:
@@ -237,12 +240,13 @@ function DatePicker(props) {
         arrivalNightStay,
         nightStayValidation,
         nightStayRequirements,
+        roomCode: roomCode,
     };
     const printMonths = (0, react_1.useMemo)(() => (react_1.default.createElement(react_1.default.Fragment, null, calendarStyle === 'Month' ? (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(DatePickerMonth_1.default, { small: props.small, showingMonth: currentMonth, readOnly: props.readOnly }),
         props.showMultipleMonths && react_1.default.createElement(DatePickerMonth_1.default, { showingMonth: currentMonth.add(1, 'month'), readOnly: props.readOnly }))) : (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(react_1.default.Suspense, { fallback: react_1.default.createElement(WeekViewSkeleton_1.default, null) },
-            react_1.default.createElement(DatePickerWeek, null)))))), [currentMonth, props.showMultipleMonths, calendarStyle, props.readOnly]);
+            react_1.default.createElement(DatePickerWeek, null)))))), [currentMonth, props.showMultipleMonths, calendarStyle, props.readOnly, roomCode]);
     const calendarClassNames = (0, classnames_1.default)('diji-calendar', {
         '--single': !props.showMultipleMonths,
         '--small': props.small,