@cirkay-eng/cirkay-components 0.7.2 → 0.7.5

package/dist/components/fan-pass-unlock/fan-pass-unlock.js

@@ -1,31 +1,38 @@
-import { __decorate } from '../../node_modules/.pnpm/@rollup_plugin-typescript@12.1.2_rollup@4.29.1_tslib@2.8.1_typescript@5.7.2/node_modules/tslib/tslib.es6.js';
+import { __decorate } from '../../node_modules/.pnpm/@rollup_plugin-typescript@12.1.2_rollup@4.40.1_tslib@2.8.1_typescript@5.8.3/node_modules/tslib/tslib.es6.js';
 import { css, html } from 'lit';
-import { property, customElement } from 'lit/decorators.js';
+import { property, query } from 'lit/decorators.js';
 import { state } from 'lit/decorators/state.js';
 import '@pushengineering/push-web-components/overlay';
 import '@pushengineering/push-web-components/button';
 import '@pushengineering/push-web-components/header-drawer';
-import { setBasePath } from '@pushengineering/push-web-components';
+import '@pushengineering/push-web-components/horizontal-stack';
 import N3xusApi from '../../base/n3xus/N3xusAPI.js';
 import CirkayElement from '../../internal/CirkayElement.js';
 import { UnlockEvents } from '../../events/unlock.js';
-import { setStoredSession } from '../../utils/helpers.js';
+import { preloadLogos, getLatestSession, clearStoredSession, addSession } from '../../utils/helpers.js';
 import { UnlockStateTypes, LoginState } from './types.js';
 import { LoginController } from '../../controllers/LoginController.js';
-import '../login/login.js';
-import '../frame/frame.js';
-import '../error-screen/error-screen.js';
+import '../login/index.js';
+import '../frame/index.js';
+import '../error-screen/index.js';
+import '../connected/index.js';
+import { LoginStateTypes } from '../login/types.js';
 import { styleMap } from 'lit/directives/style-map.js';
+import { LoginEvents } from '../../events/login.js';
 
