@roomstay/frontend 2.1.32 → 2.2.0

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

@@ -1 +1 @@
-{"version":3,"file":"AccountDetailsProfilePage.js","sourceRoot":"/","sources":["src/pages/account/Details/AccountDetailsProfilePage.tsx"],"names":[],"mappings":"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","sourcesContent":["import 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>\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            });\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 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>\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 filled htmlType=\"submit\">\n                        Save all changes\n                    </BEButton>\n                </div>\n            </form>\n        </>\n    );\n};\n"]}
+{"version":3,"file":"AccountDetailsProfilePage.js","sourceRoot":"/","sources":["src/pages/account/Details/AccountDetailsProfilePage.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAqD;AAErD,6EAAqD;AACrD,6IAAqH;AACrH,6EAAqD;AACrD,yDAA0D;AAC1D,+EAAuD;AACvD,kEAA2D;AAC3D,2EAAmD;AACnD,sIAA8G;AAE9G,qDAAkE;AAClE,uDAAwC;AACxC,wCAAqC;AAGrC,iDAAgF;AAChF,kDAAqH;AACrH,8EAA2E;AAC3E,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,uCAAK,SAAS,EAAC,0BAA0B;QACrC,uCAAK,SAAS,EAAC,UAAU;YACrB,8BAAC,cAAI,IAAC,IAAI,EAAE,eAAQ,CAAC,KAAK,EAAE,IAAI,UAC3B,KAAK,CACH,CACL;QACN,uCAAK,SAAS,EAAC,UAAU;YACpB,SAAS;YACT,CAAC,CAAC,KAAK,IAAI,CACR,qCAAG,SAAS,EAAC,YAAY,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAChD,KAAK,CAAC,OAAO,CACd,CACP;YAEA,CAAC,CAAC,IAAI,IAAI,CACP,8BAAC,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,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAG,MAAM,EAAE,IAAI,CAAC,GAAG,EAAE;YACpC,aAAa,CAAC,eAAe,CAAC;gBAC1B,IAAI,EAAE,eAAQ,CAAC,KAAK;gBACpB,QAAQ,EAAE,8BAAC,cAAI,QAAE,CAAC,CAAC,yBAAW,CAAC,UAAU,CAAC,aAAa,CAAC,wBAAwB,CAAC,CAAQ;aAC5F,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,uCAAK,SAAS,EAAC,uDAAuD;YAClE,8BAAC,uBAAI,IAAC,EAAE,EAAE,6BAAa,CAAC,IAAI,CAAC,IAAI;gBAC7B,8BAAC,kBAAQ,IAAC,MAAM,QAAC,IAAI,EAAE,eAAQ,CAAC,SAAS,EAAE,IAAI,EAAC,OAAO,IAClD,CAAC,CAAC,yBAAW,CAAC,WAAW,CAAC,iBAAiB,CAAC,CACtC,CACR,CACL;QACN,uCAAK,SAAS,EAAC,wBAAwB;YACnC,8BAAC,kBAAQ,IAAC,IAAI,EAAC,aAAa,EAAC,IAAI,UAC5B,CAAC,CAAC,yBAAW,CAAC,UAAU,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAC3C,CACT;QACN,wCAAM,QAAQ,EAAE,YAAY,CAAC,aAAa,CAAC;YACvC,uCAAK,SAAS,EAAC,KAAK;gBAChB,uCAAK,SAAS,EAAC,UAAU;oBACrB;wBACI,8BAAC,kBAAkB,IACf,KAAK,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC,EACvD,SAAS,EACL,8BAAC,iBAAO,kBACJ,gBAAgB,EAAE,uBAAuB,CAAC,UAAU,CAAC,IACjD,QAAQ,CAAC,UAAU,EAAE;gCACrB,QAAQ,EAAE,IAAA,6BAAgB,EAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;6BACxF,CAAC,EACJ,EAEN,KAAK,EAAE,MAAM,CAAC,QAAQ,GACxB;wBACF,8BAAC,kBAAkB,IACf,KAAK,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO,CAAC,EACtD,SAAS,EACL,8BAAC,iBAAO,kBACJ,gBAAgB,EAAE,uBAAuB,CAAC,SAAS,CAAC,IAChD,QAAQ,CAAC,SAAS,EAAE;gCACpB,QAAQ,EAAE,IAAA,6BAAgB,EAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;6BACvF,CAAC,EACJ,EAEN,KAAK,EAAE,MAAM,CAAC,OAAO,GACvB;wBACF,8BAAC,kBAAkB,IACf,KAAK,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,EACpD,SAAS,EAAE,8BAAC,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,8BAAC,kBAAkB,IACf,KAAK,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,CAAC,EACpD,SAAS,EACL,8BAAC,4BAAU,IACP,KAAK,EAAE;oCACH,OAAO,EAAE,IAAA,iCAAoB,EAAC,CAAC,CAAC;iCACnC,EACD,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,aAAa,EAClB,MAAM,EAAE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;oCAClB,OAAO,CACH,8BAAC,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,8BAAC,mBAAS,OAAG;wBAEb,8BAAC,kBAAkB,IACf,KAAK,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC,EACvD,SAAS,EACL,8BAAC,yBAAW,kBACR,WAAW,EAAC,4FAAiB,IACzB,QAAQ,CAAC,UAAU,EAAE;gCACrB,OAAO,EAAE,IAAA,oCAAuB,EAAC,CAAC,CAAC;6BACtC,CAAC,IACF,gBAAgB,EAAE,uBAAuB,CAAC,UAAU,CAAC,IACvD,EAEN,IAAI,EAAC,kFAAkF,EACvF,KAAK,EAAE,MAAM,CAAC,QAAQ,GACxB;wBACF,8BAAC,kBAAkB,IACf,KAAK,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,eAAe,CAAC,EAC9D,SAAS,EACL,8BAAC,yBAAW,kBACR,WAAW,EAAC,4FAAiB,IACzB,QAAQ,CAAC,gBAAgB,EAAE;gCAC3B,QAAQ,EAAE,IAAA,6BAAgB,EAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;gCAC3G,QAAQ,EAAE;oCACN,MAAM,EAAE,IAAA,4BAAe,EAAC,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;iCAChD;6BACJ,CAAC,IACF,gBAAgB,EAAE,uBAAuB,CAAC,gBAAgB,CAAC,IAC7D,EAEN,KAAK,EAAE,MAAM,CAAC,cAAc,GAC9B;wBAEF,8BAAC,mBAAS,OAAG;wBAEb,8BAAC,kBAAkB,IAAC,KAAK,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,SAAS,EAAE,8BAAC,iBAAO,oBAAK,QAAQ,CAAC,iBAAiB,CAAC,EAAI,GAAI;wBACvI,8BAAC,kBAAkB,IAAC,KAAK,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,8BAAC,iBAAO,oBAAK,QAAQ,CAAC,cAAc,CAAC,EAAI,GAAI;wBACjI,8BAAC,kBAAkB,IAAC,KAAK,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,SAAS,EAAE,8BAAC,iBAAO,oBAAK,QAAQ,CAAC,aAAa,CAAC,EAAI,GAAI;wBACpI,8BAAC,kBAAkB,IACf,KAAK,EAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,OAAO,CAAC,EACtD,SAAS,EACL,8BAAC,4BAAU,IACP,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,iBAAiB,EACtB,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,8BAAC,yCAA+B,oBAAK,IAAI,EAAI,CAAC;gCACzD,CAAC,GACH,GAER,CACA,CACJ,CACJ;YAEN,uCAAK,SAAS,EAAC,gDAAgD;gBAC3D,8BAAC,uBAAI,IAAC,EAAE,EAAC,eAAe,EAAC,SAAS,EAAC,cAAc;oBAC7C,8BAAC,kBAAQ,QAAE,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,MAAM,CAAC,CAAY,CAC9C;gBACP,8BAAC,kBAAQ,IAAC,QAAQ,EAAE,kBAAkB,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,QAAC,MAAM,QAAC,QAAQ,EAAC,QAAQ,IAC/F,CAAC,CAAC,yBAAW,CAAC,IAAI,CAAC,cAAc,CAAC,CAC5B,CACT,CACH,CACR,CACN,CAAC;AACN,CAAC,CAAC;AA9KW,QAAA,yBAAyB,6BA8KpC","sourcesContent":["import React, { 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, makePasswordPatternRule, makePhonePatternRule, makeRequiredRule } 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>\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>{t(Translation.UserPortal.ProfileScreen.DetailsSavedSuccessfully)}</Text>,\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 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>\n                    {t(Translation.Navigation.Menu.ProfileInformation)}\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={t(Translation.Step.Confirmation.Inputs.Forename)}\n                                component={\n                                    <TextBox\n                                        validationStatus={getErrorValidationClass('forename')}\n                                        {...register('forename', {\n                                            required: makeRequiredRule(t)(true, t(Translation.Step.Confirmation.Inputs.Forename)),\n                                        })}\n                                    />\n                                }\n                                error={errors.forename}\n                            />\n                            <LabelAndInputGroup\n                                label={t(Translation.Step.Confirmation.Inputs.Surname)}\n                                component={\n                                    <TextBox\n                                        validationStatus={getErrorValidationClass('surname')}\n                                        {...register('surname', {\n                                            required: makeRequiredRule(t)(true, t(Translation.Step.Confirmation.Inputs.Surname)),\n                                        })}\n                                    />\n                                }\n                                error={errors.surname}\n                            />\n                            <LabelAndInputGroup\n                                label={t(Translation.Step.Confirmation.Inputs.Email)}\n                                component={<TextBox validationStatus={getErrorValidationClass('email')} inputProps={{ disabled: true }} value={roomstayMember?.email} />}\n                                error={errors.email}\n                            />\n                            <LabelAndInputGroup\n                                label={t(Translation.Step.Confirmation.Inputs.Phone)}\n                                component={\n                                    <Controller\n                                        rules={{\n                                            pattern: makePhonePatternRule(t),\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={t(Translation.Step.Confirmation.Inputs.Password)}\n                                component={\n                                    <PasswordBox\n                                        placeholder=\"•••••••••••••••\"\n                                        {...register('password', {\n                                            pattern: makePasswordPatternRule(t),\n                                        })}\n                                        validationStatus={getErrorValidationClass('password')}\n                                    />\n                                }\n                                hint=\"At least 8 characters long, case sensitive, can contain all symbols., no spaces.\"\n                                error={errors.password}\n                            />\n                            <LabelAndInputGroup\n                                label={t(Translation.Step.Confirmation.Inputs.ConfirmPassword)}\n                                component={\n                                    <PasswordBox\n                                        placeholder=\"•••••••••••••••\"\n                                        {...register('passwordRepeat', {\n                                            required: makeRequiredRule(t)(!!watch('password'), t(Translation.Step.Confirmation.Inputs.ConfirmPassword)),\n                                            validate: {\n                                                isSame: isPasswordMatch(t)(watch('password')),\n                                            },\n                                        })}\n                                        validationStatus={getErrorValidationClass('passwordRepeat')}\n                                    />\n                                }\n                                error={errors.passwordRepeat}\n                            />\n\n                            <LineBreak />\n\n                            <LabelAndInputGroup label={t(Translation.Step.Confirmation.Inputs.Address)} component={<TextBox {...register('address.address')} />} />\n                            <LabelAndInputGroup label={t(Translation.Step.Confirmation.Inputs.City)} component={<TextBox {...register('address.city')} />} />\n                            <LabelAndInputGroup label={t(Translation.Step.Confirmation.Inputs.PostCode)} component={<TextBox {...register('address.zip')} />} />\n                            <LabelAndInputGroup\n                                label={t(Translation.Step.Confirmation.Inputs.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>{t(Translation.Misc.Cancel)}</BEButton>\n                    </Link>\n                    <BEButton disabled={saveButtonDisabled} isLoading={isLoadingMember} primary filled htmlType=\"submit\">\n                        {t(Translation.Misc.SaveAllChanges)}\n                    </BEButton>\n                </div>\n            </form>\n        </>\n    );\n};\n"]}

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

@@ -44,8 +44,7 @@ const Icon_1 = require("../../../components/generic/Icon/Icon");
 const Text_1 = __importStar(require("../../../components/generic/Text"));
 const TextArea_1 = __importDefault(require("../../../components/generic/TextArea"));
 const TextBox_1 = __importDefault(require("../../../components/generic/TextBox"));
-const react_1 = __importDefault(require("react"));
-const react_2 = require("react");
+const react_1 = __importStar(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");
@@ -55,6 +54,7 @@ const BookingAPI_1 = __importDefault(require("../../../api/BookingAPI"));
 const hooks_1 = require("../../../hooks/index.js");
 const AccountRoutes_1 = require("../AccountRoutes");
 const EnhancedPhoneNumberField_1 = __importDefault(require("../../../components/generic/custom/EnhancedPhoneNumberField/EnhancedPhoneNumberField"));
+const Validation_1 = require("../../../util/Validation");
 const AccountHelpPage = () => {
     const { t } = (0, react_i18next_1.useTranslation)();
     const { hotel } = (0, hooks_1.useCurrentHotel)();
@@ -63,9 +63,9 @@ const AccountHelpPage = () => {
         mode: 'onChange',
         reValidateMode: 'onBlur',
     });
-    const [apiStatus, setApiStatus] = (0, react_2.useState)({});
-    const [isLoading, setIsLoading] = (0, react_2.useState)(false);
-    (0, react_2.useEffect)(() => {
+    const [apiStatus, setApiStatus] = (0, react_1.useState)({});
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
         if (user) {
             reset({
                 name: fullName,
@@ -104,9 +104,9 @@ const AccountHelpPage = () => {
     return (react_1.default.createElement("div", null,
         react_1.default.createElement("div", { className: "u-marg-top--heavy@m u-marg-top@m- u-marg-bottom--heavy" },
             react_1.default.createElement(react_router_dom_1.Link, { to: AccountRoutes_1.AccountRoutes.Home.path },
-                react_1.default.createElement(BEButton_1.default, { isText: true, icon: Icon_1.IconType.ArrowLeft, size: "small" }, "BACK TO YOUR ACCOUNT"))),
+                react_1.default.createElement(BEButton_1.default, { isText: true, icon: Icon_1.IconType.ArrowLeft, size: "small" }, t(Translation_1.Translation.Reservation.BackToYourAccount)))),
         react_1.default.createElement("div", { className: "u-marg-bottom--heavy u-pad-top@m" },
-            react_1.default.createElement(Headline_1.default, { size: "extra-large", className: "u-marg-bottom" }, "Need some help?")),
+            react_1.default.createElement(Headline_1.default, { size: "extra-large", className: "u-marg-bottom" }, t(Translation_1.Translation.UserPortal.HelpScreen.NeedSomeHelp))),
         react_1.default.createElement("form", { onSubmit: handleSubmit(onSubmit), className: "u-marg-bottom", style: { maxWidth: 500 } },
             react_1.default.createElement(AutoAutoHeight_1.default, { open: !!formState.errors },
                 react_1.default.createElement("div", { className: "u-flex flex-column" }, Object.keys(formState.errors).map((errorName, index) => {
@@ -116,31 +116,22 @@ const AccountHelpPage = () => {
                 }))),
             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")),
+                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Navy, bold: true }, t(Translation_1.Translation.UserPortal.HelpScreen.Name))),
                 react_1.default.createElement(TextBox_1.default, Object.assign({ required: true, validationStatus: getValidationClass('name') }, register('name', {
-                    required: { message: `Name is required`, value: true },
+                    required: (0, Validation_1.makeRequiredRule)(t)(true, t(Translation_1.Translation.UserPortal.HelpScreen.Name)),
                 })))),
             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 }, t(Translation_1.Translation.Navigation.SignIn.EmailAddress))),
                 react_1.default.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),
-                    },
+                    required: (0, Validation_1.makeRequiredRule)(t)(true, t(Translation_1.Translation.Navigation.SignIn.EmailAddress)),
+                    pattern: (0, Validation_1.makeEmailPatternRule)(t),
                 })))),
             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 }, "Telephone")),
