@roomstay/frontend 1.6.1 → 2.0.0-2

package/dist/src/pages/account/Details/AccountDetailsProfilePage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountDetailsProfilePage.js","sourceRoot":"/","sources":["src/pages/account/Details/AccountDetailsProfilePage.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;AAAA,+BAA+B;AAC/B,iCAA8C;AAE9C,0DAAmD;AACnD,0HAAmH;AACnH,0DAAmD;AACnD,uDAAwD;AACxD,4DAAqD;AACrD,kDAAyD;AACzD,wDAAiD;AACjD,mHAA4G;AAE5G,qDAAkE;AAClE,uDAAwC;AACxC,sCAAmC;AAGnC,iDAAgF;AAChF,yDAAgF;AAChF,qFAAkF;AAClF,oDAAiD;AACjD,iDAA+C;AAC/C,0DAAuD;AASvD,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE;IAC1D,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC;IAChD,OAAO,CACH,6BAAK,SAAS,EAAC,0BAA0B;QACrC,6BAAK,SAAS,EAAC,UAAU;YACrB,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,IACjC,KAAK,CACH,CACL;QACN,6BAAK,SAAS,EAAC,UAAU;YACpB,SAAS;YACT,CAAC,CAAC,KAAK,IAAI,CACR,2BAAG,SAAS,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAChD,KAAK,CAAC,OAAO,CACd,CACP;YAEA,CAAC,CAAC,IAAI,IAAI,CACP,oBAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,KAAK,EAAE,aAAK,CAAC,IAAI,IACxC,IAAI,CACF,CACV,CACC,CACJ,CACT,CAAC;AACN,CAAC,CAAC;AAOK,MAAM,yBAAyB,GAAG,GAAG,EAAE;IAC1C,MAAM,EAAE,cAAc,EAAE,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,GAAG,IAAA,kBAAU,EAAC,gCAAqB,CAAC,CAAC;IAC5G,MAAM,aAAa,GAAG,IAAA,kBAAU,EAAC,8BAAmB,CAAC,CAAC;IAEtD,MAAM,EAAE,CAAC,EAAE,GAAG,IAAA,8BAAc,GAAE,CAAC;IAE/B,MAAM,EACF,KAAK,EACL,QAAQ,EACR,SAAS,EAAE,EAAE,MAAM,EAAE,OAAO,EAAE,EAC9B,YAAY,EACZ,KAAK,EAAE,eAAe,EACtB,OAAO,GACV,GAAG,IAAA,yBAAO,EAAa;QACpB,IAAI,EAAE,UAAU;KACnB,CAAC,CAAC;IAEH,MAAM,uBAAuB,GAAG,CAAC,IAAsB,EAAuB,EAAE,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAEtH,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,cAAc,EAAE;YAChB,eAAe,CAAC,cAAc,CAAC,CAAC;SACnC;IACL,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;IAErB,MAAM,aAAa,GAAG,CAAC,MAAkB,EAAE,EAAE;QACzC,mBAAmB,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE;YAClC,aAAa,CAAC,eAAe,CAAC;gBAC1B,IAAI,EAAE,eAAQ,CAAC,KAAK;gBACpB,QAAQ,EAAE,oBAAC,cAAI,oCAAiC;gBAChD,GAAG,EAAE,GAAG;aACX,CAAC,CAAC;QACP,CAAC,CAAC,CAAC;IACP,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CAAC,OAAO,IAAI,eAAe,IAAI,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,CAAC;IAEvF,OAAO,CACH;QACI,6BAAK,SAAS,EAAC,uDAAuD;YAClE,oBAAC,uBAAI,IAAC,EAAE,EAAE,6BAAa,CAAC,IAAI,CAAC,IAAI;gBAC7B,oBAAC,kBAAQ,IAAC,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,eAAQ,CAAC,SAAS,EAAE,IAAI,EAAE,OAAO,IAC1D,CAAC,CAAC,yBAAW,CAAC,WAAW,CAAC,iBAAiB,CAAC,CACtC,CACR,CACL;QACN,6BAAK,SAAS,EAAC,wBAAwB;YACnC,oBAAC,kBAAQ,IAAC,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,IAAI,0BAE9B,CACT;QACN,8BAAM,QAAQ,EAAE,YAAY,CAAC,aAAa,CAAC;YACvC,6BAAK,SAAS,EAAC,KAAK;gBAChB,6BAAK,SAAS,EAAC,UAAU;oBACrB;wBACI,oBAAC,kBAAkB,IACf,KAAK,EAAC,YAAY,EAClB,SAAS,EACL,oBAAC,iBAAO,kBACJ,gBAAgB,EAAE,uBAAuB,CAAC,UAAU,CAAC,IACjD,QAAQ,CAAC,UAAU,EAAE;gCACrB,QAAQ,EAAE;oCACN,OAAO,EAAE,wBAAwB;oCACjC,KAAK,EAAE,IAAI;iCACd;6BACJ,CAAC,EACJ,EAEN,KAAK,EAAE,MAAM,CAAC,QAAQ,GACxB;wBACF,oBAAC,kBAAkB,IACf,KAAK,EAAC,WAAW,EACjB,SAAS,EACL,oBAAC,iBAAO,kBACJ,gBAAgB,EAAE,uBAAuB,CAAC,SAAS,CAAC,IAChD,QAAQ,CAAC,SAAS,EAAE;gCACpB,QAAQ,EAAE;oCACN,OAAO,EAAE,uBAAuB;oCAChC,KAAK,EAAE,IAAI;iCACd;6BACJ,CAAC,EACJ,EAEN,KAAK,EAAE,MAAM,CAAC,OAAO,GACvB;wBACF,oBAAC,kBAAkB,IACf,KAAK,EAAC,eAAe,EACrB,SAAS,EAAE,oBAAC,iBAAO,IAAC,gBAAgB,EAAE,uBAAuB,CAAC,OAAO,CAAC,EAAE,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,KAAK,GAAI,EACxI,KAAK,EAAE,MAAM,CAAC,KAAK,GACrB;wBACF,oBAAC,kBAAkB,IACf,KAAK,EAAC,cAAc,EACpB,SAAS,EACL,oBAAC,4BAAU,IACP,KAAK,EAAE;oCACH,OAAO,EAAE;wCACL,KAAK,EAAE,SAAS;wCAChB,OAAO,EAAE,0BAA0B;qCACtC;iCACJ,EACD,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,aAAa,EAClB,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;oCAClB,OAAO,CACH,oBAAC,kCAAwB,oBACjB,KAAK,IACT,QAAQ,EAAE,CAAC,CAAM,EAAE,EAAE;4CACjB,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;wCACtB,CAAC,EACD,gBAAgB,EAAE,uBAAuB,CAAC,aAAa,CAAC,IAC1D,CACL,CAAC;gCACN,CAAC,GACH,EAEN,KAAK,EAAE,MAAM,CAAC,WAAW,GAC3B;wBAEF,oBAAC,mBAAS,OAAG;wBAEb,oBAAC,kBAAkB,IACf,KAAK,EAAC,UAAU,EAChB,SAAS,EACL,oBAAC,yBAAW,kBACR,WAAW,EAAC,4FAAiB,IACzB,QAAQ,CAAC,UAAU,EAAE;gCACrB,OAAO,EAAE,gCAAmB;6BAC/B,CAAC,IACF,gBAAgB,EAAE,uBAAuB,CAAC,UAAU,CAAC,IACvD,EAEN,IAAI,EAAC,0EAA0E,EAC/E,KAAK,EAAE,MAAM,CAAC,QAAQ,GACxB;wBACF,oBAAC,kBAAkB,IACf,KAAK,EAAC,iBAAiB,EACvB,SAAS,EACL,oBAAC,yBAAW,kBACR,WAAW,EAAC,4FAAiB,IACzB,QAAQ,CAAC,gBAAgB,EAAE;gCAC3B,QAAQ,EAAE;oCACN,KAAK,EAAE,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC;oCAC1B,OAAO,EAAE,6BAA6B;iCACzC;gCACD,QAAQ,EAAE;oCACN,MAAM,EAAE,IAAA,4BAAe,EAAC,KAAK,CAAC,UAAU,CAAC,CAAC;iCAC7C;6BACJ,CAAC,IACF,gBAAgB,EAAE,uBAAuB,CAAC,gBAAgB,CAAC,IAC7D,EAEN,KAAK,EAAE,MAAM,CAAC,cAAc,GAC9B;wBAEF,oBAAC,mBAAS,OAAG;wBAEb,oBAAC,kBAAkB,IAAC,KAAK,EAAC,SAAS,EAAC,SAAS,EAAE,oBAAC,iBAAO,oBAAK,QAAQ,CAAC,iBAAiB,CAAC,EAAI,GAAI;wBAC/F,oBAAC,kBAAkB,IAAC,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,oBAAC,iBAAO,oBAAK,QAAQ,CAAC,cAAc,CAAC,EAAI,GAAI;wBACzF,oBAAC,kBAAkB,IAAC,KAAK,EAAC,eAAe,EAAC,SAAS,EAAE,oBAAC,iBAAO,oBAAK,QAAQ,CAAC,aAAa,CAAC,EAAI,GAAI;wBACjG,oBAAC,kBAAkB,IACf,KAAK,EAAC,SAAS,EACf,SAAS,EACL,oBAAC,4BAAU,IACP,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,iBAAiB,EACvB,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;oCAClB,MAAM,EAAE,GAAG,KAAc,KAAK,EAAd,IAAI,UAAK,KAAK,EAAxB,OAAgB,CAAQ,CAAC;oCAC/B,OAAO,oBAAC,yCAA+B,oBAAK,IAAI,EAAI,CAAC;gCACzD,CAAC,GACH,GAER,CACA,CACJ,CACJ;YAEN,6BAAK,SAAS,EAAC,gDAAgD;gBAC3D,oBAAC,uBAAI,IAAC,EAAE,EAAC,eAAe,EAAC,SAAS,EAAC,cAAc;oBAC7C,oBAAC,kBAAQ,iBAAkB,CACxB;gBACP,oBAAC,kBAAQ,IAAC,QAAQ,EAAE,kBAAkB,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAC,QAAQ,uBAEvG,CACT,CACH,CACR,CACN,CAAC;AACN,CAAC,CAAC;AA3LW,QAAA,yBAAyB,6BA2LpC","sourcesContent":["import * as React from 'react';\nimport { useContext, useEffect } from 'react';\n\nimport BEButton from 'components/generic/BEButton';\nimport EnhancedPhoneNumberField from 'components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField';\nimport Headline from 'components/generic/Headline';\nimport { IconType } from 'components/generic/Icon/Icon';\nimport LineBreak from 'components/generic/LineBreak';\nimport Text, { TextType } from 'components/generic/Text';\nimport TextBox from 'components/generic/TextBox';\nimport StepConfirmationCountrySelector from 'components/steps/confirmation/StepConfirmationCountrySelector';\n\nimport { Controller, FieldError, useForm } from 'react-hook-form';\nimport { Link } from 'react-router-dom';\nimport { Color } from 'util/Color';\nimport type { IRoomstayMember } from '@roomstay/core';\n\nimport { NotificationContext, RoomstayMemberContext } from '@frontend/contexts';\nimport { isPassWordMatch, passwordPatternRule } from '../../../util/Validation';\nimport { PasswordBox } from '../../../components/generic/PasswordBox/PasswordBox';\nimport { AccountRoutes } from '../AccountRoutes';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\n\ntype LabelAndInputGroupProps = {\n    component: React.ReactNode;\n    label: string;\n    hint?: string;\n    error?: FieldError;\n};\n\nconst LabelAndInputGroup = (props: LabelAndInputGroupProps) => {\n    const { label, component, hint, error } = props;\n    return (\n        <div className=\"row u-marg-bottom--heavy\">\n            <div className=\"col-md-4\">\n                <Text type={TextType.Small} bold={true}>\n                    {label}\n                </Text>\n            </div>\n            <div className=\"col-md-8\">\n                {component}\n                {!!error && (\n                    <p className=\"text-small\" style={{ color: '#ED4362' }}>\n                        {error.message}\n                    </p>\n                )}\n\n                {!!hint && (\n                    <Text type={TextType.Label} color={Color.Grey}>\n                        {hint}\n                    </Text>\n                )}\n            </div>\n        </div>\n    );\n};\n\ntype FormValues = IRoomstayMember & {\n    password: string;\n    passwordRepeat: string;\n};\n\nexport const AccountDetailsProfilePage = () => {\n    const { roomstayMember, loading: isLoadingMember, updateMemberDetails } = useContext(RoomstayMemberContext);\n    const notifications = useContext(NotificationContext);\n\n    const { t } = useTranslation();\n\n    const {\n        watch,\n        register,\n        formState: { errors, isDirty },\n        handleSubmit,\n        reset: resetFormValues,\n        control,\n    } = useForm<FormValues>({\n        mode: 'onChange',\n    });\n\n    const getErrorValidationClass = (name: keyof FormValues): 'error' | undefined => (errors[name] ? 'error' : undefined);\n\n    useEffect(() => {\n        if (roomstayMember) {\n            resetFormValues(roomstayMember);\n        }\n    }, [roomstayMember]);\n\n    const onSaveDetails = (values: FormValues) => {\n        updateMemberDetails(values).then(() => {\n            notifications.addNotification({\n                icon: IconType.Check,\n                children: <Text>Details saved succesfully</Text>,\n                ttl: 500,\n            });\n        });\n    };\n\n    const saveButtonDisabled = !isDirty || isLoadingMember || !!Object.keys(errors).length;\n\n    return (\n        <>\n            <div className=\"u-marg-top--heavy@m u-marg-top@- u-marg-bottom--heavy\">\n                <Link to={AccountRoutes.Home.path}>\n                    <BEButton isText={true} icon={IconType.ArrowLeft} size={'small'}>\n                        {t(Translation.Reservation.BackToYourAccount)}\n                    </BEButton>\n                </Link>\n            </div>\n            <div className=\"u-marg-bottom--heavy@m\">\n                <Headline size={'extra-large'} bold={true}>\n                    Profile Information\n                </Headline>\n            </div>\n            <form onSubmit={handleSubmit(onSaveDetails)}>\n                <div className=\"row\">\n                    <div className=\"col-md-8\">\n                        <div>\n                            <LabelAndInputGroup\n                                label=\"First Name\"\n                                component={\n                                    <TextBox\n                                        validationStatus={getErrorValidationClass('forename')}\n                                        {...register('forename', {\n                                            required: {\n                                                message: 'First name is required',\n                                                value: true,\n                                            },\n                                        })}\n                                    />\n                                }\n                                error={errors.forename}\n                            />\n                            <LabelAndInputGroup\n                                label=\"Last Name\"\n                                component={\n                                    <TextBox\n                                        validationStatus={getErrorValidationClass('surname')}\n                                        {...register('surname', {\n                                            required: {\n                                                message: 'Last name is required',\n                                                value: true,\n                                            },\n                                        })}\n                                    />\n                                }\n                                error={errors.surname}\n                            />\n                            <LabelAndInputGroup\n                                label=\"Email Address\"\n                                component={<TextBox validationStatus={getErrorValidationClass('email')} inputProps={{ disabled: true }} value={roomstayMember?.email} />}\n                                error={errors.email}\n                            />\n                            <LabelAndInputGroup\n                                label=\"Phone Number\"\n                                component={\n                                    <Controller\n                                        rules={{\n                                            pattern: {\n                                                value: /.*\\s\\d+/,\n                                                message: 'Phone Number is required',\n                                            },\n                                        }}\n                                        control={control}\n                                        name=\"phoneNumber\"\n                                        render={({ field }) => {\n                                            return (\n                                                <EnhancedPhoneNumberField\n                                                    {...field}\n                                                    onChange={(e: any) => {\n                                                        field.onChange(e);\n                                                    }}\n                                                    validationStatus={getErrorValidationClass('phoneNumber')}\n                                                />\n                                            );\n                                        }}\n                                    />\n                                }\n                                error={errors.phoneNumber}\n                            />\n\n                            <LineBreak />\n\n                            <LabelAndInputGroup\n                                label=\"Password\"\n                                component={\n                                    <PasswordBox\n                                        placeholder=\"•••••••••••••••\"\n                                        {...register('password', {\n                                            pattern: passwordPatternRule,\n                                        })}\n                                        validationStatus={getErrorValidationClass('password')}\n                                    />\n                                }\n                                hint=\"At least 8 characters long, case sensitive, can contain !$#%, no spaces.\"\n                                error={errors.password}\n                            />\n                            <LabelAndInputGroup\n                                label=\"Repeat Password\"\n                                component={\n                                    <PasswordBox\n                                        placeholder=\"•••••••••••••••\"\n                                        {...register('passwordRepeat', {\n                                            required: {\n                                                value: !!watch('password'),\n                                                message: 'Repeat Password is required',\n                                            },\n                                            validate: {\n                                                isSame: isPassWordMatch(watch('password')),\n                                            },\n                                        })}\n                                        validationStatus={getErrorValidationClass('passwordRepeat')}\n                                    />\n                                }\n                                error={errors.passwordRepeat}\n                            />\n\n                            <LineBreak />\n\n                            <LabelAndInputGroup label=\"Address\" component={<TextBox {...register('address.address')} />} />\n                            <LabelAndInputGroup label=\"City\" component={<TextBox {...register('address.city')} />} />\n                            <LabelAndInputGroup label=\"ZIP/Post Code\" component={<TextBox {...register('address.zip')} />} />\n                            <LabelAndInputGroup\n                                label=\"Country\"\n                                component={\n                                    <Controller\n                                        control={control}\n                                        name={'address.country'}\n                                        render={({ field }) => {\n                                            const { ref, ...rest } = field;\n                                            return <StepConfirmationCountrySelector {...rest} />;\n                                        }}\n                                    />\n                                }\n                            />\n                        </div>\n                    </div>\n                </div>\n\n                <div className=\"u-flex justify-content-start u-marg-top--heavy\">\n                    <Link to=\"/account/home\" className=\"u-marg-right\">\n                        <BEButton>Cancel</BEButton>\n                    </Link>\n                    <BEButton disabled={saveButtonDisabled} isLoading={isLoadingMember} primary={true} filled={true} htmlType=\"submit\">\n                        Save all changes\n                    </BEButton>\n                </div>\n            </form>\n        </>\n    );\n};\n"]}

