@cirkay-eng/cirkay-components 0.7.2 → 0.7.5

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

@@ -1,30 +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/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 { styleMap } from 'lit/directives/style-map.js';
+import { preloadLogos, getLatestSession, addSession } from '../../utils/helpers.js';
 import N3xusApi from '../../base/n3xus/N3xusAPI.js';
 import { ClaimEvents } from '../../events/claim.js';
+import { LoginEvents } from '../../events/login.js';
 import CirkayElement from '../../internal/CirkayElement.js';
+import '../login/index.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 '../frame/index.js';
+import '../error-screen/index.js';
+import '../mobile-pass/index.js';
+import '../connected/index.js';
+import { ClaimStateTypes, CampaignState, 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';
+import { LoginStateTypes } from '../login/types.js';
+import { UnlockEvents } from '../../events/unlock.js';
 
-let FanPassClaim = class FanPassClaim extends CirkayElement {
+class FanPassClaim extends CirkayElement {
     constructor() {
         super();
         this.loginController = null;
         this.nexusAPI = undefined;
+        this.walletCheckResponse = null;
+        this.loginFlow = false;
+        this.checkInterval = null;
+        this.unlockedContent = false;
         this.apiKey = '';
         this.logoSet = {
             large: {
@@ -39,12 +47,15 @@ let FanPassClaim = class FanPassClaim extends CirkayElement {
             alt: 'Cirkay Logo',
         };
         this.fanPassTitle = 'Fan Pass';
-        this.redeemToken = '';
+        this.redeemCode = '';
+        this.availibleCampaign = false;
+        this.campaignId = null;
         this.modal = false;
         this.validateAfterModal = false;
-        this.staging = true;
+        this.staging = false;
         this.debugLogging = false;
-        this.successUrl = 'https://cirkay.com';
+        this.successUrl = '';
+        this.campaignUrl = window.location.href;
         this.autoRedirect = false;
         this.showRedeemInput = false;
         this.success = false;
@@ -53,15 +64,30 @@ let FanPassClaim = class FanPassClaim extends CirkayElement {
         this.btnTextColor = '#FFFFFF';
         this.faqUrl = 'https://cirkay.com/faq/';
         this._claimState = ClaimStateTypes.validating;
+        this._campaignState = CampaignState.available;
         this._pageNumber = 1;
         this._user = undefined;
         this._loginState = LoginState.initialising;
-        this._tokenStatus = null;
-        const baseUrl = window.location.origin;
-        setBasePath(`${baseUrl}/icons`);
+        this._codeStatus = null;
+        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() {
         super.connectedCallback();
+        try {
+            preloadLogos(this.logoSet);
+        }
+        catch (error) {
+            console.warn('Error loading logo images', error);
+        }
+        this._claimState = ClaimStateTypes.validating;
         const magicApiOptions = {
             staging: this.staging,
         };
@@ -72,246 +98,522 @@ let FanPassClaim = class FanPassClaim extends CirkayElement {
             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;
+        const session = getLatestSession(this.apiKey);
+        const minutesAgo = Date.now() - 3.5 * 60 * 1000;
+        if (session &&
+            this.loginController.loginInit &&
+            this.loginController.loggedIn &&
+            !(session.issueTS < minutesAgo)) {
+            this._claimState = ClaimStateTypes.redeemedCheckingSession;
+        }
+        this.setUpdateState();
+    }
+    async handleMintType() {
+        this.logging('handleMintType');
+        this.logging('Campaing ID', this.campaignId);
+        if (this.campaignId) {
+            const campaign = await this.getCampaignInformation(this.campaignId);
+            this.logging('CAMPAIGN details', campaign);
+            const currentDate = new Date();
+            const startDate = campaign.start_date
+                ? new Date(campaign.start_date)
+                : null;
+            const endDate = campaign.end_date
+                ? new Date(campaign.end_date)
+                : null;
+            if (campaign.limit <= campaign.used_count) {
+                this._campaignState = CampaignState.noFanPassesLeft;
+                this.error = `${this.fanPassTitle} can no longer be claimed`;
+                this._claimState = ClaimStateTypes.error;
+                this._codeStatus = {
+                    status: MintStatus.unavailable,
+                    available: campaign.limit - campaign.used_count,
+                    campaign: campaign,
+                };
+            }
+            else if (endDate && currentDate > endDate) {
+                this._campaignState = CampaignState.campaignOver;
+                this.error = 'This claim is no longer available';
+                this._claimState = ClaimStateTypes.error;
+                this._codeStatus = {
+                    status: MintStatus.unavailable,
+                    available: campaign.limit - campaign.used_count,
+                    campaign: campaign,
+                };
+            }
+            else if (startDate && currentDate < startDate) {
+                const timeDiff = startDate.getTime() - currentDate.getTime();
+                const totalHours = Math.floor(timeDiff / (1000 * 60 * 60));
+                const days = Math.floor(totalHours / 24);
+                const remainingHours = totalHours % 24;
+                let text;
+                if (days > 0) {
+                    text = `Access to this claim goes live in ${days} ${days === 1 ? 'day' : 'days'} and ${remainingHours} ${remainingHours === 1 ? 'hour' : 'hours'}`;
+                }
+                else {
+                    text = `Access to this claim goes live in ${totalHours} ${totalHours === 1 ? 'hour' : 'hours'}`;
+                }
+                this._campaignState = CampaignState.campaignNotBegun;
+                this.error = text;
+                this._claimState = ClaimStateTypes.error;
+                this._codeStatus = {
+                    status: MintStatus.unavailable,
+                    available: campaign.limit - campaign.used_count,
+                    campaign: campaign,
+                };
+            }
+            else {
+                this._codeStatus = {
+                    status: MintStatus.available,
+                    available: campaign.limit - campaign.used_count,
+                    campaign: campaign,
+                };
+                this.availibleCampaign = true;
+                this.campaignUrl = campaign.campaign_url;
+                if (this.loginController?.loginInit) {
+                    this._claimState = ClaimStateTypes.availableLoggedIn;
+                }
+            }
         }
-        if (!this.modal || (this.modal && !this.validateAfterModal)) {
-            this.setTokenStatus(urlRedeemToken);
+        else {
+            const urlParams = new URLSearchParams(window.location.search);
+            const urlRedeemCode = this.redeemCode.trim() === '' && !this.redeemCode
+                ? urlParams.get('code')
+                : this.redeemCode;
+            if (!urlRedeemCode) {
+                this.setCampaignStatus().then(() => {
+                    if (!this.availibleCampaign) {
+                        this.error =
+                            'Seems like your link is invalid, try again or contact support';
+                        this._claimState = ClaimStateTypes.error;
+                    }
+                    else if (this.loginController?.loginInit) {
+                        this._claimState = ClaimStateTypes.available;
+                    }
+                    else ;
+                    return;
+                });
+            }
+            else {
+                this.setCodeStatus(null, urlRedeemCode);
+            }
         }
-        this._claimState = ClaimStateTypes.validating;
     }
-    update(changedProperties) {
+    willUpdate(changedProperties) {
         try {
-            super.update(changedProperties);
+            if (changedProperties.has('apiKey')) {
+                const n3xusOptions = {
+                    apiKey: this.apiKey,
+                    stagging: this.staging,
+                };
+                this.nexusAPI = new N3xusApi(n3xusOptions);
+            }
+            if (changedProperties.has('campaignId') ||
+                changedProperties.has('apiKey')) {
+                this.handleMintType();
+            }
             this.setUpdateState();
         }
         catch (error) {
             console.error('Error in update', error);
         }
     }
-    setUpdateState() {
+    async setUpdateState() {
+        if (this._claimState === ClaimStateTypes.redeemedCheckingSession &&
+            this.loginController?.loginInit &&
+            this.loginController?.loggedIn) {
+            const walletCheckResponse = await this.setSessionToken();
+            if (walletCheckResponse && walletCheckResponse.data?.holds) {
+                this._claimState = ClaimStateTypes.redeemedLogin;
+                this.unlockedContentEmit();
+            }
+            else if (walletCheckResponse &&
+                !walletCheckResponse.data?.holds) {
+                this._claimState = ClaimStateTypes.availableLoggedIn;
+            }
+            else {
+                this._claimState = ClaimStateTypes.error;
+            }
+        }
         if (this.loginController?.loginInit &&
             this._claimState === ClaimStateTypes.validating &&
             !this.loginController?.loggedIn &&
-            this._tokenStatus?.data?.status === MintStatus.redeemed) {
+            this._codeStatus?.status === MintStatus.redeemed) {
             this._claimState = ClaimStateTypes.redeemedLoggedout;
         }
         else if (this.loginController?.loginInit &&
-            this._tokenStatus?.data?.status === MintStatus.redeemed &&
+            this._codeStatus?.status === MintStatus.redeemed &&
             this._claimState === ClaimStateTypes.validating &&
             this.loginController?.loggedIn &&
             this.loginController?.user?.walletAddress ===
-                this._tokenStatus?.data?.wallet) {
-            this._claimState = ClaimStateTypes.redeemedLogin;
-            this.setSessionToken();
+                this._codeStatus?.wallet) {
+            this.setSessionToken().then(() => {
+                this._claimState = ClaimStateTypes.redeemedLogin;
+            });
         }
         else if (this.loginController?.loginInit &&
             this._claimState === ClaimStateTypes.validating &&
-            this._tokenStatus?.data?.status === MintStatus.redeemed &&
+            this._codeStatus?.status === MintStatus.redeemed &&
             this.loginController?.loggedIn &&
             this.loginController?.user?.walletAddress !==
-                this._tokenStatus?.data?.wallet) {
+                this._codeStatus?.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;
+            this.loginController?.loggedIn &&
+            this._claimState === ClaimStateTypes.available &&
+            this._codeStatus?.status === MintStatus.available &&
+            this.loginFlow) {
+            if (this.loginController?.optinDetails) {
+                this.emit(LoginEvents.Submit, {
+                    bubbles: true,
+                    composed: true,
+                    detail: {
+                        ...this.loginController?.optinDetails,
+                        userEmail: this.loginController?.user?.email,
+                    },
+                });
+            }
+            this.handleClaim();
         }
         else if (this.loginController?.loginInit &&
+            this.loginController?.loggedIn &&
+            this._claimState != ClaimStateTypes.redeemedLogin &&
+            this._claimState !== ClaimStateTypes.minting) {
+            const walletCheckResponse = await this.setSessionToken();
+            if (walletCheckResponse && walletCheckResponse.data?.holds) {
+                this._claimState = ClaimStateTypes.redeemedLogin;
+            }
+            else if (!walletCheckResponse) {
+                this._claimState = ClaimStateTypes.availableLoggedIn;
+            }
+        }
+        else if (this.loginController?.loginInit &&
+            !this.loginController?.loggedIn &&
             this._claimState === ClaimStateTypes.validating &&
-            this._tokenStatus?.data?.status === MintStatus.available &&
+            this._codeStatus?.status === MintStatus.available &&
             !this.loginController?.loggedIn) {
+            this.loginFlow = true;
             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();
+                this._codeStatus?.wallet) {
+            this.setSessionToken().then(() => {
+                this._claimState = ClaimStateTypes.redeemedLogin;
+            });
         }
         else if (this.loginController?.loginInit &&
             this._claimState === ClaimStateTypes.redeemedLoggedout &&
             this.loginController?.loggedIn &&
             this.loginController?.user?.walletAddress !==
-                this._tokenStatus?.data?.wallet) {
+                this._codeStatus?.wallet) {
             this._claimState = ClaimStateTypes.redeemedLoggedInInvalid;
         }
+        if ((this._claimState === ClaimStateTypes.redeemedLogin ||
+            this._claimState === ClaimStateTypes.availableLoggedIn) &&
+            this.loginController?.loginInit &&
+            !this.loginController?.loggedIn) {
+            this.unlockedContent = false;
+            this.loginFlow = true;
+            this.walletCheckResponse = null;
+            if (this._codeStatus?.status === MintStatus.available) {
+                this._claimState = ClaimStateTypes.available;
+            }
+            else {
+                this._claimState = ClaimStateTypes.invalid;
+            }
+        }
     }
-    async setTokenStatus(token) {
+    async setCodeStatus(issueId = null, redeemCode = null) {
         if (!this.nexusAPI) {
             throw new Error('Nexus API is not initialized');
         }
-        const status = await this.nexusAPI.checkTokenStatus(token);
+        let status;
+        if (issueId) {
+            status = await this.nexusAPI.checkIssueStatus((issueId = issueId), (redeemCode = null));
+        }
+        else if (redeemCode) {
+            this.redeemCode = redeemCode;
+            status = await this.nexusAPI.checkIssueStatus((issueId = null), (redeemCode = redeemCode));
+        }
         if (!status) {
-            this._tokenStatus = status;
-            this.logging('Token status updated', status);
+            this.logging('Code status updated', status);
         }
-        this.logging('setTokenStatus', token);
-        this._tokenStatus = status;
-        this.logging('Token Status', status);
-        if (!status.ok) {
+        else {
+            this.logging('setCodeStatus', issueId);
+            this._codeStatus = status.data;
+            this.logging('Code Status', status);
+            if (!status.ok) {
+                this._claimState = ClaimStateTypes.error;
+            }
+            switch (status.data?.status) {
+                case MintStatus.available:
+                    if (this.loginController?.loginInit &&
+                        this.loginController?.loggedIn) {
+                        this.setSessionToken().then(() => {
+                            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.setSessionToken().then(() => {
+                            this._claimState = ClaimStateTypes.redeemedLogin;
+                        });
+                    }
+                    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 =
+                        'Seems like your link is invalid, try again or contact support';
+                    this._claimState = ClaimStateTypes.invalid;
+                    break;
+            }
+        }
+    }
+    async getCampaignInformation(campaignId) {
+        try {
+            const { data, error } = (await this.nexusAPI?.getCampaignInformation(campaignId)) || {};
+            if (error || !data) {
+                this.error =
+                    error ||
+                        'An error occurred while fetching campaign information';
+                this._claimState = ClaimStateTypes.error;
+                throw new Error(this.error);
+            }
+            return data;
+        }
+        catch (err) {
+            this.error =
+                err instanceof Error
+                    ? err.message
+                    : 'An error occurred while fetching campaign information';
             this._claimState = ClaimStateTypes.error;
-            return status;
+            throw err;
         }
-        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;
+    }
+    async setCampaignStatus() {
+        const validation = await this.nexusAPI?.checkCampaign(this.campaignUrl);
+        if (!validation) {
+            this.error = 'an error occured';
+            this._claimState = ClaimStateTypes.error;
+            throw new Error('error occured');
+        }
+        if (validation.ok && validation.data.available) {
+            this.availibleCampaign = true;
         }
-        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;
+    validateMint(interval, issueId) {
+        this.checkInterval = setInterval(async () => {
+            const status = await this.nexusAPI?.checkIssueStatus(issueId, null);
+            if (!status) {
+                this.error = 'an error occured';
+                this._claimState = ClaimStateTypes.error;
+                throw new Error('error occured');
             }
-            else if (attempts >= maxAttempts) {
-                this._claimState = ClaimStateTypes.mintingError;
-                clearInterval(checkInterval);
-                this.error = 'Claim failed. Please try again later.';
+            else {
+                if (status.ok === true &&
+                    status.data?.status === MintStatus.redeemed) {
+                    clearInterval(this.checkInterval);
+                    this.walletCheckResponse = await this.setSessionToken();
+                    this.emit(ClaimEvents.Claimed, {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            sessionToken: this.walletCheckResponse?.data?.sessionToken,
+                            email: this.walletCheckResponse?.data?.email,
+                            apiKey: this.apiKey,
+                            holds: this.walletCheckResponse?.data?.holds,
+                            mobileWallet: this.walletCheckResponse?.data?.mobilePasses,
+                        },
+                    });
+                    this.success = true;
+                    if (this.loginController?.loginInit &&
+                        this.loginController?.loggedIn) {
+                        this._claimState = ClaimStateTypes.redeemedLogin;
+                    }
+                    else {
+                        this._claimState = ClaimStateTypes.redeemedLoggedout;
+                    }
+                    this.emit(ClaimEvents.Claimed, {
+                        bubbles: true,
+                        composed: true,
+                        detail: {
+                            sessionToken: this.walletCheckResponse?.data?.sessionToken,
+                            email: this.walletCheckResponse?.data?.email,
+                            apiKey: this.apiKey,
+                            holds: this.walletCheckResponse?.data?.holds,
+                            mobileWallet: this.walletCheckResponse?.data?.mobilePasses,
+                        },
+                    });
+                    this.unlockedContentEmit();
+                }
+                else if (status.ok === true &&
+                    status.data?.status === MintStatus.error) {
+                    this._claimState = ClaimStateTypes.mintingError;
+                    clearInterval(this.checkInterval);
+                    this.error = 'Claim failed. Please try again later.';
+                }
             }
         }, interval);
     }
     async handleClaim() {
+        this._claimState = ClaimStateTypes.minting;
         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);
+        try {
+            this.emit(ClaimEvents.Claiming, {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    email: this.loginController?.user?.email,
+                    apiKey: this.apiKey,
+                    wallet: this.loginController?.user?.walletAddress,
+                },
+            });
+            console.log('ClaimEvents.Claiming');
+            console.log(ClaimEvents.Claiming);
+            if (this.redeemCode === '' && !this.availibleCampaign) {
+                this.error =
+                    'Seems like your link is invalid, try again or contact support';
+                return;
             }
-            catch (error) {
-                if (error.response.data.error === 'Issuance code not available') {
+            const response = await this.nexusAPI?.mint(didToken, this.redeemCode || undefined, this.availibleCampaign ? this.campaignUrl : undefined, this.campaignId || undefined);
+            if (!response) {
+                this.error = 'an error occured';
+                this._claimState = ClaimStateTypes.error;
+                throw new Error('error occured');
+            }
+            else {
+                const issueId = response.issueId;
+                const interval = FanPassClaim.interval;
+                this.validateMint(interval, issueId);
+            }
+        }
+        catch (error) {
+            switch (error.message) {
+                case 'Issuance code not available':
+                    this._claimState = ClaimStateTypes.error;
                     this.error = 'This code not available or already used!';
-                }
-                else {
+                    break;
+                case 'campaign does not exist':
+                    this._claimState = ClaimStateTypes.error;
+                    this.error = 'Use a code to claim your FanPasss';
+                    break;
+                case 'Failed to fetch code status: You already have this campaign':
+                    this._claimState = ClaimStateTypes.redeemedLogin;
+                    break;
+                default:
+                    this._claimState = ClaimStateTypes.error;
                     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 = {
+    unlockedContentEmit() {
+        if (!this.unlockedContent) {
+            this.unlockedContent = true;
+            this.emit(UnlockEvents.UnlockComplete, {
+                bubbles: true,
+                composed: true,
+                detail: {
+                    sessionToken: this.walletCheckResponse?.data?.sessionToken,
+                    email: this.walletCheckResponse?.data?.email,
                     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(),
-                }));
-            }
+                    unlocked: true,
+                },
+            });
         }
     }
+    async setSessionToken() {
+        if (!this.loginController?.loginInit) {
+            return null;
+        }
+        if (!this.loginController?.loggedIn) {
+            return null;
+        }
+        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 null;
+        }
+        this.walletCheckResponse = await this.nexusAPI.checkWalletForNft('', this.loginController?.user?.did?.token);
+        if (!this.walletCheckResponse.ok) {
+            console.error('Check wallet for NFT failed');
+            return null;
+        }
+        if (this.walletCheckResponse.data?.holds &&
+            this.loginController?.loggedIn) {
+            addSession({
+                didToken: this.loginController?.user?.did?.token,
+                issueTS: Date.now(),
+                token: this.walletCheckResponse.data.sessionToken,
+                apiKey: this.apiKey,
+                mobilePass: this.walletCheckResponse.data.mobilePasses,
+            });
+            this.unlockedContentEmit();
+            return this.walletCheckResponse;
+        }
+        return null;
+    }
     async logout() {
-        await this.loginController?.logout();
+        this.unlockedContent = false;
+        this.walletCheckResponse = null;
+        this.loginFlow = true;
         this._claimState = ClaimStateTypes.available;
         this._pageNumber = 1;
+        this.emit(LoginEvents.Logout, {
+            bubbles: true,
+            composed: true,
+            detail: {
+                LoggedIn: false,
+            },
+        });
+        await this.loginController?.logout();
     }
     closeOverlay(e) {
         const overlay = this.shadowRoot?.getElementById('fb-modal');
@@ -323,11 +625,9 @@ let FanPassClaim = class FanPassClaim extends CirkayElement {
         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);
+        if (overlay) {
+            overlay.openOverlay();
         }
-        overlay?.openOverlay();
     }
     logging(message, ...optionalParams) {
         if (this.debugLogging) {
@@ -343,6 +643,24 @@ let FanPassClaim = class FanPassClaim extends CirkayElement {
         };
         return styles;
     }
+    renderMobilePass() {
+        if (this.walletCheckResponse?.data?.mobilePasses &&
+            Array.isArray(this.walletCheckResponse?.data?.mobilePasses) &&
+            this.walletCheckResponse?.data?.mobilePasses.length > 0 &&
+            !this.walletCheckResponse?.data?.mobilePasses[this.walletCheckResponse?.data?.mobilePasses.length - 1].isActivated) {
+            const mobilePass = this.walletCheckResponse?.data?.mobilePasses[this.walletCheckResponse?.data?.mobilePasses.length - 1];
+            return html `
+                <fp-mobile-pass
+                    .fanPassTitle=${this.fanPassTitle}
+                    .androidLink=${mobilePass?.androidWalletUri}
+                    .appleLink=${mobilePass?.iPhoneWalletUri}
+                    .downloadLink=${mobilePass?.downloadLink}
+                    .displayIntro=${false}
+                ></fp-mobile-pass>
+            `;
+        }
+        return html ``;
+    }
     renderClaimSuccess() {
         return html `
             <pu-vertical-stack spacing="24" mobileSpacing="24">
@@ -351,46 +669,67 @@ let FanPassClaim = class FanPassClaim extends CirkayElement {
                     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>
+                    ${this.successUrl !== ''
+            ? html `
+                              <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>
+                          `
+            : null}
+                    ${this.renderMobilePass()}
                 </pu-vertical-stack>
             </pu-vertical-stack>
         `;
     }
+    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:
+                this._pageNumber = 2;
+                break;
+            case LoginStateTypes.optCodeSubmited:
+            case LoginStateTypes.isLoggedInLoading:
+                this._pageNumber = 3;
+                break;
+            case LoginStateTypes.optFailed:
+            case LoginStateTypes.isLoggedIn:
+                this._pageNumber = 3;
+                break;
+            default:
+                this._pageNumber = 1;
+                break;
+        }
+    }
     renderContent() {
+        this.setPageNumber();
         switch (this._claimState) {
             case ClaimStateTypes.redeemedLogin:
-                this._pageNumber = 4;
+                this.setPageNumber(3);
                 return this.renderClaimSuccess();
             case ClaimStateTypes.redeemedLoggedout:
-                this._pageNumber = 1;
+                this.setPageNumber(3);
                 return html `
                     <pu-vertical-stack
                         spacing="24"
@@ -398,26 +737,16 @@ let FanPassClaim = class FanPassClaim extends CirkayElement {
                         mobileAlign="center"
                     >
                         <pu-text as="p" variant="bodyLg" withoutMargin>
-                            Claim your ${this.fanPassTitle}
+                            This ${this.fanPassTitle} has already been claimed
                         </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.redeemedCheckingSession:
             case ClaimStateTypes.validating:
-                this._pageNumber = 1;
                 return html `
-                    <pu-text as="p" variant="bodyLg"> Validating... </pu-text>
+                    <pu-text as="p" variant="bodyLg"> Initializing... </pu-text>
                     <svg
+                        part="loading__spinner"
                         class="loading__spinner"
                         width="16"
                         height="16"
@@ -433,7 +762,7 @@ let FanPassClaim = class FanPassClaim extends CirkayElement {
                     </svg>
                 `;
             case ClaimStateTypes.invalid:
-                this._pageNumber = 4;
+                this.setPageNumber(3);
                 return html `
                     <fp-error-screen
                         errorText=${this.error}
@@ -441,7 +770,6 @@ let FanPassClaim = class FanPassClaim extends CirkayElement {
                     ></fp-error-screen>
                 `;
             case ClaimStateTypes.availableLoggedIn:
-                this._pageNumber = 1;
                 return html `
                     <pu-vertical-stack
                         class=""
@@ -453,8 +781,9 @@ let FanPassClaim = class FanPassClaim extends CirkayElement {
                             Claim your ${this.fanPassTitle}
                         </pu-text>
                         <pu-text as="p" variant="bodyMd" withoutMargin>
-                            Logged in as ${this.loginController?.user?.email}
+                            Connected as ${this.loginController?.user?.email}
                         </pu-text>
+
                         <pu-vertical-stack
                             class=""
                             spacing="8"
@@ -485,7 +814,6 @@ let FanPassClaim = class FanPassClaim extends CirkayElement {
                     </pu-vertical-stack>
                 `;
             case ClaimStateTypes.available:
-                this._pageNumber = 1;
                 return html `
                     <pu-vertical-stack
                         class=""
@@ -493,9 +821,15 @@ let FanPassClaim = class FanPassClaim extends CirkayElement {
                         align="center"
                         mobileAlign="center"
                     >
-                        <pu-text as="p" variant="bodyLg" withoutMargin>
-                            Claim your ${this.fanPassTitle}
-                        </pu-text>
+                        ${this._pageNumber === 1
+                    ? html `<pu-text
+                                  as="p"
+                                  variant="bodyLg"
+                                  withoutMargin
+                              >
+                                  Claim your ${this.fanPassTitle}
+                              </pu-text>`
+                    : html ``}
                         <fp-login
                             id="login"
                             buttonLabel="Claim"
@@ -503,19 +837,23 @@ let FanPassClaim = class FanPassClaim extends CirkayElement {
                             btnBackgroundColor=${this.btnBackgroundColor}
                             btnTextColor=${this.btnTextColor}
                             ?hidden=${false}
-                            ?staging=${true}
-                            ?debugLogging=${false}
+                            ?staging=${this.staging}
+                            ?debugLogging=${this.debugLogging}
                             ?showLoaderAfterLogin=${true}
-                        ></fp-login>
+                        >
+                            <form part="form-content" slot="form-content">
+                                <slot name="form-content-claim"></slot>
+                            </form>
+                        </fp-login>
                     </pu-vertical-stack>
                 `;
             case ClaimStateTypes.minting:
-                this._pageNumber = 3;
                 return html `
                     <pu-text as="p" variant="bodyLg" withoutMargin>
-                        Minting...
+                        Claiming - just a moment
                     </pu-text>
                     <svg
+                        part="loading__spinner"
                         class="loading__spinner"
                         width="16"
                         height="16"
@@ -531,10 +869,10 @@ let FanPassClaim = class FanPassClaim extends CirkayElement {
                     </svg>
                 `;
             case ClaimStateTypes.redeemedLoggedInInvalid:
-                this._pageNumber = 4;
+                this.setPageNumber(3);
                 return html `
                     <fp-error-screen
-                        errorText="This Token has already been used"
+                        errorText="This code has already been used"
                     >
                         <pu-button
                             slot="button"
@@ -559,13 +897,14 @@ let FanPassClaim = class FanPassClaim extends CirkayElement {
                     </fp-error-screen>
                 `;
             case ClaimStateTypes.redeemed:
-                if (this._loginState === LoginState.initialising) {
-                    this._pageNumber = 3;
+                if (!this.loginController?.loginInit) {
+                    this.setPageNumber(2);
                     return html `
                         <pu-text as="p" variant="bodyLg" withoutMargin>
                             Loading...
                         </pu-text>
                         <svg
+                            part="loading__spinner"
                             class="loading__spinner"
                             width="16"
                             height="16"
@@ -581,8 +920,7 @@ let FanPassClaim = class FanPassClaim extends CirkayElement {
                         </svg>
                     `;
                 }
-                if (this._loginState === LoginState.loggedOut) {
-                    this._pageNumber = 1;
+                if (!this.loginController?.loggedIn) {
                     return html `
                         <fp-login
                             id="login"
@@ -591,14 +929,14 @@ let FanPassClaim = class FanPassClaim extends CirkayElement {
                             btnBackgroundColor=${this.btnBackgroundColor}
                             btnTextColor=${this.btnTextColor}
                             ?hidden=${false}
-                            ?staging=${true}
-                            ?debugLogging=${false}
-                            ?showLoaderAfterLogin=${false}
+                            ?staging=${this.staging}
+                            ?debugLogging=${this.debugLogging}
+                            ?showLoaderAfterLogin=${true}
                         ></fp-login>
                     `;
                 }
-                if (this._tokenStatus?.data?.wallet == this._user?.walletAddress) {
-                    this._pageNumber = 4;
+                else if (this._codeStatus?.wallet == this._user?.walletAddress) {
+                    this.setPageNumber(3);
                     return html `
                         <pu-vertical-stack spacing="24">
                             <pu-text as="p" variant="bodyLg" withoutMargin>
@@ -610,7 +948,7 @@ let FanPassClaim = class FanPassClaim extends CirkayElement {
                         </pu-vertical-stack>
                     `;
                 }
-                this._pageNumber = 1;
+                this.setPageNumber(3);
                 return html `
                     <fp-error-screen
                         errorText="Invalid ${this.fanPassTitle}"
@@ -618,7 +956,6 @@ let FanPassClaim = class FanPassClaim extends CirkayElement {
                     ></fp-error-screen>
                 `;
             case ClaimStateTypes.mintingError:
-                this._pageNumber = 3;
                 return html `
                     <fp-error-screen
                         errorText=${this.error}
@@ -627,58 +964,91 @@ let FanPassClaim = class FanPassClaim extends CirkayElement {
                 `;
             case ClaimStateTypes.error:
             default:
-                this._pageNumber = 4;
+                this.setPageNumber(3);
                 return html `
                     <fp-error-screen
-                        errorText="Claiming error"
+                        errorText=${this.error || '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>
+                        ${this._campaignState == CampaignState.available
+                    ? html `
+                                  <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 `
+    renderClaimButton() {
+        let buttonLabel = 'Claim';
+        switch (this._claimState) {
+            case ClaimStateTypes.redeemedLogin:
+                this._pageNumber = 3;
+                buttonLabel = 'Claimed';
+                break;
+            case ClaimStateTypes.redeemedLoggedout:
+                buttonLabel = 'Claimed';
+                this._pageNumber = 1;
+                break;
+            case ClaimStateTypes.validating:
+                this._pageNumber = 1;
+                buttonLabel = 'Initializing...';
+                break;
+            case ClaimStateTypes.minting:
+                this._pageNumber = 2;
+                buttonLabel = 'Claiming...';
+                break;
+            case ClaimStateTypes.mintingError:
+                this._pageNumber = 3;
+                buttonLabel = 'Claim';
+                break;
+            case ClaimStateTypes.error:
+                this._pageNumber = 3;
+                buttonLabel = 'Claim';
+                break;
+            default:
+                this._pageNumber = 1;
+                buttonLabel = 'Claim';
+                break;
+        }
+        return html `
+            <div part="claim-button-container" class="claim-button-container">
                 <pu-button
-                    class="button"
+                    class="button claim-button"
                     style="${styleMap(this.buttonStyles())}"
                     @click=${this.openOverlay}
                     type="button"
                     name="claim"
                     size="large"
+                    fullWidth
                     buttonstyle="solid"
+                    ?disabled=${this._claimState ===
+            ClaimStateTypes.validating ||
+            this._claimState ===
+                ClaimStateTypes.redeemedCheckingSession}
+                    ?loading=${this._claimState ===
+            ClaimStateTypes.validating ||
+            this._claimState ===
+                ClaimStateTypes.redeemedCheckingSession}
                 >
                     <pu-text
                         as="span"
@@ -687,49 +1057,145 @@ let FanPassClaim = class FanPassClaim extends CirkayElement {
                         withoutMargin
                         spacing="loose"
                     >
-                        Claim
+                        ${buttonLabel}
                     </pu-text>
                 </pu-button>
-                <pu-overlay id="fb-modal">
+            </div>
+        `;
+    }
+    render() {
+        this.logging('render', 'claimState', this._claimState);
+        if (this.modal) {
+            return html `
+                ${this.walletCheckResponse && this.loginController?.loggedIn
+                ? html `
+                          <fp-connected
+                              displayText=${this.walletCheckResponse.data?.holds
+                    ? "You're connected!"
+                    : `Claim your ${this.fanPassTitle}`}
+                              fanPassTitle=${this.fanPassTitle}
+                              apiKey=${this.apiKey}
+                              ?stagging=${this.staging}
+                              ?debugLogging=${this.debugLogging}
+                              ?ownsFp=${this.walletCheckResponse.data?.holds
+                    ? true
+                    : false}
+                          >
+                              <div part="inner-content" slot="inner-content">
+                                  ${this.renderClaimButton()}
+                              </div>
+                          </fp-connected>
+                      `
+                : html ` ${this.renderClaimButton()} `}
+
+                <pu-overlay id="fb-modal" class="fb-modal">
                     <pu-box
                         slot="content"
                         class="modalContentBox"
                         padding=${100}
+                        mobilePadding="60, 0"
                     >
-                        <pu-vertical-stack
-                            spacing="40"
+                        <!-- <pu-vertical-stack
+                            spacing="32"
                             align="center"
                             mobileAlign="center"
                             justify="center"
-                            mobileJustify="center"
-                            class="flowContainer"
+                            mobileJustify="space-between"
+                        > -->
+                        <fp-frame
+                            fanPassTitle=${this.fanPassTitle}
+                            maxPages=${3}
+                            currentPageNumber=${this._pageNumber}
+                            .logoSet=${this.logoSet}
                         >
-                            ${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}
+                            ${this.renderContent()}
+                        </fp-frame>
+                        <!-- </pu-vertical-stack> -->
+                        <button
+                            part="button-icon"
+                            class="button-icon"
                             style="position: absolute; top: 1rem; right: 1rem; z-index: 501"
+                            type="button"
+                            aria-label="Close modal"
+                            aria-controls="overlay"
+                            @click=${this.closeOverlay}
                         >
-                        </pu-button-icon>
+                            <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>
             `;
         }
-        return this.renderFrame(html `${this.renderContent()}`);
+        return html `
+            ${this.walletCheckResponse && this.loginController?.loggedIn
+            ? html `
+                      <fp-connected
+                          displayText=${this.walletCheckResponse.data?.holds
+                ? 'You already have this ${this.fanPassTitle}'
+                : 'Claim your ${this.fanPassTitle}'}
+                          fanPassTitle=${this.fanPassTitle}
+                          apiKey=${this.apiKey}
+                          ?stagging=${this.staging}
+                          ?debugLogging=${this.debugLogging}
+                          ?ownsFp=${this.walletCheckResponse.data?.holds
+                ? true
+                : false}
+                      >
+                          <slot></slot>
+                      </fp-connected>
+                  `
+            : html ``}
+            <fp-frame
+                fanPassTitle=${this.fanPassTitle}
+                maxPages=${3}
+                currentPageNumber=${this._pageNumber}
+                .logoSet=${this.logoSet}
+            >
+                ${this.renderContent()}
+            </fp-frame>
+        `;
     }
-};
+}
+FanPassClaim.interval = 3000;
 FanPassClaim.styles = css `
+        .claim-button-container {
+            width: 200px;
+            max-width: 200px;
+        }
         /* Add your component styles here */
+        .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;
+            max-height: 100vh;
+        }
         .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(
@@ -739,6 +1205,7 @@ FanPassClaim.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;
             }
         }
 
@@ -746,6 +1213,47 @@ FanPassClaim.styles = css `
             --pu-border-button-corner-radius: var(--pu-border-radius-20, 12px);
         }
 
+        .button-icon {
+            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-name: spin;
             animation-duration: 500ms;
@@ -777,7 +1285,13 @@ __decorate([
 ], FanPassClaim.prototype, "fanPassTitle", void 0);
 __decorate([
     property({ type: String })
-], FanPassClaim.prototype, "redeemToken", void 0);
+], FanPassClaim.prototype, "redeemCode", void 0);
+__decorate([
+    property({ type: Boolean })
+], FanPassClaim.prototype, "availibleCampaign", void 0);
+__decorate([
+    property({ type: Number })
+], FanPassClaim.prototype, "campaignId", void 0);
 __decorate([
     property({ type: Boolean })
 ], FanPassClaim.prototype, "modal", void 0);
@@ -793,6 +1307,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], FanPassClaim.prototype, "successUrl", void 0);
+__decorate([
+    property({ type: String })
+], FanPassClaim.prototype, "campaignUrl", void 0);
 __decorate([
     property({ type: Boolean })
 ], FanPassClaim.prototype, "autoRedirect", void 0);
@@ -817,6 +1334,9 @@ __decorate([
 __decorate([
     state()
 ], FanPassClaim.prototype, "_claimState", void 0);
+__decorate([
+    state()
+], FanPassClaim.prototype, "_campaignState", void 0);
 __decorate([
     state()
 ], FanPassClaim.prototype, "_pageNumber", void 0);
@@ -828,10 +1348,10 @@ __decorate([
 ], FanPassClaim.prototype, "_loginState", void 0);
 __decorate([
     state()
-], FanPassClaim.prototype, "_tokenStatus", void 0);
-FanPassClaim = __decorate([
-    customElement('fan-pass-claim')
-], FanPassClaim);
+], FanPassClaim.prototype, "_codeStatus", void 0);
+__decorate([
+    query('fp-login')
+], FanPassClaim.prototype, "_loginComponent", void 0);
 
-export { FanPassClaim };
+export { FanPassClaim as default };
 //# sourceMappingURL=fan-pass-claim.js.map