+                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Navy, bold: true }, t(Translation_1.Translation.UserPortal.HelpScreen.Telephone))),
                 react_1.default.createElement(react_hook_form_1.Controller, { rules: {
-                        pattern: {
-                            value: /.*\s\d+/,
-                            message: 'Telephone is required',
-                        },
+                        pattern: (0, Validation_1.makePhonePatternRule)(t),
                     }, control: control, name: "telephone", render: ({ field }) => {
                         return (react_1.default.createElement(EnhancedPhoneNumberField_1.default, Object.assign({}, field, { onChange: (e) => {
                                 field.onChange(e);
@@ -148,11 +139,11 @@ const AccountHelpPage = () => {
                     } })),
             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 }, "Message")),
+                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Label, color: Color_1.Color.Navy, bold: true }, t(Translation_1.Translation.UserPortal.HelpScreen.Message))),
                 react_1.default.createElement(TextArea_1.default, Object.assign({ required: true }, register('message', {
-                    required: { message: 'Message is required', value: true },
+                    required: (0, Validation_1.makeRequiredRule)(t)(true, t(Translation_1.Translation.UserPortal.HelpScreen.Message)),
                 })))),
-            react_1.default.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_1.default.createElement(BEButton_1.default, { icon: Icon_1.IconType.ArrowRight, iconPosition: "right", filled: true, primary: true, htmlType: "submit", isLoading: isLoading, disabled: isLoading || apiStatus.success }, t(Translation_1.Translation.Misc.Submit))),
         react_1.default.createElement(AutoAutoHeight_1.default, { open: !!apiStatus.success },
             react_1.default.createElement("div", { className: "u-pad-top" },
                 react_1.default.createElement(Text_1.default, { color: Color_1.Color.Success }, t(Translation_1.Translation.Step.Room.ErrorForm.ConfirmationMessage)))),

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