package/dist/src/pages/account/Help/AccountHelpPage.d.ts

@@ -0,0 +1 @@
+export declare const AccountHelpPage: () => JSX.Element;

package/dist/src/pages/account/Help/AccountHelpPage.js

@@ -0,0 +1,140 @@
+"use strict";
+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) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccountHelpPage = void 0;
+const AutoAutoHeight_1 = require("animations/AutoAutoHeight");
+const Alert_1 = require("components/generic/Alert");
+const BEButton_1 = require("components/generic/BEButton");
+const Headline_1 = require("components/generic/Headline");
+const Icon_1 = require("components/generic/Icon/Icon");
+const Text_1 = require("components/generic/Text");
+const TextArea_1 = require("components/generic/TextArea");
+const TextBox_1 = require("components/generic/TextBox");
+const React = require("react");
+const react_1 = require("react");
+const react_hook_form_1 = require("react-hook-form");
+const react_i18next_1 = require("react-i18next");
+const react_router_dom_1 = require("react-router-dom");
+const Translation_1 = require("translations/Translation");
+const Color_1 = require("util/Color");
+const BookingAPI_1 = require("api/BookingAPI");
+const hooks_1 = require("@frontend/hooks");
+const AccountRoutes_1 = require("../AccountRoutes");
+const EnhancedPhoneNumberField_1 = require("components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField");
+const AccountHelpPage = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { hotel } = (0, hooks_1.useCurrentHotel)();
+    const { user, fullName } = (0, hooks_1.useMember)();
+    const { register, formState, handleSubmit, reset, control } = (0, react_hook_form_1.useForm)({
+        mode: 'onChange',
+        reValidateMode: 'onBlur',
+    });
+    const [apiStatus, setApiStatus] = (0, react_1.useState)({});
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        if (user) {
+            reset({
+                name: fullName,
+                email: user.email,
+                telephone: user.phoneNumber,
+            });
+        }
+    }, [fullName, user]);
+    const onSubmit = (values) => __awaiter(void 0, void 0, void 0, function* () {
+        setApiStatus({});
+        setIsLoading(true);
+        try {
+            yield BookingAPI_1.default.Error.sendMemberAreaContactForm(hotel.hotelID, {
+                name: values.name,
+                telephone: values.telephone,
+                email: values.email,
+                message: values.message,
+            });
+            setApiStatus({ success: true });
+        }
+        catch (ex) {
+            setApiStatus({ success: false, message: t(Translation_1.Translation.Step.Room.ErrorForm.APIError) });
+        }
+        setIsLoading(false);
+    });
+    const getValidationClass = (name) => {
+        if (formState.errors) {
+            if (formState.errors[name]) {
+                return 'error';
+            }
+            else {
+                return 'success';
+            }
+        }
+        else {
+            return null;
+        }
+    };
+    return (React.createElement("div", null,
+        React.createElement("div", { className: "u-marg-top--heavy@m u-marg-top@m- u-marg-bottom--heavy" },
+            React.createElement(react_router_dom_1.Link, { to: AccountRoutes_1.AccountRoutes.Home.path },
+                React.createElement(BEButton_1.default, { isText: true, icon: Icon_1.IconType.ArrowLeft, size: 'small' }, "BACK TO YOUR ACCOUNT"))),
+        React.createElement("div", { className: "u-marg-bottom--heavy u-pad-top@m" },
+            React.createElement(Headline_1.default, { size: 'extra-large', className: 'u-marg-bottom' }, "Need some help?")),
+        React.createElement("form", { onSubmit: handleSubmit(onSubmit), className: "u-marg-bottom", style: { maxWidth: 500 } },
+            React.createElement(AutoAutoHeight_1.default, { open: !!formState.errors },
+                React.createElement("div", { className: "u-flex flex-column" }, Object.keys(formState.errors).map((errorName, index) => {
+                    return (React.createElement(Alert_1.default, { type: Alert_1.AlertType.Danger, icon: Icon_1.IconType.Error, key: index },
+                        React.createElement(Text_1.default, { type: Text_1.TextType.Small }, formState.errors[errorName].message)));
+                }))),
+            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")),
+                React.createElement(TextBox_1.default, Object.assign({ required: true, validationStatus: getValidationClass('name') }, register('name', {
+                    required: { message: `Name is required`, value: true },
+                })))),
+            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 }, t(Translation_1.Translation.Navigation.SignIn.EmailAddress))),
+                React.createElement(TextBox_1.default, Object.assign({ placeholder: "example@mail.com", required: true, validationStatus: getValidationClass('email') }, register('email', {
+                    required: {
+                        message: `${t(Translation_1.Translation.Navigation.SignIn.EmailAddress)} is required`,
+                        value: true,
+                    },
+                    pattern: {
+                        value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
+                        message: t(Translation_1.Translation.FindReservation.InvalidEmailAddress),
+                    },
+                })))),
+            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 }, "Telephone")),
+                React.createElement(react_hook_form_1.Controller, { rules: {
+                        pattern: {
+                            value: /.*\s\d+/,
+                            message: 'Telephone is required',
+                        },
+                    }, control: control, name: "telephone", render: ({ field }) => {
+                        return (React.createElement(EnhancedPhoneNumberField_1.default, Object.assign({}, field, { onChange: (e) => {
+                                field.onChange(e);
+                            }, validationStatus: getValidationClass('telephone') })));
+                    } })),
+            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 }, "Message")),
+                React.createElement(TextArea_1.default, Object.assign({ required: true, validationStatus: getValidationClass('message') }, register('message', {
+                    required: { message: 'Message is required', value: true },
+                })))),
+            React.createElement(BEButton_1.default, { icon: Icon_1.IconType.ArrowRight, iconPosition: "right", filled: true, primary: true, htmlType: "submit", isLoading: isLoading, disabled: isLoading || apiStatus.success }, "Submit")),
+        React.createElement(AutoAutoHeight_1.default, { open: apiStatus.success },
+            React.createElement("div", { className: "u-pad-top" },
+                React.createElement(Text_1.default, { color: Color_1.Color.Success }, t(Translation_1.Translation.Step.Room.ErrorForm.ConfirmationMessage)))),
+        React.createElement(AutoAutoHeight_1.default, { open: apiStatus.success === false },
+            React.createElement("div", { className: "u-pad-top" },
+                React.createElement(Text_1.default, { color: Color_1.Color.Alert }, apiStatus.message)))));
+};
+exports.AccountHelpPage = AccountHelpPage;
+//# sourceMappingURL=AccountHelpPage.js.map

