{"version":3,"file":"Home2024-c1b6fe80.js","sources":["../../client/packages/utils/src/validators/content.ts","../../client/packages/design-system/src/cards/DReviewCard.vue","../../client/packages/design-system/src/cards/DPressReviewCard.vue","../../client/packages/design-system/src/cards/DRevealCard.vue","../../client/packages/design-system/src/blocks/DHeroMediaBackgroundBlock.vue","../../client/packages/design-system/src/cards/DAccordionCard.vue","../../client/apps/customer/views/home/home2024.ts","../../client/apps/customer/views/home/Home2024.vue"],"sourcesContent":["import {isString} from \"./primitives\";\n\nexport const isVideoContentType = (contentType?: string) => {\n    return isString(contentType) && contentType.includes(\"video\");\n};\n\nexport const isImageContentType = (contentType?: string) => {\n    return isString(contentType) && contentType.includes(\"image\");\n};\n","<template>\n    <DContainer\n        class=\"d-review-card\"\n        :data-test-td=\"dataTestId\"\n        display=\"grid\"\n        variant=\"card\"\n        :theme=\"cardTheme\"\n    >\n        <DContainer class=\"d-review-card-stars\">\n            <DIcon v-for=\"i in 5\" :key=\"i\" name=\"star\"/>\n        </DContainer>\n\n        <DText\n            class=\"d-review-card-review-text\"\n            variant=\"p-3\"\n        >\n            \"{{reviewText}}\"\n        </DText>\n        <DDivider spacing=\"tight\" :theme=\"theme\"/>\n        <DReviewUserAvatar v-if=\"avatar\" class=\"d-review-avatar\" :avatar=\"avatar\"/>\n    </DContainer>\n</template>\n\n<script lang=\"ts\" setup>\n    import {computed} from \"vue\";\n\n    import DDivider from \"../atoms/DDivider.vue\";\n    import DContainer from \"../atoms/DContainer.vue\";\n    import DText from \"../atoms/DText.vue\";\n    import DIcon from \"../atoms/DIcon.vue\";\n\n    import DReviewUserAvatar from \"../molecules/DReviewUserAvatar.vue\";\n\n    import type {BaseCardType, Person, Artist} from \"@songfinch/types\";\n\n    const props = defineProps<\n        BaseCardType & {\n            reviewText?: string;\n            avatar?: Person | Artist;\n        }\n    >();\n\n    const cardTheme = computed(() => {\n        return props.theme === \"light\" ? \"white\" : \"light\";\n    });\n</script>\n\n<style lang=\"scss\" scoped>\n.d-review-card {\n  padding-bottom: 1rem;\n  border-radius: var(--radius-16);\n  width: 270px;\n  height: 352px;\n}\n\n.d-review-card-stars {\n  font-size: 1.25rem;\n  margin-bottom: var(--size-20);\n}\n\n.d-review-card-review-text {\n  height: 180px;\n  -webkit-box-orient: vertical;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 8; /* number of lines to show */\n  line-clamp: 8;\n}\n\n.d-review-avatar {\n  align-self: flex-end;\n}\n</style>\n","<template>\n    <DContainer\n        class=\"d-press-review-card\"\n        :data-test-td=\"dataTestId\"\n        display=\"grid\"\n        variant=\"card\"\n        :theme=\"cardTheme\"\n    >\n        <svg\n            class=\"d-press-review-card-quotes\"\n            width=\"56\"\n            height=\"51\"\n            viewBox=\"0 0 56 51\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n        >\n            <path\n                id=\"Quotes\"\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M11.157 0C4.99517 0 0 4.99516 0 11.157V39.6086C0 45.7705 4.99517 50.7656 11.157 50.7656C17.3189 50.7656 22.314 45.7705 22.314 39.6086V11.157C22.314 4.99517 17.3189 0 11.157 0ZM44.7293 14.7388C38.5674 14.7388 33.5723 19.734 33.5723 25.8958V39.843C33.5723 46.0048 38.5674 51 44.7293 51C50.8911 51 55.8863 46.0048 55.8863 39.843V25.8958C55.8863 19.734 50.8911 14.7388 44.7293 14.7388Z\"\n                fill=\"white\"\n                fill-opacity=\"0.16\"\n            />\n        </svg>\n\n        <DText\n            class=\"d-press-review-card-text\"\n            variant=\"p-2\"\n        >\n            {{reviewText}}\n        </DText>\n\n        <DImg v-if=\"logo\" class=\"d-press-review-card-logo\" :src=\"logo.url\" :alt=\"logo.title\"/>\n    </DContainer>\n</template>\n\n<script lang=\"ts\" setup>\n    import {computed} from \"vue\";\n\n    import DContainer from \"../atoms/DContainer.vue\";\n    import DText from \"../atoms/DText.vue\";\n    import DImg from \"../atoms/DImg.vue\";\n\n    import type {BaseCardType, NormalizedAsset} from \"@songfinch/types\";\n\n    const props = defineProps<\n        BaseCardType & {\n            reviewText?: string;\n            logo: NormalizedAsset\n        }\n    >();\n\n    const cardTheme = computed(() => {\n        return props.theme === \"dark\" ? \"shadow\" : \"dark\";\n    });\n</script>\n\n<style lang=\"scss\" scoped>\n.d-press-review-card {\n    position: relative;\n    padding: 1.875rem;\n    border-radius: var(--radius-16);\n    width: 270px;\n    height: 352px;\n}\n\n.d-press-review-card-quotes {\n    position: absolute;\n    top: 1.875rem;\n    left: 1.25rem;\n}\n\n.d-press-review-card-text {\n    margin-top: 32px;\n    -webkit-box-orient: vertical;\n    text-overflow: ellipsis;\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-line-clamp: 8; /* number of lines to show */\n    line-clamp: 8;\n}\n\n.d-press-review-card-logo {\n    margin-top: auto;\n}\n</style>\n","<template>\n    <DContainer\n        v-if=\"video && placeholder\"\n        class=\"d-reveal-card\"\n        :data-test-td=\"dataTestId\"\n        theme=\"dark\"\n        @click=\"openModal\"\n    >\n        <DImg\n            :key=\"placeholder.title\"\n            class=\"d-reveal-image\"\n            :width=\"placeholder.width\"\n            :height=\"placeholder.height\"\n            :alt=\"placeholder.title\"\n            :src=\"placeholder.url\"\n        />\n        <DContainer class=\"d-reveal-card-utils\">\n            <DButton\n                class=\"d-reveal-card-button\"\n                :data-test-id=\"`${dataTestId}-play-video`\"\n                theme=\"dark\"\n                variant=\"circle\"\n                icon=\"play\"\n                :aria-label=\"`Play ${video.title}`\"\n            />\n            <DText class=\"d-reveal-card-text\" variant=\"p-3-thicc\" type=\"p\">\n                {{title}}\n            </DText>\n            <DText\n                class=\"d-reveal-card-subtext\"\n                color=\"muted\"\n                variant=\"p-3\"\n                type=\"p\"\n            >\n                {{subtext}}\n            </DText>\n        </DContainer>\n    </DContainer>\n\n    <Teleport v-if=\"video\" to=\"body\">\n        <DVideoModal\n            v-if=\"modalActive\"\n            :data-test-id=\"`${dataTestId}-video-modal`\"\n            v-bind=\"video\"\n            :src=\"video.url\"\n            @close=\"closeModal\"\n        />\n    </Teleport>\n</template>\n\n<script lang=\"ts\" setup>\n    import {useModal} from \"../composables/useModal\";\n\n    import DContainer from \"../atoms/DContainer.vue\";\n    import DImg from \"../atoms/DImg.vue\";\n    import DButton from \"../atoms/DButton.vue\";\n    import DText from \"../atoms/DText.vue\";\n\n    import DVideoModal from \"../overlays/DVideoModal.vue\";\n\n    import type {BaseCardType, RevealType} from \"@songfinch/types\";\n\n    const props = defineProps<\n        BaseCardType &\n        RevealType & {\n            dataTestId: string;\n        }\n    >();\n\n    const {modalActive, openModal, closeModal} = useModal({\n        trackingProperties: {\n            type: \"video_opened\",\n            payload: {\n                video_title: props?.video?.title || \"\",\n            },\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped>\n.d-reveal-card {\n  position: relative;\n  display: grid;\n  cursor: pointer;\n  border-radius: var(--radius-16);\n  overflow: hidden;\n  width: 270px;\n  height: 352px;\n\n  &:after {\n        position: absolute;\n        width: 100%;\n        height: 50%;\n        content: \"\";\n        background: linear-gradient(180deg, rgba(28, 27, 28, 0) -0%, rgba(28, 27, 28, .5) 100%);\n        mix-blend-mode: multiply;\n        z-index: 2;\n        top: 50%;\n    }\n}\n\n.d-reveal-image {\n  object-fit: cover;\n  height: 100%;\n  width: 100%;\n}\n\n.d-reveal-card-utils {\n  display: grid;\n  position: absolute;\n  grid-template-columns: 52px auto;\n  column-gap: 10px;\n  bottom: 28px;\n  left: 20px;\n  z-index: 3;\n}\n\n.d-reveal-card-button {\n  width: 52px;\n  height: 52px;\n  grid-row: span 2;\n}\n\n.d-reveal-card-text,\n.d-reveal-card-subtext {\n  text-align: left;\n  grid-column: 2;\n  -webkit-box-orient: vertical;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  line-clamp: 1;\n}\n</style>\n","<script setup lang=\"ts\">\n    import {ref, onMounted} from \"vue\";\n\n    import DVideo from \"../atoms/DVideo.vue\";\n    import DImg from \"../atoms/DImg.vue\";\n    import DContainer from \"../atoms/DContainer.vue\";\n    import DText from \"../atoms/DText.vue\";\n    import DButton from \"../atoms/DButton.vue\";\n\n    import DCTA from \"../molecules/DCTA.vue\";\n\n    import {\n        isVideoContentType,\n        isImageContentType,\n    } from \"@songfinch/utils/src/validators\";\n\n    import type {\n        BaseBlockFields,\n        NormalizedAsset,\n        BaseCtaType,\n    } from \"@songfinch/types\";\n\n    const props = defineProps<\n        BaseBlockFields & {\n            headline: string;\n            subHeadline: string;\n            media?: NormalizedAsset;\n            mobileMedia?: NormalizedAsset;\n            ctaSecondary?: BaseCtaType;\n        }\n    >();\n\n    const activeMedia = ref(props.media);\n    const videoRef = ref();\n    const videoIsPlaying = ref(true);\n\n    const playPauseVideo = () => {\n        if (videoIsPlaying.value) {\n            videoRef.value?.$el.pause();\n        } else {\n            videoRef.value?.$el.play();\n        }\n\n        videoIsPlaying.value = !videoIsPlaying.value;\n    };\n\n\n    function updateVideoUrl(query: MediaQueryList) {\n        if (!props.mobileMedia) return; \n        activeMedia.value = query.matches ? props.mobileMedia : props.media;\n    }\n\n    onMounted(async () => {\n        const mediaQuery = window.matchMedia(\"(max-width: 768px)\");\n        updateVideoUrl(mediaQuery);\n    });\n</script>\n\n<template>\n    <DContainer\n        class=\"d-hero-media-wrapper\"\n        display=\"grid\"\n        theme=\"dark\"\n        :data-test-id=\"dataTestId\"\n        :data-block-placement=\"dataBlockPlacement\"\n    >\n        <template v-if=\"activeMedia\">\n            <DVideo\n                v-if=\"isVideoContentType(activeMedia.contentType)\"\n                ref=\"videoRef\"\n                class=\"d-hero-media-background-video\"\n                variant=\"fill-section\"\n                :src=\"activeMedia.url\"\n                :title=\"activeMedia.title\"\n                playsinline\n                autobuffer\n                autoplay\n                disableremoteplayback\n                muted\n                loop\n                preload=\"auto\"\n            />\n\n            <DImg\n                v-else-if=\"isImageContentType(activeMedia.contentType)\"\n                variant=\"fill\"\n                :src=\"activeMedia.url\"\n                :alt=\"activeMedia.title\"\n                class=\"d-hero-media-background-image\"\n            />\n        </template>\n\n        <DContainer class=\"d-hero-media-background-opacity\"/>\n\n        <DContainer class=\"d-hero-media-content\" display=\"grid\">\n            <DText\n                class=\"d-hero-media-headline\"\n                type=\"h1\"\n                variant=\"hero-1\"\n                spacing=\"m\"\n            >\n                {{headline}}\n            </DText>\n            <DText\n                v-if=\"subHeadline\"\n                class=\"d-hero-media-sub-headline\"\n                type=\"p\"\n                variant=\"p-2\"\n            >\n                {{subHeadline}}\n            </DText>\n            <DContainer class=\"d-hero-media-cta-wrapper\">\n                <DCTA\n                    v-if=\"ctaSecondary\"\n                    :cta=\"ctaSecondary\"\n                    :data-test-id=\"`${dataTestId}-cta-secondary`\"\n                    :internal-title=\"`${internalTitle}-cta-secondaty`\"\n                />\n                <DCTA\n                    v-if=\"cta\"\n                    :cta=\"cta\"\n                    :data-test-id=\"`${dataTestId}-cta`\"\n                    :internal-title=\"`${internalTitle}-cta`\"\n                />\n            </DContainer>\n\n            <DButton\n                v-if=\"media && isVideoContentType(media.contentType)\"\n                :data-test-id=\"`${dataTestId}-pause-video`\"\n                class=\"d-hero-video-button\"\n                theme=\"dark\"\n                variant=\"secondary-outline\"\n                size=\"small\"\n                :icon=\"videoIsPlaying ? 'pause' : 'play'\"\n                label=\"Video\"\n                @click=\"playPauseVideo()\"\n            />\n        </DContainer>\n    </DContainer>\n</template>\n\n<style lang=\"scss\" scoped>\n.d-hero-media-wrapper {\n  width: 100%;\n  position: relative;\n  height: 633px;\n\n  @include md {\n    height: 800px;\n  }\n}\n\n.d-hero-media-background-opacity,\n.d-hero-media-background-video,\n.d-hero-media-background-image {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n}\n\n.d-hero-media-background-opacity {\n  z-index: 2;\n  background-color: rgba(0, 0, 0, 0.4);\n}\n\n.d-hero-media-content {\n  width: 100%;\n  padding: 40px 20px;\n  z-index: 3;\n  align-self: flex-end;\n\n  @include md {\n    max-width: 1440px;\n    margin: 0 auto;\n    grid-template-columns: 534px 1fr;\n    padding: 100px 30px;\n  }\n}\n\n.d-hero-media-headline,\n.d-hero-media-sub-headline,\n.d-hero-media-cta-wrapper {\n  grid-column: 1;\n  align-items: center;\n\n  @include md {\n    display: flex;\n    justify-items: flex-start;\n  }\n}\n\n.d-hero-media-cta-wrapper {\n  display: grid;\n  grid-template-columns: auto auto;\n  column-gap: 4px;\n\n  @include md {\n    display: flex;\n    justify-items: flex-start;\n  }\n}\n\n.d-hero-media-sub-headline {\n  margin-bottom: 24px;\n}\n\n.d-hero-video-button {\n  position: absolute;\n  top: 20px;\n  right: 20px;\n\n  @include md {\n    grid-column: 2;\n    position: relative;\n    top: initial;\n    right: initial;\n    justify-self: flex-end;\n  }\n}\n</style>\n","<template>\n    <DContainer\n        v-for=\"(entry, i) in accordionEntry\"\n        :key=\"entry.title\"\n        :data-test-id=\"dataTestId\"\n        class=\"d-accordion-entry\"\n        display=\"grid\"\n    >\n        <DDivider spacing=\"small\" class=\"d-accordion-divider\"/>\n\n        <DText\n            variant=\"h-3\"\n            class=\"d-accordion-entry-title\"\n            @click=\"toggleAccordion(i)\"\n        >\n            {{entry.title}}\n        </DText>\n\n        <Transition name=\"accordion\">\n            <DText\n                v-if=\"isExpanded(i)\"\n                class=\"d-accordion-entry-content\"\n                v-html=\"entry.content\"\n            />\n        </Transition>\n\n        <DButton\n            :data-test-id=\"`${dataTestId}-${isExpanded(i) ? 'expanded' : 'collapsed'}`\"\n            class=\"d-accordion-entry-button\"\n            :icon=\"isExpanded(i) ? 'remove_minus' : 'add_plus'\"\n            variant=\"icon\"\n            size=\"large\"\n            @click=\"toggleAccordion(i)\"\n        />\n\n        <DDivider\n            v-if=\"i + 1 === accordionEntry.length\"\n            spacing=\"small\"\n            class=\"d-accordion-divider\"\n        />\n    </DContainer>\n</template>\n\n<script lang=\"ts\" setup>\n    import {ref} from \"vue\";\n\n    import DDivider from \"../atoms/DDivider.vue\";\n    import DContainer from \"../atoms/DContainer.vue\";\n    import DText from \"../atoms/DText.vue\";\n    import DButton from \"../atoms/DButton.vue\";\n\n    import type {BaseCardType} from \"@songfinch/types\";\n\n    defineProps<\n        BaseCardType & {\n            accordionEntry: {\n                title: string;\n                content: string;\n            }[];\n        }\n    >();\n\n    const expandedIndex = ref(0);\n\n    const toggleAccordion = (index: number) => {\n        expandedIndex.value = expandedIndex.value === index ? -1 : index;\n    };\n\n    const isExpanded = (index: number) => {\n        return expandedIndex.value === index;\n    };\n</script>\n\n<style lang=\"scss\" scoped>\n.d-accordion-entry {\n  width: 100%;\n  max-width: 800px;\n  grid-template-columns: 1fr 24px;\n  column-gap: 1rem;\n}\n\n.d-accordion-entry-title {\n  width: 100%;\n  cursor: pointer;\n  margin-bottom: 1rem;\n  grid-column: 1;\n  grid-row: 2;\n}\n\n.d-accordion-entry-content {\n  grid-column: 1;\n  /* transition: max-height 0.3s ease-in-out; */\n}\n\n.d-accordion-entry-button {\n  grid-column: 2;\n  grid-row: 2;\n}\n\n.d-accordion-divider {\n  grid-column: span 2;\n}\n\n/* Transition styles */\n.accordion-enter-active,\n.accordion-leave-active {\n  transition:\n    max-height 0.3s ease-in-out,\n    opacity 0.2s ease-in-out;\n}\n\n.accordion-enter-from,\n.accordion-leave-to {\n  max-height: 0;\n  opacity: 0;\n}\n\n.accordion-enter-to,\n.accordion-leave-from {\n  max-height: 300px; /* Adjust max height to your content size */\n  opacity: 1;\n}\n\n/* Styling for the content wrapper */\n.d-accordion-entry-content-wrapper {\n  overflow: hidden;\n  max-height: 0; /* For transition purposes */\n}\n</style>\n","import {ArtistListType} from \"@songfinch/types\";\nimport type {NormalizedAsset} from \"@songfinch/types\";\n\nexport type ReviewType = {\n    contentTypeId: \"review\"\n    reviewText: string;\n    avatar: {\n        name: string;\n        meta?: string;\n        image?: NormalizedAsset;\n    }\n}\n\nexport type PressReviewType = {\n    contentTypeId: \"pressReview\";\n    reviewText: string;\n    logo: NormalizedAsset;\n}\n\nexport type RevealType = {\n    contentTypeId: \"reveal\";\n    title: string;\n    subtext: string;\n    placeholder: NormalizedAsset;\n    video: NormalizedAsset;\n}\n\nexport type ReviewCardTypes = ReviewType | PressReviewType | RevealType;\n\ntype ArtistListTypeForHome = {\n    id: number;\n    artist_name: string;\n}\n\nexport const artistList: ArtistListTypeForHome[] = [\n    {\n        id: 11665,\n        artist_name: \"Jesse Labelle\"\n    },\n    {\n        id: 10652,\n        artist_name: \"Emily Kelly\",\n    },\n    {\n        id: 25207,\n        artist_name: \"MillyannaMusic\",\n    },\n    {\n        id: 8176,\n        artist_name: \"Stillman\",\n    },\n    {\n        id: 8744,\n        artist_name: \"Taylor Deneen\",\n    },\n    {\n        id: 16485,\n        artist_name: \"Karli Chayne\",\n    },\n    {\n        id: 7398,\n        artist_name: \"Alyssa Newton\",\n    }\n];\n\n\nexport const reviewCards: ReviewCardTypes[] = [\n    {\n        contentTypeId: \"reveal\",\n        title: \"Thick and Thin\",\n        subtext: \"by MillyannaMusic\",\n        placeholder: {\n            title: \"Thick and Thin Image\",\n            url: \"https://content.songfinch.com/res/songfinch/image/asset/static/thick%2Bthin.png\",\n        },\n        video: {\n            title: \"Thick and Thin Video\",\n            url: \"https://content.songfinch.com/res/songfinch/video/static/thick-thin.mp4\",\n        }\n    },\n    {\n        contentTypeId: \"review\",\n        reviewText: \"This song has literally changed my life. Spoken to my lover's heart spoken through my heart. Can it make everything so amazing. Thank you so much. I'm so grateful and I can't wait to create more music with you.\",\n        avatar: {\n            name: \"Monique B.\"\n        }\n    },\n    {\n        contentTypeId: \"pressReview\",\n        reviewText: \"Through Songfinch, I found a way to send my prayers, offer my condolences, and sing my thanks in somebody else’s voice to somebody else’s beat…that, my friends, is The Gift.\",\n        logo: {\n            title: \"People\",\n            url: \"https://content.songfinch.com/res/songfinch/image/statics/people-white.svg\",\n        },\n    },\n    // 2\n    {\n        contentTypeId: \"reveal\",\n        title: \"Unconditional Love\",\n        subtext: \"by Annie Wildgen\",\n        placeholder: {\n            title: \"Unconditional Love Image\",\n            url: \"https://content.songfinch.com/res/songfinch/image/asset/static/unconditional.png\",\n        },\n        video: {\n            title: \"Unconditional Love Video\",\n            url: \"https://content.songfinch.com/res/songfinch/video/static/unconditional.mp4\",\n        }\n    },\n    {\n        contentTypeId: \"review\",\n        reviewText: \"Speechless!!! I absolutely love it and couldn't be more timely. I can't wait to set up that perfect moment for my wife to listen to it & record it...Thank you, thank you, THANK YOU!!\",\n        avatar: {\n            name: \"James T.\"\n        }\n    },\n    {\n        contentTypeId: \"pressReview\",\n        reviewText: \"How can we think outside the box of chocolates for the holiday? Songfinch writes and records custom songs sure to make their heart sing!\",\n        logo: {\n            title: \"Good Morning America\",\n            url: \"https://content.songfinch.com/res/songfinch/image/statics/gma-white.svg\",\n        },\n    },\n    // 3\n    {\n        contentTypeId: \"reveal\",\n        title: \"Everything You Do\",\n        subtext: \"by Trevor Martin\",\n        placeholder: {\n            title: \"Everything You Do Image\",\n            url: \"https://content.songfinch.com/res/songfinch/image/asset/static/Snow-White.png\",\n        },\n        video: {\n            title: \"Everything You Do Video\",\n            url: \"https://content.songfinch.com/res/songfinch/video/static/everything-you-do.mp4\",\n        }\n    },\n    {\n        contentTypeId: \"review\",\n        reviewText: \"She absolutely nailed it. It took me back through all the emotions of our relationship like she’s known us and our story for years. Beautiful voice. I literally could not be happier with the result, I cried. Can’t wait for the reveal!\",\n        avatar: {\n            name: \"Alexandra A.\"\n        }\n    },\n    {\n        contentTypeId: \"pressReview\",\n        reviewText: \"Songfinch is a creative love language gift for your other half. Get ready to spark romance and create new memories together!\",\n        logo: {\n            title: \"The Knot\",\n            url: \"https://content.songfinch.com/res/songfinch/image/statics/theknot-white.svg\",\n        },\n    },\n    // 4\n    {\n        contentTypeId: \"reveal\",\n        title: \"IFLY\",\n        subtext: \"by Nick Isham\",\n        placeholder: {\n            title: \"IFLY Image\",\n            url: \"https://content.songfinch.com/res/songfinch/image/asset/static/i-f-l-y.png\",\n        },\n        video: {\n            title: \"IFLY Video\",\n            url: \"https://content.songfinch.com/res/songfinch/video/static/ifly.mp4\",\n        }\n    },\n    {\n        contentTypeId: \"review\",\n        reviewText: \"Not going to lie, I was nervous about doing this. But, I thought, why not?!  I am SO happy I did.  Bekah freakin' nailed it!  The words, the vibe, EVERYTHING! It is better than I could ever imagined!!!  Can't wait to play it for my hubby!!\",\n        avatar: {\n            name: \"Jennifer R.\"\n        }\n    },\n    {\n        contentTypeId: \"pressReview\",\n        reviewText: \"Songfinch earned the 11th, 166th, and 238th spots on Inc. 5000’s list of the fastest-growing companies in the U.S from 2022 - 2024.\",\n        logo: {\n            title: \"Inc\",\n            url: \"https://content.songfinch.com/res/songfinch/image/statics/inc-white.svg\",\n        },\n    },\n];","<script lang=\"ts\" setup>\n    import {onMounted, computed, ref} from \"vue\";\n    import DCarouselSlide from \"@songfinch/design-system/src/atoms/DCarouselSlide.vue\";\n\n    import DStat from \"@songfinch/design-system/src/molecules/DStat.vue\";\n\n    import DContainer from \"@songfinch/design-system/src/atoms/DContainer.vue\";\n    import DArtistCard from \"@songfinch/design-system/src/cards/DArtistCard.vue\";\n    import DProductCard from \"@songfinch/design-system/src/cards/DProductCard.vue\";\n    import DReviewCard from \"@songfinch/design-system/src/cards/DReviewCard.vue\";\n    import DPressReviewCard from \"@songfinch/design-system/src/cards/DPressReviewCard.vue\";\n    import DRevealCard from \"@songfinch/design-system/src/cards/DRevealCard.vue\";\n\n    import DHeroMediaBackgroundBlock from \"@songfinch/design-system/src/blocks/DHeroMediaBackgroundBlock.vue\";\n    import DHomeProductBlock from \"@songfinch/design-system/src/blocks/DHomeProductBlock.vue\";\n    import DCardDisplayGridBlock from \"@songfinch/design-system/src/blocks/DCardDisplayGridBlock.vue\";\n    import DCarouselBlock from \"@songfinch/design-system/src/blocks/DCarouselBlock.vue\";\n    import DFaqBlock from \"@songfinch/design-system/src/blocks/DFaqBlock.vue\";\n\n\n    import {filterProductsByIds} from \"@songfinch/utils/src/map\";\n    import {normalizeArtistCard, normalizeCMSCta, normalizeCMSMedia} from \"@songfinch/utils/src/normalizers\";\n\n    import {reviewCards, artistList} from \"./home2024\";\n    import {useStore} from \"vuex\";\n\n    import {fetchProducts} from \"@songfinch/data-source/products\";\n    import {fetchArtists} from \"@songfinch/data-source/artists\";\n\n    import type {ArtistListType, ArtistCard, ProductListItem} from \"@songfinch/types\";\n\n\n    const store = useStore();\n    const artists = ref<ArtistCard[]>();\n    const products = ref<ProductListItem[]>();\n\n    const pageData = computed(() => store.state.cms.pageData);\n\n    const filteredProducts = computed<ProductListItem[] | undefined>(() => {\n        if (!products.value) return undefined;\n        if (!pageData.value?.addOnsSection?.products) return products.value;\n\n        const sortOrder = pageData.value.addOnsSection.products.reduce((sortOrder: string[], product: {product: {\n            text: string,\n            id: string\n        }}) => {\n            if (product?.product?.id) {\n                sortOrder.push(product.product.id);\n            }\n            return sortOrder;\n        }, []);\n        return filterProductsByIds(products.value, sortOrder);\n    });\n\n    onMounted(async () => {\n        const productRes = await fetchProducts({full: true});\n        products.value = productRes;\n        const artistRes = await fetchArtists({ids: artistList.map(artist => artist.id), show_at_capacity: true, per_page: 10});\n\n        artists.value = artistRes.artists.reduce((artistCards: ArtistCard[], artist: ArtistListType) => {\n            const card = normalizeArtistCard(artist);\n            if (card) {\n                artistCards.push(card);\n            }\n            return artistCards;\n        }, []);\n    });\n</script>\n\n<template>\n    <DContainer>\n        <DHeroMediaBackgroundBlock\n            v-if=\"pageData?.heroSection\"\n            data-test-id=\"homepage-hero\"\n            :headline=\"pageData.heroSection.headline\"\n            :sub-headline=\"pageData.heroSection.subHeadline\"\n            :media=\"normalizeCMSMedia(pageData.heroSection.media)\"\n            :mobileMedia=\"normalizeCMSMedia(pageData.heroSection.mobileMedia)\"\n            :cta=\"normalizeCMSCta(pageData.heroSection.cta)\"\n        />\n\n        <DHomeProductBlock\n            v-if=\"pageData?.featuredProductSection\"\n            dataTestId=\"homepage-primary-product-section\"\n            v-bind=\"pageData.featuredProductSection\"\n            :cta=\"normalizeCMSCta(pageData.featuredProductSection.cta)\"\n            :secondaryCta=\"normalizeCMSCta(pageData.featuredProductSection.secondaryCta)\"\n            :image=\"normalizeCMSMedia(pageData.featuredProductSection.media)\"\n            theme=\"dark\"\n            order=\"reversed\"\n        />\n\n        <DCardDisplayGridBlock\n            v-if=\"pageData?.statsSection?.stats\"\n            dataTestId=\"homepage-stat-section\"\n            :columns=\"4\"\n            theme=\"light\"\n        >\n            <template v-for=\"content in pageData.statsSection.stats\" :key=\"content.value\">\n                <DStat :value=\"content.value\" :description=\"content.description\"/>\n            </template>\n        </DCardDisplayGridBlock>\n\n        <DCarouselBlock\n            v-if=\"pageData?.artistsSection\"\n            dataTestId=\"homepage-artists-section\"\n            theme=\"dark\"\n            v-bind=\"pageData.artistsSection\"\n            :cta=\"normalizeCMSCta(pageData.artistsSection.cta)\"\n        >\n            <template v-if=\"artists\" #carousel>\n                <DCarouselSlide v-for=\"(artist, i) in artists\" :key=\"i\">\n                    <DArtistCard\n                        v-if=\"artist.id\"\n                        class=\"homepage-artist-card\"\n                        :dataTestId=\"`homepage-artists-card-${i}`\"\n                        :showSong=\"true\"\n                        :artist=\"artist\"\n                    />\n                </DCarouselSlide>\n            </template>\n        </DCarouselBlock>\n\n        <DCarouselBlock\n            v-if=\"pageData?.reviewsSection\"\n            v-bind=\"pageData.reviewsSection\"\n            dataTestId=\"homepage-reviews-section\"\n            theme=\"light\"\n        >\n            <template v-if=\"reviewCards\" #carousel>\n                <DCarouselSlide v-for=\"(review, i) in reviewCards\" :key=\"i\">\n                    <DReviewCard\n                        v-if=\"review.contentTypeId === 'review'\"\n                        theme=\"light\"\n                        :dataTestId=\"`homepage-review-card-${i}`\"\n                        v-bind=\"review\"\n                    />\n                    <DPressReviewCard\n                        v-if=\"review.contentTypeId === 'pressReview'\"\n                        theme=\"light\"\n                        :dataTestId=\"`homepage-review-card-${i}`\"\n                        v-bind=\"review\"\n                    />\n                    <DRevealCard\n                        v-else-if=\"review.contentTypeId === 'reveal'\"\n                        theme=\"dark\"\n                        :dataTestId=\"`homepage-reveal-card-${i}`\"\n                        v-bind=\"review\"\n                    />\n                </DCarouselSlide>\n            </template>\n        </DCarouselBlock>\n\n        <DHomeProductBlock\n            v-if=\"pageData?.secondaryProductSection\"\n            dataTestId=\"homepage-secondary-product-section\"\n            v-bind=\"pageData.secondaryProductSection\"\n            :cta=\"normalizeCMSCta(pageData.secondaryProductSection.cta)\"\n            :secondaryCta=\"normalizeCMSCta(pageData.secondaryProductSection.secondaryCta)\"\n            :image=\"normalizeCMSMedia(pageData.secondaryProductSection.media)\"\n            theme=\"dark\"\n        />\n\n        <DCarouselBlock\n            v-if=\"pageData?.addOnsSection\"\n            theme=\"white\"\n            dataTestId=\"homepage-addons-section\"\n            :bodyTop=\"true\"\n            v-bind=\"pageData.addOnsSection\"\n            :cta=\"normalizeCMSCta(pageData.addOnsSection.cta)\"\n        >\n            <template v-if=\"filteredProducts\" #carousel>\n                <DCarouselSlide v-for=\"(product, i) in filteredProducts\" :key=\"i\">\n                    <DProductCard\n                        :dataTestId=\"`homepage-products-card-${i}`\"\n                        :product=\"product\"\n                        :showButton=\"true\"\n                    />\n                </DCarouselSlide>\n            </template>\n        </DCarouselBlock>\n\n        <DFaqBlock\n            v-if=\"pageData?.faqSection\"\n            dataTestId=\"homepage\"\n            :pageData=\"pageData?.faqSection\"\n            theme=\"light\"\n        />\n    </DContainer>\n</template>\n\n<style lang=\"scss\">\n.homepage-artist-card {\n    height: 333px;\n    width: 333px;\n}\n</style>\n"],"names":["isVideoContentType","contentType","isString","isImageContentType","props","__props","cardTheme","computed","modalActive","openModal","closeModal","useModal","_a","activeMedia","ref","videoRef","videoIsPlaying","playPauseVideo","_b","updateVideoUrl","query","onMounted","mediaQuery","expandedIndex","toggleAccordion","index","isExpanded","artistList","reviewCards","store","useStore","artists","products","pageData","filteredProducts","sortOrder","product","filterProductsByIds","productRes","fetchProducts","artistRes","fetchArtists","artist","artistCards","card","normalizeArtistCard"],"mappings":"w0DAEa,MAAAA,EAAsBC,GACxBC,GAASD,CAAW,GAAKA,EAAY,SAAS,OAAO,EAGnDE,GAAsBF,GACxBC,GAASD,CAAW,GAAKA,EAAY,SAAS,OAAO,4oCC4B5D,MAAMG,EAAQC,EAORC,EAAYC,EAAS,IAChBH,EAAM,QAAU,QAAU,QAAU,OAC9C;;qaCED,MAAMA,EAAQC,EAORC,EAAYC,EAAS,IAChBH,EAAM,QAAU,OAAS,SAAW,MAC9C,6vCCOD,MAAMA,EAAQC,EAOR,CAAC,YAAAG,EAAa,UAAAC,EAAW,WAAAC,CAAA,EAAcC,GAAS,CAClD,mBAAoB,CAChB,KAAM,eACN,QAAS,CACL,cAAaC,EAAAR,GAAA,YAAAA,EAAO,QAAP,YAAAQ,EAAc,QAAS,EACxC,CACJ,CAAA,CACH,k5CCtDD,MAAMR,EAAQC,EAURQ,EAAcC,EAAIV,EAAM,KAAK,EAC7BW,EAAWD,IACXE,EAAiBF,EAAI,EAAI,EAEzBG,EAAiB,IAAM,SACrBD,EAAe,OACNJ,EAAAG,EAAA,QAAA,MAAAH,EAAO,IAAI,SAEXM,EAAAH,EAAA,QAAA,MAAAG,EAAO,IAAI,OAGTF,EAAA,MAAQ,CAACA,EAAe,KAAA,EAI3C,SAASG,EAAeC,EAAuB,CACtChB,EAAM,cACXS,EAAY,MAAQO,EAAM,QAAUhB,EAAM,YAAcA,EAAM,MAClE,CAEA,OAAAiB,GAAU,SAAY,CACZ,MAAAC,EAAa,OAAO,WAAW,oBAAoB,EACzDH,EAAeG,CAAU,CAAA,CAC5B,m0JCOK,MAAAC,EAAgBT,EAAI,CAAC,EAErBU,EAAmBC,GAAkB,CACvCF,EAAc,MAAQA,EAAc,QAAUE,EAAQ,GAAKA,CAAA,EAGzDC,EAAcD,GACTF,EAAc,QAAUE,u6DCnC1BE,GAAsC,CAC/C,CACI,GAAI,MACJ,YAAa,eACjB,EACA,CACI,GAAI,MACJ,YAAa,aACjB,EACA,CACI,GAAI,MACJ,YAAa,gBACjB,EACA,CACI,GAAI,KACJ,YAAa,UACjB,EACA,CACI,GAAI,KACJ,YAAa,eACjB,EACA,CACI,GAAI,MACJ,YAAa,cACjB,EACA,CACI,GAAI,KACJ,YAAa,eACjB,CACJ,EAGaC,EAAiC,CAC1C,CACI,cAAe,SACf,MAAO,iBACP,QAAS,oBACT,YAAa,CACT,MAAO,uBACP,IAAK,iFACT,EACA,MAAO,CACH,MAAO,uBACP,IAAK,yEACT,CACJ,EACA,CACI,cAAe,SACf,WAAY,qNACZ,OAAQ,CACJ,KAAM,YACV,CACJ,EACA,CACI,cAAe,cACf,WAAY,gLACZ,KAAM,CACF,MAAO,SACP,IAAK,4EACT,CACJ,EAEA,CACI,cAAe,SACf,MAAO,qBACP,QAAS,mBACT,YAAa,CACT,MAAO,2BACP,IAAK,kFACT,EACA,MAAO,CACH,MAAO,2BACP,IAAK,4EACT,CACJ,EACA,CACI,cAAe,SACf,WAAY,yLACZ,OAAQ,CACJ,KAAM,UACV,CACJ,EACA,CACI,cAAe,cACf,WAAY,2IACZ,KAAM,CACF,MAAO,uBACP,IAAK,yEACT,CACJ,EAEA,CACI,cAAe,SACf,MAAO,oBACP,QAAS,mBACT,YAAa,CACT,MAAO,0BACP,IAAK,+EACT,EACA,MAAO,CACH,MAAO,0BACP,IAAK,gFACT,CACJ,EACA,CACI,cAAe,SACf,WAAY,6OACZ,OAAQ,CACJ,KAAM,cACV,CACJ,EACA,CACI,cAAe,cACf,WAAY,+HACZ,KAAM,CACF,MAAO,WACP,IAAK,6EACT,CACJ,EAEA,CACI,cAAe,SACf,MAAO,OACP,QAAS,gBACT,YAAa,CACT,MAAO,aACP,IAAK,4EACT,EACA,MAAO,CACH,MAAO,aACP,IAAK,mEACT,CACJ,EACA,CACI,cAAe,SACf,WAAY,kPACZ,OAAQ,CACJ,KAAM,aACV,CACJ,EACA,CACI,cAAe,cACf,WAAY,sIACZ,KAAM,CACF,MAAO,MACP,IAAK,yEACT,CACJ,CACJ,mCCtJI,MAAMC,EAAQC,KACRC,EAAUjB,IACVkB,EAAWlB,IAEXmB,EAAW1B,EAAS,IAAMsB,EAAM,MAAM,IAAI,QAAQ,EAElDK,EAAmB3B,EAAwC,IAAM,SACnE,GAAI,CAACyB,EAAS,MAAc,OACxB,GAAA,GAACd,GAAAN,EAAAqB,EAAS,QAAT,YAAArB,EAAgB,gBAAhB,MAAAM,EAA+B,UAAU,OAAOc,EAAS,MAExD,MAAAG,EAAYF,EAAS,MAAM,cAAc,SAAS,OAAO,CAACE,EAAqBC,IAG9E,OACC,OAAAxB,EAAAwB,GAAA,YAAAA,EAAS,UAAT,MAAAxB,EAAkB,IAClBuB,EAAU,KAAKC,EAAQ,QAAQ,EAAE,EAE9BD,CACX,EAAG,CAAE,CAAA,EACE,OAAAE,GAAoBL,EAAS,MAAOG,CAAS,CAAA,CACvD,EAED,OAAAd,GAAU,SAAY,CAClB,MAAMiB,EAAa,MAAMC,GAAc,CAAC,KAAM,EAAK,CAAA,EACnDP,EAAS,MAAQM,EACjB,MAAME,EAAY,MAAMC,GAAa,CAAC,IAAKd,GAAW,IAAce,GAAAA,EAAO,EAAE,EAAG,iBAAkB,GAAM,SAAU,GAAG,EAErHX,EAAQ,MAAQS,EAAU,QAAQ,OAAO,CAACG,EAA2BD,IAA2B,CACtF,MAAAE,EAAOC,GAAoBH,CAAM,EACvC,OAAIE,GACAD,EAAY,KAAKC,CAAI,EAElBD,CACX,EAAG,CAAE,CAAA,CAAA,CACR"}