@roomstay/frontend 2.6.89-2 → 2.6.90

package/dist/src/components/generic/PageTitle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"/","sources":["src/components/generic/PageTitle/index.tsx"],"names":[],"mappings":";;;;;;AAAA,iDAA2D;AAC3D,kDAA0B;AAC1B,+CAAsC;AAI/B,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,EAA8B,EAAE,EAAE;IAC9D,MAAM,EAAE,SAAS,EAAE,GAAG,eAAK,CAAC,UAAU,CAAC,gCAAqB,CAAC,CAAC;IAE9D,IAAI,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,MAAM,EAAE;QACnB,OAAO,CACH,8BAAC,qBAAM;YACH,wCAAM,OAAO,EAAC,OAAO,GAAG;YACxB,6CAAQ,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,IAAI,CAAC,CAAS,CAC7B,CACZ,CAAC;KACL;IACD,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC;AAZW,QAAA,SAAS,aAYpB","sourcesContent":["import { HotelOverridesContext } from '@frontend/contexts';\nimport React from 'react';\nimport { Helmet } from 'react-helmet';\n\nimport { IPageTitle } from '@/models/Api/HotelOverrideDTO';\n\nexport const PageTitle = ({ step }: { step: keyof IPageTitle }) => {\n    const { pageTitle } = React.useContext(HotelOverridesContext);\n\n    if (pageTitle?.enable) {\n        return (\n            <Helmet>\n                <meta charSet=\"utf-8\" />\n                <title>{pageTitle?.[step]}</title>\n            </Helmet>\n        );\n    }\n    return null;\n};\n"]}
+{"version":3,"file":"index.js","sourceRoot":"/","sources":["src/components/generic/PageTitle/index.tsx"],"names":[],"mappings":";;;;;;AAAA,iDAA2D;AAC3D,kDAA0B;AAC1B,+CAAsC;AAI/B,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,EAA8B,EAAE,EAAE;IAC9D,MAAM,EAAE,SAAS,EAAE,GAAG,eAAK,CAAC,UAAU,CAAC,gCAAqB,CAAC,CAAC;IAE9D,IAAI,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,MAAM,EAAE,CAAC;QACpB,OAAO,CACH,8BAAC,qBAAM;YACH,wCAAM,OAAO,EAAC,OAAO,GAAG;YACxB,6CAAQ,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAG,IAAI,CAAC,CAAS,CAC7B,CACZ,CAAC;IACN,CAAC;IACD,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC;AAZW,QAAA,SAAS,aAYpB","sourcesContent":["import { HotelOverridesContext } from '@frontend/contexts';\nimport React from 'react';\nimport { Helmet } from 'react-helmet';\n\nimport { IPageTitle } from '@/models/Api/HotelOverrideDTO';\n\nexport const PageTitle = ({ step }: { step: keyof IPageTitle }) => {\n    const { pageTitle } = React.useContext(HotelOverridesContext);\n\n    if (pageTitle?.enable) {\n        return (\n            <Helmet>\n                <meta charSet=\"utf-8\" />\n                <title>{pageTitle?.[step]}</title>\n            </Helmet>\n        );\n    }\n    return null;\n};\n"]}

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

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"PasswordBox.js","sourceRoot":"/","sources":["src/components/generic/PasswordBox/PasswordBox.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAoD;AAEpD,uEAAgE;AAEhE,yDAAmD;AACnD,wFAA+C;AAElC,QAAA,WAAW,GAAG,IAAA,kBAAU,EAAiC,SAAS,WAAW,CAAC,KAAK,EAAE,GAAG;IACjG,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5D,MAAM,eAAe,mCACd,KAAK,KACR,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,GAC7C,CAAC;IAEF,MAAM,QAAQ,GAAG,GAAG,EAAE;QAClB,iBAAiB,CAAC,CAAC,cAAc,CAAC,CAAC;IACvC,CAAC,CAAC;IAEF,OAAO,CACH;QACI,uCAAK,SAAS,EAAE,iCAAM,CAAC,WAAW;YAC9B,8BAAC,iBAAO,kBAAC,GAAG,EAAE,GAAG,IAAM,eAAe,EAAI;YAC1C,8BAAC,cAAI,IAAC,SAAS,EAAE,iCAAM,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,eAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,eAAQ,CAAC,GAAG,EAAE,OAAO,EAAE,QAAQ,GAAI,CACtH,CACP,CACN,CAAC;AACN,CAAC,CAAC,CAAC","sourcesContent":["import React, { forwardRef, useState } from 'react';\n\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\n\nimport TextBox, { TextBoxProps } from '../TextBox';\nimport styles from './PasswordBox.module.scss';\n\nexport const PasswordBox = forwardRef<HTMLInputElement, TextBoxProps>(function PasswordBox(props, ref) {\n    const [canSeePassword, setCanSeePassword] = useState(false);\n\n    const inputProperties: TextBoxProps = {\n        ...props,\n        type: canSeePassword ? 'text' : 'password',\n    };\n\n    const onSwitch = () => {\n        setCanSeePassword(!canSeePassword);\n    };\n\n    return (\n        <>\n            <div className={styles.passwordbox}>\n                <TextBox ref={ref} {...inputProperties} />\n                <Icon className={styles['suffix-icon']} icon={canSeePassword ? IconType.EyeBlocked : IconType.Eye} onClick={onSwitch} />\n            </div>\n        </>\n    );\n});\n"]}
+{"version":3,"file":"PasswordBox.js","sourceRoot":"/","sources":["src/components/generic/PasswordBox/PasswordBox.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAoD;AAEpD,uEAAgE;AAEhE,yDAAmD;AACnD,wFAA+C;AAElC,QAAA,WAAW,GAAG,IAAA,kBAAU,EAAiC,SAAS,WAAW,CAAC,KAAK,EAAE,GAAG;IACjG,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAE5D,MAAM,eAAe,mCACd,KAAK,KACR,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,GAC7C,CAAC;IAEF,MAAM,QAAQ,GAAG,GAAG,EAAE;QAClB,iBAAiB,CAAC,CAAC,cAAc,CAAC,CAAC;IACvC,CAAC,CAAC;IAEF,OAAO,CACH;QACI,uCAAK,SAAS,EAAE,iCAAM,CAAC,WAAW;YAC9B,8BAAC,iBAAO,kBAAC,GAAG,EAAE,GAAG,IAAM,eAAe,EAAI;YAC1C,8BAAC,cAAI,IAAC,SAAS,EAAE,iCAAM,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,eAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,eAAQ,CAAC,GAAG,EAAE,OAAO,EAAE,QAAQ,GAAI,CACtH,CACP,CACN,CAAC;AACN,CAAC,CAAC,CAAC","sourcesContent":["import React, { forwardRef, useState } from 'react';\n\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\n\nimport TextBox, { TextBoxProps } from '../TextBox';\nimport styles from './PasswordBox.module.scss';\n\nexport const PasswordBox = forwardRef<HTMLInputElement, TextBoxProps>(function PasswordBox(props, ref) {\n    const [canSeePassword, setCanSeePassword] = useState(false);\n\n    const inputProperties: TextBoxProps = {\n        ...props,\n        type: canSeePassword ? 'text' : 'password',\n    };\n\n    const onSwitch = () => {\n        setCanSeePassword(!canSeePassword);\n    };\n\n    return (\n        <>\n            <div className={styles.passwordbox}>\n                <TextBox ref={ref} {...inputProperties} />\n                <Icon className={styles['suffix-icon']} icon={canSeePassword ? IconType.EyeBlocked : IconType.Eye} onClick={onSwitch} />\n            </div>\n        </>\n    );\n});\n"]}

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

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -65,9 +75,9 @@ const InlinePaymentOption = ({ card, active, overrideSubLabel }) => {
                         border: '0.5px solid #DFE1E5',
                     }, isCurrent: () => true }))),
             (roomstayMember === null || roomstayMember === void 0 ? void 0 : roomstayMember.defaultCard) && card && card.cardId === roomstayMember.defaultCard && (react_1.default.createElement(Pill_1.default, { size: "small", type: Pill_1.PillType.Primary }, "DEFAULT CARD"))),