package/dist/src/pages/account/Help/AccountHelpPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountHelpPage.js","sourceRoot":"/","sources":["src/pages/account/Help/AccountHelpPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import AutoAutoHeight from 'animations/AutoAutoHeight';\nimport Alert, { AlertType } from 'components/generic/Alert';\nimport BEButton from 'components/generic/BEButton';\nimport Headline from 'components/generic/Headline';\nimport { IconType } from 'components/generic/Icon/Icon';\nimport Text, { TextType } from 'components/generic/Text';\nimport TextArea from 'components/generic/TextArea';\nimport TextBox from 'components/generic/TextBox';\nimport * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { Controller, useForm } from 'react-hook-form';\nimport { useTranslation } from 'react-i18next';\nimport { Link } from 'react-router-dom';\nimport { Translation } from 'translations/Translation';\nimport { Color } from 'util/Color';\n\nimport API from 'api/BookingAPI';\nimport { useCurrentHotel, useMember } from '@frontend/hooks';\nimport { AccountRoutes } from '../AccountRoutes';\nimport EnhancedPhoneNumberField from 'components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField';\n\nexport const AccountHelpPage = () => {\n    const { t } = useTranslation();\n    const { hotel } = useCurrentHotel();\n    const { user, fullName } = useMember();\n\n    const { register, formState, handleSubmit, reset, control } = useForm({\n        mode: 'onChange',\n        reValidateMode: 'onBlur',\n    });\n\n    const [apiStatus, setApiStatus] = useState<{ success?: boolean; message?: string }>({});\n    const [isLoading, setIsLoading] = useState(false);\n\n    useEffect(() => {\n        if (user) {\n            reset({\n                name: fullName,\n                email: user.email,\n                telephone: user.phoneNumber,\n            });\n        }\n    }, [fullName, user]);\n\n    const onSubmit = async (values: any) => {\n        setApiStatus({});\n        setIsLoading(true);\n\n        try {\n            await API.Error.sendMemberAreaContactForm(hotel.hotelID, {\n                name: values.name,\n                telephone: values.telephone,\n                email: values.email,\n                message: values.message,\n            });\n\n            setApiStatus({ success: true });\n        } catch (ex) {\n            setApiStatus({ success: false, message: t(Translation.Step.Room.ErrorForm.APIError) });\n        }\n\n        setIsLoading(false);\n    };\n\n    const getValidationClass = (name: string) => {\n        if (formState.errors) {\n            if (formState.errors[name]) {\n                return 'error';\n            } else {\n                return 'success';\n            }\n        } else {\n            return null;\n        }\n    };\n\n    return (\n        <div>\n            <div className=\"u-marg-top--heavy@m u-marg-top@m- u-marg-bottom--heavy\">\n                <Link to={AccountRoutes.Home.path}>\n                    <BEButton isText={true} icon={IconType.ArrowLeft} size={'small'}>\n                        BACK TO YOUR ACCOUNT\n                    </BEButton>\n                </Link>\n            </div>\n\n            <div className=\"u-marg-bottom--heavy u-pad-top@m\">\n                <Headline size={'extra-large'} className={'u-marg-bottom'}>\n                    Need some help?\n                </Headline>\n            </div>\n\n            <form onSubmit={handleSubmit(onSubmit)} className=\"u-marg-bottom\" style={{ maxWidth: 500 }}>\n                <AutoAutoHeight open={!!formState.errors}>\n                    <div className=\"u-flex flex-column\">\n                        {Object.keys(formState.errors).map((errorName, index) => {\n                            return (\n                                <Alert type={AlertType.Danger} icon={IconType.Error} key={index}>\n                                    <Text type={TextType.Small}>{formState.errors[errorName].message}</Text>\n                                </Alert>\n                            );\n                        })}\n                    </div>\n                </AutoAutoHeight>\n\n                <div className=\"u-marg-bottom\">\n                    <div className=\"u-marg-bottom--light\">\n                        <Text type={TextType.Label} color={Color.Navy} bold>\n                            Name\n                        </Text>\n                    </div>\n                    <TextBox\n                        required={true}\n                        validationStatus={getValidationClass('name')}\n                        {...register('name', {\n                            required: { message: `Name is required`, value: true },\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.Navigation.SignIn.EmailAddress)}\n                        </Text>\n                    </div>\n                    <TextBox\n                        placeholder=\"example@mail.com\"\n                        required={true}\n                        validationStatus={getValidationClass('email')}\n                        {...register('email', {\n                            required: {\n                                message: `${t(Translation.Navigation.SignIn.EmailAddress)} is required`,\n                                value: true,\n                            },\n                            pattern: {\n                                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\\.[A-Z]{2,4}$/i,\n                                message: t(Translation.FindReservation.InvalidEmailAddress),\n                            },\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                            Telephone\n                        </Text>\n                    </div>\n                    <Controller\n                        rules={{\n                            pattern: {\n                                value: /.*\\s\\d+/,\n                                message: 'Telephone is required',\n                            },\n                        }}\n                        control={control}\n                        name=\"telephone\"\n                        render={({ field }) => {\n                            return (\n                                <EnhancedPhoneNumberField\n                                    {...field}\n                                    onChange={(e: any) => {\n                                        field.onChange(e);\n                                    }}\n                                    validationStatus={getValidationClass('telephone')}\n                                />\n                            );\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                            Message\n                        </Text>\n                    </div>\n                    <TextArea\n                        required={true}\n                        validationStatus={getValidationClass('message')}\n                        {...register('message', {\n                            required: { message: 'Message is required', value: true },\n                        })}\n                    />\n                </div>\n                <BEButton icon={IconType.ArrowRight} iconPosition=\"right\" filled primary htmlType=\"submit\" isLoading={isLoading} disabled={isLoading || apiStatus.success}>\n                    Submit\n                </BEButton>\n            </form>\n\n            <AutoAutoHeight open={apiStatus.success}>\n                <div className=\"u-pad-top\">\n                    <Text color={Color.Success}>{t(Translation.Step.Room.ErrorForm.ConfirmationMessage)}</Text>\n                </div>\n            </AutoAutoHeight>\n\n            <AutoAutoHeight open={apiStatus.success === false}>\n                <div className=\"u-pad-top\">\n                    <Text color={Color.Alert}>{apiStatus.message}</Text>\n                </div>\n            </AutoAutoHeight>\n        </div>\n    );\n};\n"]}

