{"version":3,"mappings":"0PA6DAA,GACAC,0BACAC,YACAC,oPACAC,6YAEAC,UACA,CACAC,yBACAC,QACA,CACAN,6BACAO,+BACAC,oBAEA,CACAR,kBACAO,+BACAC,oBAEA,CACAR,qBACAO,gCACAC,sBAEA,CACAR,aACAO,2BACAC,eAEA,CACAR,kBACAO,+BACAC,uBAKAC,aACAC,GACAC,uBACAC,iCACAC,qCACAC,uCAEA,iBACA,kCACA,EACAC,qBACAA,EAEA,iBACA,8DACA,GAEAC,SACA,uCACAC,yFAEAA,sBAIAA,4BACAA,sCACA,EACA,mCACAA,2BACA,EACA,2BACAA,qFACAA,0BACA,EACA,4BACA,IAEA,SADAA,sDACAA,oBACA,wCAEA,UACAA,oBACA,uGACAC,EAEA,CACA,EACA,gBACAC,uBACA,EACA,8BACAF,8DACA","names":["defineComponent","name","components","IconUnlocked","PremiumMarker","data","id","brands","image","brand","computed","mapGetters","hasPlan","hasPlans","onPublishing","isPurchase","brightsproutUrls","methods","this","dangerToast","window"],"sources":["../../../resources/js/components/OnboardingComplete.vue"],"sourcesContent":["<template>\n    <b-modal :id=\"id\" hide-footer hide-header size=\"lg\" centered @shown=\"onModalShown\" @hide=\"closeOnboarding\">\n        <div class=\"my-3 px-4\">\n            <h2 v-if=\"isPurchase\" class=\"font-weight-bold text-center purchase-title\">\n                Success! Your Purchase is Complete.\n            </h2>\n            <h5 class=\"font-weight-bold text-center\">A special gift for you:</h5>\n\n            <div class=\"text-center mt-3\">\n                <div class=\"d-flex justify-content-center f-24\">You've unlocked one free month of Premium — on us!</div>\n                <div class=\"position-relative\">\n                    <IconUnlocked class=\"unlocked-icon\" />\n                </div>\n                <div class=\"position-relative\">\n                    <PremiumMarker :show=\"true\" :popover=\"false\" class=\"premium-marker\" />\n                </div>\n                <div class=\"d-flex flex-wrap justify-content-between align-items-baseline brands\">\n                    <div\n                        v-for=\"item in brands\"\n                        :key=\"item.name\"\n                        class=\"mb-3 d-flex flex-column justify-content-center align-items-center brand pointer\"\n                        @click=\"openInNewTab(brightsproutUrls[item.brand])\"\n                    >\n                        <img :key=\"item.image\" :src=\"item.image\" class=\"brand-image\" />\n                        <p class=\"brand-name mt-2 mb-0 text-uppercase text-primary\" v-html=\"item.name\"></p>\n                    </div>\n                </div>\n                <div class=\"mt-2 text-center\">\n                    <h5 class=\"font-weight-bold mb-3 mt-3\">Make unlimited activities with all features for 30 days.🎉</h5>\n\n                    <p class=\"f-20\">After 30 days, your account will revert to free features only.</p>\n                </div>\n            </div>\n            <div class=\"actions d-flex justify-content-center align-items-center\">\n                <button\n                    class=\"btn\"\n                    :class=\"onPublishing ? 'btn-secondary mr-2' : 'btn-primary'\"\n                    @click=\"handleContinueEditingButtonClick()\"\n                >\n                    Continue Editing\n                </button>\n                <button\n                    v-if=\"onPublishing\"\n                    id=\"onboarding-complete-publish-button\"\n                    class=\"btn btn-success ml-4\"\n                    @click=\"handlePublishButtonClick()\"\n                >\n                    Finish + Print\n                </button>\n            </div>\n        </div>\n    </b-modal>\n</template>\n\n<script>\nimport { defineComponent } from 'vue'\nimport { mapGetters } from 'vuex'\nimport { dangerToast } from '../helpers/toasts'\nimport { brightsproutUrls } from '../config/Config'\nimport UserEvent from '../objects/UserEvent'\n\nexport default defineComponent({\n    name: 'OnboardingComplete',\n    components: {\n        IconUnlocked: () => import('../stories/components/icons/IconUnlocked.vue'),\n        PremiumMarker: () => import('../widgets/premium-marker.vue'),\n    },\n    data() {\n        return {\n            id: 'onboarding-complete',\n            brands: [\n                {\n                    name: 'Premium<br>Worksheets',\n                    image: '/images/worksheet.webp',\n                    brand: 'worksheets',\n                },\n                {\n                    name: 'Crosswords',\n                    image: '/images/crossword.webp',\n                    brand: 'crosswords',\n                },\n                {\n                    name: 'Word Searches',\n                    image: '/images/wordsearch.webp',\n                    brand: 'wordsearches',\n                },\n                {\n                    name: 'Bingo',\n                    image: '/images/bingo.webp',\n                    brand: 'bingo',\n                },\n                {\n                    name: 'Flashcards',\n                    image: '/images/flashcard.webp',\n                    brand: 'flashcards',\n                },\n            ],\n        }\n    },\n    computed: {\n        ...mapGetters({\n            hasPlan: 'user/hasPlan',\n            hasPlans: 'subscription/hasPlans',\n            onPublishing: 'document/onpublishing',\n            isPurchase: 'subscription/isPurchase',\n        }),\n        hasPlanOrPlans() {\n            return this.hasPlan || this.hasPlans\n        },\n        brightsproutUrls() {\n            return brightsproutUrls\n        },\n        onboardingType() {\n            return this.isPurchase ? 'single purchase' : 'cardless free trial'\n        },\n    },\n    methods: {\n        async handlePublishButtonClick() {\n            await this.$logTrackingEvent(UserEvent.ONBOARDING_COMPLETE_PUBLISH_BUTTON_CLICKED, this.onboardingType)\n\n            if (!this.hasPlanOrPlans) {\n                return\n            }\n\n            this.$bvModal.hide(this.id)\n            this.$bvModal.show('printable-modal')\n        },\n        handleContinueEditingButtonClick() {\n            this.$bvModal.hide(this.id)\n        },\n        async onModalShown() {\n            await this.$logTrackingEvent(UserEvent.ONBOARDING_COMPLETE_OVERLAY_SEEN, this.onboardingType)\n            await this.recheckSubscription()\n        },\n        async recheckSubscription() {\n            try {\n                await this.$store.dispatch('subscription/getSubscription')\n                if (!this.hasPlanOrPlans) {\n                    throw new Error('No subscription found')\n                }\n            } catch (error) {\n                this.$bvToast.toast(\n                    'There might be a problem with your subscripton. Please try to refresh page if you notice any errors.',\n                    dangerToast,\n                )\n            }\n        },\n        openInNewTab(url) {\n            window.open(url, '_blank')\n        },\n        async closeOnboarding() {\n            await this.$store.dispatch('subscription/setValue', { is_purchase: false })\n        },\n    },\n})\n</script>\n\n<style lang=\"scss\" scoped>\n@import 'Scss/base-worksheets.scss';\n\n.btn {\n    min-width: 9em;\n    height: 3rem;\n    font-size: 1.125rem;\n}\n\n@media (min-width: 991px) {\n    .btn {\n        min-width: 12em;\n    }\n}\n\n.f-24 {\n    font-size: 1.5rem;\n}\n\n.f-20 {\n    font-size: 1.25rem;\n}\n\n.actions {\n    margin-top: 2.5rem;\n}\n\n.brands {\n    border: 0.4375rem solid rgba($primary-100, 0.5);\n    border-radius: 0.625rem;\n    padding: 1.875rem 1rem 1rem 1rem;\n    margin-top: 2.5rem;\n\n    .brand {\n        .brand-image {\n            border: 1px solid #000000;\n            width: 7.5rem;\n            height: 7.5rem;\n        }\n\n        .brand-name {\n            font-size: 1rem;\n            font-weight: 600;\n            line-height: 1;\n        }\n    }\n}\n\n.unlocked-icon {\n    position: absolute;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    top: 1.875rem;\n    z-index: 1;\n    border: 0.25rem solid #ffffff;\n    width: 3rem;\n    height: 3.75rem;\n}\n\n.premium-marker {\n    position: absolute;\n    left: 7.7rem;\n    transform: translate(-50%, -50%);\n    top: 5.6rem;\n    z-index: 1;\n    font-size: 1.25rem;\n}\n\n.purchase-title {\n    margin-bottom: 2.5rem;\n}\n</style>\n"],"file":"assets/OnboardingComplete.f71b161d.js"}