-        react_1.default.createElement(Text_1.default, { bold: true, className: "u-flex", color: Color_1.Color.Navy, type: Text_1.TextType.Small },
+        totalPayNow !== null && (react_1.default.createElement(Text_1.default, { bold: true, className: "u-flex", color: Color_1.Color.Navy, type: Text_1.TextType.Small },
             symbol,
-            prettyValue)));
+            prettyValue))));
 };
 exports.default = InlinePaymentOption;
 //# sourceMappingURL=InlinePaymentOption.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"InlinePaymentOption.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/InlinePaymentOption.tsx"],"names":[],"mappings":"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","sourcesContent":["import { IRoomstayMemberCards } from '@roomstay/core';\nimport React, { FC } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport InlinePaymentCard from '@/components/generic/PaymentCard/InlinePaymentCard';\nimport Pill, { PillType } from '@/components/generic/Pill';\nimport Text, { TextType } from '@/components/generic/Text';\nimport AcceptablePaymentCard from '@/components/steps/confirmation/PaymentDetails/AcceptablePaymentCard';\nimport { useBasket, useMemberContext } from '@/contexts';\nimport useCurrency from '@/hooks/Currency';\nimport { VGSCardName } from '@/models/Api/HotelDTO';\nimport { Translation } from '@/translations/Translation';\nimport { Color } from '@/util/Color';\nimport { TextAlign } from '@/util/TextAlignment';\n\nimport styles from './InlinePaymentOption.module.scss';\n\ninterface InlinePaymentOptionProps {\n    card?: IRoomstayMemberCards;\n    active?: boolean;\n\n    overrideSubLabel?: string;\n}\n\nconst InlinePaymentOption: FC<InlinePaymentOptionProps> = ({ card, active, overrideSubLabel }) => {\n    const { t } = useTranslation();\n    const { roomstayMember } = useMemberContext();\n    const displayExpiry = (expiry: string) => {\n        return expiry.slice(0, 2) + ' / ' + expiry.slice(2);\n    };\n    const { getTotalPayNow } = useBasket();\n    const totalPayNow = getTotalPayNow();\n    const { symbol, prettyValue } = useCurrency({\n        children: totalPayNow,\n    });\n\n    const subLabel = overrideSubLabel ? overrideSubLabel : card ? `Expires ${displayExpiry(card.expiry)}` : t(Translation.Step.Confirmation.CardSubLabel);\n\n    return (\n        <div className=\"u-flex u-flex-justify-between w-100 u-flex-align-center\">\n            <div className={styles.root}>\n                {card ? (\n                    <div className=\"flex-shrink-0\">\n                        <InlinePaymentCard vgsCardName={card.type as VGSCardName} large />\n                    </div>\n                ) : null}\n                <div>\n                    <Text align={TextAlign.Left} type={TextType.Small} color={Color.Navy}>\n                        {card ? `**** **** **** ${card.cardNumber.slice(-4)}` : t(Translation.Step.Confirmation.CardLabel)}\n                    </Text>\n\n                    <Text className=\"u-marg-top--lighter\" align={TextAlign.Left} type={TextType.Caption} color={Color.DarkGrey}>\n                        {subLabel}\n                    </Text>\n                </div>\n                {!card && (\n                    <div>\n                        <AcceptablePaymentCard\n                            style={{\n                                width: 24,\n                                height: 16,\n                                borderRadius: 1.5,\n                                border: '0.5px solid #DFE1E5',\n                            }}\n                            isCurrent={() => true}\n                        />\n                    </div>\n                )}\n                {roomstayMember?.defaultCard && card && card.cardId === roomstayMember.defaultCard && (\n                    <Pill size=\"small\" type={PillType.Primary}>\n                        DEFAULT CARD\n                    </Pill>\n                )}\n            </div>\n            <Text bold className=\"u-flex\" color={Color.Navy} type={TextType.Small}>\n                {symbol}\n                {prettyValue}\n            </Text>\n        </div>\n    );\n};\n\nexport default InlinePaymentOption;\n"]}
+{"version":3,"file":"InlinePaymentOption.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/InlinePaymentOption.tsx"],"names":[],"mappings":"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","sourcesContent":["import { IRoomstayMemberCards } from '@roomstay/core';\nimport React, { FC } from 'react';\nimport { useTranslation } from 'react-i18next';\n\nimport InlinePaymentCard from '@/components/generic/PaymentCard/InlinePaymentCard';\nimport Pill, { PillType } from '@/components/generic/Pill';\nimport Text, { TextType } from '@/components/generic/Text';\nimport AcceptablePaymentCard from '@/components/steps/confirmation/PaymentDetails/AcceptablePaymentCard';\nimport { useBasket, useMemberContext } from '@/contexts';\nimport useCurrency from '@/hooks/Currency';\nimport { VGSCardName } from '@/models/Api/HotelDTO';\nimport { Translation } from '@/translations/Translation';\nimport { Color } from '@/util/Color';\nimport { TextAlign } from '@/util/TextAlignment';\n\nimport styles from './InlinePaymentOption.module.scss';\n\ninterface InlinePaymentOptionProps {\n    card?: IRoomstayMemberCards;\n    active?: boolean;\n\n    overrideSubLabel?: string;\n}\n\nconst InlinePaymentOption: FC<InlinePaymentOptionProps> = ({ card, active, overrideSubLabel }) => {\n    const { t } = useTranslation();\n    const { roomstayMember } = useMemberContext();\n    const displayExpiry = (expiry: string) => {\n        return expiry.slice(0, 2) + ' / ' + expiry.slice(2);\n    };\n    const { getTotalPayNow } = useBasket();\n    const totalPayNow = getTotalPayNow();\n    const { symbol, prettyValue } = useCurrency({\n        children: totalPayNow,\n    });\n\n    const subLabel = overrideSubLabel ? overrideSubLabel : card ? `Expires ${displayExpiry(card.expiry)}` : t(Translation.Step.Confirmation.CardSubLabel);\n\n    return (\n        <div className=\"u-flex u-flex-justify-between w-100 u-flex-align-center\">\n            <div className={styles.root}>\n                {card ? (\n                    <div className=\"flex-shrink-0\">\n                        <InlinePaymentCard vgsCardName={card.type as VGSCardName} large />\n                    </div>\n                ) : null}\n                <div>\n                    <Text align={TextAlign.Left} type={TextType.Small} color={Color.Navy}>\n                        {card ? `**** **** **** ${card.cardNumber.slice(-4)}` : t(Translation.Step.Confirmation.CardLabel)}\n                    </Text>\n\n                    <Text className=\"u-marg-top--lighter\" align={TextAlign.Left} type={TextType.Caption} color={Color.DarkGrey}>\n                        {subLabel}\n                    </Text>\n                </div>\n                {!card && (\n                    <div>\n                        <AcceptablePaymentCard\n                            style={{\n                                width: 24,\n                                height: 16,\n                                borderRadius: 1.5,\n                                border: '0.5px solid #DFE1E5',\n                            }}\n                            isCurrent={() => true}\n                        />\n                    </div>\n                )}\n                {roomstayMember?.defaultCard && card && card.cardId === roomstayMember.defaultCard && (\n                    <Pill size=\"small\" type={PillType.Primary}>\n                        DEFAULT CARD\n                    </Pill>\n                )}\n            </div>\n            {totalPayNow !== null && (\n                <Text bold className=\"u-flex\" color={Color.Navy} type={TextType.Small}>\n                    {symbol}\n                    {prettyValue}\n                </Text>\n            )}\n        </div>\n    );\n};\n\nexport default InlinePaymentOption;\n"]}

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