package/dist/src/pages/account/Reservations/AccountReservationCancelledPage.d.ts

@@ -0,0 +1 @@
+export declare const AccountReservationCancelledPage: () => JSX.Element;

package/dist/src/pages/account/Reservations/AccountReservationCancelledPage.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccountReservationCancelledPage = void 0;
+const React = require("react");
+const dayjs = require("dayjs");
+const react_router_dom_1 = require("react-router-dom");
+const StepManager_1 = require("util/StepManager");
+const BEButton_1 = require("components/generic/BEButton");
+const Icon_1 = require("components/generic/Icon/Icon");
+const Headline_1 = require("components/generic/Headline");
+const Text_1 = require("components/generic/Text");
+const ReservationItem_1 = require("components/reservation/ReservationItem");
+const Color_1 = require("util/Color");
+const Alert_1 = require("components/generic/Alert");
+const LineBreak_1 = require("components/generic/LineBreak");
+const Card_1 = require("components/generic/Card/Card/Card");
+const IconText_1 = require("components/generic/IconText/IconText");
+const Pill_1 = require("components/generic/Pill");
+const contexts_1 = require("@frontend/contexts");
+const ScreenSize_1 = require("util/ScreenSize");
+const react_i18next_1 = require("react-i18next");
+const Translation_1 = require("translations/Translation");
+const AccountReservationCancelledPage = () => {
+    const fakeReservation = {
+        // TODO: Actually load legit reservations here
+        id: 1,
+        code: 'MiniQueen',
+        name: 'Mini Queen',
+        group: 'Niall Smyth',
+        description: 'Mini Queen',
+        occupancy: 1,
+        rooms: 1,
+        nights: 8,
+        from: dayjs('2022/04/07'),
+        to: dayjs('2022/04/14'),
+        checkIn: 'After 2:00 PM',
+        checkOut: 'Before 11:00PM',
+        images: ['https://pcdn.app.roomstay.io/99298b4d-d487-41a5-a5f7-dab4549876b2?w=768'],
+    };
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const context = React.useContext(contexts_1.BookingEngineContext);
+    const isMobile = context.screenSize <= ScreenSize_1.default.Medium;
+    return (React.createElement("div", null,
+        React.createElement("div", { className: "u-marg-top--heavy@m u-marg-top@m- u-marg-bottom--heavy" },
+            React.createElement(react_router_dom_1.Link, { to: StepManager_1.default.getFirstStep().getStepUrl() },
+                React.createElement(BEButton_1.default, { isText: true, icon: Icon_1.IconType.ArrowLeft, size: 'small' }, "BACK TO BOOKING"))),
+        React.createElement("div", { className: "u-flex-align-stretch@m- u-flex u-flex-align-flex-end u-marg-bottom--heavy u-pad-top@m u-flex-direction-column@m-" },
+            React.createElement("div", null,
+                React.createElement(Text_1.default, { className: "u-marg-bottom--light" }, "1 Room"),
+                React.createElement(Headline_1.default, { size: 'extra-large', className: "u-marg-bottom--light" }, "Mini Queen"),
+                React.createElement(Text_1.default, { type: Text_1.TextType.Body }, "Ovolo Hotels \u2022 64 Wong Chuk Hang Road, Southside, Hong Kong")),
+            React.createElement("div", { className: "u-marg-top--heavy@m-" },
+                React.createElement(BEButton_1.default, { wide: isMobile, rounded: isMobile, textColor: Color_1.Color.Navy, isText: !isMobile, icon: Icon_1.IconType.Share, iconPosition: "left" }, t(Translation_1.Translation.Reservation.Share)),
+                React.createElement(BEButton_1.default, { wide: isMobile, rounded: isMobile, textColor: Color_1.Color.Navy, className: "u-marg-left--heavy u-marg-left--none@m- u-marg-top--light@m-", isText: !isMobile, icon: Icon_1.IconType.Print, iconPosition: "left" }, t(Translation_1.Translation.Reservation.Print)))),
+        React.createElement(LineBreak_1.default, { fullBleed: true }),
+        React.createElement("div", { className: "u-marg-bottom--heavy" },
+            React.createElement(Alert_1.default, { noIconMargin: true, iconClassName: "u-marg-right", noBorder: true, iconSize: isMobile ? '26px' : '40px', variant: Alert_1.AlertVariant.Filled, iconAlignCenter: true, type: Alert_1.AlertType.Danger, icon: Icon_1.IconType.Error },
+                React.createElement("div", null,
+                    React.createElement(Text_1.default, { bold: true, type: Text_1.TextType.Small }, t(Translation_1.Translation.Reservation.CancelledPage.AlertTitle)),
+                    React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Navy, className: "u-marg-top--lighter", inline: false }, t(Translation_1.Translation.Reservation.CancelledPage.AlertDescription))))),
+        React.createElement("div", { className: "u-marg-bottom--massive u-marg-bottom--none@m-" },
+            React.createElement(ReservationItem_1.default, { cancelled: true, actions: [ReservationItem_1.ReservationAction.MoreDetails, ReservationItem_1.ReservationAction.BookAgain], itineraryItem: fakeReservation })),
+        React.createElement(LineBreak_1.default, { noMargins: isMobile }),
+        React.createElement("div", { className: "u-flex u-marg-top--heavy@m-" },
+            React.createElement(Headline_1.default, { size: "large", bold: true }, t(Translation_1.Translation.Reservation.Total)),
+            React.createElement("div", null,
+                React.createElement(Headline_1.default, { lineThrough: true, size: "large", bold: true }, "A$2,061"),
+                React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.DarkGrey }, t(Translation_1.Translation.Reservation.PriceNote)))),
+        React.createElement("div", { className: "row u-marg-top--massive@m u-marg-top--heavy@m-" },
+            React.createElement("div", { className: "col-md-4 u-flex" },
+                React.createElement(Card_1.Card, { className: "w-100", title: t(Translation_1.Translation.Reservation.ProfileInformation) },
+                    React.createElement(IconText_1.default, { icon: Icon_1.IconType.Person }, "Niall Smyth"),
+                    React.createElement(IconText_1.default, { icon: Icon_1.IconType.Email }, "niall.smyth@gmail.com"),
+                    React.createElement(IconText_1.default, { icon: Icon_1.IconType.CreditCard },
+                        React.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                            "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 1111",
+                            ' ',
+                            React.createElement(Text_1.default, { inline: true, type: Text_1.TextType.Small, color: Color_1.Color.DarkGrey }, "(Visa)"))))),
+            React.createElement("div", { className: "col-md-4 u-flex" },
+                React.createElement(Card_1.Card, { className: "w-100", title: t(Translation_1.Translation.Reservation.HotelInformation) },
+                    React.createElement(IconText_1.default, { icon: Icon_1.IconType.Map },
+                        "64 Wong Chuk Hang Road",
+                        React.createElement("br", null),
+                        "Southside, Hong Kong"),
+                    React.createElement(IconText_1.default, { icon: Icon_1.IconType.Phone }, "+852 3460 8100"))),
+            React.createElement("div", { className: "col-md-4 u-flex" },
+                React.createElement(Card_1.Card, { className: "w-100", title: t(Translation_1.Translation.Reservation.CodeNumberInformation) },
+                    React.createElement(Text_1.default, { className: "u-marg-right--light", inline: true, type: Text_1.TextType.Small }, "Confirmed"),
+                    React.createElement(Pill_1.default, { type: Pill_1.PillType.Danger },
+                        React.createElement(Text_1.default, { lineThrough: true, color: Color_1.Color.Alert, bold: true, type: Text_1.TextType.Small }, "#62991SC007872")),
+                    React.createElement("br", null),
+                    React.createElement("div", { className: "u-marg-top" },
+                        React.createElement(Text_1.default, { className: "u-marg-right--light", inline: true, type: Text_1.TextType.Small }, "Itinerary"),
+                        React.createElement(Pill_1.default, { variant: Pill_1.PillVariant.Outlined, type: Pill_1.PillType.Grey }, "#15668B0340984"))))),
+        React.createElement("div", { className: "u-marg-top--massive@m u-marg-top@m- u-background--snow u-w-fluid u-pad-top--massive@m u-pad-top--heavy@m- u-pad-bottom--heavy @m- u-pad-bottom--massive@m" },
+            React.createElement("div", { className: "container" },
+                React.createElement(Text_1.default, { bold: true },
+                    " ",
+                    t(Translation_1.Translation.Reservation.Policies)),
+                React.createElement(Text_1.default, { className: "u-marg-top--medium", type: Text_1.TextType.Caption },
+                    t(Translation_1.Translation.Reservation.Policy1),
+                    React.createElement("br", null),
+                    React.createElement("br", null),
+                    t(Translation_1.Translation.Reservation.Policy2))))));
+};
+exports.AccountReservationCancelledPage = AccountReservationCancelledPage;
+//# sourceMappingURL=AccountReservationCancelledPage.js.map

