{"version":3,"file":"SubscriptionSuspended.3fae0bbb.js","sources":["../../../resources/js/components/checkout/PlanSuspensionNotice.vue","../../../resources/js/components/modals/SubscriptionSuspended.vue"],"sourcesContent":["<template>\n    <div\n        v-if=\"isCancelButtonColorLoading\"\n        class=\"d-flex justify-content-center align-items-center my-3 px-2\"\n        style=\"height: 233px\"\n    >\n        <b-spinner variant=\"primary\" label=\"Loading\" style=\"width: 3rem; height: 3rem\" />\n    </div>\n    <div v-else class=\"my-3 px-2\">\n        <h5 class=\"font-weight-bold text-center notice-title\">Important Plan Update</h5>\n\n        <h4 class=\"font-weight-bold text-center\">Membership Paused⚠️</h4>\n\n        <div class=\"text-center mt-3\">\n            <div class=\"d-flex justify-content-center f-14\">\n                Unfortunately, we're unable to charge the card on file. Your access to paid features has been paused.\n                <br />\n                To reactivate, please review and update your payment method.\n            </div>\n        </div>\n        <div class=\"actions d-flex justify-content-center align-items-center\">\n            <button :class=\"`btn btn-${cancelButtonColor}`\" @click=\"cancelPlan\">Cancel Your Plan</button>\n            <button class=\"btn btn-success ml-8\" @click=\"reactivatePlan\">Resume Your Plan</button>\n        </div>\n    </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { mapGetters } from 'vuex'\nimport WithCheckout from '../../mixins/WithCheckout'\nimport OneClickUpgrade from '../../mixins/OneClickUpgrade'\nimport { PlanType } from '../../objects/Plan'\n\nexport default defineComponent({\n    name: 'PlanSuspensionNotice',\n    mixins: [WithCheckout, OneClickUpgrade],\n    computed: {\n        subscription(): any {\n            return this.$store.state.subscription as any\n        },\n        ...mapGetters({\n            isLoggedIn: 'user/isLoggedIn',\n            subscriptionSuspendOverlayCancelButtonColor: 'abtests/subscriptionSuspendOverlayCancelButtonColor',\n        }),\n        isCancelButtonColorLoading(): boolean {\n            return this.subscriptionSuspendOverlayCancelButtonColor.loading\n        },\n        cancelButtonColor(): string {\n            return this.subscriptionSuspendOverlayCancelButtonColor.color\n        },\n    },\n    methods: {\n        async cancelPlan() {\n            this.closeModal()\n            this.$bvModal.show('cancel-subscription')\n        },\n\n        async reactivatePlan() {\n            this.setSelectedPlan(this.subscription.subscription_plan)\n            this.setSelectedPlanType(this.planLabel as PlanType)\n            this.$emit('active-step', 'payment')\n        },\n\n        async markNotificationSeen() {\n            await this.$store.dispatch('subscription/markPaymentFailureNotificationSeen', {\n                subscription_id: this.subscription.id,\n            })\n        },\n\n        async closeModal() {\n            this.$bvModal.hide('subscription-suspended')\n            await this.markNotificationSeen()\n        },\n    },\n})\n</script>\n\n<style lang=\"scss\" scoped>\n@import 'Scss/base.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-14 {\n    font-size: 0.925rem;\n}\n\n.ml-8 {\n    margin-left: 5rem;\n}\n\n.actions {\n    margin-top: 2.5rem;\n    margin-bottom: 1.5rem;\n}\n\n.notice-title {\n    margin-bottom: 2rem;\n}\n</style>\n","<template>\n    <Modal\n        id=\"subscription-suspended\"\n        size=\"lg\"\n        :loading=\"true\"\n        :cancelable=\"active_step === 'payment'\"\n        @hidden=\"closed()\"\n        @show=\"handleShow\"\n    >\n        <div v-if=\"active_step === 'payment'\">\n            <IconBack\n                v-if=\"active_step === 'payment' && page !== 'account'\"\n                class=\"position-absolute back-icon text-muted pointer\"\n                @click=\"showPlanNotice()\"\n            />\n            <div>\n                <h2 class=\"font-weight-bold mb-2 text-center\">Card Details</h2>\n            </div>\n        </div>\n\n        <PaymentDetails v-show=\"active_step === 'payment'\" :page=\"page\" />\n\n        <PaymentConfirmation v-show=\"active_step === 'confetti'\" :page=\"page\" />\n\n        <PlanSuspensionNotice v-show=\"active_step === 'plan_notice'\" :page=\"page\" @active-step=\"changeActiveStep\" />\n    </Modal>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\n\nimport Modal from '../../stories/components/modals/Modal.vue'\nimport PaymentDetails from '../checkout/PaymentDetails.vue'\nimport PaymentConfirmation from '../checkout/PaymentConfirmation.vue'\nimport PlanSuspensionNotice from '../checkout/PlanSuspensionNotice.vue'\nimport IconBack from '../../stories/components/icons/IconBack.vue'\nimport WithCheckout from '../../mixins/WithCheckout'\n\ninterface Data {\n    active_step: string\n}\n\nexport default defineComponent({\n    name: 'SubscriptionSuspended',\n    components: {\n        IconBack,\n        Modal,\n        PaymentConfirmation,\n        PaymentDetails,\n        PlanSuspensionNotice,\n    },\n    mixins: [WithCheckout],\n    props: {\n        step: {\n            type: String,\n            default: 'plan_notice',\n        },\n    },\n    data(): Data {\n        return {\n            active_step: this.step,\n        }\n    },\n    methods: {\n        changeActiveStep(step: string) {\n            this.active_step = step\n        },\n        async closed() {\n            await this.$store.dispatch('subscription/markPaymentFailureNotificationSeen', {\n                subscription_id: this.subscription.id,\n            })\n        },\n        showPlanNotice() {\n            this.changeActiveStep('plan_notice')\n        },\n        async handleShow() {\n            if (this.active_step !== 'plan_notice') {\n                return\n            }\n\n            await this.loadAbTests()\n        },\n        async loadAbTests() {\n            await this.$store.dispatch('abtests/initialize', {\n                completed: async () => {\n                    await this.$store.dispatch('abtests/loadSubscriptionSuspendOverlayCancelButtonColorTests')\n                },\n            })\n        },\n    },\n})\n</script>\n\n<style lang=\"scss\">\n@import 'Scss/base.scss';\n\n#confetti {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    z-index: 1;\n    top: 0;\n    left: 0;\n}\n\n.back-icon {\n    top: 5px;\n    left: 5px;\n    height: 24px;\n    width: 24px;\n}\n</style>\n"],"names":["_sfc_main$1","defineComponent","name","mixins","WithCheckout","OneClickUpgrade","computed","subscription","this","$store","state","mapGetters","isLoggedIn","subscriptionSuspendOverlayCancelButtonColor","isCancelButtonColorLoading","loading","cancelButtonColor","color","methods","cancelPlan","closeModal","$bvModal","show","reactivatePlan","setSelectedPlan","subscription_plan","setSelectedPlanType","planLabel","$emit","markNotificationSeen","dispatch","subscription_id","id","hide","components","IconBack","Modal","PaymentConfirmation","PaymentDetails","PlanSuspensionNotice","props","step","type","String","default","data","active_step","changeActiveStep","closed","showPlanNotice","handleShow","loadAbTests","completed","async"],"mappings":"4WAkCA,MAAAA,EAAAC,EAAA,CACAC,KAAA,uBACAC,OAAA,CAAAC,EAAAC,GACAC,SAAA,CACA,YAAAC,GACA,OAAAC,KAAAC,OAAAC,MAAAH,YACA,KACAI,EAAA,CACAC,WAAA,kBACAC,4CAAA,wDAEA,0BAAAC,GACA,OAAAN,KAAAK,4CAAAE,OACA,EACA,iBAAAC,GACA,OAAAR,KAAAK,4CAAAI,KACA,GAEAC,QAAA,CACA,gBAAAC,GACAX,KAAAY,aACAZ,KAAAa,SAAAC,KAAA,sBACA,EAEA,oBAAAC,GACAf,KAAAgB,gBAAAhB,KAAAD,aAAAkB,mBACAjB,KAAAkB,oBAAAlB,KAAAmB,WACAnB,KAAAoB,MAAA,cAAA,UACA,EAEA,0BAAAC,SACArB,KAAAC,OAAAqB,SAAA,kDAAA,CACAC,gBAAAvB,KAAAD,aAAAyB,IAEA,EAEA,gBAAAZ,GACAZ,KAAAa,SAAAY,KAAA,gCACAzB,KAAAqB,sBACA,eC/BA5B,EAAA,CACAC,KAAA,wBACAgC,WAAA,CACAC,WACAC,QACAC,sBACAC,iBACAC,uuCAEApC,OAAA,CAAAC,GACAoC,MAAA,CACAC,KAAA,CACAC,KAAAC,OACAC,QAAA,gBAGA,IAAAC,GACA,MAAA,CACAC,YAAAtC,KAAAiC,KAEA,EACAvB,QAAA,CACA,gBAAA6B,CAAAN,GACAjC,KAAAsC,YAAAL,CACA,EACA,YAAAO,SACAxC,KAAAC,OAAAqB,SAAA,kDAAA,CACAC,gBAAAvB,KAAAD,aAAAyB,IAEA,EACA,cAAAiB,GACAzC,KAAAuC,iBAAA,cACA,EACA,gBAAAG,GACA,gBAAA1C,KAAAsC,mBAIAtC,KAAA2C,aACA,EACA,iBAAAA,SACA3C,KAAAC,OAAAqB,SAAA,qBAAA,CACAsB,UAAAC,gBACA7C,KAAAC,OAAAqB,SAAA,+DAAA,GAGA"}