@@ -1,5 +1,6 @@
+import React from 'react';
 import { IRoomstayMemberCardFormInput } from '../../../models/RoomstayMembers/IRoomstayMemberCard';
 export interface PaymentCardProps {
     card: IRoomstayMemberCardFormInput;
 }
-export declare const PaymentCard: ({ card }: PaymentCardProps) => JSX.Element;
+export declare const PaymentCard: ({ card }: PaymentCardProps) => React.JSX.Element;

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

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {

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 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"]}
+{"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 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/Pill.d.ts

@@ -22,4 +22,4 @@ export interface PillProps extends PropsWithChildren<any> {
     className?: string;
     [x: string]: React.ReactNode;
 }
-export default function Pill(props: PillProps): JSX.Element;
+export default function Pill(props: PillProps): React.JSX.Element;

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

@@ -4,13 +4,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PillType = exports.PillVariant = void 0;
+exports.default = Pill;
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importDefault(require("react"));
 const Icon_1 = __importDefault(require("./Icon/Icon"));
 var PillVariant;
 (function (PillVariant) {
     PillVariant["Outlined"] = "--outlined";
-})(PillVariant = exports.PillVariant || (exports.PillVariant = {}));
+})(PillVariant || (exports.PillVariant = PillVariant = {}));
 var PillType;
 (function (PillType) {
     PillType["Primary"] = "--accent";
@@ -20,7 +21,7 @@ var PillType;
     PillType["Default"] = "--default";
     PillType["Grey"] = "--grey";
     PillType["Danger"] = "--danger";
-})(PillType = exports.PillType || (exports.PillType = {}));
+})(PillType || (exports.PillType = PillType = {}));
 function Pill(props) {
     var _a;
     const { size = 'medium', variant, className } = props;
@@ -35,5 +36,4 @@ function Pill(props) {
         props.children,
         props.iconPosition === 'right' && icon));
 }
-exports.default = Pill;
 //# sourceMappingURL=Pill.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Pill.js","sourceRoot":"/","sources":["src/components/generic/Pill.tsx"],"names":[],"mappings":";;;;;;AAAA,4DAAoC;AACpC,kDAAiD;AAEjD,0EAAgE;AAEhE,IAAY,WAEX;AAFD,WAAY,WAAW;IACnB,sCAAuB,CAAA;AAC3B,CAAC,EAFW,WAAW,GAAX,mBAAW,KAAX,mBAAW,QAEtB;AAED,IAAY,QAQX;AARD,WAAY,QAAQ;IAChB,gCAAoB,CAAA;IACpB,oCAAwB,CAAA;IACxB,iCAAqB,CAAA;IACrB,iCAAqB,CAAA;IACrB,iCAAqB,CAAA;IACrB,2BAAe,CAAA;IACf,+BAAmB,CAAA;AACvB,CAAC,EARW,QAAQ,GAAR,gBAAQ,KAAR,gBAAQ,QAQnB;AAeD,SAAwB,IAAI,CAAC,KAAgB;;IACzC,MAAM,EAAE,IAAI,GAAG,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAEtD,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE;QACrD,cAAc,EAAE,KAAK,CAAC,YAAY,KAAK,OAAO;QAC9C,SAAS,EAAE,IAAI,KAAK,OAAO;QAC3B,CAAC,MAAA,KAAK,CAAC,IAAI,mCAAI,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI;KACzC,CAAC,CAAC;IAEH,MAAM,IAAI,GAAG,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,8BAAC,cAAI,IAAC,IAAI,EAAE,KAAK,CAAC,IAAgB,EAAE,OAAO,EAAE,KAAK,CAAC,WAAW,GAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC;IAE9H,OAAO,CACH,wCAAM,SAAS,EAAE,OAAO;QACnB,CAAC,KAAK,CAAC,YAAY,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,IAAI;QAC9D,KAAK,CAAC,QAAQ;QACd,KAAK,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CACpC,CACV,CAAC;AACN,CAAC;AAlBD,uBAkBC","sourcesContent":["import classNames from 'classnames';\nimport React, { PropsWithChildren } from 'react';\n\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\n\nexport enum PillVariant {\n    Outlined = '--outlined',\n}\n\nexport enum PillType {\n    Primary = '--accent',\n    Secondary = '--accent-2',\n    Warning = '--warning',\n    Success = '--success',\n    Default = '--default',\n    Grey = '--grey',\n    Danger = '--danger',\n}\n\nexport interface PillProps extends PropsWithChildren<any> {\n    icon?: IconType | React.ReactNode;\n    size?: 'medium' | 'small';\n    iconPosition?: 'left' | 'right';\n    type?: PillType;\n\n    onClickIcon?: () => void | null;\n    variant?: PillVariant;\n    className?: string;\n\n    [x: string]: React.ReactNode;\n}\n\nexport default function Pill(props: PillProps) {\n    const { size = 'medium', variant, className } = props;\n\n    const classes = classNames('c-pill', variant, className, {\n        '--icon-right': props.iconPosition === 'right',\n        '--small': size === 'small',\n        [props.type ?? PillType.Default]: true,\n    });\n\n    const icon = typeof props.icon === 'string' ? <Icon icon={props.icon as IconType} onClick={props.onClickIcon} /> : props.icon;\n\n    return (\n        <span className={classes}>\n            {(props.iconPosition === 'left' || !props.iconPosition) && icon}\n            {props.children}\n            {props.iconPosition === 'right' && icon}\n        </span>\n    );\n}\n"]}