@@ -1 +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 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 as string, {\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        }\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 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\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\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\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"]}
+{"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 React, { 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';\nimport { makeEmailPatternRule, makePhonePatternRule, makeRequiredRule } from '@/util/Validation';\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 as string, {\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        }\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 icon={IconType.ArrowLeft} size=\"small\">\n                        {t(Translation.Reservation.BackToYourAccount)}\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                    {t(Translation.UserPortal.HelpScreen.NeedSomeHelp)}\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                            {t(Translation.UserPortal.HelpScreen.Name)}\n                        </Text>\n                    </div>\n                    <TextBox\n                        required\n                        validationStatus={getValidationClass('name')}\n                        {...register('name', {\n                            required: makeRequiredRule(t)(true, t(Translation.UserPortal.HelpScreen.Name)),\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\n                        validationStatus={getValidationClass('email')}\n                        {...register('email', {\n                            required: makeRequiredRule(t)(true, t(Translation.Navigation.SignIn.EmailAddress)),\n                            pattern: makeEmailPatternRule(t),\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.UserPortal.HelpScreen.Telephone)}\n                        </Text>\n                    </div>\n                    <Controller\n                        rules={{\n                            pattern: makePhonePatternRule(t),\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                            {t(Translation.UserPortal.HelpScreen.Message)}\n                        </Text>\n                    </div>\n                    <TextArea\n                        required\n                        {...register('message', {\n                            required: makeRequiredRule(t)(true, t(Translation.UserPortal.HelpScreen.Message)),\n                        })}\n                    />\n                </div>\n                <BEButton icon={IconType.ArrowRight} iconPosition=\"right\" filled primary htmlType=\"submit\" isLoading={isLoading} disabled={isLoading || apiStatus.success}>\n                    {t(Translation.Misc.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/AccountReservationSinglePage.js

@@ -51,6 +51,10 @@ const ReservationList_1 = __importDefault(require("../../../components/reservati
 const SimpleModal_1 = __importStar(require("../../../components/generic/modal/SimpleModal"));
 const BookingAPI_1 = __importDefault(require("../../../api/BookingAPI"));
 const Currency_1 = __importDefault(require("../../../components/generic/Currency"));
+const hooks_1 = require("../../../hooks");
+const PrintOnly_1 = __importDefault(require("../../../components/generic/print/PrintOnly"));
+const dayjs_1 = __importDefault(require("dayjs"));
+const ModifyBookingFeature_1 = __importDefault(require("../../../providers/feature/ModifyBookingFeature"));
 const getRoomNamesString = (itineraries) => {
     var _a;
     const roomNames = {};
@@ -68,6 +72,7 @@ const getRoomNamesString = (itineraries) => {
 const CancelReservationModal = (props) => {
     const { items, booking, visible, onClose } = props;
     const { fetchRoomstayMember } = (0, react_1.useContext)(contexts_1.RoomstayMemberContext);
+    const { t } = (0, react_i18next_1.useTranslation)();
     const [isLoading, setIsLoading] = (0, react_1.useState)(false);
     const onCancelClick = () => {
         const cancellations = [];
@@ -84,11 +89,11 @@ const CancelReservationModal = (props) => {
     };
     const footers = (react_1.default.createElement("div", { className: "d-flex u-pad align-items-center justify-content-center" },
         react_1.default.createElement("div", { className: "u-marg-right" },
-            react_1.default.createElement(BEButton_1.default, { isText: true, onClick: onClose }, "Abort")),
-        react_1.default.createElement(BEButton_1.default, { filled: true, primary: true, onClick: onCancelClick, isLoading: isLoading }, "Yes i'm sure")));
-    return (react_1.default.createElement(SimpleModal_1.default, { title: "Cancelling Reservation", open: visible, size: SimpleModal_1.SimpleModalSize.ExtraSmall, desktopFooter: footers, mobileFooter: footers, onClose: onClose },
+            react_1.default.createElement(BEButton_1.default, { isText: true, onClick: onClose }, t(Translation_1.Translation.Misc.Abort))),
+        react_1.default.createElement(BEButton_1.default, { filled: true, primary: true, onClick: onCancelClick, isLoading: isLoading }, t(Translation_1.Translation.Misc.YesImSure))));
+    return (react_1.default.createElement(SimpleModal_1.default, { title: t(Translation_1.Translation.Misc.CancellingReservation), open: visible, size: SimpleModal_1.SimpleModalSize.ExtraSmall, desktopFooter: footers, mobileFooter: footers, onClose: onClose },
         react_1.default.createElement("div", { className: "u-pad" },
-            react_1.default.createElement(Text_1.default, null, "This will cancel..."))));
+            react_1.default.createElement(Text_1.default, null, t(Translation_1.Translation.Misc.ThisWillCancel)))));
 };
 const CodeNumberInformation = (props) => {
     const { itineraries, booking } = props;
@@ -110,12 +115,12 @@ const CodeNumberInformation = (props) => {
         [
             { label: 'Cancelled', value: cancelled, type: Pill_1.PillType.Danger },
             { label: 'Confirmed', value: confirmed, type: Pill_1.PillType.Success },
-        ].map((item) => {
+        ].map((item, index) => {
             if (item.value.length > 0) {
-                return (react_1.default.createElement(react_1.default.Fragment, null,
+                return (react_1.default.createElement(react_1.Fragment, { key: index },
                     react_1.default.createElement(Text_1.default, { className: "u-marg-right--light", inline: true, type: Text_1.TextType.Small }, item.label),
-                    item.value.map((row, index) => {
-                        return (react_1.default.createElement(react_1.Fragment, { key: index },
+                    item.value.map((row, rowIndex) => {
+                        return (react_1.default.createElement(react_1.Fragment, { key: rowIndex },
                             react_1.default.createElement(Text_1.default, { className: "u-marg-right", inline: true, type: Text_1.TextType.Small },
                                 react_1.default.createElement(Pill_1.default, { type: item.type },
                                     "#",
@@ -125,16 +130,19 @@ const CodeNumberInformation = (props) => {
             }
         }),
         react_1.default.createElement("div", { className: "u-marg-top" },
-            react_1.default.createElement(Text_1.default, { className: "u-marg-right--light", inline: true, type: Text_1.TextType.Small }, "Itinerary"),
+            react_1.default.createElement(Text_1.default, { className: "u-marg-right--light", inline: true, type: Text_1.TextType.Small }, t(Translation_1.Translation.UserPortal.ReservationSingleScreen.Itinerary)),
             react_1.default.createElement(Pill_1.default, { variant: Pill_1.PillVariant.Outlined, type: Pill_1.PillType.Grey },
                 "#",
                 booking.itineraryId))));
 };
+const displayTime = (timeString) => (0, dayjs_1.default)().set('hours', +timeString.slice(0, 2)).set('minute', +timeString.slice(2)).format('h:mm A');
 const AccountReservationSinglePage = () => {
-    var _a, _b, _c, _d, _e, _f, _g;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     const { t } = (0, react_i18next_1.useTranslation)();
+    const { hotel } = (0, hooks_1.useCurrentHotel)();
     const beContext = (0, react_1.useContext)(contexts_1.BookingEngineContext);
     const { getHotel } = (0, react_1.useContext)(contexts_1.CompanyContext);
+    const ccx = (0, react_1.useContext)(contexts_1.CompanyContext);
     const { getItinerary } = (0, LoggedInUserHook_1.useMember)();
     const [showingCancellationFor, setShowingCancellationFor] = (0, react_1.useState)(null);
     const [bookingHotel, setBookingHotel] = (0, react_1.useState)();
@@ -145,7 +153,7 @@ const AccountReservationSinglePage = () => {
         const booking = getItinerary(params.resId);
         if (booking === null || booking === void 0 ? void 0 : booking.itinerary) {
             for (const itinerary of Object.values(booking.itinerary)) {
-                itineraries.push(Object.assign(Object.assign({}, itinerary), { bookingId: booking.itineraryId }));
+                itineraries.push(Object.assign(Object.assign({}, itinerary), { bookingId: booking.itineraryId, hotel: booking.hotel, hotelId: booking.hotelId }));
             }
         }
         return [booking, itineraries];
@@ -157,16 +165,10 @@ const AccountReservationSinglePage = () => {
             });
         }
     }, [booking, getHotel]);
-    const allCancelled = (0, react_1.useMemo)(() => {
-        for (const row of itineraries) {
-            if (row.status !== core_1.IBookingStatus.Cancelled) {
-                return false;
-            }
-            return true;
-        }
-    }, [itineraries]);
+    const allCancelled = (0, react_1.useMemo)(() => itineraries.every((row) => row.status === core_1.IBookingStatus.Cancelled), [itineraries]);
+    const allCancellable = (0, react_1.useMemo)(() => itineraries.every((row) => row.isCancellable), [itineraries]);
     if (!booking) {
-        return react_1.default.createElement(react_1.default.Fragment, null, "Loading");
+        return react_1.default.createElement(react_1.default.Fragment, null, t(Translation_1.Translation.Misc.Loading));
     }
     const { line1, line2, postalCode, country } = (_a = bookingHotel === null || bookingHotel === void 0 ? void 0 : bookingHotel.address) !== null && _a !== void 0 ? _a : {};
     const onActionClick = (action, item) => {
@@ -182,13 +184,15 @@ const AccountReservationSinglePage = () => {
     const onPrintClicked = () => {
         window.print();
     };
-    return (react_1.default.createElement("div", null,
-        react_1.default.createElement("div", { className: "u-marg-top--heavy@m u-marg-top@m- u-marg-bottom--heavy u-print-none" },
+    const hotelImageElement = (hotel === null || hotel === void 0 ? void 0 : hotel.logo) && typeof hotel.logo !== 'string' ? hotel.logo : react_1.default.createElement("img", { src: typeof (hotel === null || hotel === void 0 ? void 0 : hotel.logo) === 'string' ? hotel.logo : ccx.logo, alt: "Hotel Logo", className: "u-block" });
+    return (react_1.default.createElement("div", { id: `reservation-body-${booking.itineraryId}` },
+        !!((_b = booking === null || booking === void 0 ? void 0 : booking.hotel) === null || _b === void 0 ? void 0 : _b.colors) && react_1.default.createElement("style", null, `#reservation-body-${booking.itineraryId} {${(0, Color_1.getAccentOverrideStyleContent)(booking.hotel.colors)}}`),
+        react_1.default.createElement("div", { className: "u-marg-top--heavy@m u-marg-top@m- u-marg-bottom--light u-print-none" },
             react_1.default.createElement(react_router_dom_1.Link, { to: AccountRoutes_1.AccountRoutes.Reservations.path },
                 react_1.default.createElement(BEButton_1.default, { isText: true, icon: Icon_1.IconType.ArrowLeft, size: "small" }, t(Translation_1.Translation.Reservation.BackToYourReservations)))),
-        react_1.default.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- u-print-none" },
+        react_1.default.createElement("div", { className: "u-flex-align-stretch@m- u-flex u-flex-align-flex-end u-marg-bottom u-pad-top@m u-flex-direction-column@m- u-print-none" },
             react_1.default.createElement("div", null,
-                react_1.default.createElement(Text_1.default, { className: "u-marg-bottom--light" }, StringHelper_1.default.pluralWithCount(itineraries.length, 'Room')),
+                react_1.default.createElement(Text_1.default, { className: "u-marg-bottom--light" }, StringHelper_1.default.pluralWithCount(itineraries.length, 'Room', t)),
                 react_1.default.createElement(Headline_1.default, { size: "extra-large", className: "u-marg-bottom--light" }, getRoomNamesString(itineraries)),
                 react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Body }, bookingHotel === null || bookingHotel === void 0 ? void 0 :
                     bookingHotel.name,
@@ -197,11 +201,16 @@ const AccountReservationSinglePage = () => {
             react_1.default.createElement("div", { className: "u-flex u-flex-gap u-flex-direction-column@m- u-flex-gap--light@m- u-marg-top--heavy@m-" },
                 react_1.default.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_1.default.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", onClick: onPrintClicked }, t(Translation_1.Translation.Reservation.Print)),
-                !allCancelled && (react_1.default.createElement(BEButton_1.default, { danger: true, wide: isMobile, mobileWidth: true, rounded: isMobile, textColor: Color_1.Color.Alert, isText: !isMobile, onClick: () => setShowingCancellationFor(itineraries) }, StringHelper_1.default.plural(itineraries.length, t(Translation_1.Translation.Reservation.CancelReservation)))))),
+                !allCancelled && (react_1.default.createElement(react_1.default.Fragment, null,
+                    ModifyBookingFeature_1.default.isActive() ? (react_1.default.createElement(BEButton_1.default, { wide: isMobile, mobileWidth: true, rounded: isMobile, textColor: Color_1.Color.Navy, isText: !isMobile, disabled: !allCancellable }, StringHelper_1.default.plural(itineraries.length, t(Translation_1.Translation.Reservation.ModifyReservation), t))) : null,
+                    react_1.default.createElement(BEButton_1.default, { danger: true, wide: isMobile, mobileWidth: true, rounded: isMobile, textColor: Color_1.Color.Alert, isText: !isMobile, onClick: () => setShowingCancellationFor(itineraries), disabled: !allCancellable }, StringHelper_1.default.plural(itineraries.length, t(Translation_1.Translation.Reservation.CancelReservation), t)))))),
         react_1.default.createElement("span", { className: "u-print-none" },
-            react_1.default.createElement(LineBreak_1.default, { fullBleed: true })),
-        react_1.default.createElement("div", { className: "u-marg-bottom--massive u-marg-bottom--none@m- u-print-marg-none" },
-            react_1.default.createElement(ReservationList_1.default, { actions: [ReservationItem_1.ReservationAction.Cancel, ReservationItem_1.ReservationAction.BookAgain], reservationItems: itineraries, onActionClick: onActionClick, showCancelledNotifications: true })),
+            react_1.default.createElement(LineBreak_1.default, { smallMargins: true, fullBleed: true })),
+        react_1.default.createElement(PrintOnly_1.default, null,
+            react_1.default.createElement("div", { className: "c-header  d-inline-block" },
+                react_1.default.createElement("div", { className: "c-header__logo u-flex u-flex-align-center" }, hotelImageElement))),
+        react_1.default.createElement("div", { className: "u-marg-bottom--massive u-marg-bottom--none@m- u-print-marg-none u-marg-top--heavy" },
+            react_1.default.createElement(ReservationList_1.default, { actions: [ReservationItem_1.ReservationAction.Cancel, ReservationItem_1.ReservationAction.Modify, ReservationItem_1.ReservationAction.BookAgain], reservationItems: itineraries, onActionClick: onActionClick, showCancelledNotifications: true })),
         react_1.default.createElement(LineBreak_1.default, { noMargins: isMobile }),
         react_1.default.createElement("div", { className: "u-flex u-marg-top--heavy@m-" },
             react_1.default.createElement(Headline_1.default, { size: "large", bold: true }, t(Translation_1.Translation.Reservation.Total)),
@@ -211,14 +220,12 @@ const AccountReservationSinglePage = () => {
                 react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, color: Color_1.Color.DarkGrey }, t(Translation_1.Translation.Reservation.PriceNote)))),
         react_1.default.createElement("div", { className: "row u-marg-top--massive@m u-marg-top--heavy@m-" },
             react_1.default.createElement("div", { className: "col-md-4 u-flex u-print-col-md-4" },
-                react_1.default.createElement(Card_1.Card, { className: "w-100", title: t(Translation_1.Translation.Reservation.ProfileInformation) },
-                    react_1.default.createElement(IconText_1.default, { icon: Icon_1.IconType.Person }, ((_c = (_b = itineraries === null || itineraries === void 0 ? void 0 : itineraries[0]) === null || _b === void 0 ? void 0 : _b.profile) === null || _c === void 0 ? void 0 : _c.firstName) + ' ' + ((_e = (_d = itineraries === null || itineraries === void 0 ? void 0 : itineraries[0]) === null || _d === void 0 ? void 0 : _d.profile) === null || _e === void 0 ? void 0 : _e.lastName)),
-                    react_1.default.createElement(IconText_1.default, { icon: Icon_1.IconType.Email }, (_g = (_f = itineraries === null || itineraries === void 0 ? void 0 : itineraries[0]) === null || _f === void 0 ? void 0 : _f.profile) === null || _g === void 0 ? void 0 : _g.email),
-                    react_1.default.createElement(IconText_1.default, { icon: Icon_1.IconType.CreditCard },
-                        react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
-                            "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 1111",
-                            ' ',
-                            react_1.default.createElement(Text_1.default, { inline: true, type: Text_1.TextType.Small, color: Color_1.Color.DarkGrey }, "(Visa)"))))),
+                react_1.default.createElement(Card_1.Card, { className: "w-100", title: t(Translation_1.Translation.Navigation.Menu.PaymentInformation) },
+                    react_1.default.createElement(IconText_1.default, { icon: Icon_1.IconType.Person }, ((_d = (_c = itineraries === null || itineraries === void 0 ? void 0 : itineraries[0]) === null || _c === void 0 ? void 0 : _c.profile) === null || _d === void 0 ? void 0 : _d.firstName) + ' ' + ((_f = (_e = itineraries === null || itineraries === void 0 ? void 0 : itineraries[0]) === null || _e === void 0 ? void 0 : _e.profile) === null || _f === void 0 ? void 0 : _f.lastName)),
+                    react_1.default.createElement(IconText_1.default, { icon: Icon_1.IconType.Email }, (_h = (_g = itineraries === null || itineraries === void 0 ? void 0 : itineraries[0]) === null || _g === void 0 ? void 0 : _g.profile) === null || _h === void 0 ? void 0 : _h.email),
+                    react_1.default.createElement(IconText_1.default, { icon: Icon_1.IconType.CreditCard, TextProps: { type: Text_1.TextType.Small } },
+                        "\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 1111 ",
+                        react_1.default.createElement("span", { style: { color: Color_1.Color.DarkGrey } }, "(Visa)")))),
             react_1.default.createElement("div", { className: "col-md-4 u-flex u-print-col-md-4" },
                 react_1.default.createElement(Card_1.Card, { className: "w-100", title: t(Translation_1.Translation.Reservation.HotelInformation) },
                     react_1.default.createElement(IconText_1.default, { icon: Icon_1.IconType.Map },
@@ -238,29 +245,38 @@ const AccountReservationSinglePage = () => {
                     " ",
                     t(Translation_1.Translation.Reservation.Policies)),
                 react_1.default.createElement("div", { className: "u-marg-top--medium" },
-                    react_1.default.createElement("div", { className: "u-w-100" },
-                        react_1.default.createElement("div", { className: "u-flex u-flex-direction-column@m- u-flex-gap--medium@m-" },
+                    react_1.default.createElement("div", { className: "u-w-100 row" },
+                        react_1.default.createElement("div", { className: "u-flex u-flex-direction-column@m- u-flex-gap--medium@m- col-6 col-md-3" },
                             react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
                                 react_1.default.createElement("strong", null, t(Translation_1.Translation.Reservation.CheckIn)),
                                 react_1.default.createElement("br", null),
                                 t(Translation_1.Translation.Reservation.After),
-                                " 2:00 PM"),
+                                " ",
+                                displayTime(booking.hotel.checkInTime)),
                             react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
                                 react_1.default.createElement("strong", null, t(Translation_1.Translation.Reservation.CheckOut)),
                                 react_1.default.createElement("br", null),
-                                t(Translation_1.Translation.Reservation.After),
-                                " 2:00 PM"),
-                            react_1.default.createElement("div", null, itineraries.map((itinerary) => {
-                                return (react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, key: itinerary.id },
-                                    itinerary.roomName,
-                                    " - ",
-                                    itinerary.rateName));
-                            }))))),
-                react_1.default.createElement(Text_1.default, { className: "u-marg-top--medium", type: Text_1.TextType.Caption },
-                    t(Translation_1.Translation.Reservation.Policy1),
-                    react_1.default.createElement("br", null),
-                    react_1.default.createElement("br", null),
-                    t(Translation_1.Translation.Reservation.Policy2)))),
+                                t(Translation_1.Translation.Reservation.Before),
+                                " ",
+                                displayTime(booking.hotel.checkOutTime))))),
+                react_1.default.createElement("div", { className: "u-marg-bottom" }, itineraries.map((itinerary, index) => (react_1.default.createElement("div", { key: index, className: "u-marg-top--heavy" },
+                    react_1.default.createElement("div", { className: "u-marg-bottom" },
+                        react_1.default.createElement(Text_1.default, { key: index, type: Text_1.TextType.Small },
+                            react_1.default.createElement("strong", null,
+                                t(Translation_1.Translation.Misc.Room),
+                                " ",
+                                index + 1),
+                            "\u00A0",
+                            itinerary.roomName,
+                            " - ",
+                            itinerary.rateName)),
+                    react_1.default.createElement("div", { className: "u-marg-bottom" },
+                        react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, bold: true, className: "u-marg-bottom--light" }, t(Translation_1.Translation.Misc.GuaranteePolicy)),
+                        react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                            react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: itinerary.guaranteePolicyLongDescription || '' } }))),
+                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small, bold: true, className: "u-marg-bottom--light" }, t(Translation_1.Translation.Misc.CancellationPolicy)),
+                    react_1.default.createElement(Text_1.default, { type: Text_1.TextType.Small },
+                        react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: itinerary.cancellationPolicyLongDescription || '' } })))))))),
         react_1.default.createElement(CancelReservationModal, { onClose: onCloseCancellationModal, items: showingCancellationFor, booking: booking, visible: !!showingCancellationFor })));
 };
 exports.AccountReservationSinglePage = AccountReservationSinglePage;