@cirkay-eng/cirkay-components 0.7.1

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

@@ -0,0 +1,837 @@
+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 { css, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { state } from 'lit/decorators/state.js';
+import '@pushengineering/push-web-components/button';
+import '@pushengineering/push-web-components/button-icon';
+import '@pushengineering/push-web-components/text';
+import '@pushengineering/push-web-components/vertical-stack';
+import '@pushengineering/push-web-components/overlay';
+import { setBasePath } from '@pushengineering/push-web-components';
+import N3xusApi from '../../base/n3xus/N3xusAPI.js';
+import { ClaimEvents } from '../../events/claim.js';
+import CirkayElement from '../../internal/CirkayElement.js';
+import { MintStatus } from '../../base/n3xus/types.js';
+import '../login/login.js';
+import '../frame/frame.js';
+import '../error-screen/error-screen.js';
+import { ClaimStateTypes, LoginState } from './types.js';
+import { LoginController } from '../../controllers/LoginController.js';
+import { getStoredSession, setStoredSession } from '../../utils/helpers.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+let FanPassClaim = class FanPassClaim extends CirkayElement {
+    constructor() {
+        super();
+        this.loginController = null;
+        this.nexusAPI = undefined;
+        this.apiKey = '';
+        this.logoSet = {
+            large: {
+                src: 'https://n3xus-store.s3.eu-west-2.amazonaws.com/staging/assets/cirkay-logo-transparent-no-padding.webp',
+            },
+            medium: {
+                src: 'https://n3xus-store.s3.eu-west-2.amazonaws.com/staging/assets/cirkay-logo-transparent-no-padding.webp',
+            },
+            small: {
+                src: 'https://n3xus-store.s3.eu-west-2.amazonaws.com/staging/assets/cirkay-logo-transparent-no-padding.webp',
+            },
+            alt: 'Cirkay Logo',
+        };
+        this.fanPassTitle = 'Fan Pass';
+        this.redeemToken = '';
+        this.modal = false;
+        this.validateAfterModal = false;
+        this.staging = true;
+        this.debugLogging = false;
+        this.successUrl = 'https://cirkay.com';
+        this.autoRedirect = false;
+        this.showRedeemInput = false;
+        this.success = false;
+        this.error = '';
+        this.btnBackgroundColor = '#D60455';
+        this.btnTextColor = '#FFFFFF';
+        this.faqUrl = 'https://cirkay.com/faq/';
+        this._claimState = ClaimStateTypes.validating;
+        this._pageNumber = 1;
+        this._user = undefined;
+        this._loginState = LoginState.initialising;
+        this._tokenStatus = null;
+        const baseUrl = window.location.origin;
+        setBasePath(`${baseUrl}/icons`);
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        const magicApiOptions = {
+            staging: this.staging,
+        };
+        this.loginController = LoginController.getInstance(magicApiOptions, this.debugLogging);
+        this.loginController.addHost(this);
+        const n3xusOptions = {
+            apiKey: this.apiKey,
+            stagging: this.staging,
+        };
+        this.nexusAPI = new N3xusApi(n3xusOptions);
+        const urlParams = new URLSearchParams(window.location.search);
+        const urlRedeemToken = this.redeemToken.trim() === '' && !this.redeemToken
+            ? urlParams.get('code')
+            : this.redeemToken;
+        if (!urlRedeemToken) {
+            this.error = 'No token provided';
+            this._claimState = ClaimStateTypes.error;
+            return;
+        }
+        if (!this.modal || (this.modal && !this.validateAfterModal)) {
+            this.setTokenStatus(urlRedeemToken);
+        }
+        this._claimState = ClaimStateTypes.validating;
+    }
+    update(changedProperties) {
+        try {
+            super.update(changedProperties);
+            this.setUpdateState();
+        }
+        catch (error) {
+            console.error('Error in update', error);
+        }
+    }
+    setUpdateState() {
+        if (this.loginController?.loginInit &&
+            this._claimState === ClaimStateTypes.validating &&
+            !this.loginController?.loggedIn &&
+            this._tokenStatus?.data?.status === MintStatus.redeemed) {
+            this._claimState = ClaimStateTypes.redeemedLoggedout;
+        }
+        else if (this.loginController?.loginInit &&
+            this._tokenStatus?.data?.status === MintStatus.redeemed &&
+            this._claimState === ClaimStateTypes.validating &&
+            this.loginController?.loggedIn &&
+            this.loginController?.user?.walletAddress ===
+                this._tokenStatus?.data?.wallet) {
+            this._claimState = ClaimStateTypes.redeemedLogin;
+            this.setSessionToken();
+        }
+        else if (this.loginController?.loginInit &&
+            this._claimState === ClaimStateTypes.validating &&
+            this._tokenStatus?.data?.status === MintStatus.redeemed &&
+            this.loginController?.loggedIn &&
+            this.loginController?.user?.walletAddress !==
+                this._tokenStatus?.data?.wallet) {
+            this._claimState = ClaimStateTypes.redeemedLoggedInInvalid;
+        }
+        else if (this.loginController?.loginInit &&
+            this._claimState === ClaimStateTypes.validating &&
+            this._tokenStatus?.data?.status === MintStatus.available &&
+            this.loginController?.loggedIn) {
+            this._claimState = ClaimStateTypes.availableLoggedIn;
+        }
+        else if (this.loginController?.loginInit &&
+            this._claimState === ClaimStateTypes.validating &&
+            this._tokenStatus?.data?.status === MintStatus.available &&
+            !this.loginController?.loggedIn) {
+            this._claimState = ClaimStateTypes.available;
+        }
+        if (this._claimState === ClaimStateTypes.available &&
+            this.loginController?.loginInit &&
+            this.loginController?.loggedIn) {
+            this.handleClaim();
+            this.emit(ClaimEvents.Claiming, { bubbles: false, composed: true });
+        }
+        if (this.loginController?.loginInit &&
+            this._claimState === ClaimStateTypes.redeemedLoggedout &&
+            this.loginController?.loggedIn &&
+            this.loginController?.user?.walletAddress ===
+                this._tokenStatus?.data?.wallet) {
+            this._claimState = ClaimStateTypes.redeemedLogin;
+            this.setSessionToken();
+        }
+        else if (this.loginController?.loginInit &&
+            this._claimState === ClaimStateTypes.redeemedLoggedout &&
+            this.loginController?.loggedIn &&
+            this.loginController?.user?.walletAddress !==
+                this._tokenStatus?.data?.wallet) {
+            this._claimState = ClaimStateTypes.redeemedLoggedInInvalid;
+        }
+    }
+    async setTokenStatus(token) {
+        if (!this.nexusAPI) {
+            throw new Error('Nexus API is not initialized');
+        }
+        const status = await this.nexusAPI.checkTokenStatus(token);
+        if (!status) {
+            this._tokenStatus = status;
+            this.logging('Token status updated', status);
+        }
+        this.logging('setTokenStatus', token);
+        this._tokenStatus = status;
+        this.logging('Token Status', status);
+        if (!status.ok) {
+            this._claimState = ClaimStateTypes.error;
+            return status;
+        }
+        switch (status.data?.status) {
+            case MintStatus.available:
+                this.redeemToken = token;
+                if (this.loginController?.loginInit &&
+                    this.loginController?.loggedIn) {
+                    this._claimState = ClaimStateTypes.availableLoggedIn;
+                }
+                else if (this.loginController?.loginInit &&
+                    !this.loginController?.loggedIn) {
+                    this._claimState = ClaimStateTypes.validating;
+                }
+                break;
+            case MintStatus.redeemed:
+                if (!this.loginController?.loginInit) {
+                    this._claimState = ClaimStateTypes.validating;
+                }
+                else if (this.loginController?.loginInit &&
+                    this.loginController?.loggedIn &&
+                    this.loginController?.user?.walletAddress ===
+                        status.data?.wallet) {
+                    this._claimState = ClaimStateTypes.redeemedLogin;
+                    this.setSessionToken();
+                }
+                else if (this.loginController?.loginInit &&
+                    this.loginController?.loggedIn &&
+                    this.loginController?.user?.walletAddress !==
+                        status.data?.wallet) {
+                    this._claimState = ClaimStateTypes.redeemedLoggedInInvalid;
+                }
+                else {
+                    this._claimState = ClaimStateTypes.redeemedLoggedInInvalid;
+                }
+                break;
+            case MintStatus.minting:
+                this._claimState = ClaimStateTypes.minting;
+                break;
+            case MintStatus.error:
+                this._claimState = ClaimStateTypes.mintingError;
+                break;
+            default:
+                this.error = 'This code is invalid';
+                this._claimState = ClaimStateTypes.invalid;
+                break;
+        }
+        return status;
+    }
+    validateMint(interval, maxAttempts) {
+        let attempts = 0;
+        const checkInterval = setInterval(async () => {
+            attempts++;
+            const status = await this.setTokenStatus(this.redeemToken);
+            if (status.ok === true &&
+                status.data?.status === MintStatus.redeemed) {
+                this._claimState = ClaimStateTypes.redeemedLogin;
+                this.setSessionToken();
+                clearInterval(checkInterval);
+                this.emit(ClaimEvents.Claimed, { bubbles: false });
+                this.success = true;
+            }
+            else if (attempts >= maxAttempts) {
+                this._claimState = ClaimStateTypes.mintingError;
+                clearInterval(checkInterval);
+                this.error = 'Claim failed. Please try again later.';
+            }
+        }, interval);
+    }
+    async handleClaim() {
+        let didToken = this.loginController?.user?.did?.token;
+        if (didToken === undefined) {
+            await this.loginController?.getDidToken();
+            didToken = this.loginController?.user?.did?.token;
+            console.log(didToken);
+        }
+        if (this.redeemToken === '') {
+            this.error = 'No redeemtoken provided';
+        }
+        else {
+            try {
+                const response = await this.nexusAPI?.mint(didToken, this.redeemToken);
+                this._claimState = ClaimStateTypes.minting;
+                const estimate = response?.data?.estimate_seconds;
+                const interval = 10000;
+                let maxAttempts = 3;
+                if (estimate) {
+                    maxAttempts = (estimate * 2) / (interval / 1000);
+                    if (maxAttempts < 3) {
+                        maxAttempts = 3;
+                    }
+                }
+                this.validateMint(interval, maxAttempts);
+            }
+            catch (error) {
+                if (error.response.data.error === 'Issuance code not available') {
+                    this.error = 'This code not available or already used!';
+                }
+                else {
+                    this.error =
+                        'An error occurred while claiming the Fan Pass. Please try again later.';
+                }
+            }
+        }
+    }
+    async setSessionToken() {
+        if (this._claimState === ClaimStateTypes.redeemedLogin) {
+            const session = getStoredSession();
+            if (session) {
+                console.log(session);
+                return;
+            }
+            if (!this.nexusAPI) {
+                const n3xusOptions = {
+                    apiKey: this.apiKey,
+                    stagging: this.staging,
+                };
+                this.nexusAPI = new N3xusApi(n3xusOptions);
+            }
+            if (!this.loginController?.user) {
+                await this.loginController?.getUserInfo();
+            }
+            if (!this.loginController?.user?.did?.token) {
+                await this.loginController?.getDidToken();
+            }
+            if (!this.loginController?.user?.did?.token) {
+                console.error('No DID token found');
+                return;
+            }
+            const checkResponse = await this.nexusAPI.checkWalletForNft(this.loginController?.user?.did?.token);
+            if (!checkResponse.ok) {
+                console.error('Check wallet for NFT failed');
+                return;
+            }
+            if (checkResponse.data?.holds) {
+                setStoredSession(JSON.stringify({
+                    token: checkResponse.data.sessionToken,
+                    issueTS: Date.now(),
+                }));
+            }
+        }
+    }
+    async logout() {
+        await this.loginController?.logout();
+        this._claimState = ClaimStateTypes.available;
+        this._pageNumber = 1;
+    }
+    closeOverlay(e) {
+        const overlay = this.shadowRoot?.getElementById('fb-modal');
+        const triggerButton = e.target;
+        triggerButton?.setAttribute('aria-expanded', 'false');
+        overlay?.closeOverlay();
+    }
+    openOverlay(e) {
+        const overlay = this.shadowRoot?.getElementById('fb-modal');
+        const triggerButton = e.target;
+        triggerButton?.setAttribute('aria-expanded', 'true');
+        if (this._tokenStatus === null) {
+            this._claimState = ClaimStateTypes.validating;
+            this.setTokenStatus(this.redeemToken);
+        }
+        overlay?.openOverlay();
+    }
+    logging(message, ...optionalParams) {
+        if (this.debugLogging) {
+            console.log(message, optionalParams);
+        }
+    }
+    buttonStyles() {
+        let styles = {};
+        styles = {
+            ...styles,
+            '--pu-color-button-background': this.btnBackgroundColor,
+            '--pu-color-button-text': this.btnTextColor,
+        };
+        return styles;
+    }
+    renderClaimSuccess() {
+        return html `
+            <pu-vertical-stack spacing="24" mobileSpacing="24">
+                <!-- <slot name="claimSuccessContent"></slot> -->
+                <pu-text as="p" variant="bodyLg" withoutMargin>
+                    You've claimed your ${this.fanPassTitle}!
+                </pu-text>
+                <pu-vertical-stack spacing="8" mobileSpacing="8">
+                    <pu-button
+                        class="button"
+                        style="${styleMap(this.buttonStyles())}"
+                        url=${this.successUrl}
+                        size="large"
+                        fullWidth
+                        buttonstyle="solid"
+                    >
+                        <pu-text as="p" variant="bodyMd" withoutMargin>
+                            Check out your perks!
+                        </pu-text>
+                    </pu-button>
+                    <pu-button
+                        class="button"
+                        style="${styleMap(this.buttonStyles())}"
+                        @click="${async () => {
+            if (await this.loginController?.logout()) {
+                this._claimState =
+                    ClaimStateTypes.redeemedLoggedout;
+            }
+        }}"
+                        size="large"
+                        fullWidth
+                        buttonstyle="solid"
+                    >
+                        <pu-text as="p" variant="bodyMd" withoutMargin>
+                            Disconnect
+                        </pu-text>
+                    </pu-button>
+                </pu-vertical-stack>
+            </pu-vertical-stack>
+        `;
+    }
+    renderContent() {
+        switch (this._claimState) {
+            case ClaimStateTypes.redeemedLogin:
+                this._pageNumber = 4;
+                return this.renderClaimSuccess();
+            case ClaimStateTypes.redeemedLoggedout:
+                this._pageNumber = 1;
+                return html `
+                    <pu-vertical-stack
+                        spacing="24"
+                        align="center"
+                        mobileAlign="center"
+                    >
+                        <pu-text as="p" variant="bodyLg" withoutMargin>
+                            Claim your ${this.fanPassTitle}
+                        </pu-text>
+                        <fp-login
+                            id="login"
+                            buttonLabel="Claim"
+                            apiKey=${this.apiKey}
+                            btnBackgroundColor=${this.btnBackgroundColor}
+                            btnTextColor=${this.btnTextColor}
+                            ?hidden=${false}
+                            ?staging=${true}
+                            ?debugLogging=${this.debugLogging}
+                            ?showLoaderAfterLogin=${true}
+                        ></fp-login>
+                    </pu-vertical-stack>
+                `;
+            case ClaimStateTypes.validating:
+                this._pageNumber = 1;
+                return html `
+                    <pu-text as="p" variant="bodyLg"> Validating... </pu-text>
+                    <svg
+                        class="loading__spinner"
+                        width="16"
+                        height="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                        focusable="false"
+                        role="presentation"
+                        aria-hidden="true"
+                        viewBox="0 0 512 512"
+                    >
+                        <path
+                            d="M463.9 376c7.6 4.4 17.5 1.8 21.4-6.1c17.1-34.3 26.7-73 26.7-113.9C512 120 405.9 8.8 272 .5c-8.8-.5-16 6.7-16 15.5v0c0 8.8 7.2 15.9 16 16.6C388.2 40.8 480 137.7 480 256c0 35.1-8.1 68.3-22.5 97.9c-3.9 8-1.3 17.7 6.4 22.2v0z"
+                        />
+                    </svg>
+                `;
+            case ClaimStateTypes.invalid:
+                this._pageNumber = 4;
+                return html `
+                    <fp-error-screen
+                        errorText=${this.error}
+                        faqUrl=${this.faqUrl}
+                    ></fp-error-screen>
+                `;
+            case ClaimStateTypes.availableLoggedIn:
+                this._pageNumber = 1;
+                return html `
+                    <pu-vertical-stack
+                        class=""
+                        spacing="24"
+                        align="center"
+                        mobileAlign="center"
+                    >
+                        <pu-text as="p" variant="bodyLg" withoutMargin>
+                            Claim your ${this.fanPassTitle}
+                        </pu-text>
+                        <pu-text as="p" variant="bodyMd" withoutMargin>
+                            Logged in as ${this.loginController?.user?.email}
+                        </pu-text>
+                        <pu-vertical-stack
+                            class=""
+                            spacing="8"
+                            align="center"
+                            mobileAlign="center"
+                        >
+                            <pu-button
+                                class="button"
+                                @click="${this.handleClaim}"
+                                style="${styleMap(this.buttonStyles())}"
+                                buttonStyle="solid"
+                                size="large"
+                                fullWidth
+                            >
+                                Claim to this account
+                            </pu-button>
+                            <pu-button
+                                class="button"
+                                @click="${this.logout}"
+                                style="${styleMap(this.buttonStyles())}"
+                                buttonStyle="solid"
+                                size="large"
+                                fullWidth
+                            >
+                                Change account
+                            </pu-button>
+                        </pu-vertical-stack>
+                    </pu-vertical-stack>
+                `;
+            case ClaimStateTypes.available:
+                this._pageNumber = 1;
+                return html `
+                    <pu-vertical-stack
+                        class=""
+                        spacing="24"
+                        align="center"
+                        mobileAlign="center"
+                    >
+                        <pu-text as="p" variant="bodyLg" withoutMargin>
+                            Claim your ${this.fanPassTitle}
+                        </pu-text>
+                        <fp-login
+                            id="login"
+                            buttonLabel="Claim"
+                            apiKey=${this.apiKey}
+                            btnBackgroundColor=${this.btnBackgroundColor}
+                            btnTextColor=${this.btnTextColor}
+                            ?hidden=${false}
+                            ?staging=${true}
+                            ?debugLogging=${false}
+                            ?showLoaderAfterLogin=${true}
+                        ></fp-login>
+                    </pu-vertical-stack>
+                `;
+            case ClaimStateTypes.minting:
+                this._pageNumber = 3;
+                return html `
+                    <pu-text as="p" variant="bodyLg" withoutMargin>
+                        Minting...
+                    </pu-text>
+                    <svg
+                        class="loading__spinner"
+                        width="16"
+                        height="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                        focusable="false"
+                        role="presentation"
+                        aria-hidden="true"
+                        viewBox="0 0 512 512"
+                    >
+                        <path
+                            d="M463.9 376c7.6 4.4 17.5 1.8 21.4-6.1c17.1-34.3 26.7-73 26.7-113.9C512 120 405.9 8.8 272 .5c-8.8-.5-16 6.7-16 15.5v0c0 8.8 7.2 15.9 16 16.6C388.2 40.8 480 137.7 480 256c0 35.1-8.1 68.3-22.5 97.9c-3.9 8-1.3 17.7 6.4 22.2v0z"
+                        />
+                    </svg>
+                `;
+            case ClaimStateTypes.redeemedLoggedInInvalid:
+                this._pageNumber = 4;
+                return html `
+                    <fp-error-screen
+                        errorText="This Token has already been used"
+                    >
+                        <pu-button
+                            slot="button"
+                            style="${styleMap(this.buttonStyles())}"
+                            @click="${this.logout}"
+                            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>
+                `;
+            case ClaimStateTypes.redeemed:
+                if (this._loginState === LoginState.initialising) {
+                    this._pageNumber = 3;
+                    return html `
+                        <pu-text as="p" variant="bodyLg" withoutMargin>
+                            Loading...
+                        </pu-text>
+                        <svg
+                            class="loading__spinner"
+                            width="16"
+                            height="16"
+                            xmlns="http://www.w3.org/2000/svg"
+                            focusable="false"
+                            role="presentation"
+                            aria-hidden="true"
+                            viewBox="0 0 512 512"
+                        >
+                            <path
+                                d="M463.9 376c7.6 4.4 17.5 1.8 21.4-6.1c17.1-34.3 26.7-73 26.7-113.9C512 120 405.9 8.8 272 .5c-8.8-.5-16 6.7-16 15.5v0c0 8.8 7.2 15.9 16 16.6C388.2 40.8 480 137.7 480 256c0 35.1-8.1 68.3-22.5 97.9c-3.9 8-1.3 17.7 6.4 22.2v0z"
+                            />
+                        </svg>
+                    `;
+                }
+                if (this._loginState === LoginState.loggedOut) {
+                    this._pageNumber = 1;
+                    return html `
+                        <fp-login
+                            id="login"
+                            buttonLabel="Claim"
+                            apiKey=${this.apiKey}
+                            btnBackgroundColor=${this.btnBackgroundColor}
+                            btnTextColor=${this.btnTextColor}
+                            ?hidden=${false}
+                            ?staging=${true}
+                            ?debugLogging=${false}
+                            ?showLoaderAfterLogin=${false}
+                        ></fp-login>
+                    `;
+                }
+                if (this._tokenStatus?.data?.wallet == this._user?.walletAddress) {
+                    this._pageNumber = 4;
+                    return html `
+                        <pu-vertical-stack spacing="24">
+                            <pu-text as="p" variant="bodyLg" withoutMargin>
+                                You've claimed your ${this.fanPassTitle}!
+                            </pu-text>
+                            <pu-button class="button" url=${this.successUrl}>
+                                Check out your perks!
+                            </pu-button>
+                        </pu-vertical-stack>
+                    `;
+                }
+                this._pageNumber = 1;
+                return html `
+                    <fp-error-screen
+                        errorText="Invalid ${this.fanPassTitle}"
+                        faqUrl=${this.faqUrl}
+                    ></fp-error-screen>
+                `;
+            case ClaimStateTypes.mintingError:
+                this._pageNumber = 3;
+                return html `
+                    <fp-error-screen
+                        errorText=${this.error}
+                        faqUrl=${this.faqUrl}
+                    ></fp-error-screen>
+                `;
+            case ClaimStateTypes.error:
+            default:
+                this._pageNumber = 4;
+                return html `
+                    <fp-error-screen
+                        errorText="Claiming error"
+                        faqUrl=${this.faqUrl}
+                    >
+                        <pu-button
+                            slot="button"
+                            style="${styleMap(this.buttonStyles())}"
+                            @click="${this.logout}"
+                            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>
+                `;
+        }
+    }
+    renderFrame(innerContent) {
+        return html ` <fp-frame
+            fanPassTitle=${this.fanPassTitle}
+            maxPages=${4}
+            currentPageNumber=${this._pageNumber}
+            .logoSet=${this.logoSet}
+        >
+            ${innerContent}
+        </fp-frame>`;
+    }
+    render() {
+        this.logging('render', 'claimState', this._claimState);
+        if (this.modal) {
+            return html `
+                <pu-button
+                    class="button"
+                    style="${styleMap(this.buttonStyles())}"
+                    @click=${this.openOverlay}
+                    type="button"
+                    name="claim"
+                    size="large"
+                    buttonstyle="solid"
+                >
+                    <pu-text
+                        as="span"
+                        variant="bodyMd"
+                        fontWeight="regular"
+                        withoutMargin
+                        spacing="loose"
+                    >
+                        Claim
+                    </pu-text>
+                </pu-button>
+                <pu-overlay id="fb-modal">
+                    <pu-box
+                        slot="content"
+                        class="modalContentBox"
+                        padding=${100}
+                    >
+                        <pu-vertical-stack
+                            spacing="40"
+                            align="center"
+                            mobileAlign="center"
+                            justify="center"
+                            mobileJustify="center"
+                            class="flowContainer"
+                        >
+                            ${this.renderFrame(html `${this.renderContent()}`)}
+                        </pu-vertical-stack>
+                        <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"
+                        >
+                        </pu-button-icon>
+                    </pu-box>
+                </pu-overlay>
+            `;
+        }
+        return this.renderFrame(html `${this.renderContent()}`);
+    }
+};
+FanPassClaim.styles = css `
+        /* Add your component styles here */
+        .modalContentBox {
+            background-color: #fff;
+            position: relative;
+            height: max-content;
+            /* max-height: 800px; */
+
+            @media only screen and (min-width: 48.06rem) {
+                --pu-border-base-corner-radius: var(
+                    --pu-border-radius-20,
+                    12px
+                );
+                border-radius: var(--pu-border-base-corner-radius);
+                box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.25);
+                max-width: 800px;
+            }
+        }
+
+        .button::part(button) {
+            --pu-border-button-corner-radius: var(--pu-border-radius-20, 12px);
+        }
+
+        .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, rgb(160, 160, 160));
+            height: 3rem;
+            width: 3rem;
+            left: 50%;
+            top: 50%;
+            margin: calc(var(--pu-space-16, 1rem) / 2 * -1) 0 0
+                calc(var(--pu-space-16, 1rem) / 2 * -1);
+        }
+        @keyframes spin {
+            to {
+                transform: rotate(1turn);
+            }
+        }
+    `;
+__decorate([
+    property({ type: String })
+], FanPassClaim.prototype, "apiKey", void 0);
+__decorate([
+    property({ type: Object })
+], FanPassClaim.prototype, "logoSet", void 0);
+__decorate([
+    property({ type: String })
+], FanPassClaim.prototype, "fanPassTitle", void 0);
+__decorate([
+    property({ type: String })
+], FanPassClaim.prototype, "redeemToken", void 0);
+__decorate([
+    property({ type: Boolean })
+], FanPassClaim.prototype, "modal", void 0);
+__decorate([
+    property({ type: Boolean })
+], FanPassClaim.prototype, "validateAfterModal", void 0);
+__decorate([
+    property({ type: Boolean })
+], FanPassClaim.prototype, "staging", void 0);
+__decorate([
+    property({ type: Boolean })
+], FanPassClaim.prototype, "debugLogging", void 0);
+__decorate([
+    property({ type: String })
+], FanPassClaim.prototype, "successUrl", void 0);
+__decorate([
+    property({ type: Boolean })
+], FanPassClaim.prototype, "autoRedirect", void 0);
+__decorate([
+    property({ type: Boolean })
+], FanPassClaim.prototype, "showRedeemInput", void 0);
+__decorate([
+    property({ type: Boolean })
+], FanPassClaim.prototype, "success", void 0);
+__decorate([
+    property({ type: String })
+], FanPassClaim.prototype, "error", void 0);
+__decorate([
+    property({ type: String })
+], FanPassClaim.prototype, "btnBackgroundColor", void 0);
+__decorate([
+    property({ type: String })
+], FanPassClaim.prototype, "btnTextColor", void 0);
+__decorate([
+    property({ type: String })
+], FanPassClaim.prototype, "faqUrl", void 0);
+__decorate([
+    state()
+], FanPassClaim.prototype, "_claimState", void 0);
+__decorate([
+    state()
+], FanPassClaim.prototype, "_pageNumber", void 0);
+__decorate([
+    state()
+], FanPassClaim.prototype, "_user", void 0);
+__decorate([
+    state()
+], FanPassClaim.prototype, "_loginState", void 0);
+__decorate([
+    state()
+], FanPassClaim.prototype, "_tokenStatus", void 0);
+FanPassClaim = __decorate([
+    customElement('fan-pass-claim')
+], FanPassClaim);
+
+export { FanPassClaim };
+//# sourceMappingURL=fan-pass-claim.js.map