+{"version":3,"file":"Pill.js","sourceRoot":"/","sources":["src/components/generic/Pill.tsx"],"names":[],"mappings":";;;;;;AAgCA,uBAkBC;AAlDD,4DAAoC;AACpC,kDAAiD;AAEjD,0EAAgE;AAEhE,IAAY,WAEX;AAFD,WAAY,WAAW;IACnB,sCAAuB,CAAA;AAC3B,CAAC,EAFW,WAAW,2BAAX,WAAW,QAEtB;AAED,IAAY,QAQX;AARD,WAAY,QAAQ;IAChB,gCAAoB,CAAA;IACpB,oCAAwB,CAAA;IACxB,iCAAqB,CAAA;IACrB,iCAAqB,CAAA;IACrB,iCAAqB,CAAA;IACrB,2BAAe,CAAA;IACf,+BAAmB,CAAA;AACvB,CAAC,EARW,QAAQ,wBAAR,QAAQ,QAQnB;AAeD,SAAwB,IAAI,CAAC,KAAgB;;IACzC,MAAM,EAAE,IAAI,GAAG,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC;IAEtD,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE;QACrD,cAAc,EAAE,KAAK,CAAC,YAAY,KAAK,OAAO;QAC9C,SAAS,EAAE,IAAI,KAAK,OAAO;QAC3B,CAAC,MAAA,KAAK,CAAC,IAAI,mCAAI,QAAQ,CAAC,OAAO,CAAC,EAAE,IAAI;KACzC,CAAC,CAAC;IAEH,MAAM,IAAI,GAAG,OAAO,KAAK,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,8BAAC,cAAI,IAAC,IAAI,EAAE,KAAK,CAAC,IAAgB,EAAE,OAAO,EAAE,KAAK,CAAC,WAAW,GAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC;IAE9H,OAAO,CACH,wCAAM,SAAS,EAAE,OAAO;QACnB,CAAC,KAAK,CAAC,YAAY,KAAK,MAAM,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,IAAI;QAC9D,KAAK,CAAC,QAAQ;QACd,KAAK,CAAC,YAAY,KAAK,OAAO,IAAI,IAAI,CACpC,CACV,CAAC;AACN,CAAC","sourcesContent":["import classNames from 'classnames';\nimport React, { PropsWithChildren } from 'react';\n\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\n\nexport enum PillVariant {\n    Outlined = '--outlined',\n}\n\nexport enum PillType {\n    Primary = '--accent',\n    Secondary = '--accent-2',\n    Warning = '--warning',\n    Success = '--success',\n    Default = '--default',\n    Grey = '--grey',\n    Danger = '--danger',\n}\n\nexport interface PillProps extends PropsWithChildren<any> {\n    icon?: IconType | React.ReactNode;\n    size?: 'medium' | 'small';\n    iconPosition?: 'left' | 'right';\n    type?: PillType;\n\n    onClickIcon?: () => void | null;\n    variant?: PillVariant;\n    className?: string;\n\n    [x: string]: React.ReactNode;\n}\n\nexport default function Pill(props: PillProps) {\n    const { size = 'medium', variant, className } = props;\n\n    const classes = classNames('c-pill', variant, className, {\n        '--icon-right': props.iconPosition === 'right',\n        '--small': size === 'small',\n        [props.type ?? PillType.Default]: true,\n    });\n\n    const icon = typeof props.icon === 'string' ? <Icon icon={props.icon as IconType} onClick={props.onClickIcon} /> : props.icon;\n\n    return (\n        <span className={classes}>\n            {(props.iconPosition === 'left' || !props.iconPosition) && icon}\n            {props.children}\n            {props.iconPosition === 'right' && icon}\n        </span>\n    );\n}\n"]}

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

@@ -1,3 +1,4 @@
+import React from 'react';
 type StringScreenSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export interface PlaceholderProps {
     type: 'text' | 'circle' | 'block';
@@ -9,5 +10,5 @@ export interface PlaceholderProps {
     rounded?: 'md' | 'lg';
     noMarg?: boolean;
 }
-export default function Placeholder(props: PlaceholderProps): JSX.Element;
+export default function Placeholder(props: PlaceholderProps): React.JSX.Element;
 export {};

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

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Placeholder;
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importDefault(require("react"));
 function Placeholder(props) {
@@ -26,5 +27,4 @@ function Placeholder(props) {
             width: typeof props.w === 'number' ? props.w : undefined,
         }, className: classes }));
 }
-exports.default = Placeholder;
 //# sourceMappingURL=Placeholder.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Placeholder.js","sourceRoot":"/","sources":["src/components/generic/Placeholder.tsx"],"names":[],"mappings":";;;;;AAAA,4DAAoC;AACpC,kDAA0B;AAgB1B,SAAwB,WAAW,CAAC,KAAuB;IACvD,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,eAAe,EAAE;QACxC,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,CAAC,CAAC,KAAK,QAAQ,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC;QAC7D,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,CAAC,CAAC,KAAK,QAAQ,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC;QAC7D,QAAQ,EAAE,CAAC,KAAK,CAAC,MAAM;QACvB,QAAQ,EAAE,KAAK,CAAC,IAAI,KAAK,MAAM;QAC/B,UAAU,EAAE,KAAK,CAAC,IAAI,KAAK,QAAQ;QACnC,SAAS,EAAE,KAAK,CAAC,IAAI,KAAK,OAAO;QACjC,MAAM,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,IAAI,KAAK,CAAC,SAAS,KAAK,IAAI;QAC7D,MAAM,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,IAAI,KAAK,CAAC,SAAS,KAAK,IAAI;QAC7D,MAAM,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,IAAI,KAAK,CAAC,SAAS,KAAK,IAAI;QAC7D,MAAM,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,IAAI,KAAK,CAAC,SAAS,KAAK,IAAI;QAC7D,iBAAiB,EAAE,KAAK,CAAC,OAAO,KAAK,IAAI;QACzC,iBAAiB,EAAE,KAAK,CAAC,OAAO,KAAK,IAAI;QACzC,SAAS,EAAE,KAAK,CAAC,KAAK;KACzB,CAAC,CAAC;IAEH,OAAO,CACH,uCACI,KAAK,EAAE;YACH,MAAM,EAAE,OAAO,KAAK,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;YACzD,KAAK,EAAE,OAAO,KAAK,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;SAC3D,EACD,SAAS,EAAE,OAAO,GACpB,CACL,CAAC;AACN,CAAC;AA1BD,8BA0BC","sourcesContent":["import classNames from 'classnames';\nimport React from 'react';\n\ntype StringScreenSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface PlaceholderProps {\n    type: 'text' | 'circle' | 'block';\n    w?: StringScreenSize | number;\n    h?: StringScreenSize | number;\n    circleSize?: string;\n    blockSize?: string;\n    blink?: boolean;\n    rounded?: 'md' | 'lg';\n\n    noMarg?: boolean;\n}\n\nexport default function Placeholder(props: PlaceholderProps) {\n    const classes = classNames('c-placeholder', {\n        [`--${props.w}--w`]: typeof props.w !== 'number' && !!props.w,\n        [`--${props.h}--h`]: typeof props.h !== 'number' && !!props.h,\n        'u-marg': !props.noMarg,\n        '--text': props.type === 'text',\n        '--circle': props.type === 'circle',\n        '--block': props.type === 'block',\n        '--sm': props.circleSize === 'sm' || props.blockSize === 'sm',\n        '--md': props.circleSize === 'md' || props.blockSize === 'md',\n        '--lg': props.circleSize === 'lg' || props.blockSize === 'lg',\n        '--xl': props.circleSize === 'xl' || props.blockSize === 'xl',\n        '--rounded-light': props.rounded === 'md',\n        '--rounded-heavy': props.rounded === 'lg',\n        '--blink': props.blink,\n    });\n\n    return (\n        <div\n            style={{\n                height: typeof props.h === 'number' ? props.h : undefined,\n                width: typeof props.w === 'number' ? props.w : undefined,\n            }}\n            className={classes}\n        />\n    );\n}\n"]}