package/dist/src/pages/account/Reservations/AccountReservationCancelledPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountReservationCancelledPage.js","sourceRoot":"/","sources":["src/pages/account/Reservations/AccountReservationCancelledPage.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { Reservation } from 'models/Reservation/Reservation';\nimport * as dayjs from 'dayjs';\nimport { Link } from 'react-router-dom';\nimport StepManager from 'util/StepManager';\nimport BEButton from 'components/generic/BEButton';\nimport { IconType } from 'components/generic/Icon/Icon';\nimport Headline from 'components/generic/Headline';\nimport Text, { TextType } from 'components/generic/Text';\nimport ReservationItem, { ReservationAction } from 'components/reservation/ReservationItem';\nimport { Color } from 'util/Color';\nimport Alert, { AlertType, AlertVariant } from 'components/generic/Alert';\nimport LineBreak from 'components/generic/LineBreak';\nimport { Card } from 'components/generic/Card/Card/Card';\nimport IconText from 'components/generic/IconText/IconText';\nimport Pill, { PillType, PillVariant } from 'components/generic/Pill';\nimport { BookingEngineContext } from '@frontend/contexts';\nimport ScreenSize from 'util/ScreenSize';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\n\nexport const AccountReservationCancelledPage = () => {\n    const fakeReservation: Reservation = {\n        // TODO: Actually load legit reservations here\n        id: 1,\n\n        code: 'MiniQueen',\n        name: 'Mini Queen',\n        group: 'Niall Smyth',\n        description: 'Mini Queen',\n\n        occupancy: 1,\n        rooms: 1,\n        nights: 8,\n        from: dayjs('2022/04/07'),\n        to: dayjs('2022/04/14'),\n        checkIn: 'After 2:00 PM',\n        checkOut: 'Before 11:00PM',\n        images: ['https://pcdn.app.roomstay.io/99298b4d-d487-41a5-a5f7-dab4549876b2?w=768'],\n    };\n    const { t } = useTranslation();\n    const context = React.useContext(BookingEngineContext);\n    const isMobile = context.screenSize <= ScreenSize.Medium;\n    return (\n        <div>\n            <div className=\"u-marg-top--heavy@m u-marg-top@m- u-marg-bottom--heavy\">\n                <Link to={StepManager.getFirstStep().getStepUrl()}>\n                    <BEButton isText={true} icon={IconType.ArrowLeft} size={'small'}>\n                        BACK TO BOOKING\n                    </BEButton>\n                </Link>\n            </div>\n            <div className=\"u-flex-align-stretch@m- u-flex u-flex-align-flex-end u-marg-bottom--heavy u-pad-top@m u-flex-direction-column@m-\">\n                <div>\n                    <Text className=\"u-marg-bottom--light\">1 Room</Text>\n                    <Headline size={'extra-large'} className=\"u-marg-bottom--light\">\n                        Mini Queen\n                    </Headline>\n                    <Text type={TextType.Body}>Ovolo Hotels • 64 Wong Chuk Hang Road, Southside, Hong Kong</Text>\n                </div>\n                <div className=\"u-marg-top--heavy@m-\">\n                    <BEButton wide={isMobile} rounded={isMobile} textColor={Color.Navy} isText={!isMobile} icon={IconType.Share} iconPosition=\"left\">\n                        {t(Translation.Reservation.Share)}\n                    </BEButton>\n                    <BEButton\n                        wide={isMobile}\n                        rounded={isMobile}\n                        textColor={Color.Navy}\n                        className=\"u-marg-left--heavy u-marg-left--none@m- u-marg-top--light@m-\"\n                        isText={!isMobile}\n                        icon={IconType.Print}\n                        iconPosition=\"left\"\n                    >\n                        {t(Translation.Reservation.Print)}\n                    </BEButton>\n                </div>\n            </div>\n\n            <LineBreak fullBleed />\n\n            <div className=\"u-marg-bottom--heavy\">\n                <Alert\n                    noIconMargin\n                    iconClassName=\"u-marg-right\"\n                    noBorder\n                    iconSize={isMobile ? '26px' : '40px'}\n                    variant={AlertVariant.Filled}\n                    iconAlignCenter\n                    type={AlertType.Danger}\n                    icon={IconType.Error}\n                >\n                    <div>\n                        <Text bold type={TextType.Small}>\n                            {t(Translation.Reservation.CancelledPage.AlertTitle)}\n                        </Text>\n                        <Text type={TextType.Small} color={Color.Navy} className=\"u-marg-top--lighter\" inline={false}>\n                            {t(Translation.Reservation.CancelledPage.AlertDescription)}\n                        </Text>\n                    </div>\n                </Alert>\n            </div>\n\n            <div className=\"u-marg-bottom--massive u-marg-bottom--none@m-\">\n                <ReservationItem cancelled actions={[ReservationAction.MoreDetails, ReservationAction.BookAgain]} itineraryItem={fakeReservation} />\n            </div>\n            <LineBreak noMargins={isMobile} />\n            <div className=\"u-flex u-marg-top--heavy@m-\">\n                <Headline size=\"large\" bold>\n                    {t(Translation.Reservation.Total)}\n                </Headline>\n                <div>\n                    <Headline lineThrough size=\"large\" bold>\n                        A$2,061\n                    </Headline>\n                    <Text type={TextType.Small} color={Color.DarkGrey}>\n                        {t(Translation.Reservation.PriceNote)}\n                    </Text>\n                </div>\n            </div>\n\n            <div className=\"row u-marg-top--massive@m u-marg-top--heavy@m-\">\n                <div className=\"col-md-4 u-flex\">\n                    <Card className=\"w-100\" title={t(Translation.Reservation.ProfileInformation)}>\n                        <IconText icon={IconType.Person}>Niall Smyth</IconText>\n                        <IconText icon={IconType.Email}>niall.smyth@gmail.com</IconText>\n                        <IconText icon={IconType.CreditCard}>\n                            <Text type={TextType.Small}>\n                                •••• •••• •••• 1111{' '}\n                                <Text inline type={TextType.Small} color={Color.DarkGrey}>\n                                    (Visa)\n                                </Text>\n                            </Text>\n                        </IconText>\n                    </Card>\n                </div>\n                <div className=\"col-md-4 u-flex\">\n                    <Card className=\"w-100\" title={t(Translation.Reservation.HotelInformation)}>\n                        <IconText icon={IconType.Map}>\n                            64 Wong Chuk Hang Road\n                            <br />\n                            Southside, Hong Kong\n                        </IconText>\n                        <IconText icon={IconType.Phone}>+852 3460 8100</IconText>\n                    </Card>\n                </div>\n                <div className=\"col-md-4 u-flex\">\n                    <Card className=\"w-100\" title={t(Translation.Reservation.CodeNumberInformation)}>\n                        <Text className=\"u-marg-right--light\" inline type={TextType.Small}>\n                            Confirmed\n                        </Text>\n                        <Pill type={PillType.Danger}>\n                            <Text lineThrough color={Color.Alert} bold type={TextType.Small}>\n                                #62991SC007872\n                            </Text>\n                        </Pill>\n                        <br />\n                        <div className=\"u-marg-top\">\n                            <Text className=\"u-marg-right--light\" inline type={TextType.Small}>\n                                Itinerary\n                            </Text>\n                            <Pill variant={PillVariant.Outlined} type={PillType.Grey}>\n                                #15668B0340984\n                            </Pill>\n                        </div>\n                    </Card>\n                </div>\n            </div>\n            <div className=\"u-marg-top--massive@m u-marg-top@m- u-background--snow u-w-fluid u-pad-top--massive@m u-pad-top--heavy@m- u-pad-bottom--heavy @m- u-pad-bottom--massive@m\">\n                <div className=\"container\">\n                    <Text bold> {t(Translation.Reservation.Policies)}</Text>\n                    <Text className=\"u-marg-top--medium\" type={TextType.Caption}>\n                        {t(Translation.Reservation.Policy1)}\n                        <br />\n                        <br />\n                        {t(Translation.Reservation.Policy2)}\n                    </Text>\n                </div>\n            </div>\n        </div>\n    );\n};\n"]}

package/dist/src/pages/account/Reservations/AccountReservationMultiplePage.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const AccountReservationMultiplePage: FC;

package/dist/src/pages/account/Reservations/AccountReservationMultiplePage.js

@@ -0,0 +1,132 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccountReservationMultiplePage = void 0;
+const React = require("react");
+const dayjs = require("dayjs");
+const react_router_dom_1 = require("react-router-dom");
+const StepManager_1 = require("util/StepManager");
+const BEButton_1 = require("components/generic/BEButton");
+const Icon_1 = require("components/generic/Icon/Icon");
+const Headline_1 = require("components/generic/Headline");
+const Text_1 = require("components/generic/Text");
+const ReservationItem_1 = require("components/reservation/ReservationItem");
+const Color_1 = require("util/Color");
+const LineBreak_1 = require("components/generic/LineBreak");
+const Card_1 = require("components/generic/Card/Card/Card");
+const IconText_1 = require("components/generic/IconText/IconText");
+const Pill_1 = require("components/generic/Pill");
+const contexts_1 = require("@frontend/contexts");
+const ScreenSize_1 = require("util/ScreenSize");
+const react_i18next_1 = require("react-i18next");
+const Translation_1 = require("translations/Translation");
+const ReservationList_1 = require("components/reservation/ReservationList");
+const AccountReservationMultiplePage = () => {
+    const fakeReservation = {
+        // TODO: Actually load legit reservations here
+        id: 1,
+        code: 'MiniQueen',
+        name: 'Mini Queen',
+        group: 'Niall Smyth',
+        description: 'Mini Queen',
+        occupancy: 1,
+        rooms: 1,
+        nights: 8,
+        from: dayjs('2022/04/07'),
+        to: dayjs('2022/04/14'),
+        checkIn: 'After 2:00 PM',
+        checkOut: 'Before 11:00PM',
+        images: ['https://pcdn.app.roomstay.io/99298b4d-d487-41a5-a5f7-dab4549876b2?w=768'],
+    };
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const context = React.useContext(contexts_1.BookingEngineContext);
+    const isMobile = context.screenSize <= ScreenSize_1.default.Medium;
+    return (React.createElement("div", null,
+        React.createElement("div", { className: "u-marg-top--heavy@m u-marg-top@m- u-marg-bottom--heavy" },
+            React.createElement(react_router_dom_1.Link, { to: StepManager_1.default.getFirstStep().getStepUrl() },
+                React.createElement(BEButton_1.default, { isText: true, icon: Icon_1.IconType.ArrowLeft, size: 'small' }, t(Translation_1.Translation.Reservation.BackToYourReservations)))),
+        React.createElement("div", { className: "u-flex-align-stretch@m- u-flex u-flex-align-flex-end u-marg-bottom--heavy u-pad-top@m u-flex-direction-column@m-" },
+            React.createElement("div", null,
+                React.createElement(Text_1.default, { className: "u-marg-bottom--light" }, "2 Room"),
+                React.createElement(Headline_1.default, { size: 'extra-large', className: "u-marg-bottom--light" }, "Corner + Mini Twin"),
+                React.createElement(Text_1.default, { type: Text_1.TextType.Body }, "Ovolo Hotels \u2022 64 Wong Chuk Hang Road, Southside, Hong Kong")),
+            React.createElement("div", { className: "u-flex u-flex-gap u-flex-direction-column@m- u-flex-gap--light@m- u-marg-top--heavy@m-" },
+                React.createElement(BEButton_1.default, { wide: isMobile, rounded: isMobile, textColor: Color_1.Color.Navy, isText: !isMobile, icon: Icon_1.IconType.Edit, iconPosition: "left" }, t(Translation_1.Translation.Reservation.Modify)),
+                React.createElement(BEButton_1.default, { wide: isMobile, mobileWidth: true, rounded: isMobile, textColor: Color_1.Color.Navy, className: "", isText: !isMobile, icon: Icon_1.IconType.Share, iconPosition: "left" }, t(Translation_1.Translation.Reservation.Share)),
+                React.createElement(BEButton_1.default, { wide: isMobile, mobileWidth: true, rounded: isMobile, textColor: Color_1.Color.Navy, className: "", isText: !isMobile, icon: Icon_1.IconType.Print, iconPosition: "left" }, t(Translation_1.Translation.Reservation.Print)),
+                React.createElement(BEButton_1.default, { danger: true, wide: isMobile, mobileWidth: true, rounded: isMobile, textColor: Color_1.Color.Alert, className: "", isText: !isMobile }, t(Translation_1.Translation.Reservation.CancelReservation)))),
+        React.createElement(LineBreak_1.default, { fullBleed: true }),
+        React.createElement("div", { className: "u-marg-bottom--heavy u-marg-bottom--none@m-" },
+            React.createElement(ReservationList_1.default, { actions: [ReservationItem_1.ReservationAction.Modify, ReservationItem_1.ReservationAction.Cancel], reservationItems: [fakeReservation, fakeReservation] })),
+        React.createElement("div", { className: "u-marg-top-bottom--heavy" },
+            React.createElement(Text_1.default, { color: Color_1.Color.Graphite, type: Text_1.TextType.Small }, "Add-on Itens"),
+            React.createElement(Headline_1.default, { size: isMobile ? undefined : 'large', color: Color_1.Color.Navy, bold: true, className: "u-marg-top" }, "Airport Transfer - 7 seaters (for 6 pax)"),
+            React.createElement("div", { className: "u-flex u-flex-justify-between u-marg-top--light" },
+                React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Graphite }, "2 Per way"),
+                React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Navy, bold: true }, "A$402")),
+            React.createElement("div", { className: "u-flex u-flex-justify-between u-marg-top--light" },
+                React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Graphite }, "Service's date"),
+                React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.Accent, bold: true }, "7 - 10 Apr"))),
+        React.createElement(LineBreak_1.default, { noMargins: isMobile }),
+        React.createElement("div", { className: "u-flex u-marg-top--heavy@m-" },
+            React.createElement(Headline_1.default, { size: "large", bold: true }, t(Translation_1.Translation.Reservation.Total)),
+            React.createElement("div", null,
+                React.createElement(Headline_1.default, { lineThrough: true, size: "large", bold: true }, "A$2,061"),
+                React.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.DarkGrey }, t(Translation_1.Translation.Reservation.PriceNote)))),
+        React.createElement("div", { className: "row u-marg-top--massive@m u-marg-top--heavy@m-" },
+            React.createElement("div", { className: "col-md-4 u-flex" },
+                React.createElement(Card_1.Card, { className: "w-100", title: t(Translation_1.Translation.Reservation.ProfileInformation) },
+                    React.createElement(IconText_1.default, { icon: Icon_1.IconType.Person }, "Niall Smyth"),
+                    React.createElement(IconText_1.default, { icon: Icon_1.IconType.Email }, "niall.smyth@gmail.com"),
+                    React.createElement(IconText_1.default, { icon: Icon_1.IconType.CreditCard },
+                        React.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                            "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 1111",
+                            ' ',
+                            React.createElement(Text_1.default, { inline: true, type: Text_1.TextType.Small, color: Color_1.Color.DarkGrey }, "(Visa)"))))),
+            React.createElement("div", { className: "col-md-4 u-flex" },
+                React.createElement(Card_1.Card, { className: "w-100", title: t(Translation_1.Translation.Reservation.HotelInformation) },
+                    React.createElement(IconText_1.default, { icon: Icon_1.IconType.Map },
+                        "64 Wong Chuk Hang Road",
+                        React.createElement("br", null),
+                        "Southside, Hong Kong"),
+                    React.createElement(IconText_1.default, { icon: Icon_1.IconType.Phone }, "+852 3460 8100"))),
+            React.createElement("div", { className: "col-md-4 u-flex" },
+                React.createElement(Card_1.Card, { className: "w-100", title: t(Translation_1.Translation.Reservation.CodeNumberInformation) },
+                    React.createElement(Text_1.default, { className: "u-marg-right--light u-marg-bottom--light", inline: true, type: Text_1.TextType.Small }, "Confirmed"),
+                    React.createElement(Pill_1.default, { className: "u-marg-bottom--light", type: Pill_1.PillType.Success }, "#62991SC007872"),
+                    React.createElement(Pill_1.default, { className: "u-marg-bottom--light", type: Pill_1.PillType.Success }, "#6292SC007234"),
+                    React.createElement("br", null),
+                    React.createElement("div", { className: "u-marg-top--light" },
+                        React.createElement(Text_1.default, { className: "u-marg-right--light u-marg-bottom--light", inline: true, type: Text_1.TextType.Small }, "Itinerary"),
+                        React.createElement(Pill_1.default, { className: "u-marg-bottom--light", variant: Pill_1.PillVariant.Outlined, type: Pill_1.PillType.Grey }, "#15668B0340984"))))),
+        React.createElement("div", { className: "u-marg-top--massive@m u-marg-top@m- u-background--snow u-w-fluid u-pad-top--massive@m u-pad-top--heavy@m- u-pad-bottom--heavy @m- u-pad-bottom--massive@m" },
+            React.createElement("div", { className: "container" },
+                React.createElement(Text_1.default, { bold: true },
+                    " ",
+                    t(Translation_1.Translation.Reservation.Policies)),
+                React.createElement("div", { className: "u-marg-top--medium" },
+                    React.createElement("div", { className: "u-w-57@m u-w-100@m-" },
+                        React.createElement("div", { className: "u-flex u-flex-direction-column@m- u-flex-gap--medium@m-" },
+                            React.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                                React.createElement("strong", null, t(Translation_1.Translation.Reservation.CheckIn)),
+                                React.createElement("br", null),
+                                t(Translation_1.Translation.Reservation.After),
+                                " 2:00 PM"),
+                            React.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                                React.createElement("strong", null, t(Translation_1.Translation.Reservation.CheckOut)),
+                                React.createElement("br", null),
+                                t(Translation_1.Translation.Reservation.After),
+                                " 2:00 PM"),
+                            React.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                                React.createElement("strong", null, "Room 1"),
+                                " Deluxe Queen - Ovolo Southside Escape",
+                                React.createElement("br", null),
+                                React.createElement("strong", null, "Room 2"),
+                                " Mini Twin - Daily Rate")))),
+                React.createElement(Text_1.default, { className: "u-marg-top--medium", type: Text_1.TextType.Caption },
+                    t(Translation_1.Translation.Reservation.Policy1),
+                    React.createElement("br", null),
+                    React.createElement("br", null),
+                    t(Translation_1.Translation.Reservation.Policy2))))));
+};
+exports.AccountReservationMultiplePage = AccountReservationMultiplePage;
+//# sourceMappingURL=AccountReservationMultiplePage.js.map

