@cirkay-eng/cirkay-components 0.7.2 → 0.7.4

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

@@ -1,30 +1,36 @@
-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.34.8_tslib@2.8.1_typescript@5.7.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, PromotionState, 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';
 
-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.apiKey = '';
         this.logoSet = {
             large: {
@@ -39,12 +45,15 @@ let FanPassClaim = class FanPassClaim extends CirkayElement {
             alt: 'Cirkay Logo',
         };
         this.fanPassTitle = 'Fan Pass';
-        this.redeemToken = '';
+        this.redeemCode = '';
+        this.availiblePromotion = false;
+        this.promotionId = null;
         this.modal = false;
         this.validateAfterModal = false;
-        this.staging = true;
+        this.staging = false;
         this.debugLogging = false;
-        this.successUrl = 'https://cirkay.com';
+        this.successUrl = '';
+        this.promotionUrl = window.location.href;
         this.autoRedirect = false;
         this.showRedeemInput = false;
         this.success = false;
@@ -53,15 +62,27 @@ let FanPassClaim = class FanPassClaim extends CirkayElement {
         this.btnTextColor = '#FFFFFF';
         this.faqUrl = 'https://cirkay.com/faq/';
         this._claimState = ClaimStateTypes.validating;
+        this._promotionState = PromotionState.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 +93,461 @@ 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('Promotion ID', this.promotionId);
+        if (this.promotionId) {
+            const promotion = await this.getPromotionInformation(this.promotionId);
+            this.logging('PROMOTION details', promotion);
+            const currentDate = new Date();
+            const startDate = promotion.start_date ? (new Date(promotion.start_date)) : null;
+            const endDate = promotion.end_date ? (new Date(promotion.end_date)) : null;
+            if (promotion.limit <= promotion.used_count) {
+                this._promotionState = PromotionState.noFanPassesLeft;
+                this.error = `${this.fanPassTitle} can no longer be claimed`;
+                this._claimState = ClaimStateTypes.error;
+                this._codeStatus = {
+                    status: MintStatus.unavailable,
+                    available: promotion.limit - promotion.used_count,
+                    promotion: promotion
+                };
+            }
+            else if (endDate && currentDate > endDate) {
+                this._promotionState = PromotionState.promotionOver;
+                this.error = 'This claim is no longer available';
+                this._claimState = ClaimStateTypes.error;
+                this._codeStatus = {
+                    status: MintStatus.unavailable,
+                    available: promotion.limit - promotion.used_count,
+                    promotion: promotion
+                };
+            }
+            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._promotionState = PromotionState.promotionNotBegun;
+                this.error = text;
+                this._claimState = ClaimStateTypes.error;
+                this._codeStatus = {
+                    status: MintStatus.unavailable,
+                    available: promotion.limit - promotion.used_count,
+                    promotion: promotion
+                };
+            }
+            else {
+                this._codeStatus = {
+                    status: MintStatus.available,
+                    available: promotion.limit - promotion.used_count,
+                    promotion: promotion
+                };
+                this.availiblePromotion = true;
+                this.promotionUrl = promotion.promotion_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.setPromotionStatus().then(() => {
+                    if (!this.availiblePromotion) {
+                        this.error = "Seems like you're 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('promotionId') || 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;
+            }
+            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) {
+            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.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);
+        }
+        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 you're link is invalid, try again or contact support";
+                    this._claimState = ClaimStateTypes.invalid;
+                    break;
+            }
         }
-        this.logging('setTokenStatus', token);
-        this._tokenStatus = status;
-        this.logging('Token Status', status);
-        if (!status.ok) {
+    }
+    async getPromotionInformation(promotionId) {
+        try {
+            const { data, error } = (await this.nexusAPI?.getPromotionInformation(promotionId)) || {};
+            if (error || !data) {
+                this.error = error || 'An error occurred while fetching promotion 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 promotion 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 setPromotionStatus() {
+        const validation = await this.nexusAPI?.checkPromotion(this.promotionUrl);
+        if (!validation) {
+            this.error = 'an error occured';
+            this._claimState = ClaimStateTypes.error;
+            throw new Error('error occured');
+        }
+        if (validation.ok && validation.data.available) {
+            this.availiblePromotion = true;
         }
-        return status;
     }
-    validateMint(interval, maxAttempts) {
+    validateMint(interval, maxAttempts, issueId) {
         let attempts = 0;
-        const checkInterval = setInterval(async () => {
+        this.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;
+            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;
+                    }
+                }
+                else if (attempts >= maxAttempts) {
+                    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;
+        try {
+            if (this.redeemCode === '' && !this.availiblePromotion) {
+                this.error = "Seems like you're link is invalid, try again or contact support";
+                return;
+            }
+            const response = await this.nexusAPI?.mint(didToken, this.redeemCode || undefined, this.availiblePromotion ? this.promotionUrl : undefined, this.promotionId || undefined);
+            if (!response) {
+                this.error = 'an error occured';
+                this._claimState = ClaimStateTypes.error;
+                throw new Error('error occured');
+            }
+            else {
+                const issueId = response.issueId;
                 const interval = 10000;
-                let maxAttempts = 3;
-                if (estimate) {
-                    maxAttempts = (estimate * 2) / (interval / 1000);
-                    if (maxAttempts < 3) {
-                        maxAttempts = 3;
-                    }
-                }
-                this.validateMint(interval, maxAttempts);
+                const estimate = response.estimate_seconds;
+                const minAttempts = 3;
+                const maxAttempts = estimate
+                    ? Math.max(minAttempts, Math.ceil((estimate * 2) / (interval / 1000)))
+                    : minAttempts;
+                this.validateMint(interval, maxAttempts, issueId);
             }
-            catch (error) {
-                if (error.response.data.error === 'Issuance code not available') {
+        }
+        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 'Promotion 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 promotion':
+                    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 = {
-                    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(),
-                }));
-            }
+        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,
+            });
+            return this.walletCheckResponse;
+        }
+        return null;
     }
     async logout() {
-        await this.loginController?.logout();
+        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 +559,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 +577,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 +603,68 @@ 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,25 +672,14 @@ 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
                         class="loading__spinner"
                         width="16"
@@ -433,7 +696,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 +704,6 @@ let FanPassClaim = class FanPassClaim extends CirkayElement {
                     ></fp-error-screen>
                 `;
             case ClaimStateTypes.availableLoggedIn:
-                this._pageNumber = 1;
                 return html `
                     <pu-vertical-stack
                         class=""
@@ -455,6 +717,7 @@ let FanPassClaim = class FanPassClaim extends CirkayElement {
                         <pu-text as="p" variant="bodyMd" withoutMargin>
                             Logged in as ${this.loginController?.user?.email}
                         </pu-text>
+                        
                         <pu-vertical-stack
                             class=""
                             spacing="8"
@@ -485,7 +748,6 @@ let FanPassClaim = class FanPassClaim extends CirkayElement {
                     </pu-vertical-stack>
                 `;
             case ClaimStateTypes.available:
-                this._pageNumber = 1;
                 return html `
                     <pu-vertical-stack
                         class=""
@@ -493,9 +755,9 @@ let FanPassClaim = class FanPassClaim extends CirkayElement {
                         align="center"
                         mobileAlign="center"
                     >
-                        <pu-text as="p" variant="bodyLg" withoutMargin>
+                        ${this._pageNumber === 1 ? html `<pu-text as="p" variant="bodyLg" withoutMargin>
                             Claim your ${this.fanPassTitle}
-                        </pu-text>
+                        </pu-text>` : html ``}
                         <fp-login
                             id="login"
                             buttonLabel="Claim"
@@ -503,17 +765,20 @@ 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 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...
                     </pu-text>
                     <svg
                         class="loading__spinner"
@@ -531,10 +796,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,8 +824,8 @@ 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...
@@ -581,8 +846,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 +855,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 +874,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 +882,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 +890,85 @@ 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._promotionState == PromotionState.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 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 +977,131 @@ let FanPassClaim = class FanPassClaim extends CirkayElement {
                         withoutMargin
                         spacing="loose"
                     >
-                        Claim
+                        ${buttonLabel}
                     </pu-text>
                 </pu-button>
-                <pu-overlay id="fb-modal">
-                    <pu-box
-                        slot="content"
-                        class="modalContentBox"
-                        padding=${100}
+            </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}
                     >
-                        <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"
+                         <div 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-button-icon>
-                    </pu-box>
-                </pu-overlay>
+                            <pu-vertical-stack
+                                spacing="40"
+                                align="center"
+                                mobileAlign="center"
+                                justify="center"
+                                mobileJustify="center"
+                                class="flowContainer"
+                            >
+                            <fp-frame
+                                fanPassTitle=${this.fanPassTitle}
+                                maxPages=${3}
+                                currentPageNumber=${this._pageNumber}
+                                .logoSet=${this.logoSet}
+                            >
+                                ${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}
+                            >
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    id="close"
+                                    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.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;
+        }
         .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 +1111,8 @@ 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 +1120,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 +1192,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, "availiblePromotion", void 0);
+__decorate([
+    property({ type: Number })
+], FanPassClaim.prototype, "promotionId", void 0);
 __decorate([
     property({ type: Boolean })
 ], FanPassClaim.prototype, "modal", void 0);
@@ -793,6 +1214,9 @@ __decorate([
 __decorate([
     property({ type: String })
 ], FanPassClaim.prototype, "successUrl", void 0);
+__decorate([
+    property({ type: String })
+], FanPassClaim.prototype, "promotionUrl", void 0);
 __decorate([
     property({ type: Boolean })
 ], FanPassClaim.prototype, "autoRedirect", void 0);
@@ -817,6 +1241,9 @@ __decorate([
 __decorate([
     state()
 ], FanPassClaim.prototype, "_claimState", void 0);
+__decorate([
+    state()
+], FanPassClaim.prototype, "_promotionState", void 0);
 __decorate([
     state()
 ], FanPassClaim.prototype, "_pageNumber", void 0);
@@ -828,10 +1255,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