npm - @roomstay/frontend - Versions diffs - 2.1.6 → 2.1.8 - Mend

@roomstay/frontend 2.1.6 → 2.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (914) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PasswordBox.js","sourceRoot":"/","sources":["src/components/generic/PasswordBox/PasswordBox.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,~~6CAA+B~~;~~AAC/B~~,iCAA6C;AAC7C,uEAAgE;AAChE,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,IAAI,CAAC,CAAC;IAE3D,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,~~6BAAK~~,SAAS,EAAE,iCAAM,CAAC,WAAW;YAC9B,~~oBAAC~~,iBAAO,kBAAC,GAAG,EAAE,GAAG,IAAM,eAAe,EAAI;YAC1C,~~oBAAC~~,cAAI,IAAC,SAAS,EAAE,iCAAM,CAAC,aAAa,CAAC,EAAE,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC,eAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,eAAQ,CAAC,UAAU,EAAE,OAAO,EAAE,QAAQ,GAAI,CACtH,CACP,CACN,CAAC;AACN,CAAC,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { forwardRef, useState } from 'react';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\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(true);\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.Eye : IconType.EyeBlocked} onClick={onSwitch} />\n </div>\n </>\n );\n});\n"]}
1	+ {"version":3,"file":"PasswordBox.js","sourceRoot":"/","sources":["src/components/generic/PasswordBox/PasswordBox.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,iCAA6C;AAC7C,uEAAgE;AAChE,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,IAAI,CAAC,CAAC;IAE3D,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,GAAG,CAAC,CAAC,CAAC,eAAQ,CAAC,UAAU,EAAE,OAAO,EAAE,QAAQ,GAAI,CACtH,CACP,CACN,CAAC;AACN,CAAC,CAAC,CAAC","sourcesContent":["import React from 'react';\nimport { forwardRef, useState } from 'react';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\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(true);\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.Eye : IconType.EyeBlocked} onClick={onSwitch} />\n </div>\n </>\n );\n});\n"]}

package/dist/src/components/generic/PaymentCard/CardTypeSelect.js CHANGED Viewed

@@ -1,33 +1,10 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : 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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CardTypeSelect = void 0;
-const React = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const PaymentCard_1 = require("../../../models/PaymentCard");
 const CardTypeSelect_module_scss_1 = __importDefault(require("./CardTypeSelect.module.scss"));
 const classnames_1 = __importDefault(require("classnames"));
@@ -42,14 +19,18 @@ const cardType2HotelCardType = {
 };
 const CardTypeSelect = ({ value, onChange }) => {
     const { hotel } = (0, hooks_1.useCurrentHotel)();
-    return (React.createElement("div", { className: CardTypeSelect_module_scss_1.default.root, onChange: onChange }, Object.values(PaymentCard_1.ECardType)
-        .filter((cardType) => { var _a; return (_a = hotel.paymentCardTypes) === null || _a === void 0 ? void 0 : _a.includes(cardType2HotelCardType[cardType]); })
+    return (react_1.default.createElement("div", { className: CardTypeSelect_module_scss_1.default.root, onChange: onChange }, Object.values(PaymentCard_1.ECardType)
+        .filter((cardType) => {
+        var _a;
+        const paymentCardType = cardType2HotelCardType[cardType];
+        return paymentCardType && ((_a = hotel === null || hotel === void 0 ? void 0 : hotel.paymentCardTypes) === null || _a === void 0 ? void 0 : _a.includes(paymentCardType));
+    })
         .map((cardType) => {
         const iconUrl = (0, PaymentCardHelper_1.mapCardTypeToGraphic)(cardType).cardIconUrl;
-        return (React.createElement("div", { key: cardType, className: (0, classnames_1.default)(CardTypeSelect_module_scss_1.default.icon, {
+        return (react_1.default.createElement("div", { key: cardType, className: (0, classnames_1.default)(CardTypeSelect_module_scss_1.default.icon, {
                 [CardTypeSelect_module_scss_1.default.isSelected]: value === cardType,
             }) },
-            React.createElement("img", { src: iconUrl, alt: cardType })));
+            react_1.default.createElement("img", { src: iconUrl, alt: cardType })));
     })));
 };
 exports.CardTypeSelect = CardTypeSelect;

package/dist/src/components/generic/PaymentCard/CardTypeSelect.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CardTypeSelect.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/CardTypeSelect.tsx"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAAA,~~6CAA+B~~;~~AAE/B~~,sDAAiD;AACjD,8FAAkD;AAClD,4DAAoC;AACpC,gEAAgE;AAChE,2CAAkD;AAClD,uDAA+D;AAQ/D,MAAM,sBAAsB,GAExB;IACA,CAAC,uBAAS,CAAC,IAAI,CAAC,EAAE,wBAAgB,CAAC,IAAI;IACvC,CAAC,uBAAS,CAAC,UAAU,CAAC,EAAE,wBAAgB,CAAC,UAAU;IACnD,CAAC,uBAAS,CAAC,eAAe,CAAC,EAAE,wBAAgB,CAAC,eAAe;IAC7D,CAAC,uBAAS,CAAC,GAAG,CAAC,EAAE,wBAAgB,CAAC,GAAG;CACxC,CAAC;AACK,MAAM,cAAc,GAA4B,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC3E,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;~~IAEpC~~,OAAO,CACH,~~6BAAK~~,SAAS,EAAE,oCAAM,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,IAC1C,MAAM,CAAC,MAAM,CAAC,uBAAS,CAAC;SACpB,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE,~~WAAC~~,~~OAAA~~,MAAA,KAAK,~~CAAC~~,gBAAgB,0CAAE,QAAQ,CAAC,~~sBAAsB~~,CAAC,~~QAAQ~~,CAAC,CAAC,~~CAAA,EAAA,~~CAAC;~~SACxF~~,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;QACd,MAAM,OAAO,GAAG,IAAA,wCAAoB,EAAC,QAAQ,CAAC,CAAC,WAAW,CAAC;QAE3D,OAAO,CACH,~~6BACI~~,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,IAAA,oBAAU,EAAC,oCAAM,CAAC,IAAI,EAAE;gBAC/B,CAAC,oCAAM,CAAC,UAAU,CAAC,EAAE,KAAK,KAAK,QAAQ;aAC1C,CAAC;YAEF,~~6BAAK~~,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,GAAI,CAClC,CACT,CAAC;IACN,CAAC,CAAC,CACJ,CACT,CAAC;AACN,CAAC,CAAC;~~AAvBW~~,QAAA,cAAc,~~kBAuBzB~~","sourcesContent":["import * as React from 'react';\nimport { FC, FormEvent } from 'react';\nimport { ECardType } from '@/models/PaymentCard';\nimport styles from './CardTypeSelect.module.scss';\nimport classNames from 'classnames';\nimport { mapCardTypeToGraphic } from '@/util/PaymentCardHelper';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport { EPaymentCardType } from '@/models/Client/Hotel/Hotel';\n\nexport interface CardTypeSelectProps {\n value?: ECardType;\n onChange?: (e: FormEvent<HTMLDivElement>) => void;\n name?: string;\n}\n\nconst cardType2HotelCardType: {\n [cardType in ECardType]?: EPaymentCardType;\n} = {\n [ECardType.Visa]: EPaymentCardType.Visa,\n [ECardType.Mastercard]: EPaymentCardType.Mastercard,\n [ECardType.AmericanExpress]: EPaymentCardType.AmericanExpress,\n [ECardType.JCB]: EPaymentCardType.JCB,\n};\nexport const CardTypeSelect: FC<CardTypeSelectProps> = ({ value, onChange }) => {\n const { hotel } = useCurrentHotel();\n\n return (\n <div className={styles.root} onChange={onChange}>\n {Object.values(ECardType)\n .filter((cardType) => hotel.paymentCardTypes?.includes(~~cardType2HotelCardType[cardType]~~))\n .map((cardType) => {\n const iconUrl = mapCardTypeToGraphic(cardType).cardIconUrl;\n\n return (\n <div\n key={cardType}\n className={classNames(styles.icon, {\n [styles.isSelected]: value === cardType,\n })}\n >\n <img src={iconUrl} alt={cardType} />\n </div>\n );\n })}\n </div>\n );\n};\n"]}
1	+ {"version":3,"file":"CardTypeSelect.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/CardTypeSelect.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAE1B,sDAAiD;AACjD,8FAAkD;AAClD,4DAAoC;AACpC,gEAAgE;AAChE,2CAAkD;AAClD,uDAA+D;AAQ/D,MAAM,sBAAsB,GAExB;IACA,CAAC,uBAAS,CAAC,IAAI,CAAC,EAAE,wBAAgB,CAAC,IAAI;IACvC,CAAC,uBAAS,CAAC,UAAU,CAAC,EAAE,wBAAgB,CAAC,UAAU;IACnD,CAAC,uBAAS,CAAC,eAAe,CAAC,EAAE,wBAAgB,CAAC,eAAe;IAC7D,CAAC,uBAAS,CAAC,GAAG,CAAC,EAAE,wBAAgB,CAAC,GAAG;CACxC,CAAC;AACK,MAAM,cAAc,GAA4B,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC3E,MAAM,EAAE,KAAK,EAAE,GAAG,IAAA,uBAAe,GAAE,CAAC;IACpC,OAAO,CACH,uCAAK,SAAS,EAAE,oCAAM,CAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,IAC1C,MAAM,CAAC,MAAM,CAAC,uBAAS,CAAC;SACpB,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE;;QACjB,MAAM,eAAe,GAAG,sBAAsB,CAAC,QAAQ,CAAC,CAAC;QACzD,OAAO,eAAe,KAAI,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,gBAAgB,0CAAE,QAAQ,CAAC,eAAe,CAAC,CAAA,CAAC;IACjF,CAAC,CAAC;SACD,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE;QACd,MAAM,OAAO,GAAG,IAAA,wCAAoB,EAAC,QAAQ,CAAC,CAAC,WAAW,CAAC;QAE3D,OAAO,CACH,uCACI,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,IAAA,oBAAU,EAAC,oCAAM,CAAC,IAAI,EAAE;gBAC/B,CAAC,oCAAM,CAAC,UAAU,CAAC,EAAE,KAAK,KAAK,QAAQ;aAC1C,CAAC;YAEF,uCAAK,GAAG,EAAE,OAAO,EAAE,GAAG,EAAE,QAAQ,GAAI,CAClC,CACT,CAAC;IACN,CAAC,CAAC,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAzBW,QAAA,cAAc,kBAyBzB","sourcesContent":["import React from 'react';\nimport { FC, FormEvent } from 'react';\nimport { ECardType } from '@/models/PaymentCard';\nimport styles from './CardTypeSelect.module.scss';\nimport classNames from 'classnames';\nimport { mapCardTypeToGraphic } from '@/util/PaymentCardHelper';\nimport { useCurrentHotel } from '@frontend/hooks';\nimport { EPaymentCardType } from '@/models/Client/Hotel/Hotel';\n\nexport interface CardTypeSelectProps {\n value?: ECardType;\n onChange?: (e: FormEvent<HTMLDivElement>) => void;\n name?: string;\n}\n\nconst cardType2HotelCardType: {\n [cardType in ECardType]?: EPaymentCardType;\n} = {\n [ECardType.Visa]: EPaymentCardType.Visa,\n [ECardType.Mastercard]: EPaymentCardType.Mastercard,\n [ECardType.AmericanExpress]: EPaymentCardType.AmericanExpress,\n [ECardType.JCB]: EPaymentCardType.JCB,\n};\nexport const CardTypeSelect: FC<CardTypeSelectProps> = ({ value, onChange }) => {\n const { hotel } = useCurrentHotel();\n return (\n <div className={styles.root} onChange={onChange}>\n {Object.values(ECardType)\n .filter((cardType) => {\n const paymentCardType = cardType2HotelCardType[cardType];\n return paymentCardType && hotel?.paymentCardTypes?.includes(paymentCardType);\n })\n .map((cardType) => {\n const iconUrl = mapCardTypeToGraphic(cardType).cardIconUrl;\n\n return (\n <div\n key={cardType}\n className={classNames(styles.icon, {\n [styles.isSelected]: value === cardType,\n })}\n >\n <img src={iconUrl} alt={cardType} />\n </div>\n );\n })}\n </div>\n );\n};\n"]}

package/dist/src/components/generic/PaymentCard/PaymentCard.js CHANGED Viewed

@@ -1,33 +1,10 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : 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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PaymentCard = void 0;
-const React = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const PaymentCard_module_scss_1 = __importDefault(require("./PaymentCard.module.scss"));
 const RoomstayThemeEngine_1 = __importDefault(require("../../../providers/RoomstayThemeEngine"));
 const VGSHooks_1 = require("../../../hooks/VGSHooks");
@@ -58,23 +35,23 @@ const PaymentCard = ({ card }) => {
         styles: labelStyles,
     });
     const cardGraphic = (0, PaymentCardHelper_1.mapCardTypeToGraphic)(card.type);
-    return (React.createElement("div", { className: PaymentCard_module_scss_1.default.card },
-        React.createElement("img", { className: "u-w-100", src: cardGraphic.backgroundUrl, alt: "Payment card background color" }),
-        React.createElement("div", { className: PaymentCard_module_scss_1.default.chip },
-            React.createElement("img", { src: RoomstayThemeEngine_1.default.getImageAssetUrl() + 'chip.svg', alt: "Chip" })),
-        React.createElement("div", { className: PaymentCard_module_scss_1.default.type },
-            React.createElement("img", { src: cardGraphic.cardNameIconUrl, alt: `Payment card type ${card.type}` })),
-        React.createElement("div", { className: PaymentCard_module_scss_1.default.number },
-            isCardNumberLoading && React.createElement(SmallSpinner_1.default, null),
-            React.createElement("span", { ref: cardNumberTargetElement })),
-        React.createElement("div", { className: PaymentCard_module_scss_1.default.name },
-            React.createElement("div", { className: PaymentCard_module_scss_1.default.label }, "Card Holder Name"),
-            React.createElement("div", { className: PaymentCard_module_scss_1.default.cardholderName },
-                isCardholderNameLoading && React.createElement(SmallSpinner_1.default, null),
-                React.createElement("span", { ref: cardholderNameTargetElement }))),
-        React.createElement("div", { className: PaymentCard_module_scss_1.default.date },
-            React.createElement("div", { className: PaymentCard_module_scss_1.default.label }, "Expiry Date"),
-            card.expiry ? React.createElement("div", { className: PaymentCard_module_scss_1.default.value }, card.expiry) : React.createElement("br", { className: PaymentCard_module_scss_1.default.value }))));
+    return (react_1.default.createElement("div", { className: PaymentCard_module_scss_1.default.card },
+        react_1.default.createElement("img", { className: "u-w-100", src: cardGraphic.backgroundUrl, alt: "Payment card background color" }),
+        react_1.default.createElement("div", { className: PaymentCard_module_scss_1.default.chip },
+            react_1.default.createElement("img", { src: RoomstayThemeEngine_1.default.getImageAssetUrl() + 'chip.svg', alt: "Chip" })),
+        react_1.default.createElement("div", { className: PaymentCard_module_scss_1.default.type },
+            react_1.default.createElement("img", { src: cardGraphic.cardNameIconUrl, alt: `Payment card type ${card.type}` })),
+        react_1.default.createElement("div", { className: PaymentCard_module_scss_1.default.number },
+            isCardNumberLoading && react_1.default.createElement(SmallSpinner_1.default, null),
+            react_1.default.createElement("span", { ref: cardNumberTargetElement })),
+        react_1.default.createElement("div", { className: PaymentCard_module_scss_1.default.name },
+            react_1.default.createElement("div", { className: PaymentCard_module_scss_1.default.label }, "Card Holder Name"),
+            react_1.default.createElement("div", { className: PaymentCard_module_scss_1.default.cardholderName },
+                isCardholderNameLoading && react_1.default.createElement(SmallSpinner_1.default, null),
+                react_1.default.createElement("span", { ref: cardholderNameTargetElement }))),
+        react_1.default.createElement("div", { className: PaymentCard_module_scss_1.default.date },
+            react_1.default.createElement("div", { className: PaymentCard_module_scss_1.default.label }, "Expiry Date"),
+            card.expiry ? react_1.default.createElement("div", { className: PaymentCard_module_scss_1.default.value }, card.expiry) : react_1.default.createElement("br", { className: PaymentCard_module_scss_1.default.value }))));
 };
 exports.PaymentCard = PaymentCard;
 //# sourceMappingURL=PaymentCard.js.map

package/dist/src/components/generic/PaymentCard/PaymentCard.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PaymentCard.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/PaymentCard.tsx"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAAA,~~6CAA+B~~;~~AAC/B~~,wFAA+C;AAC/C,0FAAkE;AAClE,+CAA8C;AAE9C,0EAAkD;AAClD,gEAAgE;AAOzD,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAoB,EAAE,EAAE;IACtD,MAAM,WAAW,GAAG;QAChB,YAAY,EAAE;YACV,GAAG,EAAE,OAAO,6BAAmB,CAAC,YAAY,CAAC,mCAAmC,CAAC,GAAG;YACpF,aAAa,EAAE,MAAM;YACrB,cAAc,EAAE,MAAM;YACtB,aAAa,EAAE,OAAO;SACzB;QACD,WAAW,EAAE,MAAM;QACnB,aAAa,EAAE,MAAM;QACrB,aAAa,EAAE,MAAM;QACrB,aAAa,EAAE,OAAO;QACtB,KAAK,EAAE,OAAO;KACjB,CAAC;IAEF,MAAM,EAAE,SAAS,EAAE,uBAAuB,EAAE,SAAS,EAAE,mBAAmB,EAAE,GAAG,IAAA,qBAAU,EAAC;QACtF,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,IAAI,CAAC,UAAU;QACtB,MAAM,kCAAO,WAAW,KAAE,cAAc,EAAE,MAAM,GAAE;KACrD,CAAC,CAAC;IAEH,MAAM,EAAE,SAAS,EAAE,2BAA2B,EAAE,SAAS,EAAE,uBAAuB,EAAE,GAAG,IAAA,qBAAU,EAAC;QAC9F,IAAI,EAAE,WAAW;QACjB,KAAK,EAAE,IAAI,CAAC,IAAI;QAChB,MAAM,EAAE,WAAW;KACtB,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,IAAA,wCAAoB,EAAC,IAAI,CAAC,IAAiB,CAAC,CAAC;IAEjE,OAAO,CACH,~~6BAAK~~,SAAS,EAAE,iCAAM,CAAC,IAAI;QACvB,~~6BAAK~~,SAAS,EAAC,SAAS,EAAC,GAAG,EAAE,WAAW,CAAC,aAAa,EAAE,GAAG,EAAC,+BAA+B,GAAG;QAC/F,~~6BAAK~~,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,~~6BAAK~~,GAAG,EAAE,6BAAmB,CAAC,gBAAgB,EAAE,GAAG,UAAU,EAAE,GAAG,EAAC,MAAM,GAAG,CAC1E;QACN,~~6BAAK~~,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,~~6BAAK~~,GAAG,EAAE,WAAW,CAAC,eAAe,EAAE,GAAG,EAAE,qBAAqB,IAAI,CAAC,IAAI,EAAE,GAAI,CAC9E;QAEN,~~6BAAK~~,SAAS,EAAE,iCAAM,CAAC,MAAM;YACxB,mBAAmB,IAAI,~~oBAAC~~,sBAAY,OAAG;YACxC,~~8BAAM~~,GAAG,EAAE,uBAAuB,GAAS,CACzC;QACN,~~6BAAK~~,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,~~6BAAK~~,SAAS,EAAE,iCAAM,CAAC,KAAK,uBAAwB;YACpD,~~6BAAK~~,SAAS,EAAE,iCAAM,CAAC,cAAc;gBAChC,uBAAuB,IAAI,~~oBAAC~~,sBAAY,OAAG;gBAC5C,~~8BAAM~~,GAAG,EAAE,2BAA2B,GAAS,CAC7C,CACJ;QACN,~~6BAAK~~,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,~~6BAAK~~,SAAS,EAAE,iCAAM,CAAC,KAAK,kBAAmB;YAC9C,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,~~6BAAK~~,SAAS,EAAE,iCAAM,CAAC,KAAK,IAAG,IAAI,CAAC,MAAM,CAAO,CAAC,CAAC,CAAC,~~4BAAI~~,SAAS,EAAE,iCAAM,CAAC,KAAK,GAAI,CAChG,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAxDW,QAAA,WAAW,eAwDtB","sourcesContent":["import * as React from 'react';\nimport styles from './PaymentCard.module.scss';\nimport RoomstayThemeEngine from '@/providers/RoomstayThemeEngine';\nimport { useVgsShow } from '@/hooks/VGSHooks';\nimport { IRoomstayMemberCardFormInput } from '@/models/RoomstayMembers/IRoomstayMemberCard';\nimport SmallSpinner from '../loader/SmallSpinner';\nimport { mapCardTypeToGraphic } from '@/util/PaymentCardHelper';\nimport { ECardType } from '@/models/PaymentCard';\n\nexport interface PaymentCardProps {\n card: IRoomstayMemberCardFormInput;\n}\n\nexport const PaymentCard = ({ card }: PaymentCardProps) => {\n const labelStyles = {\n '@font-face': {\n src: `url(${RoomstayThemeEngine.wrapAssetUrl('assets/fonts/cadiz/Cadiz-Bold.otf')})`,\n 'font-weight': 'bold',\n 'font-display': 'swap',\n 'font-family': 'Cadiz',\n },\n 'font-size': '18px',\n 'line-height': '24px',\n 'font-weight': 'bold',\n 'font-family': 'Cadiz',\n color: 'white',\n };\n\n const { targetRef: cardNumberTargetElement, isLoading: isCardNumberLoading } = useVgsShow({\n name: 'credit-card',\n value: card.cardNumber,\n styles: { ...labelStyles, 'word-spacing': '16px' },\n });\n\n const { targetRef: cardholderNameTargetElement, isLoading: isCardholderNameLoading } = useVgsShow({\n name: 'card-name',\n value: card.name,\n styles: labelStyles,\n });\n\n const cardGraphic = mapCardTypeToGraphic(card.type as ECardType);\n\n return (\n <div className={styles.card}>\n <img className=\"u-w-100\" src={cardGraphic.backgroundUrl} alt=\"Payment card background color\" />\n <div className={styles.chip}>\n <img src={RoomstayThemeEngine.getImageAssetUrl() + 'chip.svg'} alt=\"Chip\" />\n </div>\n <div className={styles.type}>\n <img src={cardGraphic.cardNameIconUrl} alt={`Payment card type ${card.type}`} />\n </div>\n\n <div className={styles.number}>\n {isCardNumberLoading && <SmallSpinner />}\n <span ref={cardNumberTargetElement}></span>\n </div>\n <div className={styles.name}>\n <div className={styles.label}>Card Holder Name</div>\n <div className={styles.cardholderName}>\n {isCardholderNameLoading && <SmallSpinner />}\n <span ref={cardholderNameTargetElement}></span>\n </div>\n </div>\n <div className={styles.date}>\n <div className={styles.label}>Expiry Date</div>\n {card.expiry ? <div className={styles.value}>{card.expiry}</div> : <br className={styles.value} />}\n </div>\n </div>\n );\n};\n"]}
1	+ {"version":3,"file":"PaymentCard.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/PaymentCard.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,wFAA+C;AAC/C,0FAAkE;AAClE,+CAA8C;AAE9C,0EAAkD;AAClD,gEAAgE;AAOzD,MAAM,WAAW,GAAG,CAAC,EAAE,IAAI,EAAoB,EAAE,EAAE;IACtD,MAAM,WAAW,GAAG;QAChB,YAAY,EAAE;YACV,GAAG,EAAE,OAAO,6BAAmB,CAAC,YAAY,CAAC,mCAAmC,CAAC,GAAG;YACpF,aAAa,EAAE,MAAM;YACrB,cAAc,EAAE,MAAM;YACtB,aAAa,EAAE,OAAO;SACzB;QACD,WAAW,EAAE,MAAM;QACnB,aAAa,EAAE,MAAM;QACrB,aAAa,EAAE,MAAM;QACrB,aAAa,EAAE,OAAO;QACtB,KAAK,EAAE,OAAO;KACjB,CAAC;IAEF,MAAM,EAAE,SAAS,EAAE,uBAAuB,EAAE,SAAS,EAAE,mBAAmB,EAAE,GAAG,IAAA,qBAAU,EAAC;QACtF,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,IAAI,CAAC,UAAU;QACtB,MAAM,kCAAO,WAAW,KAAE,cAAc,EAAE,MAAM,GAAE;KACrD,CAAC,CAAC;IAEH,MAAM,EAAE,SAAS,EAAE,2BAA2B,EAAE,SAAS,EAAE,uBAAuB,EAAE,GAAG,IAAA,qBAAU,EAAC;QAC9F,IAAI,EAAE,WAAW;QACjB,KAAK,EAAE,IAAI,CAAC,IAAI;QAChB,MAAM,EAAE,WAAW;KACtB,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,IAAA,wCAAoB,EAAC,IAAI,CAAC,IAAiB,CAAC,CAAC;IAEjE,OAAO,CACH,uCAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;QACvB,uCAAK,SAAS,EAAC,SAAS,EAAC,GAAG,EAAE,WAAW,CAAC,aAAa,EAAE,GAAG,EAAC,+BAA+B,GAAG;QAC/F,uCAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,uCAAK,GAAG,EAAE,6BAAmB,CAAC,gBAAgB,EAAE,GAAG,UAAU,EAAE,GAAG,EAAC,MAAM,GAAG,CAC1E;QACN,uCAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,uCAAK,GAAG,EAAE,WAAW,CAAC,eAAe,EAAE,GAAG,EAAE,qBAAqB,IAAI,CAAC,IAAI,EAAE,GAAI,CAC9E;QAEN,uCAAK,SAAS,EAAE,iCAAM,CAAC,MAAM;YACxB,mBAAmB,IAAI,8BAAC,sBAAY,OAAG;YACxC,wCAAM,GAAG,EAAE,uBAAuB,GAAS,CACzC;QACN,uCAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,uCAAK,SAAS,EAAE,iCAAM,CAAC,KAAK,uBAAwB;YACpD,uCAAK,SAAS,EAAE,iCAAM,CAAC,cAAc;gBAChC,uBAAuB,IAAI,8BAAC,sBAAY,OAAG;gBAC5C,wCAAM,GAAG,EAAE,2BAA2B,GAAS,CAC7C,CACJ;QACN,uCAAK,SAAS,EAAE,iCAAM,CAAC,IAAI;YACvB,uCAAK,SAAS,EAAE,iCAAM,CAAC,KAAK,kBAAmB;YAC9C,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,uCAAK,SAAS,EAAE,iCAAM,CAAC,KAAK,IAAG,IAAI,CAAC,MAAM,CAAO,CAAC,CAAC,CAAC,sCAAI,SAAS,EAAE,iCAAM,CAAC,KAAK,GAAI,CAChG,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAxDW,QAAA,WAAW,eAwDtB","sourcesContent":["import React from 'react';\nimport styles from './PaymentCard.module.scss';\nimport RoomstayThemeEngine from '@/providers/RoomstayThemeEngine';\nimport { useVgsShow } from '@/hooks/VGSHooks';\nimport { IRoomstayMemberCardFormInput } from '@/models/RoomstayMembers/IRoomstayMemberCard';\nimport SmallSpinner from '../loader/SmallSpinner';\nimport { mapCardTypeToGraphic } from '@/util/PaymentCardHelper';\nimport { ECardType } from '@/models/PaymentCard';\n\nexport interface PaymentCardProps {\n card: IRoomstayMemberCardFormInput;\n}\n\nexport const PaymentCard = ({ card }: PaymentCardProps) => {\n const labelStyles = {\n '@font-face': {\n src: `url(${RoomstayThemeEngine.wrapAssetUrl('assets/fonts/cadiz/Cadiz-Bold.otf')})`,\n 'font-weight': 'bold',\n 'font-display': 'swap',\n 'font-family': 'Cadiz',\n },\n 'font-size': '18px',\n 'line-height': '24px',\n 'font-weight': 'bold',\n 'font-family': 'Cadiz',\n color: 'white',\n };\n\n const { targetRef: cardNumberTargetElement, isLoading: isCardNumberLoading } = useVgsShow({\n name: 'credit-card',\n value: card.cardNumber,\n styles: { ...labelStyles, 'word-spacing': '16px' },\n });\n\n const { targetRef: cardholderNameTargetElement, isLoading: isCardholderNameLoading } = useVgsShow({\n name: 'card-name',\n value: card.name,\n styles: labelStyles,\n });\n\n const cardGraphic = mapCardTypeToGraphic(card.type as ECardType);\n\n return (\n <div className={styles.card}>\n <img className=\"u-w-100\" src={cardGraphic.backgroundUrl} alt=\"Payment card background color\" />\n <div className={styles.chip}>\n <img src={RoomstayThemeEngine.getImageAssetUrl() + 'chip.svg'} alt=\"Chip\" />\n </div>\n <div className={styles.type}>\n <img src={cardGraphic.cardNameIconUrl} alt={`Payment card type ${card.type}`} />\n </div>\n\n <div className={styles.number}>\n {isCardNumberLoading && <SmallSpinner />}\n <span ref={cardNumberTargetElement}></span>\n </div>\n <div className={styles.name}>\n <div className={styles.label}>Card Holder Name</div>\n <div className={styles.cardholderName}>\n {isCardholderNameLoading && <SmallSpinner />}\n <span ref={cardholderNameTargetElement}></span>\n </div>\n </div>\n <div className={styles.date}>\n <div className={styles.label}>Expiry Date</div>\n {card.expiry ? <div className={styles.value}>{card.expiry}</div> : <br className={styles.value} />}\n </div>\n </div>\n );\n};\n"]}

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

@@ -36,8 +36,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PaymentCardInput = void 0;
-const React = __importStar(require("react"));
-const react_1 = require("react");
+const react_1 = __importDefault(require("react"));
+const react_2 = require("react");
 const PaymentCardInput_module_scss_1 = __importDefault(require("./PaymentCardInput.module.scss"));
 const Text_1 = __importStar(require("../Text"));
 const Color_1 = require("../../../util/Color");
@@ -48,17 +48,17 @@ const BEButton_1 = __importDefault(require("../BEButton"));
 const AutoAutoHeight_1 = __importDefault(require("../../../animations/AutoAutoHeight"));
 const Alert_1 = __importStar(require("../Alert"));
 const Icon_1 = require("../Icon/Icon");
-const auth_1 = require("@aws-amplify/auth");
 const VGSHooks_1 = require("../../../hooks/VGSHooks");
 const LoggedInUserHook_1 = require("../../../hooks/LoggedInUserHook");
 const Fade_1 = __importDefault(require("../../../animations/Fade"));
+const AsyncAuth_1 = require("../../../util/AsyncAuth");
 const PaymentCardInput = ({ card, onSubmit, onDeleteClicked, onMarkedAsDefaultClicked }) => {
     const { user, fullName } = (0, LoggedInUserHook_1.useMember)();
-    const [errors, setErrors] = (0, react_1.useState)({});
-    const [cardType, setCardType] = (0, react_1.useState)(null);
-    const [isSavingVGSDetails, setIsSavingVGSDetails] = (0, react_1.useState)(false);
-    const [isDeletingCard, setIsDeletingCard] = (0, react_1.useState)(false);
-    const [isMarkingAsDefault, setIsMarkingAsDefault] = (0, react_1.useState)(false);
+    const [errors, setErrors] = (0, react_2.useState)({});
+    const [cardType, setCardType] = (0, react_2.useState)(null);
+    const [isSavingVGSDetails, setIsSavingVGSDetails] = (0, react_2.useState)(false);
+    const [isDeletingCard, setIsDeletingCard] = (0, react_2.useState)(false);
+    const [isMarkingAsDefault, setIsMarkingAsDefault] = (0, react_2.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 css = {
@@ -85,24 +85,39 @@ const PaymentCardInput = ({ card, onSubmit, onDeleteClicked, onMarkedAsDefaultCl
                 disabled: inputsDisabled,
             },
         },
-        { name: 'card-name', label: 'Card Name', type: 'text', vgsProps: { validations: ['required'], css, disabled: inputsDisabled, placeholder: fullName } },
+        {
+            name: 'card-name',
+            label: 'Card Name',
+            type: 'text',
+            vgsProps: { validations: ['required'], css, disabled: inputsDisabled, placeholder: fullName },
+        },
         {
             name: 'expiration-date',
             label: 'Expiration Date',
             type: 'card-expiration-date',
-            vgsProps: { validations: ['required', 'validCardExpirationDate'], css, disabled: inputsDisabled, placeholder: '12/27' },
+            vgsProps: {
+                validations: ['required', 'validCardExpirationDate'],
+                css,
+                disabled: inputsDisabled,
+                placeholder: '12/27',
+            },
         },
         {
             name: 'security-code',
             label: 'Security Code',
             type: 'card-security-code',
-            vgsProps: { validations: ['required', 'validCardSecurityCode'], css, disabled: inputsDisabled, placeholder: '552' },
+            vgsProps: {
+                validations: ['required', 'validCardSecurityCode'],
+                css,
+                disabled: inputsDisabled,
+                placeholder: '552',
+            },
         },
     ]);
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         triggerFieldUpdate();
     }, [card]);
-    (0, react_1.useEffect)(() => {
+    (0, react_2.useEffect)(() => {
         if (cardNumber === null || cardNumber === void 0 ? void 0 : cardNumber.state.cardType) {
             setCardType(cardNumber.state.cardType);
         }
@@ -130,10 +145,11 @@ const PaymentCardInput = ({ card, onSubmit, onDeleteClicked, onMarkedAsDefaultCl
         });
         setErrors(newErrors);
     };
-    const onChangeSubmit = () => {
+    const onChangeSubmit = () => __awaiter(void 0, void 0, void 0, function* () {
+        const Auth = yield (0, AsyncAuth_1.getAuth)();
         if (vgsForm) {
             setIsSavingVGSDetails(true);
-            auth_1.Auth.currentAuthenticatedUser().then((cognitoData) => {
+            Auth.currentAuthenticatedUser().then((cognitoData) => {
                 const jwtToken = cognitoData.signInUserSession.idToken.jwtToken;
                 vgsForm.submit('/members/vgs-hide', {
                     serializer: 'deep',
@@ -151,7 +167,6 @@ const PaymentCardInput = ({ card, onSubmit, onDeleteClicked, onMarkedAsDefaultCl
                         });
                         return;
                     }
-                    console.log(cardData);
                     const expiration = (expMatch[1].length === 1 ? '0' : '') + expMatch[1] + (expMatch[2].length === 2 ? expMatch[2] : expMatch[2].substr(2));
                     const newCard = {
                         username: card.username,
@@ -162,7 +177,7 @@ const PaymentCardInput = ({ card, onSubmit, onDeleteClicked, onMarkedAsDefaultCl
                         cardNumber: cardData['credit-card'],
                         type: cardType,
                     };
-                    yield onSubmit(newCard);
+                    yield (onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(newCard));
                     vgsForm.reset();
                     setIsSavingVGSDetails(false);
                 }), (error) => {
@@ -174,7 +189,7 @@ const PaymentCardInput = ({ card, onSubmit, onDeleteClicked, onMarkedAsDefaultCl
         else {
             console.error('VGS not on element, problem has occurred');
         }
-    };
+    });
     const onDeleteCardClicked = () => {
         setIsDeletingCard(true);
         onDeleteClicked === null || onDeleteClicked === void 0 ? void 0 : onDeleteClicked(card).finally(() => {
@@ -187,41 +202,41 @@ const PaymentCardInput = ({ card, onSubmit, onDeleteClicked, onMarkedAsDefaultCl
             setIsMarkingAsDefault(false);
         });
     };
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { className: PaymentCardInput_module_scss_1.default['card-inputs'] },
-            React.createElement("div", { className: "u-marg-bottom--medium u-marg-top--heavy@l-" },
-                React.createElement(CardTypeSelect_1.CardTypeSelect, { value: cardType })),
-            React.createElement("div", { className: "u-margin-bottom" }, inputNames.map((name) => {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { className: PaymentCardInput_module_scss_1.default['card-inputs'] },
+            react_1.default.createElement("div", { className: "u-marg-bottom--medium u-marg-top--heavy@l-" },
+                react_1.default.createElement(CardTypeSelect_1.CardTypeSelect, { value: cardType || undefined })),
+            react_1.default.createElement("div", { className: "u-margin-bottom" }, inputNames.map((name) => {
                 const errorMessage = errors[name];
-                return (React.createElement(AutoAutoHeight_1.default, { open: !!errorMessage, key: name },
-                    React.createElement("div", { className: "u-flex" },
-                        React.createElement(Alert_1.default, { type: Alert_1.AlertType.Danger, icon: Icon_1.IconType.Error },
-                            React.createElement(Text_1.default, { type: Text_1.TextType.Small }, errorMessage)))));
+                return (react_1.default.createElement(AutoAutoHeight_1.default, { open: !!errorMessage, key: name },
+                    react_1.default.createElement("div", { className: "u-flex" },
+                        react_1.default.createElement(Alert_1.default, { type: Alert_1.AlertType.Danger, icon: Icon_1.IconType.Error },
+                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small }, errorMessage)))));
             })),
-            React.createElement("div", { className: "u-marg-bottom" },
-                React.createElement("div", { className: "u-marg-bottom--light" },
-                    React.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Navy, bold: true }, "Card Number")),
-                React.createElement("div", { className: cardNumber.getClasses(), ref: cardNumber.ref })),
-            React.createElement("div", { className: "u-marg-bottom" },
-                React.createElement(InputGroup_1.default, { dimensions: "2/2" },
-                    React.createElement(React.Fragment, null,
-                        React.createElement("div", { className: "u-marg-bottom--light" },
-                            React.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Navy, bold: true }, "Expiry Month / Year")),
-                        React.createElement("div", { className: expiryDate.getClasses(), ref: expiryDate.ref })),
-                    React.createElement(React.Fragment, null,
-                        React.createElement("div", { className: "u-marg-bottom--light" },
-                            React.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Navy, bold: true }, "Security code")),
-                        React.createElement("div", { className: securityCode.getClasses(), ref: securityCode.ref })))),
-            React.createElement("div", { className: "u-marg-bottom" },
-                React.createElement("div", { className: "u-marg-bottom--light" },
-                    React.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Navy, bold: true }, "Name on Credit Card")),
-                React.createElement("div", { className: cardHolder.getClasses(), ref: cardHolder.ref })),
-            React.createElement("div", { className: "u-marg-bottom" }, (card === null || card === void 0 ? void 0 : card.cardId) ? (React.createElement(BEButton_1.default, { className: "u-marg-top--heavier@l u-marg-top--heavy@l- u-flex u-flex-justify-center", isLoading: isDeletingCard, textColor: Color_1.Color.Danger, isText: true, icon: Icon_1.IconType.Delete, onClick: onDeleteCardClicked, stopIconAnimation: true }, "Delete Card")) : (React.createElement(BEButton_1.default, { className: "u-marg-top--heavier@l u-marg-top--heavy@l- u-flex u-flex-justify-center", isLoading: isSavingVGSDetails, rounded: true, primary: true, filled: true, mobileWidth: true, onClick: onChangeSubmit }, "Save Card")))),
-        React.createElement(Fade_1.default, { open: !!(card === null || card === void 0 ? void 0 : card.cardId) },
-            React.createElement("div", { className: PaymentCardInput_module_scss_1.default['card-large'] },
-                React.createElement(PaymentCard_1.PaymentCard, { card: card }),
-                React.createElement("div", { className: "u-marg-top u-marg-top--heavy@l-" },
-                    React.createElement(BEButton_1.default, { onClick: onMarkAsDefault, isLoading: isMarkingAsDefault, disabled: isCardDefault, filled: true, primary: true, size: 'small' }, "Mark as Default"))))));
+            react_1.default.createElement("div", { className: "u-marg-bottom" },
+                react_1.default.createElement("div", { className: "u-marg-bottom--light" },
+                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Navy, bold: true }, "Card Number")),
+                react_1.default.createElement("div", { className: cardNumber.getClasses(), ref: cardNumber.ref })),
+            react_1.default.createElement("div", { className: "u-marg-bottom" },
+                react_1.default.createElement(InputGroup_1.default, { dimensions: "2/2" },
+                    react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement("div", { className: "u-marg-bottom--light" },
+                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Navy, bold: true }, "Expiry Month / Year")),
+                        react_1.default.createElement("div", { className: expiryDate.getClasses(), ref: expiryDate.ref })),
+                    react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement("div", { className: "u-marg-bottom--light" },
+                            react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Navy, bold: true }, "Security code")),
+                        react_1.default.createElement("div", { className: securityCode.getClasses(), ref: securityCode.ref })))),
+            react_1.default.createElement("div", { className: "u-marg-bottom" },
+                react_1.default.createElement("div", { className: "u-marg-bottom--light" },
+                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Navy, bold: true }, "Name on Credit Card")),
+                react_1.default.createElement("div", { className: cardHolder.getClasses(), ref: cardHolder.ref })),
+            react_1.default.createElement("div", { className: "u-marg-bottom" }, (card === null || card === void 0 ? void 0 : card.cardId) ? (react_1.default.createElement(BEButton_1.default, { className: "u-marg-top--heavier@l u-marg-top--heavy@l- u-flex u-flex-justify-center", isLoading: isDeletingCard, textColor: Color_1.Color.Danger, isText: true, icon: Icon_1.IconType.Delete, onClick: onDeleteCardClicked, stopIconAnimation: true }, "Delete Card")) : (react_1.default.createElement(BEButton_1.default, { className: "u-marg-top--heavier@l u-marg-top--heavy@l- u-flex u-flex-justify-center", isLoading: isSavingVGSDetails, rounded: true, primary: true, filled: true, mobileWidth: true, onClick: onChangeSubmit }, "Save Card")))),
+        react_1.default.createElement(Fade_1.default, { open: !!(card === null || card === void 0 ? void 0 : card.cardId) },
+            react_1.default.createElement("div", { className: PaymentCardInput_module_scss_1.default['card-large'] },
+                react_1.default.createElement(PaymentCard_1.PaymentCard, { card: card }),
+                react_1.default.createElement("div", { className: "u-marg-top u-marg-top--heavy@l-" },
+                    react_1.default.createElement(BEButton_1.default, { onClick: onMarkAsDefault, isLoading: isMarkingAsDefault, disabled: isCardDefault, filled: true, primary: true, size: "small" }, "Mark as Default"))))));
 };
 exports.PaymentCardInput = PaymentCardInput;
 //# sourceMappingURL=PaymentCardInput.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"PaymentCardInput.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/PaymentCardInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { FC, useEffect, useState } from 'react';\nimport styles from './PaymentCardInput.module.scss';\nimport Text, { TextType } from '@/components/generic/Text';\nimport { Color } from '@/util/Color';\nimport InputGroup from '@/components/generic/InputGroup/InputGroup';\nimport { ECardType } from '@/models/PaymentCard';\nimport { PaymentCard as GenericPaymentCard } from '@/components/generic/PaymentCard/PaymentCard';\nimport { CardTypeSelect } from '@/components/generic/PaymentCard/CardTypeSelect';\n\nimport BEButton from '../BEButton';\n\nimport AutoAutoHeight from '@/animations/AutoAutoHeight';\nimport Alert, { AlertType } from '@/components/generic/Alert';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport { IRoomstayMemberCards } from '@roomstay/core';\nimport { Auth } from '@aws-amplify/auth';\nimport { useVgsCollect } from '@/hooks/VGSHooks';\nimport { useMember } from '@/hooks/LoggedInUserHook';\nimport FadeAnimation from '../../../animations/Fade';\nimport { IRoomstayMemberCardFormInput } from '@/models/RoomstayMembers/IRoomstayMemberCard';\n\nexport interface PaymentCardInputProps {\n card: IRoomstayMemberCardFormInput;\n onSubmit?: (card: IRoomstayMemberCards) => Promise<void>;\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\n const [errors, setErrors] = useState<{ [x: string]: string }>({});\n const [cardType, setCardType] = useState<ECardType>(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 name: 'credit-card',\n label: 'Credit Card',\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 { name: 'card-name', label: 'Card Name', type: 'text', vgsProps: { validations: ['required'], css, disabled: inputsDisabled, placeholder: fullName } },\n {\n name: 'expiration-date',\n label: 'Expiration Date',\n type: 'card-expiration-date',\n vgsProps: { validations: ['required', 'validCardExpirationDate'], css, disabled: inputsDisabled, placeholder: '12/27' },\n },\n {\n name: 'security-code',\n label: 'Security Code',\n type: 'card-security-code',\n vgsProps: { validations: ['required', 'validCardSecurityCode'], css, disabled: inputsDisabled, placeholder: '552' },\n },\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 = 'Credit Card';\n break;\n case 'expiration-date':\n name = 'Expiration Date';\n break;\n case 'security-code':\n name = 'Security Code';\n break;\n default:\n name = 'Card Name';\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 = (): void => {\n if (vgsForm) {\n setIsSavingVGSDetails(true);\n Auth.currentAuthenticatedUser().then((cognitoData) => {\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: ['Invalid - it must be in the format MM / YY or MM / YYYY'],\n },\n });\n return;\n }\n\n console.log(cardData);\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,\n securityCode: cardData['security-code'],\n expiry: expiration,\n name: cardData['card-name'],\n\n cardNumber: cardData['credit-card'],\n type: cardType,\n };\n\n await onSubmit(newCard);\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).finally(() => {\n setIsDeletingCard(false);\n });\n };\n\n const onMarkAsDefault = () => {\n setIsMarkingAsDefault(true);\n\n onMarkedAsDefaultClicked?.(card).finally(() => {\n setIsMarkingAsDefault(false);\n });\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} />\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 Card Number\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 Expiry Month / Year\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 Security code\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 Name on Credit Card\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={true}\n icon={IconType.Delete}\n onClick={onDeleteCardClicked}\n stopIconAnimation={true}\n >\n Delete Card\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={true}\n primary={true}\n filled={true}\n mobileWidth={true}\n onClick={onChangeSubmit}\n >\n Save Card\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={onMarkAsDefault} isLoading={isMarkingAsDefault} disabled={isCardDefault} filled={true} primary={true} size={'small'}>\n Mark as Default\n </BEButton>\n </div>\n </div>\n </FadeAnimation>\n </>\n );\n};\n"]}