+{"version":3,"file":"Placeholder.js","sourceRoot":"/","sources":["src/components/generic/Placeholder.tsx"],"names":[],"mappings":";;;;;AAiBA,8BA0BC;AA3CD,4DAAoC;AACpC,kDAA0B;AAgB1B,SAAwB,WAAW,CAAC,KAAuB;IACvD,MAAM,OAAO,GAAG,IAAA,oBAAU,EAAC,eAAe,EAAE;QACxC,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,CAAC,CAAC,KAAK,QAAQ,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC;QAC7D,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,CAAC,CAAC,KAAK,QAAQ,IAAI,CAAC,CAAC,KAAK,CAAC,CAAC;QAC7D,QAAQ,EAAE,CAAC,KAAK,CAAC,MAAM;QACvB,QAAQ,EAAE,KAAK,CAAC,IAAI,KAAK,MAAM;QAC/B,UAAU,EAAE,KAAK,CAAC,IAAI,KAAK,QAAQ;QACnC,SAAS,EAAE,KAAK,CAAC,IAAI,KAAK,OAAO;QACjC,MAAM,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,IAAI,KAAK,CAAC,SAAS,KAAK,IAAI;QAC7D,MAAM,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,IAAI,KAAK,CAAC,SAAS,KAAK,IAAI;QAC7D,MAAM,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,IAAI,KAAK,CAAC,SAAS,KAAK,IAAI;QAC7D,MAAM,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,IAAI,KAAK,CAAC,SAAS,KAAK,IAAI;QAC7D,iBAAiB,EAAE,KAAK,CAAC,OAAO,KAAK,IAAI;QACzC,iBAAiB,EAAE,KAAK,CAAC,OAAO,KAAK,IAAI;QACzC,SAAS,EAAE,KAAK,CAAC,KAAK;KACzB,CAAC,CAAC;IAEH,OAAO,CACH,uCACI,KAAK,EAAE;YACH,MAAM,EAAE,OAAO,KAAK,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;YACzD,KAAK,EAAE,OAAO,KAAK,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;SAC3D,EACD,SAAS,EAAE,OAAO,GACpB,CACL,CAAC;AACN,CAAC","sourcesContent":["import classNames from 'classnames';\nimport React from 'react';\n\ntype StringScreenSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface PlaceholderProps {\n    type: 'text' | 'circle' | 'block';\n    w?: StringScreenSize | number;\n    h?: StringScreenSize | number;\n    circleSize?: string;\n    blockSize?: string;\n    blink?: boolean;\n    rounded?: 'md' | 'lg';\n\n    noMarg?: boolean;\n}\n\nexport default function Placeholder(props: PlaceholderProps) {\n    const classes = classNames('c-placeholder', {\n        [`--${props.w}--w`]: typeof props.w !== 'number' && !!props.w,\n        [`--${props.h}--h`]: typeof props.h !== 'number' && !!props.h,\n        'u-marg': !props.noMarg,\n        '--text': props.type === 'text',\n        '--circle': props.type === 'circle',\n        '--block': props.type === 'block',\n        '--sm': props.circleSize === 'sm' || props.blockSize === 'sm',\n        '--md': props.circleSize === 'md' || props.blockSize === 'md',\n        '--lg': props.circleSize === 'lg' || props.blockSize === 'lg',\n        '--xl': props.circleSize === 'xl' || props.blockSize === 'xl',\n        '--rounded-light': props.rounded === 'md',\n        '--rounded-heavy': props.rounded === 'lg',\n        '--blink': props.blink,\n    });\n\n    return (\n        <div\n            style={{\n                height: typeof props.h === 'number' ? props.h : undefined,\n                width: typeof props.w === 'number' ? props.w : undefined,\n            }}\n            className={classes}\n        />\n    );\n}\n"]}

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

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

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