-let FanPassUnlock = class FanPassUnlock extends CirkayElement {
+class FanPassUnlock extends CirkayElement {
     constructor() {
         super();
         this.loginController = null;
+        this.interval = null;
+        this.walletCheckResponse = undefined;
+        this.unlockedContent = false;
+        this.nexusAPI = undefined;
         this._unlockState = UnlockStateTypes.locked;
-        this.as = 'page';
         this.apiKey = '';
         this.inline = false;
-        this.fanPassTitle = 'Fan Pass';
+        this.fanPassTitle = 'Clash Pass';
+        this.buttonLabel = 'Connect';
         this.logoSet = {
             large: {
                 src: 'https://n3xus-store.s3.eu-west-2.amazonaws.com/staging/assets/cirkay-logo-transparent-no-padding.webp',
@@ -41,46 +48,122 @@ let FanPassUnlock = class FanPassUnlock extends CirkayElement {
         this.loading = false;
         this.validLoadingState = true;
         this.unlocked = false;
-        this.staging = true;
+        this.staging = false;
         this.debugLogging = false;
         this.error = null;
-        this.showLogin = true;
+        this.cta = false;
+        this.ctaText = 'Connect to unlock';
+        this.unlockDescription = '';
+        this.ctaBackgroundColor = '#000000';
+        this.ctaTextColor = '#FFFFFF';
         this.btnBackgroundColor = '#D60455';
         this.btnTextColor = '#FFFFFF';
         this.faqUrl = 'https://cirkay.com/faq/';
         this._pageNumber = 1;
-        this._nexusAPI = undefined;
         this._user = undefined;
         this._loggingState = LoginState.initialising;
-        const baseUrl = window.location.origin;
-        setBasePath(`${baseUrl}/icons`);
+        const imgApple = new Image();
+        imgApple.src = 'https://cdn.n3xus.services/production/assets/images/US-UK_Add_to_Apple_Wallet_RGB_101421.svg';
+        const imgGoogle = new Image();
+        imgGoogle.src = 'https://cdn.n3xus.services/production/assets/images/enGB_add_to_google_wallet_wallet-button.svg';
+        const imgCirkay = new Image();
+        imgCirkay.src = 'https://n3xus-store.s3.eu-west-2.amazonaws.com/staging/assets/cirkay-logo-transparent-no-padding.webp';
     }
     connectedCallback() {
+        try {
+            preloadLogos(this.logoSet);
+        }
+        catch (error) {
+            console.warn('Error loading logo images', error);
+        }
+        this.loading = true;
         super.connectedCallback();
+        const magicApiOptions = {
+            staging: this.staging,
+        };
         const n3xusOptions = {
             apiKey: this.apiKey,
             stagging: this.staging,
         };
-        this._nexusAPI = new N3xusApi(n3xusOptions);
-        if (!this.logoSet.alt) {
-            this.logoSet.alt = this.fanPassTitle;
-        }
-        const magicApiOptions = {
-            staging: this.staging,
-        };
+        this.nexusAPI = new N3xusApi(n3xusOptions);
         this.loginController = LoginController.getInstance(magicApiOptions, this.debugLogging);
         this.loginController.addHost(this);
+        const session = getLatestSession(this.apiKey);
+        const minutesAgo = Date.now() - 3.5 * 60 * 1000;
+        if (session && !(session.issueTS < minutesAgo)) {
+            this.unlock(session.didToken, session.token, session);
+        }
+        if (!this.logoSet.alt) {
+            this.logoSet.alt = `${this.fanPassTitle} logo`;
+        }
+        this.loading = false;
     }
     async handleLogout() {
-        await this.loginController?.logout();
         this._unlockState = UnlockStateTypes.locked;
+        this.emit(LoginEvents.Logout, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                LoggedIn: false,
+            },
+        });
+        await this.loginController?.logout();
     }
-    async update(changedProperties) {
-        super.update(changedProperties);
+    async willUpdate(changedProperties) {
+        if (changedProperties.has('apiKey')) {
+            const n3xusOptions = {
+                apiKey: this.apiKey,
+                stagging: this.staging,
+            };
+            this.nexusAPI = new N3xusApi(n3xusOptions);
+        }
+        if ((UnlockStateTypes.unlocked === this._unlockState
+            || UnlockStateTypes.lockedLoggingIn === this._unlockState)
+            && this.loginController?.loginInit
+            && !this.loginController?.loggedIn) {
+            this.walletCheckResponse = undefined;
+            this.stopPolling();
+            this._unlockState = UnlockStateTypes.locked;
+        }
+        if ((UnlockStateTypes.unlocked === this._unlockState &&
+            this.loginController?.loginInit &&
+            !this.loginController?.loggedIn) ||
+            (UnlockStateTypes.lockedLoggingIn === this._unlockState &&
+                this.loginController?.loggedIn &&
+                this.loginController?.loginInit) || (UnlockStateTypes.lockedLoggingIn === this._unlockState &&
+            this.loginController?.loginInit &&
+            !this.loginController?.loggedIn)) {
+            this.unlockedContent = false;
+            this.stopPolling();
+            this.emit(LoginEvents.Logout, {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    isLoggedin: false,
+                },
+            });
+        }
         if (this.loginController?.loggedIn &&
             this._unlockState === UnlockStateTypes.locked) {
             await this.handleUnlock();
         }
+        else if (!this.interval && this.loginController?.loggedIn) {
+            this.startPolling();
+            this.checkSessionStatus();
+        }
+        if (this.loginController?.loginInit &&
+            !this.loginController?.loggedIn) {
+            this.unlockedContent = false;
+        }
+    }
+    ctaStyles() {
+        let styles = {};
+        styles = {
+            ...styles,
+            '--cta-color-background': this.ctaBackgroundColor,
+            '--cta-color-text': this.ctaTextColor,
+        };
+        return styles;
     }
     async handleUnlock() {
         this.emit(UnlockEvents.Started, { bubbles: true, composed: true });
@@ -88,39 +171,145 @@ let FanPassUnlock = class FanPassUnlock extends CirkayElement {
         if (!didToken) {
             didToken = await this.loginController?.getDidToken();
         }
-        if (!didToken || !this._nexusAPI) {
+        if (!didToken || !this.nexusAPI) {
             console.error('No did token or api');
             return;
         }
-        this._unlockState = UnlockStateTypes.unlocking;
-        const walletCheckResponse = await this._nexusAPI.checkWalletForNft(didToken);
-        const data = walletCheckResponse.data;
-        if (!data) {
-            console.error('No data in wallet check response');
-            return;
+        if (this._unlockState !== UnlockStateTypes.unlocked) {
+            this._unlockState = UnlockStateTypes.unlocking;
         }
-        if (data.holds == true && data.expired == false) {
-            this._unlockState = UnlockStateTypes.unlocked;
-            if (data.holds) {
-                setStoredSession(JSON.stringify({
-                    token: data.sessionToken,
-                    issueTS: Date.now(),
-                }));
+        if (this.error == null) {
+            await this.unlock(didToken);
+        }
+    }
+    async checkSessionStatus() {
+        const session = getLatestSession(this.apiKey);
+        const minutesAgo = Date.now() - 3.5 * 60 * 1000;
+        if (session && session.issueTS > minutesAgo) {
+            const did = await this.loginController?.getDidToken();
+            if (did && this.loginController?.loggedIn) {
+                this.unlock(did);
             }
-            this.emit(UnlockEvents.Unlocked, {
-                bubbles: true,
-                composed: true,
-                detail: {
-                    sessionToken: data.sessionToken,
-                    email: this.loginController?.user?.email,
-                    apiKey: this.apiKey,
-                },
-            });
         }
         else {
-            this._unlockState = UnlockStateTypes.lockedLoggingIn;
+            clearStoredSession();
+        }
+    }
+    startPolling() {
+        if (!this.interval) {
+            this.interval = setInterval(() => this.checkSessionStatus(), 30000);
+        }
+    }
+    stopPolling() {
+        if (this.interval) {
+            clearInterval(this.interval);
+            this.interval = null;
+        }
+    }
+    async unlock(didToken, sessionToken = null, session = null) {
+        if (!sessionToken) {
+            try {
+                this.walletCheckResponse =
+                    await this.nexusAPI?.checkWalletForNft(this.unlockDescription, didToken);
+                if (this.walletCheckResponse) {
+                    const data = this.walletCheckResponse.data;
+                    if (!data) {
+                        console.error('No data in wallet check response');
+                        return;
+                    }
+                    if (data.holds == true && data.expired == false) {
+                        this._unlockState = UnlockStateTypes.unlocked;
+                        addSession({
+                            token: data.sessionToken,
+                            issueTS: Date.now(),
+                            didToken: didToken,
+                            apiKey: this.apiKey,
+                            mobilePass: this.walletCheckResponse?.data?.mobilePasses,
+                        });
+                        if (this.unlockedContent === false) {
+                            this.unlockedContent = true;
+                            this.emit(UnlockEvents.UnlockComplete, {
+                                bubbles: true,
+                                composed: true,
+                                detail: {
+                                    sessionToken: data.sessionToken,
+                                    email: this.loginController?.user?.email,
+                                    apiKey: this.apiKey,
+                                    unlocked: true,
+                                },
+                            });
+                        }
+                        this.emit(UnlockEvents.MobilePassData, {
+                            bubbles: true,
+                            composed: true,
+                            detail: {
+                                sessionToken: sessionToken,
+                                email: this.loginController?.user?.email,
+                                apiKey: this.apiKey,
+                                unlocked: true,
+                                mobilePass: this.walletCheckResponse.data?.mobilePasses,
+                            },
+                        });
+                    }
+                    else {
+                        this._unlockState = UnlockStateTypes.lockedLoggingIn;
+                        if (this.unlockedContent === false) {
+                            this.unlockedContent = true;
+                            this.emit(UnlockEvents.UnlockComplete, {
+                                bubbles: true,
+                                composed: true,
+                                detail: {
+                                    unlocked: false,
+                                    email: this.loginController?.user?.email,
+                                },
+                            });
+                        }
+                    }
+                }
+                this.loading = false;
+            }
+            catch (err) {
+                if (err instanceof Error) {
+                    this._unlockState = UnlockStateTypes.locked;
+                    this.error = err.message;
+                }
+                else {
+                    this.error = 'An unknown error occurred';
+                }
+                this._unlockState = UnlockStateTypes.locked;
+                await this.handleLogout();
+            }
+        }
+        else {
+            this._unlockState = UnlockStateTypes.unlocked;
+            if (this.unlockedContent === false) {
+                this.unlockedContent = true;
+                this.emit(UnlockEvents.UnlockComplete, {
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        sessionToken: sessionToken,
+                        email: this.loginController?.user?.email,
+                        apiKey: this.apiKey,
+                        unlocked: true,
+                    },
+                });
+                if (session) {
+                    this.emit(UnlockEvents.MobilePassData, {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            sessionToken: sessionToken,
+                            email: this.loginController?.user?.email,
+                            apiKey: this.apiKey,
+                            unlocked: true,
+                            mobilePass: session?.mobilePass ? session?.mobilePass : undefined,
+                        },
+                    });
+                }
+            }
+            this.loading = false;
         }
-        this.loading = false;
     }
     closeOverlay(e) {
         const overlay = this.shadowRoot?.getElementById('fb-modal');
@@ -143,10 +332,35 @@ let FanPassUnlock = class FanPassUnlock extends CirkayElement {
         };
         return styles;
     }
+    setPageNumber(number) {
+        if (number !== undefined) {
+            this._pageNumber = number;
+            return;
+        }
+        const loginState = this._loginComponent?.getCurrentState();
+        switch (loginState) {
+            case LoginStateTypes.initialising:
+            case LoginStateTypes.initialised:
+                this._pageNumber = 1;
+                break;
+            case LoginStateTypes.requestCode:
+            case LoginStateTypes.enterLoginCode:
+            case LoginStateTypes.optCodeSubmited:
+            case LoginStateTypes.isLoggedInLoading:
+                this._pageNumber = 2;
+                break;
+            case LoginStateTypes.optFailed:
+            case LoginStateTypes.isLoggedIn:
+                this._pageNumber = 3;
+                break;
+            default:
+                this._pageNumber = 1;
+                break;
+        }
+    }
     renderContent() {
         switch (this._unlockState) {
             case UnlockStateTypes.locked:
-                this._pageNumber = 1;
                 return html `
                     ${this.error
                     ? html `
@@ -157,7 +371,7 @@ let FanPassUnlock = class FanPassUnlock extends CirkayElement {
                                       type="button"
                                       class="button"
                                       name="disconnect"
-                                      size="large"
+                                      size="medium"
                                       buttonstyle="solid"
                                   >
                                       <pu-text
@@ -176,6 +390,7 @@ let FanPassUnlock = class FanPassUnlock extends CirkayElement {
                               <fp-login
                                   id="login"
                                   buttonLabel="Submit"
+                                  logoSet=${JSON.stringify(this.logoSet)}
                                   apiKey=${this.apiKey}
                                   btnBackgroundColor=${this.btnBackgroundColor}
                                   btnTextColor=${this.btnTextColor}
@@ -187,12 +402,13 @@ let FanPassUnlock = class FanPassUnlock extends CirkayElement {
                           `}
                 `;
             case UnlockStateTypes.unlocking:
-                this._pageNumber = 2;
+                this.setPageNumber(2);
                 return html `
                     <pu-text as="p" variant="bodyLg" withoutMargin>
-                        Unlocking...
+                        Connecting...
                     </pu-text>
                     <svg
+                        part="loading__spinner"
                         class="loading__spinner"
                         width="16"
                         height="16"
@@ -208,7 +424,7 @@ let FanPassUnlock = class FanPassUnlock extends CirkayElement {
                     </svg>
                 `;
             case UnlockStateTypes.unlocked:
-                this._pageNumber = 3;
+                this.setPageNumber(3);
                 return html `
                     <pu-text as="p" variant="bodyLg" withoutMargin>
                         You are connected!
@@ -222,7 +438,7 @@ let FanPassUnlock = class FanPassUnlock extends CirkayElement {
                         class="button"
                         style="${styleMap(this.buttonStyles())}"
                         name="disconnect"
-                        size="large"
+                        size="medium"
                         buttonstyle="solid"
                     >
                         <pu-text
@@ -237,8 +453,100 @@ let FanPassUnlock = class FanPassUnlock extends CirkayElement {
                     </pu-button>
                 `;
             case UnlockStateTypes.lockedLoggingIn:
-                this._pageNumber = 3;
+                this.setPageNumber(3);
+                return html `
+                    <fp-error-screen
+                        errorText="You don't seem to have a valid ${this
+                    .fanPassTitle}"
+                    >
+                        <pu-button
+                            slot="button"
+                            style="${styleMap(this.buttonStyles())}"
+                            @click=${this.handleLogout}
+                            type="button"
+                            class="button"
+                            name="disconnect"
+                            size="medium"
+                            buttonstyle="solid"
+                        >
+                            <pu-text
+                                as="span"
+                                variant="bodyMd"
+                                fontWeight="regular"
+                                withoutMargin
+                                spacing="loose"
+                            >
+                                Start over
+                            </pu-text>
+                        </pu-button>
+                    </fp-error-screen>
+                `;
+            default:
+                this.setPageNumber(3);
                 return html `
+                    <fp-error-screen errorText="Something went wrong">
+                        <pu-button
+                            slot="button"
+                            style="${styleMap(this.buttonStyles())}"
+                            @click=${this.handleLogout}
+                            type="button"
+                            class="button"
+                            name="disconnect"
+                            size="medium"
+                            buttonstyle="solid"
+                        >
+                            <pu-text
+                                as="span"
+                                variant="bodyMd"
+                                fontWeight="regular"
+                                withoutMargin
+                                spacing="loose"
+                            >
+                                Start over
+                            </pu-text>
+                        </pu-button>
+                    </fp-error-screen>
+                `;
+        }
+    }
+    connectedRender(content = '') {
+        return html `
+            <fp-connected 
+                fanPassTitle=${this.fanPassTitle}
+                ?showMobilePassButtons=${false}
+                displayText=${this._unlockState === UnlockStateTypes.unlocked ? "You're connected!" : `You don't have a valid ${this.fanPassTitle}`}
+                apiKey=${this.apiKey} 
+                ?stagging=${this.staging}
+                ?debugLogging=${this.debugLogging}
+                ?ownsFp=${this._unlockState === UnlockStateTypes.unlocked ? true : false}
+            >
+                <div part="form-content" slot="form-content">
+                    <form part="email-signup-form">
+                        <label part="label">
+                            <input part="input" type="checkbox" name="emailSignup" value="true">
+                            Sign up for email updates
+                        </label>
+                    </form>
+                </div>
+            <slot>${content}</slot>
+        </fp-connected>
+        `;
+    }
+    renderConnectButton() {
+        if (this._unlockState === UnlockStateTypes.unlocked) {
+            return html ``;
+        }
+        return html `<pu-button
+                    class="button"
+                    style="${styleMap(this.buttonStyles())}"
+                    @click=${this.openOverlay}
+                    type="button"
+                    name="unlock"
+                    size="medium"
+                    ?disabled=${this.loading || (this.loginController?.loginInit === false) || (!this.walletCheckResponse && this.loginController?.loggedIn)}
+                    ?loading=${(this.loginController?.loginInit === false || (!this.walletCheckResponse && this.loginController?.loggedIn))}
+                    buttonstyle="solid"
+                >
                     <pu-text
                         as="span"
                         variant="bodyMd"
@@ -246,154 +554,126 @@ let FanPassUnlock = class FanPassUnlock extends CirkayElement {
                         withoutMargin
                         spacing="loose"
                     >
-                        You don't seem to have a valid ${this.fanPassTitle}
+                        ${this.buttonLabel}
                     </pu-text>
-                    <pu-button
-                        class="button"
-                        style="${styleMap(this.buttonStyles())}"
-                        @click=${this.handleLogout}
-                        type="button"
-                        name="claim"
-                        size="large"
-                        buttonstyle="solid"
-                    >
-                        <pu-text
-                            as="span"
-                            variant="bodyMd"
-                            fontWeight="regular"
-                            withoutMargin
-                            spacing="loose"
-                        >
-                            Start over
-                        </pu-text>
-                    </pu-button>
-                `;
-            default:
-                this._pageNumber = 3;
-                return html ` <fp-error-screen
-                    slot="errorScreen"
-                    errorText="Something went wrong"
-                >
-                    <pu-button
-                        slot="button"
-                        style="${styleMap(this.buttonStyles())}"
-                        @click=${this.handleLogout}
-                        type="button"
-                        class="button"
-                        name="disconnect"
-                        size="large"
-                        buttonstyle="solid"
-                    >
-                        <pu-text
-                            as="span"
-                            variant="bodyMd"
-                            fontWeight="regular"
-                            withoutMargin
-                            spacing="loose"
-                        >
-                            Start over
-                        </pu-text>
-                    </pu-button>
-                </fp-error-screen>`;
-        }
+                </pu-button>`;
     }
     render() {
-        if (this._unlockState === UnlockStateTypes.unlocked) {
-            return html `
-             <pu-text
-                as="span"
-                variant="bodyMd"
-                fontWeight="regular"
-                withoutMargin
-                spacing="loose"
-            >
-                Content unlocked
-            </pu-text>
-            <pu-button
-                slot="button"
-                @click=${this.handleLogout}
-                type="button"
-                class="button"
-                name="disconnect"
-                size="large"
-                buttonstyle="solid"
-            >
-                <pu-text
-                    as="span"
-                    variant="bodyMd"
-                    fontWeight="regular"
-                    withoutMargin
-                    spacing="loose"
-                >
-                    Disconnect
-                </pu-text>
-            </pu-button>
-
-            `;
+        this.setPageNumber();
+        if ((this._unlockState === UnlockStateTypes.unlocked)
+            ||
+                this.walletCheckResponse) {
+            return this.connectedRender();
         }
         if (this.inline) {
             return html `
-                <fp-frame
-                    fanPassTitle=${this.fanPassTitle}
-                    maxPages=${3}
-                    currentPageNumber=${this._pageNumber}
-                    .logoSet=${this.logoSet}
-                >
-                    ${this.renderContent()}
-                </fp-frame>
-            `;
-        }
-        return html `
-            <pu-button
-                class="button"
-                style="${styleMap(this.buttonStyles())}"
-                @click=${this.openOverlay}
-                type="button"
-                name="unlock"
-                size="large"
-                buttonstyle="solid"
-            >
-                <pu-text
-                    as="span"
-                    variant="bodyMd"
-                    fontWeight="regular"
-                    withoutMargin
-                    spacing="loose"
-                >
-                    Unlock
-                </pu-text>
-            </pu-button>
-            <pu-overlay id="fb-modal">
-                <pu-box slot="content" class="modalContentBox" padding=${100}>
                     <fp-frame
                         fanPassTitle=${this.fanPassTitle}
-                        maxPages=${4}
+                        maxPages=${3}
+                        currentPageNumber=${this._pageNumber}
                         .logoSet=${this.logoSet}
                     >
+                        <pu-text as="p" variant="bodyLg" withoutMargin>
+                            ${this.fanPassTitle}
+                        </pu-text>
                         ${this.renderContent()}
                     </fp-frame>
-                    <pu-button-icon
-                        icon="close"
-                        as="button"
-                        for="overlay"
-                        aria-expanded=${true}
-                        size="large"
-                        @click=${this.closeOverlay}
-                        style="position: absolute; top: 1rem; right: 1rem; z-index: 501"
+            `;
+        }
+        return html `
+                ${this.cta ? html `
+                    <pu-horizontal-stack
+                        spacing="24"
+                        align="center"
+                        mobileAlign="center"
+                        justify="center"
+                        mobileJustify="center"
+                        class="cta"
+                        style="${styleMap(this.ctaStyles())}"
+                    > 
+
+                    <pu-text
+                        as="span"
+                        variant="bodyMd"
+                        fontWeight="regular"
+                        withoutMargin
+                        spacing="loose"
+                        
                     >
-                    </pu-button-icon>
-                </pu-box>
-            </pu-overlay>
+                        ${this.ctaText}
+                    </pu-text>
+                    ${this.renderConnectButton()}
+                </pu-horizontal-stack>
+                        ` : this.renderConnectButton()}
+
+                <pu-overlay id="fb-modal" class="fb-modal">
+                    <pu-box slot="content" class="modalContentBox" padding=${100} mobilePadding='60, 0'>
+                        <fp-frame
+                            fanPassTitle=${this.fanPassTitle}
+                            maxPages=${3}
+                            currentPageNumber=${this._pageNumber}
+                            .logoSet=${this.logoSet}
+                        >
+                            <pu-text as="p" variant="bodyLg" withoutMargin>
+                                ${this.fanPassTitle}
+                            </pu-text>
+                            ${this.renderContent()}
+                        </fp-frame>
+                        <button
+                            part="button-icon"
+                            class="button-icon close-modal"
+                            style="position: absolute; top: 1rem; right: 1rem; z-index: 501"
+                            type="button"
+                            aria-label="Close modal"
+                            aria-controls="overlay"
+                            @click=${this.closeOverlay}
+                        >
+                            <svg
+                                xmlns="http://www.w3.org/2000/svg"
+                                id="close"
+                                part="icon"
+                                class="icon"
+                                width="1em"
+                                height="1em"
+                                viewBox="0 0 384 512"
+                                role="presentation"
+                                aria-hidden="true"
+                                focusable="false"
+                                fill="currentColor"
+                            >
+                                <path
+                                    d="M192 233.4L59.5 100.9 36.9 123.5 169.4 256 36.9 388.5l22.6 22.6L192 278.6 324.5 411.1l22.6-22.6L214.6 256 347.1 123.5l-22.6-22.6L192 233.4z"
+                                />
+                            </svg>
+                        </button>
+                    </pu-box>
+                </pu-overlay>
         `;
     }
-};
+}
 FanPassUnlock.styles = css `
-        /* Add your component styles here */
+        .cta {
+            background-color: var(--cta-color-background, #000000);
+            color: var(--cta-color-text, #ffffff);
+            border-radius: 1.5rem;
+            padding: 1.5rem 1.5rem 1.5rem 1.5rem;
+        }    
+        .fb-modal {
+            --pu-color-overlay-background: rgba(0, 0, 0, 0.2);
+            position: fixed;
+            z-index: 999999;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            right: 0;
+            pointer-events: none;
+            bottom: 0;
+        }
         .modalContentBox {
             background-color: #fff;
             position: relative;
-            height: max-content;
-            /* max-height: 800px; */
+            height: 100vh;
 
             @media only screen and (min-width: 48.06rem) {
                 --pu-border-base-corner-radius: var(
@@ -403,20 +683,74 @@ FanPassUnlock.styles = css `
                 border-radius: var(--pu-border-base-corner-radius);
                 box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.25);
                 max-width: 800px;
+            height: max-content;
+
             }
         }
 
+
+        /* buttons */
         .button::part(button) {
             --pu-border-button-corner-radius: var(--pu-border-radius-20, 12px);
         }
 
+        .disconnectButton {
+            --pu-size-button-height: 1rem;
+        }
+
+        .button-icon {
+            position: absolute;
+            top: 1rem;
+            right: 1rem;
+            z-index: 501;
+            cursor: pointer;
+            border: none;
+            border-radius: var(
+                --pu-border-icon-corner-radius,
+                var(--pu-border-base-corner-radius, 0)
+            );
+            font-size: var(--pu-font-size-icon, 1.5rem);
+            padding: 0;
+            color: var(--pu-color-icon-text, inherit);
+            background-color: var(--pu-color-icon-background, inherit);
+        }
+
+        @supports (color: rgb(from white r g b)) {
+            .button-icon {
+                color: rgb(
+                    from var(--pu-color-icon-text, inherit) r g b / alpha
+                );
+                background-color: rgb(
+                    from var(--pu-color-icon-background, inherit) r g b / alpha
+                );
+            }
+        }
+
+        .button-icon > * {
+            position: relative;
+            display: block;
+            padding: var(
+                --pu-space-icon-padding,
+                var(--pu-space-padding, 0.5rem)
+            );
+        }
+
+        .button-icon:hover {
+            opacity: 0.7;
+        }
+
+        .button-icon[disabled]:hover {
+            opacity: 0.7;
+        }
+
+        /* loading spinner animation */
         .loading__spinner {
             animation-name: spin;
             animation-duration: 500ms;
             animation-timing-function: cubic-bezier(0, 0, 1, 1);
             animation-iteration-count: infinite;
             fill: currentcolor;
-            color: var(--pu-color-base-text);
+            color: var(--pu-color-base-text, rgb(160, 160, 160));
             height: 3rem;
             width: 3rem;
             left: 50%;
@@ -433,9 +767,6 @@ FanPassUnlock.styles = css `
 __decorate([
     state()
 ], FanPassUnlock.prototype, "_unlockState", void 0);
-__decorate([
-    property({ type: String })
-], FanPassUnlock.prototype, "as", void 0);
 __decorate([
     property({ type: String })
 ], FanPassUnlock.prototype, "apiKey", void 0);
@@ -445,6 +776,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], FanPassUnlock.prototype, "fanPassTitle", void 0);
+__decorate([
+    property({ type: String })
+], FanPassUnlock.prototype, "buttonLabel", void 0);
 __decorate([
     property({ type: Object })
 ], FanPassUnlock.prototype, "logoSet", void 0);
@@ -468,7 +802,19 @@ __decorate([
 ], FanPassUnlock.prototype, "error", void 0);
 __decorate([
     property({ type: Boolean })
-], FanPassUnlock.prototype, "showLogin", void 0);
+], FanPassUnlock.prototype, "cta", void 0);
+__decorate([
+    property({ type: String })
+], FanPassUnlock.prototype, "ctaText", void 0);
+__decorate([
+    property({ type: String })
+], FanPassUnlock.prototype, "unlockDescription", void 0);
+__decorate([
+    property({ type: String })
+], FanPassUnlock.prototype, "ctaBackgroundColor", void 0);
+__decorate([
+    property({ type: String })
+], FanPassUnlock.prototype, "ctaTextColor", void 0);
 __decorate([
     property({ type: String })
 ], FanPassUnlock.prototype, "btnBackgroundColor", void 0);
@@ -481,18 +827,15 @@ __decorate([
 __decorate([
     state()
 ], FanPassUnlock.prototype, "_pageNumber", void 0);
-__decorate([
-    state()
-], FanPassUnlock.prototype, "_nexusAPI", void 0);
 __decorate([
     state()
 ], FanPassUnlock.prototype, "_user", void 0);
 __decorate([
     state()
 ], FanPassUnlock.prototype, "_loggingState", void 0);
-FanPassUnlock = __decorate([
-    customElement('fan-pass-unlock')
-], FanPassUnlock);
+__decorate([
+    query('fp-login')
+], FanPassUnlock.prototype, "_loginComponent", void 0);
 
-export { FanPassUnlock };
+export { FanPassUnlock as default };
 //# sourceMappingURL=fan-pass-unlock.js.map