package/dist/src/pages/account/Reservations/AccountReservationMultiplePage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccountReservationMultiplePage.js","sourceRoot":"/","sources":["src/pages/account/Reservations/AccountReservationMultiplePage.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { FC } from 'react';\nimport { Reservation } from 'models/Reservation/Reservation';\nimport * as dayjs from 'dayjs';\nimport { Link } from 'react-router-dom';\nimport StepManager from 'util/StepManager';\nimport BEButton from 'components/generic/BEButton';\nimport { IconType } from 'components/generic/Icon/Icon';\nimport Headline from 'components/generic/Headline';\nimport Text, { TextType } from 'components/generic/Text';\nimport { ReservationAction } from 'components/reservation/ReservationItem';\nimport { Color } from 'util/Color';\nimport LineBreak from 'components/generic/LineBreak';\nimport { Card } from 'components/generic/Card/Card/Card';\nimport IconText from 'components/generic/IconText/IconText';\nimport Pill, { PillType, PillVariant } from 'components/generic/Pill';\nimport { BookingEngineContext } from '@frontend/contexts';\nimport ScreenSize from 'util/ScreenSize';\nimport { useTranslation } from 'react-i18next';\nimport { Translation } from 'translations/Translation';\nimport ReservationList from 'components/reservation/ReservationList';\n\nexport const AccountReservationMultiplePage: FC = () => {\n    const fakeReservation: Reservation = {\n        // TODO: Actually load legit reservations here\n        id: 1,\n\n        code: 'MiniQueen',\n        name: 'Mini Queen',\n        group: 'Niall Smyth',\n        description: 'Mini Queen',\n\n        occupancy: 1,\n        rooms: 1,\n        nights: 8,\n        from: dayjs('2022/04/07'),\n        to: dayjs('2022/04/14'),\n        checkIn: 'After 2:00 PM',\n        checkOut: 'Before 11:00PM',\n        images: ['https://pcdn.app.roomstay.io/99298b4d-d487-41a5-a5f7-dab4549876b2?w=768'],\n    };\n    const { t } = useTranslation();\n    const context = React.useContext(BookingEngineContext);\n    const isMobile = context.screenSize <= ScreenSize.Medium;\n    return (\n        <div>\n            <div className=\"u-marg-top--heavy@m u-marg-top@m- u-marg-bottom--heavy\">\n                <Link to={StepManager.getFirstStep().getStepUrl()}>\n                    <BEButton isText={true} icon={IconType.ArrowLeft} size={'small'}>\n                        {t(Translation.Reservation.BackToYourReservations)}\n                    </BEButton>\n                </Link>\n            </div>\n            <div className=\"u-flex-align-stretch@m- u-flex u-flex-align-flex-end u-marg-bottom--heavy u-pad-top@m u-flex-direction-column@m-\">\n                <div>\n                    <Text className=\"u-marg-bottom--light\">2 Room</Text>\n                    <Headline size={'extra-large'} className=\"u-marg-bottom--light\">\n                        Corner + Mini Twin\n                    </Headline>\n                    <Text type={TextType.Body}>Ovolo Hotels • 64 Wong Chuk Hang Road, Southside, Hong Kong</Text>\n                </div>\n                <div className=\"u-flex u-flex-gap u-flex-direction-column@m- u-flex-gap--light@m- u-marg-top--heavy@m-\">\n                    <BEButton wide={isMobile} rounded={isMobile} textColor={Color.Navy} isText={!isMobile} icon={IconType.Edit} iconPosition=\"left\">\n                        {t(Translation.Reservation.Modify)}\n                    </BEButton>\n                    <BEButton wide={isMobile} mobileWidth rounded={isMobile} textColor={Color.Navy} className=\"\" isText={!isMobile} icon={IconType.Share} iconPosition=\"left\">\n                        {t(Translation.Reservation.Share)}\n                    </BEButton>\n                    <BEButton wide={isMobile} mobileWidth rounded={isMobile} textColor={Color.Navy} className=\"\" isText={!isMobile} icon={IconType.Print} iconPosition=\"left\">\n                        {t(Translation.Reservation.Print)}\n                    </BEButton>\n                    <BEButton danger wide={isMobile} mobileWidth rounded={isMobile} textColor={Color.Alert} className=\"\" isText={!isMobile}>\n                        {t(Translation.Reservation.CancelReservation)}\n                    </BEButton>\n                </div>\n            </div>\n\n            <LineBreak fullBleed />\n\n            <div className=\"u-marg-bottom--heavy u-marg-bottom--none@m-\">\n                <ReservationList actions={[ReservationAction.Modify, ReservationAction.Cancel]} reservationItems={[fakeReservation, fakeReservation]} />\n                {/*<ReservationItem actions={[ReservationAction.Modify, ReservationAction.Cancel]} reservation={fakeReservation} />*/}\n            </div>\n\n            <div className=\"u-marg-top-bottom--heavy\">\n                <Text color={Color.Graphite} type={TextType.Small}>\n                    Add-on Itens\n                </Text>\n                <Headline size={isMobile ? undefined : 'large'} color={Color.Navy} bold className=\"u-marg-top\">\n                    Airport Transfer - 7 seaters (for 6 pax)\n                </Headline>\n                <div className=\"u-flex u-flex-justify-between u-marg-top--light\">\n                    <Text type={TextType.Small} color={Color.Graphite}>\n                        2 Per way\n                    </Text>\n                    <Text type={TextType.Small} color={Color.Navy} bold>\n                        A$402\n                    </Text>\n                </div>\n                <div className=\"u-flex u-flex-justify-between u-marg-top--light\">\n                    <Text type={TextType.Small} color={Color.Graphite}>\n                        Service&apos;s date\n                    </Text>\n                    <Text type={TextType.Small} color={Color.Accent} bold>\n                        7 - 10 Apr\n                    </Text>\n                </div>\n            </div>\n\n            <LineBreak noMargins={isMobile} />\n            <div className=\"u-flex u-marg-top--heavy@m-\">\n                <Headline size=\"large\" bold>\n                    {t(Translation.Reservation.Total)}\n                </Headline>\n                <div>\n                    <Headline lineThrough size=\"large\" bold>\n                        A$2,061\n                    </Headline>\n                    <Text type={TextType.Small} color={Color.DarkGrey}>\n                        {t(Translation.Reservation.PriceNote)}\n                    </Text>\n                </div>\n            </div>\n\n            <div className=\"row u-marg-top--massive@m u-marg-top--heavy@m-\">\n                <div className=\"col-md-4 u-flex\">\n                    <Card className=\"w-100\" title={t(Translation.Reservation.ProfileInformation)}>\n                        <IconText icon={IconType.Person}>Niall Smyth</IconText>\n                        <IconText icon={IconType.Email}>niall.smyth@gmail.com</IconText>\n                        <IconText icon={IconType.CreditCard}>\n                            <Text type={TextType.Small}>\n                                •••• •••• •••• 1111{' '}\n                                <Text inline type={TextType.Small} color={Color.DarkGrey}>\n                                    (Visa)\n                                </Text>\n                            </Text>\n                        </IconText>\n                    </Card>\n                </div>\n                <div className=\"col-md-4 u-flex\">\n                    <Card className=\"w-100\" title={t(Translation.Reservation.HotelInformation)}>\n                        <IconText icon={IconType.Map}>\n                            64 Wong Chuk Hang Road\n                            <br />\n                            Southside, Hong Kong\n                        </IconText>\n                        <IconText icon={IconType.Phone}>+852 3460 8100</IconText>\n                    </Card>\n                </div>\n                <div className=\"col-md-4 u-flex\">\n                    <Card className=\"w-100\" title={t(Translation.Reservation.CodeNumberInformation)}>\n                        <Text className=\"u-marg-right--light u-marg-bottom--light\" inline type={TextType.Small}>\n                            Confirmed\n                        </Text>\n                        <Pill className=\"u-marg-bottom--light\" type={PillType.Success}>\n                            #62991SC007872\n                        </Pill>\n                        <Pill className=\"u-marg-bottom--light\" type={PillType.Success}>\n                            #6292SC007234\n                        </Pill>\n                        <br />\n                        <div className=\"u-marg-top--light\">\n                            <Text className=\"u-marg-right--light u-marg-bottom--light\" inline type={TextType.Small}>\n                                Itinerary\n                            </Text>\n                            <Pill className=\"u-marg-bottom--light\" variant={PillVariant.Outlined} type={PillType.Grey}>\n                                #15668B0340984\n                            </Pill>\n                        </div>\n                    </Card>\n                </div>\n            </div>\n            <div className=\"u-marg-top--massive@m u-marg-top@m- u-background--snow u-w-fluid u-pad-top--massive@m u-pad-top--heavy@m- u-pad-bottom--heavy @m- u-pad-bottom--massive@m\">\n                <div className=\"container\">\n                    <Text bold> {t(Translation.Reservation.Policies)}</Text>\n                    <div className=\"u-marg-top--medium\">\n                        <div className=\"u-w-57@m u-w-100@m-\">\n                            <div className=\"u-flex u-flex-direction-column@m- u-flex-gap--medium@m-\">\n                                <Text type={TextType.Small}>\n                                    <strong>{t(Translation.Reservation.CheckIn)}</strong>\n                                    <br />\n                                    {t(Translation.Reservation.After)} 2:00 PM\n                                </Text>\n                                <Text type={TextType.Small}>\n                                    <strong>{t(Translation.Reservation.CheckOut)}</strong>\n                                    <br />\n                                    {t(Translation.Reservation.After)} 2:00 PM\n                                </Text>\n                                <Text type={TextType.Small}>\n                                    <strong>Room 1</strong> Deluxe Queen - Ovolo Southside Escape\n                                    <br />\n                                    <strong>Room 2</strong> Mini Twin - Daily Rate\n                                </Text>\n                            </div>\n                        </div>\n                    </div>\n                    <Text className=\"u-marg-top--medium\" type={TextType.Caption}>\n                        {t(Translation.Reservation.Policy1)}\n                        <br />\n                        <br />\n                        {t(Translation.Reservation.Policy2)}\n                    </Text>\n                </div>\n            </div>\n        </div>\n    );\n};\n"]}

package/dist/src/pages/account/Reservations/AccountReservationSinglePage.d.ts

@@ -0,0 +1 @@
+export declare const AccountReservationSinglePage: () => JSX.Element;