@@ -1 +1 @@
-{"version":3,"file":"PlanpayPrice.js","sourceRoot":"/","sources":["src/components/generic/PlanpayPrice/PlanpayPrice.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iDAAmD;AACnD,2CAAkD;AAClD,sCAAuC;AACvC,+CAA4E;AAE5E,8DAAyC;AACzC,gHAAwF;AACxF,8CAA2C;AAE3C,MAAM,cAAc,GAAG,IAAA,mBAAQ,EAAC,GAAG,EAAE;IACjC,aAAO,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;AACrC,CAAC,EAAE,GAAG,CAAC,CAAC;AAQD,MAAM,YAAY,GAA0B,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE;;IAChF,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IACpC,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,iBAAiB,EAAE,GAAG,IAAA,iBAAU,GAAE,CAAC;IACvE,MAAM,EAAE,iBAAiB,EAAE,GAAG,IAAA,kBAAU,EAAC,wBAAa,CAAC,CAAC;IAExD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,UAAU,EAAE;YACZ,cAAc,EAAE,CAAC;SACpB;IACL,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,UAAU,EAAE;YACZ,cAAc,EAAE,CAAC;SACpB;IACL,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;IAE/B,IAAI,CAAC,oCAA0B,CAAC,QAAQ,EAAE;QAAE,OAAO,IAAI,CAAC;IAExD,IAAI,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAA;QAAE,OAAO,IAAI,CAAC;IAEjC,IAAI,CAAC,iBAAiB,CAAC,MAAA,MAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,YAAY,EAAE,0CAAE,QAAQ,EAAE,mCAAI,EAAE,CAAC;QAAE,OAAO,IAAI,CAAC;IAEzF,OAAO,CACH,uCACI,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,EAAE,4BAC7E,eAAe,6BACb,KAAK,gCACF,QAAQ,kCACN,OAAO,mCACP,GAAG,wCACE,GAAG,8BACZ,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,QAAQ,uBAChC,SAAS,0BACN,MAAM,GAC7B,CACL,CAAC;AACN,CAAC,CAAC;AArCW,QAAA,YAAY,gBAqCvB","sourcesContent":["import { BasketContext } from '@frontend/contexts';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport { planpay } from '@planpay/web';\nimport React, { FC, PropsWithChildren, useContext, useEffect } from 'react';\n\nimport usePlanpay from '@/hooks/Planpay';\nimport PlanPayPricePreviewFeature from '@/providers/feature/PlanPayPricePreviewFeature';\nimport { debounce } from '@/util/Debounce';\n\nconst debounceReload = debounce(() => {\n    planpay.pricePreview.refresh({});\n}, 150);\n\nexport interface PlanpayPriceProps extends PropsWithChildren<any> {\n    price: number;\n    checkin: string;\n    currency: string;\n}\n\nexport const PlanpayPrice: FC<PlanpayPriceProps> = ({ price, checkin, currency }) => {\n    const { hotel } = useCurrentHotel();\n    const { hasPlanpay, loadPlanPaySDK, shouldShowPlanpay } = usePlanpay();\n    const { selectedBasketRow } = useContext(BasketContext);\n\n    useEffect(() => {\n        if (hasPlanpay) {\n            loadPlanPaySDK();\n        }\n    }, [hasPlanpay]);\n\n    useEffect(() => {\n        if (hasPlanpay) {\n            debounceReload();\n        }\n    }, [price, currency, checkin]);\n\n    if (!PlanPayPricePreviewFeature.isActive()) return null;\n\n    if (!hotel?.planpay) return null;\n\n    if (!shouldShowPlanpay(selectedBasketRow?.getStartDate()?.toString() ?? '')) return null;\n\n    return (\n        <div\n            style={{ whiteSpace: 'nowrap', marginRight: -16, marginTop: -10, marginBottom: -8, marginLeft: -12 }}\n            data-planpay-data-type=\"price-preview\"\n            data-planpay-total-cost={price}\n            data-planpay-currency-code={currency}\n            data-planpay-redemption-date={checkin}\n            data-planpay-payment-deadline=\"0\"\n            data-planpay-total-minimum-deposit=\"0\"\n            data-planpay-merchant-id={hotel?.planpay?.username}\n            data-planpay-size=\"x-small\"\n            data-planpay-variant=\"text\"\n        />\n    );\n};\n"]}
+{"version":3,"file":"PlanpayPrice.js","sourceRoot":"/","sources":["src/components/generic/PlanpayPrice/PlanpayPrice.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iDAAmD;AACnD,2CAAkD;AAClD,sCAAuC;AACvC,+CAA4E;AAE5E,8DAAyC;AACzC,gHAAwF;AACxF,8CAA2C;AAE3C,MAAM,cAAc,GAAG,IAAA,mBAAQ,EAAC,GAAG,EAAE;IACjC,aAAO,CAAC,YAAY,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;AACrC,CAAC,EAAE,GAAG,CAAC,CAAC;AAQD,MAAM,YAAY,GAA0B,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE;;IAChF,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IACpC,MAAM,EAAE,UAAU,EAAE,cAAc,EAAE,iBAAiB,EAAE,GAAG,IAAA,iBAAU,GAAE,CAAC;IACvE,MAAM,EAAE,iBAAiB,EAAE,GAAG,IAAA,kBAAU,EAAC,wBAAa,CAAC,CAAC;IAExD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,UAAU,EAAE,CAAC;YACb,cAAc,EAAE,CAAC;QACrB,CAAC;IACL,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC;IAEjB,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,UAAU,EAAE,CAAC;YACb,cAAc,EAAE,CAAC;QACrB,CAAC;IACL,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;IAE/B,IAAI,CAAC,oCAA0B,CAAC,QAAQ,EAAE;QAAE,OAAO,IAAI,CAAC;IAExD,IAAI,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAA;QAAE,OAAO,IAAI,CAAC;IAEjC,IAAI,CAAC,iBAAiB,CAAC,MAAA,MAAA,iBAAiB,aAAjB,iBAAiB,uBAAjB,iBAAiB,CAAE,YAAY,EAAE,0CAAE,QAAQ,EAAE,mCAAI,EAAE,CAAC;QAAE,OAAO,IAAI,CAAC;IAEzF,OAAO,CACH,uCACI,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,CAAC,EAAE,EAAE,YAAY,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,CAAC,EAAE,EAAE,4BAC7E,eAAe,6BACb,KAAK,gCACF,QAAQ,kCACN,OAAO,mCACP,GAAG,wCACE,GAAG,8BACZ,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,0CAAE,QAAQ,uBAChC,SAAS,0BACN,MAAM,GAC7B,CACL,CAAC;AACN,CAAC,CAAC;AArCW,QAAA,YAAY,gBAqCvB","sourcesContent":["import { BasketContext } from '@frontend/contexts';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport { planpay } from '@planpay/web';\nimport React, { FC, PropsWithChildren, useContext, useEffect } from 'react';\n\nimport usePlanpay from '@/hooks/Planpay';\nimport PlanPayPricePreviewFeature from '@/providers/feature/PlanPayPricePreviewFeature';\nimport { debounce } from '@/util/Debounce';\n\nconst debounceReload = debounce(() => {\n    planpay.pricePreview.refresh({});\n}, 150);\n\nexport interface PlanpayPriceProps extends PropsWithChildren<any> {\n    price: number;\n    checkin: string;\n    currency: string;\n}\n\nexport const PlanpayPrice: FC<PlanpayPriceProps> = ({ price, checkin, currency }) => {\n    const { hotel } = useCurrentHotel();\n    const { hasPlanpay, loadPlanPaySDK, shouldShowPlanpay } = usePlanpay();\n    const { selectedBasketRow } = useContext(BasketContext);\n\n    useEffect(() => {\n        if (hasPlanpay) {\n            loadPlanPaySDK();\n        }\n    }, [hasPlanpay]);\n\n    useEffect(() => {\n        if (hasPlanpay) {\n            debounceReload();\n        }\n    }, [price, currency, checkin]);\n\n    if (!PlanPayPricePreviewFeature.isActive()) return null;\n\n    if (!hotel?.planpay) return null;\n\n    if (!shouldShowPlanpay(selectedBasketRow?.getStartDate()?.toString() ?? '')) return null;\n\n    return (\n        <div\n            style={{ whiteSpace: 'nowrap', marginRight: -16, marginTop: -10, marginBottom: -8, marginLeft: -12 }}\n            data-planpay-data-type=\"price-preview\"\n            data-planpay-total-cost={price}\n            data-planpay-currency-code={currency}\n            data-planpay-redemption-date={checkin}\n            data-planpay-payment-deadline=\"0\"\n            data-planpay-total-minimum-deposit=\"0\"\n            data-planpay-merchant-id={hotel?.planpay?.username}\n            data-planpay-size=\"x-small\"\n            data-planpay-variant=\"text\"\n        />\n    );\n};\n"]}

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

@@ -1,3 +1,5 @@
+import React from 'react';
+import BasketRow from '../../models/BasketRow';
 interface PromoCodeInputProps {
     value: string;
     onChange: (code: string) => void;
@@ -6,6 +8,7 @@ interface PromoCodeInputProps {
     className?: string;
     variant?: 'outlined' | 'text';
     hideValidText?: boolean;
+    row: BasketRow;
 }
-export default function PromoCodeInput(props: PromoCodeInputProps): JSX.Element;
+export default function PromoCodeInput(props: PromoCodeInputProps): React.JSX.Element;
 export {};

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

@@ -15,17 +15,28 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = PromoCodeInput;
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = __importStar(require("react"));
 const react_i18next_1 = require("react-i18next");
@@ -119,7 +130,7 @@ function PromoCodeInput(props) {
     };
     return (react_1.default.createElement("div", { ref: firstUpdate, className: props.className },
         react_1.default.createElement("div", { className: "u-pos-rel" },
-            props.variant === 'text' ? (react_1.default.createElement("input", { className: (0, classnames_1.default)(BookingWizardPromoCode_module_scss_1.default.container, { [BookingWizardPromoCode_module_scss_1.default['--error']]: promoCodeStatus === 'error', [BookingWizardPromoCode_module_scss_1.default['--success']]: promoCodeStatus === 'success' }), type: "text", value: (props.direct ? props.value : promoCode).toUpperCase().replace(' ', ''), placeholder: t(Translation_1.Translation.Step.Date.PromoCodePlaceHolder), onChange: setPromoCodeOnChange, onKeyPress: handleKeyPress })) : (react_1.default.createElement(TextBox_1.default, { value: (props.direct ? props.value : promoCode).toUpperCase().replace(' ', ''), placeholder: t(Translation_1.Translation.Step.Date.PromoCode), wide: true, validationStatus: promoCodeStatus, onChange: setPromoCodeOnChange, onKeyPress: handleKeyPress })),
+            props.variant === 'text' ? (react_1.default.createElement("input", { className: (0, classnames_1.default)(BookingWizardPromoCode_module_scss_1.default.container, { [BookingWizardPromoCode_module_scss_1.default['--error']]: promoCodeStatus === 'error', [BookingWizardPromoCode_module_scss_1.default['--success']]: promoCodeStatus === 'success' }), type: "text", value: (props.direct ? props.value : promoCode).toUpperCase(), placeholder: t(Translation_1.Translation.Step.Date.PromoCodePlaceHolder), onChange: setPromoCodeOnChange, onKeyPress: handleKeyPress })) : (react_1.default.createElement(TextBox_1.default, { value: (props.direct ? props.value : promoCode).toUpperCase(), placeholder: t(Translation_1.Translation.Step.Date.PromoCode), wide: true, validationStatus: promoCodeStatus, onChange: setPromoCodeOnChange, onKeyPress: handleKeyPress })),
             showPromoRemove && (react_1.default.createElement(Tooltip_1.default, { title: "Remove Promo code" },
                 react_1.default.createElement("div", { className: "people-picker--promo-icon", onClick: clearPromoCode },
                     react_1.default.createElement(Icon_1.default, { size: "24px", icon: Icon_1.IconType.Close, color: Color_1.Color.Grey })))),
@@ -135,9 +146,6 @@ function PromoCodeInput(props) {
                     value: props.value,
                 })))),
             props.valid === false && (react_1.default.createElement("div", { className: "u-marg-top" },
-                react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Alert }, t(Translation_1.Translation.Step.Date.PromoCodeValidation.Invalid, {
-                    value: props.value,
-                }))))))));
+                react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Alert }, props.row.getPromoCodeWarningMessage())))))));
 }
