@roomstay/frontend 2.6.18 → 2.6.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/main.bundle.js +1 -1
- package/dist/src/engines/MemberPortalWidget/MemberPortalWidget.d.ts +1 -0
- package/dist/src/engines/MemberPortalWidget/MemberPortalWidget.js.map +1 -1
- package/dist/src/engines/MemberPortalWidget/MemberPortalWidgetElement.js +17 -9
- package/dist/src/engines/MemberPortalWidget/MemberPortalWidgetElement.js.map +1 -1
- package/dist/test.bundle.js +1 -1
- package/package.json +1 -1
|
@@ -15,6 +15,7 @@ export interface MemberPortalWidgetConfig extends BaseEngineConfig {
|
|
|
15
15
|
fallbackPlacements?: Placement;
|
|
16
16
|
onSignedIn?: (user: IRoomstayMember) => void;
|
|
17
17
|
onSignedOut?: () => void;
|
|
18
|
+
renderInput?: (member?: IRoomstayMember | null, isLoading?: boolean) => JSX.Element | string;
|
|
18
19
|
}
|
|
19
20
|
export declare class MemberPortalWidget extends BaseEngine<MemberPortalWidgetConfig> {
|
|
20
21
|
constructor(bookingContainer: HTMLElement, config?: MemberPortalWidgetConfig);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MemberPortalWidget.js","sourceRoot":"/","sources":["src/engines/MemberPortalWidget/MemberPortalWidget.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAIA,qDAAyF;AAGzF,0FAAkE;AAElE,2EAAuE;
|
|
1
|
+
{"version":3,"file":"MemberPortalWidget.js","sourceRoot":"/","sources":["src/engines/MemberPortalWidget/MemberPortalWidget.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;AAIA,qDAAyF;AAGzF,0FAAkE;AAElE,2EAAuE;AAcvE,MAAa,kBAAmB,SAAQ,uBAAoC;IACxE,YAAmB,gBAA6B,EAAE,MAAiC;QAC/E,KAAK,CAAC,gBAAgB,EAAE,MAAM,CAAC,CAAC;QAChC,IAAI,CAAC,MAAM,GAAG,gCAAmB,CAAC,IAAI,CAAC;QAEvC,4CAA4C;QAC5C,6BAAmB,CAAC,eAAe,CAAC,SAAS,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC;IAC1E,CAAC;IAEe,MAAM;;YAClB,IAAA,oDAAwB,EAAC,6BAAmB,CAAC,4BAA4B,CAAC,KAAK,EAAE,sBAAsB,CAAC,EAAE,IAAI,CAAC,CAAC;QACpH,CAAC;KAAA;CACJ;AAZD,gDAYC","sourcesContent":["import { Placement } from '@popperjs/core';\nimport { IRoomstayMember } from '@roomstay/core';\n\nimport { MenuItemType } from '@/components/generic/modal/SigninModal/AuthenticatedUserModal';\nimport { BaseEngine, BaseEngineConfig, BookingEngineSource } from '@/engines/BaseEngine';\nimport { ConfigCompany } from '@/models/Client/Hotel/Company';\nimport { Hotel } from '@/models/Client/Hotel/Hotel';\nimport RoomstayThemeEngine from '@/providers/RoomstayThemeEngine';\n\nimport { renderMemberPortalWidget } from './MemberPortalWidgetElement';\n\nexport interface MemberPortalWidgetConfig extends BaseEngineConfig {\n company: Pick<ConfigCompany, 'colors' | 'companyShort'> & { checkoutLink?: string; hotel: string | Hotel };\n authMenuItem?: MenuItemType[];\n buttonClass?: string;\n overlayPlacement?: Placement;\n fallbackPlacements?: Placement;\n onSignedIn?: (user: IRoomstayMember) => void;\n onSignedOut?: () => void;\n\n renderInput?: (member?: IRoomstayMember | null, isLoading?: boolean) => JSX.Element | string;\n}\n\nexport class MemberPortalWidget extends BaseEngine<MemberPortalWidgetConfig> {\n public constructor(bookingContainer: HTMLElement, config?: MemberPortalWidgetConfig) {\n super(bookingContainer, config);\n this.source = BookingEngineSource.Auth;\n\n // TODO: Make this a more permanent solution\n RoomstayThemeEngine.EngineContainer.classList.add('--transparent-bg');\n }\n\n protected async render() {\n renderMemberPortalWidget(RoomstayThemeEngine.createElementOrReuseExisting('div', 'member-portal-widget'), this);\n }\n}\n"]}
|
|
@@ -58,6 +58,22 @@ function MemberPortalWidgetElement({ engine }) {
|
|
|
58
58
|
(_a = engineConfig.onSignedIn) === null || _a === void 0 ? void 0 : _a.call(engineConfig, roomstayMember);
|
|
59
59
|
}
|
|
60
60
|
}, [roomstayMember]);
|
|
61
|
+
const buttonElement = (0, react_1.useMemo)(() => {
|
|
62
|
+
if (engineConfig.renderInput) {
|
|
63
|
+
return (react_1.default.createElement("div", { ref: loginAnchorEl, onClick: onLoginClickHandler }, engineConfig.renderInput(roomstayMember, loading)));
|
|
64
|
+
}
|
|
65
|
+
else {
|
|
66
|
+
return (react_1.default.createElement("div", { ref: loginAnchorEl, style: { width: 'fit-content' } }, roomstayMember ? (react_1.default.createElement(BEButton_1.default, { isLoading: loading, size: "small", className: engineConfig.buttonClass, onClick: onLoginClickHandler, stopIconAnimation: true },
|
|
67
|
+
roomstayMember.forename,
|
|
68
|
+
" ",
|
|
69
|
+
roomstayMember.surname,
|
|
70
|
+
react_1.default.createElement("span", { className: "u-white u-pad-left--light", style: { marginRight: -13 } },
|
|
71
|
+
react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowDown2, size: "1.3em", color: Color_1.Color.DarkGrey })))) : (react_1.default.createElement(BEButton_1.default, { isLoading: loading, size: "small", className: engineConfig.buttonClass, onClick: onLoginClickHandler, stopIconAnimation: true },
|
|
72
|
+
t(Translation_1.Translation.Navigation.SignIn.SignIn),
|
|
73
|
+
react_1.default.createElement("span", { className: "u-white u-pad-left--light", style: { marginRight: -13 } },
|
|
74
|
+
react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowDown2, size: "1.3em", color: Color_1.Color.DarkGrey }))))));
|
|
75
|
+
}
|
|
76
|
+
}, [engineConfig.renderInput, roomstayMember, loading]);
|
|
61
77
|
const authProps = {
|
|
62
78
|
open: loginModalOpen,
|
|
63
79
|
anchorEl: loginAnchorEl.current,
|
|
@@ -76,15 +92,7 @@ function MemberPortalWidgetElement({ engine }) {
|
|
|
76
92
|
onClose: closeLoginClickHandler,
|
|
77
93
|
};
|
|
78
94
|
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
79
|
-
|
|
80
|
-
roomstayMember.forename,
|
|
81
|
-
" ",
|
|
82
|
-
roomstayMember.surname,
|
|
83
|
-
react_1.default.createElement("span", { className: "u-white u-pad-left--light", style: { marginRight: -13 } },
|
|
84
|
-
react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowDown2, size: "1.3em", color: Color_1.Color.DarkGrey })))) : (react_1.default.createElement(BEButton_1.default, { isLoading: loading, size: "small", className: engineConfig.buttonClass, onClick: onLoginClickHandler, stopIconAnimation: true },
|
|
85
|
-
t(Translation_1.Translation.Navigation.SignIn.SignIn),
|
|
86
|
-
react_1.default.createElement("span", { className: "u-white u-pad-left--light", style: { marginRight: -13 } },
|
|
87
|
-
react_1.default.createElement(Icon_1.default, { icon: Icon_1.IconType.ArrowDown2, size: "1.3em", color: Color_1.Color.DarkGrey }))))),
|
|
95
|
+
buttonElement,
|
|
88
96
|
react_1.default.createElement(react_1.Suspense, { fallback: SmallSpinner_1.default }, roomstayMember ? react_1.default.createElement(AuthenticatedUserModal_1.AuthenticatedUserModal, Object.assign({}, authProps)) : react_1.default.createElement(UnauthenticatedUserModal_1.UnauthenticatedUserModal, Object.assign({}, unauthProps)))));
|
|
89
97
|
}
|
|
90
98
|
exports.default = MemberPortalWidgetElement;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MemberPortalWidgetElement.js","sourceRoot":"/","sources":["src/engines/MemberPortalWidget/MemberPortalWidgetElement.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,iDAAqK;AACrK,+
|
|
1
|
+
{"version":3,"file":"MemberPortalWidgetElement.js","sourceRoot":"/","sources":["src/engines/MemberPortalWidget/MemberPortalWidgetElement.tsx"],"names":[],"mappings":"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","sourcesContent":["import { AuthenticationContext, AuthenticationContextProvider, BookingEngineContextWrapper, CompanyContextWrapper, RoomstayMemberContext } from '@frontend/contexts';\nimport React, { Suspense, useContext, useEffect, useMemo, useRef, useState } from 'react';\nimport { render } from 'react-dom';\nimport { useTranslation } from 'react-i18next';\nimport { HashRouter } from 'react-router-dom';\n\nimport BEButton from '@/components/generic/BEButton';\nimport Icon, { IconType } from '@/components/generic/Icon/Icon';\nimport SmallSpinner from '@/components/generic/loader/SmallSpinner';\nimport { AuthenticatedUserModal, AuthenticatedUserModalProps } from '@/components/generic/modal/SigninModal/AuthenticatedUserModal';\nimport { UnauthenticatedUserModal, UnauthenticatedUserModalProps } from '@/components/generic/modal/SigninModal/UnauthenticatedUserModal';\nimport { ConfigCompany } from '@/models/Client/Hotel/Company';\nimport { ConfigHotel } from '@/models/Client/Hotel/Hotel';\nimport { Translation } from '@/translations/Translation';\nimport { Color } from '@/util/Color';\n\nimport { MemberPortalWidget, MemberPortalWidgetConfig } from './MemberPortalWidget';\n\nexport interface MemberPortalWidgetElementProps extends Omit<MemberPortalWidgetConfig, 'company'> {\n engine: MemberPortalWidget;\n}\n\nexport default function MemberPortalWidgetElement({ engine }: MemberPortalWidgetElementProps) {\n const engineConfig = engine.getConfig();\n\n const { roomstayMember } = useContext(RoomstayMemberContext);\n const { loading } = useContext(AuthenticationContext);\n\n const { t } = useTranslation();\n const [loginModalOpen, setLoginModalOpen] = useState(false);\n const loginAnchorEl = useRef<HTMLDivElement | null>(null);\n\n const closeLoginClickHandler = () => {\n setLoginModalOpen(false);\n };\n\n const onLoginClickHandler = () => {\n setLoginModalOpen(true);\n };\n\n useEffect(() => {\n if (roomstayMember) {\n engineConfig.onSignedIn?.(roomstayMember);\n }\n }, [roomstayMember]);\n\n const buttonElement = useMemo(() => {\n if (engineConfig.renderInput) {\n return (\n <div ref={loginAnchorEl} onClick={onLoginClickHandler}>\n {engineConfig.renderInput(roomstayMember, loading)}\n </div>\n );\n } else {\n return (\n <div ref={loginAnchorEl} style={{ width: 'fit-content' }}>\n {roomstayMember ? (\n <BEButton isLoading={loading} size=\"small\" className={engineConfig.buttonClass} onClick={onLoginClickHandler} stopIconAnimation>\n {roomstayMember.forename} {roomstayMember.surname}\n <span className=\"u-white u-pad-left--light\" style={{ marginRight: -13 }}>\n <Icon icon={IconType.ArrowDown2} size=\"1.3em\" color={Color.DarkGrey} />\n </span>\n </BEButton>\n ) : (\n <BEButton isLoading={loading} size=\"small\" className={engineConfig.buttonClass} onClick={onLoginClickHandler} stopIconAnimation>\n {t(Translation.Navigation.SignIn.SignIn)}\n <span className=\"u-white u-pad-left--light\" style={{ marginRight: -13 }}>\n <Icon icon={IconType.ArrowDown2} size=\"1.3em\" color={Color.DarkGrey} />\n </span>\n </BEButton>\n )}\n </div>\n );\n }\n }, [engineConfig.renderInput, roomstayMember, loading]);\n\n const authProps: AuthenticatedUserModalProps = {\n open: loginModalOpen,\n anchorEl: loginAnchorEl.current,\n menuItems: engineConfig.authMenuItem,\n placement: engineConfig.overlayPlacement || 'bottom-end',\n fallbackPlacements: engineConfig.fallbackPlacements,\n basePath: engineConfig.company.checkoutLink,\n onClose: closeLoginClickHandler,\n onSignedOut: engineConfig.onSignedOut,\n };\n\n const unauthProps: UnauthenticatedUserModalProps = {\n open: loginModalOpen,\n anchorEl: loginAnchorEl.current,\n placement: engineConfig.overlayPlacement || 'bottom-end',\n fallbackPlacements: engineConfig.fallbackPlacements,\n onClose: closeLoginClickHandler,\n };\n\n return (\n <>\n {buttonElement}\n <Suspense fallback={SmallSpinner}>{roomstayMember ? <AuthenticatedUserModal {...authProps} /> : <UnauthenticatedUserModal {...unauthProps} />}</Suspense>\n </>\n );\n}\n\nexport const renderMemberPortalWidget = (container: Element, engine: MemberPortalWidget) => {\n const config = engine.getConfig();\n const companyConfig = config.company;\n\n const company: ConfigCompany = {\n name: '',\n logo: '',\n companyShort: companyConfig.companyShort,\n colors: companyConfig.colors,\n selectedHotel: companyConfig.hotel,\n hotels:\n typeof companyConfig.hotel === 'string'\n ? [\n {\n hotelID: companyConfig.hotel,\n } as ConfigHotel,\n ]\n : [companyConfig.hotel],\n };\n\n render(\n <Suspense fallback={<></>}>\n <HashRouter>\n <BookingEngineContextWrapper engine={engine}>\n <CompanyContextWrapper configCompany={company}>\n <AuthenticationContextProvider>\n <MemberPortalWidgetElement engine={engine} />\n </AuthenticationContextProvider>\n </CompanyContextWrapper>\n </BookingEngineContextWrapper>\n </HashRouter>\n </Suspense>,\n container\n );\n};\n"]}
|