1	+ {"version":3,"file":"PaymentCardInput.js","sourceRoot":"/","sources":["src/components/generic/PaymentCard/PaymentCardInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useRef } from 'react';\nimport { FC, useEffect, useState } from 'react';\nimport styles from './PaymentCardInput.module.scss';\nimport Text, { TextType } from '@/components/generic/Text';\nimport { Color } from '@/util/Color';\nimport InputGroup from '@/components/generic/InputGroup/InputGroup';\nimport { ECardType } from '@/models/PaymentCard';\nimport { PaymentCard as GenericPaymentCard } from '@/components/generic/PaymentCard/PaymentCard';\nimport { CardTypeSelect } from '@/components/generic/PaymentCard/CardTypeSelect';\n\nimport BEButton from '../BEButton';\n\nimport AutoAutoHeight from '@/animations/AutoAutoHeight';\nimport Alert, { AlertType } from '@/components/generic/Alert';\nimport { IconType } from '@/components/generic/Icon/Icon';\nimport { IRoomstayMemberCards } from '@roomstay/core';\nimport { useVgsCollect } from '@/hooks/VGSHooks';\nimport { useMember } from '@/hooks/LoggedInUserHook';\nimport FadeAnimation from '../../../animations/Fade';\nimport { IRoomstayMemberCardFormInput } from '@/models/RoomstayMembers/IRoomstayMemberCard';\nimport { getAuth } from '@/util/AsyncAuth';\n\nexport interface PaymentCardInputProps {\n card: IRoomstayMemberCardFormInput;\n onSubmit?: (card: IRoomstayMemberCards) => Promise<void>;\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\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 name: 'credit-card',\n label: 'Credit Card',\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: 'Card Name',\n type: 'text',\n vgsProps: { validations: ['required'], css, disabled: inputsDisabled, placeholder: fullName },\n },\n {\n name: 'expiration-date',\n label: 'Expiration Date',\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: 'Security Code',\n type: 'card-security-code',\n vgsProps: {\n validations: ['required', 'validCardSecurityCode'],\n css,\n disabled: inputsDisabled,\n placeholder: '552',\n },\n },\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 = 'Credit Card';\n break;\n case 'expiration-date':\n name = 'Expiration Date';\n break;\n case 'security-code':\n name = 'Security Code';\n break;\n default:\n name = 'Card Name';\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: ['Invalid - it must be in the format MM / YY or MM / YYYY'],\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 await onSubmit?.(newCard);\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 = () => {\n setIsMarkingAsDefault(true);\n\n onMarkedAsDefaultClicked?.(card as IRoomstayMemberCards).finally(() => {\n setIsMarkingAsDefault(false);\n });\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 Card Number\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 Expiry Month / Year\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 Security code\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 Name on Credit Card\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 Delete Card\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 Save Card\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={onMarkAsDefault} 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 CHANGED Viewed

@@ -1,5 +1,5 @@
 import { IconType } from './Icon/Icon';
-import * as React from 'react';
+import React from 'react';
 import { PropsWithChildren } from 'react';
 export declare enum PillVariant {
     Outlined = "--outlined"

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

@@ -1,34 +1,11 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : 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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PillType = exports.PillVariant = void 0;
 const Icon_1 = __importDefault(require("./Icon/Icon"));
-const React = __importStar(require("react"));
+const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
 var PillVariant;
 (function (PillVariant) {
@@ -45,15 +22,15 @@ var PillType;
     PillType["Danger"] = "--danger";
 })(PillType = exports.PillType || (exports.PillType = {}));
 function Pill(props) {
-    var _a, _b;
+    var _a;
     const { size = 'medium', variant, className } = props;
     const classes = (0, classnames_1.default)('c-pill', variant, className, {
         '--icon-right': props.iconPosition === 'right',
         '--small': size === 'small',
         [(_a = props.type) !== null && _a !== void 0 ? _a : PillType.Default]: true,
     });
-    const icon = typeof props.icon === 'string' ? React.createElement(Icon_1.default, { icon: props.icon, onClick: (_b = props.onClickIcon) !== null && _b !== void 0 ? _b : null }) : props.icon;
-    return (React.createElement("span", { className: classes },
+    const icon = typeof props.icon === 'string' ? react_1.default.createElement(Icon_1.default, { icon: props.icon, onClick: props.onClickIcon }) : props.icon;
+    return (react_1.default.createElement("span", { className: classes },
         (props.iconPosition === 'left' || !props.iconPosition) && icon,
         props.children,
         props.iconPosition === 'right' && icon));

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Pill.js","sourceRoot":"/","sources":["src/components/generic/Pill.tsx"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~AAAA,0EAAgE;AAChE,~~6CAA+B~~;~~AAG/B~~,4DAAoC;AAEpC,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,~~oBAAC~~,cAAI,IAAC,IAAI,EAAE,KAAK,CAAC,IAAgB,EAAE,OAAO,EAAE,~~MAAA,~~KAAK,CAAC,WAAW,~~mCAAI,IAAI,~~GAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC;~~IAEtI~~,OAAO,CACH,~~8BAAM~~,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 Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport * as React from 'react';\nimport { PropsWithChildren } from 'react';\n\nimport classNames from 'classnames';\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 ~~?? null~~} /> : 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"]}
1	+ {"version":3,"file":"Pill.js","sourceRoot":"/","sources":["src/components/generic/Pill.tsx"],"names":[],"mappings":";;;;;;AAAA,0EAAgE;AAChE,kDAA0B;AAG1B,4DAAoC;AAEpC,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 Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport React from 'react';\nimport { PropsWithChildren } from 'react';\n\nimport classNames from 'classnames';\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"]}