-exports.default = PromoCodeInput;
 //# sourceMappingURL=PromoCodeInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PromoCodeInput.js","sourceRoot":"/","sources":["src/components/generic/PromoCodeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\n\nimport styles from '@/components/generic/BookingWizard/BookingWizardPromoCode/BookingWizardPromoCode.module.scss';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport SmallSpinner from '@/components/generic/loader/SmallSpinner';\nimport Text, { TextType } from '@/components/generic/Text';\nimport Tooltip from '@/components/generic/Tooltip/Tooltip';\nimport { Color } from '@/util/Color';\n\nimport TextBox from './TextBox';\n\ninterface PromoCodeInputProps {\n    value: string;\n    onChange: (code: string) => void;\n\n    valid?: boolean;\n    direct?: boolean;\n    className?: string;\n    variant?: 'outlined' | 'text';\n\n    hideValidText?: boolean;\n}\n\nexport default function PromoCodeInput(props: PromoCodeInputProps) {\n    const { t } = useTranslation();\n\n    const [promoCode, setPromoCode] = useState(props.value ?? '');\n    const [showPromoSave, setShowPromoSave] = useState(false);\n    const [showPromoRemove, setShowPromoRemove] = useState(false);\n\n    const [valueChangedBeforeSubmit, setValueChangedBeforeSubmit] = useState(false);\n\n    const [pressedChange, setPressedChange] = useState(false);\n\n    const firstUpdate = useRef<HTMLDivElement | null>(null);\n\n    const promoCodeStatus: 'success' | 'error' | undefined = props.valid || props.valid === false ? (props.valid ? 'success' : 'error') : undefined;\n\n    useEffect(() => {\n        if (props.valid || props.valid === false) {\n            setShowPromoRemove(true);\n        }\n    }, [props.valid]);\n\n    useEffect(() => {\n        if (showPromoSave || showPromoRemove) {\n            setPressedChange(false);\n        }\n    }, [showPromoSave, showPromoRemove]);\n\n    useEffect(() => {\n        setValueChangedBeforeSubmit(true);\n        if (firstUpdate) {\n            if (promoCode) {\n                if (promoCode !== props.value) {\n                    if (props.direct) {\n                        updatePromoCode(promoCode, false);\n                    } else {\n                        setShowPromoSave(true);\n                    }\n                } else {\n                    setShowPromoRemove(true);\n                }\n            } else {\n                setShowPromoSave(false);\n                setShowPromoRemove(false);\n\n                if (promoCode !== '') {\n                    updatePromoCode('', false);\n                }\n            }\n        } else {\n            if (promoCode) {\n                setShowPromoRemove(true);\n            }\n        }\n    }, [promoCode]);\n\n    const updatePromoCode = (code: string, propagate = true) => {\n        if (code) {\n            if (props.direct) {\n                setShowPromoRemove(true);\n            } else {\n                setPressedChange(true);\n                setShowPromoSave(false);\n            }\n        }\n\n        if (propagate) {\n            setPromoCode(code);\n        }\n\n        props.onChange(code);\n    };\n\n    const handleKeyPress = (event: any) => {\n        if (event.key === 'Enter' && valueChangedBeforeSubmit) {\n            setValueChangedBeforeSubmit(false);\n            updatePromoCode(promoCode);\n        }\n    };\n    const clearPromoCode = () => {\n        return updatePromoCode('');\n    };\n    const setUpdatedPromoCode = () => {\n        return updatePromoCode(promoCode);\n    };\n    const setPromoCodeOnChange = (val: React.ChangeEvent<HTMLInputElement>) => {\n        setPromoCode(val.target.value);\n    };\n\n    return (\n        <div ref={firstUpdate} className={props.className}>\n            <div className=\"u-pos-rel\">\n                {props.variant === 'text' ? (\n                    <input\n                        className={classNames(styles.container, { [styles['--error']]: promoCodeStatus === 'error', [styles['--success']]: promoCodeStatus === 'success' })}\n                        type=\"text\"\n                        value={(props.direct ? props.value : promoCode).toUpperCase().replace(' ', '')}\n                        placeholder={t(Translation.Step.Date.PromoCodePlaceHolder)}\n                        onChange={setPromoCodeOnChange}\n                        onKeyPress={handleKeyPress}\n                    />\n                ) : (\n                    <TextBox\n                        value={(props.direct ? props.value : promoCode).toUpperCase().replace(' ', '')}\n                        placeholder={t(Translation.Step.Date.PromoCode)}\n                        wide\n                        validationStatus={promoCodeStatus}\n                        onChange={setPromoCodeOnChange}\n                        onKeyPress={handleKeyPress}\n                    />\n                )}\n\n                {showPromoRemove && (\n                    <Tooltip title=\"Remove Promo code\">\n                        <div className=\"people-picker--promo-icon\" onClick={clearPromoCode}>\n                            <Icon size=\"24px\" icon={IconType.Close} color={Color.Grey} />\n                        </div>\n                    </Tooltip>\n                )}\n                {showPromoSave && (\n                    <Tooltip title=\"Apply Code\">\n                        <div className=\"people-picker--promo-icon --success\" onClick={setUpdatedPromoCode}>\n                            <Icon size=\"24px\" icon={IconType.ArrowRight2} color={Color.Success} />\n                        </div>\n                    </Tooltip>\n                )}\n                {pressedChange && (\n                    <Tooltip title=\"Promo code loading\">\n                        <div className=\"people-picker--promo-icon\">\n                            <SmallSpinner />\n                        </div>\n                    </Tooltip>\n                )}\n            </div>\n            {!props.hideValidText && (\n                <>\n                    {props.valid === true && (\n                        <div className=\"u-marg-top\">\n                            <Text type={TextType.Small} color={Color.Success}>\n                                {t(Translation.Step.Date.PromoCodeValidation.Valid, {\n                                    value: props.value,\n                                })}\n                            </Text>\n                        </div>\n                    )}\n\n                    {props.valid === false && (\n                        <div className=\"u-marg-top\">\n                            <Text type={TextType.Small} color={Color.Alert}>\n                                {t(Translation.Step.Date.PromoCodeValidation.Invalid, {\n                                    value: props.value,\n                                })}\n                            </Text>\n                        </div>\n                    )}\n                </>\n            )}\n        </div>\n    );\n}\n"]}
+{"version":3,"file":"PromoCodeInput.js","sourceRoot":"/","sources":["src/components/generic/PromoCodeInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames';\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\n\nimport styles from '@/components/generic/BookingWizard/BookingWizardPromoCode/BookingWizardPromoCode.module.scss';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport SmallSpinner from '@/components/generic/loader/SmallSpinner';\nimport Text, { TextType } from '@/components/generic/Text';\nimport Tooltip from '@/components/generic/Tooltip/Tooltip';\nimport BasketRow from '@/models/BasketRow';\nimport { Color } from '@/util/Color';\n\nimport TextBox from './TextBox';\n\ninterface PromoCodeInputProps {\n    value: string;\n    onChange: (code: string) => void;\n\n    valid?: boolean;\n    direct?: boolean;\n    className?: string;\n    variant?: 'outlined' | 'text';\n\n    hideValidText?: boolean;\n    row: BasketRow;\n}\n\nexport default function PromoCodeInput(props: PromoCodeInputProps) {\n    const { t } = useTranslation();\n    const [promoCode, setPromoCode] = useState(props.value ?? '');\n    const [showPromoSave, setShowPromoSave] = useState(false);\n    const [showPromoRemove, setShowPromoRemove] = useState(false);\n\n    const [valueChangedBeforeSubmit, setValueChangedBeforeSubmit] = useState(false);\n\n    const [pressedChange, setPressedChange] = useState(false);\n\n    const firstUpdate = useRef<HTMLDivElement | null>(null);\n\n    const promoCodeStatus: 'success' | 'error' | undefined = props.valid || props.valid === false ? (props.valid ? 'success' : 'error') : undefined;\n\n    useEffect(() => {\n        if (props.valid || props.valid === false) {\n            setShowPromoRemove(true);\n        }\n    }, [props.valid]);\n\n    useEffect(() => {\n        if (showPromoSave || showPromoRemove) {\n            setPressedChange(false);\n        }\n    }, [showPromoSave, showPromoRemove]);\n\n    useEffect(() => {\n        setValueChangedBeforeSubmit(true);\n        if (firstUpdate) {\n            if (promoCode) {\n                if (promoCode !== props.value) {\n                    if (props.direct) {\n                        updatePromoCode(promoCode, false);\n                    } else {\n                        setShowPromoSave(true);\n                    }\n                } else {\n                    setShowPromoRemove(true);\n                }\n            } else {\n                setShowPromoSave(false);\n                setShowPromoRemove(false);\n\n                if (promoCode !== '') {\n                    updatePromoCode('', false);\n                }\n            }\n        } else {\n            if (promoCode) {\n                setShowPromoRemove(true);\n            }\n        }\n    }, [promoCode]);\n\n    const updatePromoCode = (code: string, propagate = true) => {\n        if (code) {\n            if (props.direct) {\n                setShowPromoRemove(true);\n            } else {\n                setPressedChange(true);\n                setShowPromoSave(false);\n            }\n        }\n\n        if (propagate) {\n            setPromoCode(code);\n        }\n\n        props.onChange(code);\n    };\n\n    const handleKeyPress = (event: any) => {\n        if (event.key === 'Enter' && valueChangedBeforeSubmit) {\n            setValueChangedBeforeSubmit(false);\n            updatePromoCode(promoCode);\n        }\n    };\n    const clearPromoCode = () => {\n        return updatePromoCode('');\n    };\n    const setUpdatedPromoCode = () => {\n        return updatePromoCode(promoCode);\n    };\n    const setPromoCodeOnChange = (val: React.ChangeEvent<HTMLInputElement>) => {\n        setPromoCode(val.target.value);\n    };\n\n    return (\n        <div ref={firstUpdate} className={props.className}>\n            <div className=\"u-pos-rel\">\n                {props.variant === 'text' ? (\n                    <input\n                        className={classNames(styles.container, { [styles['--error']]: promoCodeStatus === 'error', [styles['--success']]: promoCodeStatus === 'success' })}\n                        type=\"text\"\n                        value={(props.direct ? props.value : promoCode).toUpperCase()}\n                        placeholder={t(Translation.Step.Date.PromoCodePlaceHolder)}\n                        onChange={setPromoCodeOnChange}\n                        onKeyPress={handleKeyPress}\n                    />\n                ) : (\n                    <TextBox\n                        value={(props.direct ? props.value : promoCode).toUpperCase()}\n                        placeholder={t(Translation.Step.Date.PromoCode)}\n                        wide\n                        validationStatus={promoCodeStatus}\n                        onChange={setPromoCodeOnChange}\n                        onKeyPress={handleKeyPress}\n                    />\n                )}\n\n                {showPromoRemove && (\n                    <Tooltip title=\"Remove Promo code\">\n                        <div className=\"people-picker--promo-icon\" onClick={clearPromoCode}>\n                            <Icon size=\"24px\" icon={IconType.Close} color={Color.Grey} />\n                        </div>\n                    </Tooltip>\n                )}\n                {showPromoSave && (\n                    <Tooltip title=\"Apply Code\">\n                        <div className=\"people-picker--promo-icon --success\" onClick={setUpdatedPromoCode}>\n                            <Icon size=\"24px\" icon={IconType.ArrowRight2} color={Color.Success} />\n                        </div>\n                    </Tooltip>\n                )}\n                {pressedChange && (\n                    <Tooltip title=\"Promo code loading\">\n                        <div className=\"people-picker--promo-icon\">\n                            <SmallSpinner />\n                        </div>\n                    </Tooltip>\n                )}\n            </div>\n            {!props.hideValidText && (\n                <>\n                    {props.valid === true && (\n                        <div className=\"u-marg-top\">\n                            <Text type={TextType.Small} color={Color.Success}>\n                                {t(Translation.Step.Date.PromoCodeValidation.Valid, {\n                                    value: props.value,\n                                })}\n                            </Text>\n                        </div>\n                    )}\n\n                    {props.valid === false && (\n                        <div className=\"u-marg-top\">\n                            <Text type={TextType.Small} color={Color.Alert}>\n                                {props.row.getPromoCodeWarningMessage()}\n                            </Text>\n                        </div>\n                    )}\n                </>\n            )}\n        </div>\n    );\n}\n"]}