{"version":3,"file":"vcs-new-product-modal-beffd873.js","sources":["../../../resources/js/components/vcs-new-product-modal.vue"],"sourcesContent":["<script>\nimport handLeft from '../../img/product-001/hand-003-left.png?url';\nimport handRight from '../../img/product-001/hand-003-right.png?url';\n\nimport videoPortrait from '../../video/placeholders/customize-page-a5-portrait.mp4?url';\nimport videoLandscape from '../../video/placeholders/customize-page-a5-landscape.mp4?url';\n\nexport default {\n    name: \"vcs-new-product-modal\",\n    computed: {\n        storageDomain: function () {\n            return window.storage_url;\n        },\n    },\n    data: function () {\n        return {\n            product: null,\n            product_item: null,\n\n            handLeft: handLeft,\n            handRight: handRight,\n\n            videoLandscape: videoLandscape,\n            videoPortrait: videoPortrait,\n        }\n    },\n    methods: {\n        closeProduct: function () {\n            this.product = null;\n            this.product_item = null;\n        },\n        openProduct: function (product) {\n            // Detect if is mobile\n            if (window.innerWidth < 768) {\n                window.location.href = product.route;\n                return;\n            }\n\n            this.product = product;\n            this.$refs['modal'].openModal();\n        },\n    },\n}\n</script>\n\n<template>\n    <vcs-modal modal-width=\"sm:w-full sm:max-w-7xl p-2\"\n               ref=\"modal\"\n               v-on:closed=\"closeProduct\">\n        <template v-slot:modal=\"modal\"\n                  v-if=\"product\">\n            <div class=\"max-h-[calc(100vh-5em)] overflow-y-auto\">\n                <div class=\"flex gap-4 max-h-full\">\n                    <div class=\"overflow-hidden flex-grow shrink-0\"\n                         v-bind:class=\"{\n                             'w-1/2 xl:w-2/3': product.format.includes('portrait'),\n                             'max-w-2/3 lg:max-w-full xl:w-3/4': product.format.includes('landscape'),\n                         }\">\n                        <div class=\"p-2\">\n                            <h1 class=\"block font-bold mb-2 text-2xl\">\n                                {{ product.title }}\n                            </h1>\n                            <p class=\"font-bold mb-2 text-action-600\">\n                                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"\n                                     class=\"inline-block text-custom-green-dark w-4 h-4\">\n                                    <path fill-rule=\"evenodd\"\n                                          d=\"M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z\"\n                                          clip-rule=\"evenodd\"></path>\n                                </svg>\n                                In stock, ready to ship (free shipping)\n                            </p>\n                            <a class=\"underline\"\n                               v-bind:href=\"product.route\">\n                                more product information\n                            </a>\n                        </div>\n                        <div class=\"flex overflow-hidden pb-20 pt-10\">\n                            <div class=\"w-6/12\"></div>\n                            <div v-bind:class=\"{\n                                'w-1/3': product.format.includes('portrait'),\n                                'w-5/12': product.format.includes('landscape'),\n                            }\">\n                                <vcs-new-3d-model v-bind:design-uuid=\"product.design_uuid\"\n                                                  v-bind:format=\"product.format\"\n                                                  language=\"en\"\n                                                  ref=\"model\"\n                                                  v-bind:animation=\"{ duration: 15, intensity: 2, name: 'card-move-natural', }\"\n                                                  v-bind:design-load=\"true\"\n                                                  v-bind:openable=\"false\"\n                                                  v-bind:rotatable=\"false\"\n                                                  v-bind:initial-opened=\"135\"\n                                                  v-bind:initial-rotation=\"{ x: 2.5, y: -15 }\"\n                                                  v-bind:item=\"product_item\"\n                                                  v-bind:keep-in-container=\"false\"\n                                                  v-bind:transition=\"false\"\n                                                  v-bind:perspective-y=\"0\"\n                                                  v-bind:perspective=\"2000\"\n                                                  v-bind:shadows=\"true\"\n                                                  v-bind:hand-left=\"product.format.includes('portrait') ? { x: '57.5%', y: '-69%', src: handLeft, width: '100%' } : { x: '57.5%', y: '-69%', src: handLeft, width: '50%' }\"\n                                                  v-bind:hand-right=\"product.format.includes('portrait') ? { x: '-59.75%', y: '-69%', src: handRight, width: '100%' } : { x: '-60.75%', y: '-69%', src: handRight, width: '50%' }\"\n                                                  v-on:item=\"(item) => { product_item = item }\"\n                                >\n                                    <video class=\"absolute cursor-pointer h-full inset-0 object-cover w-full\"\n                                           v-bind:src=\"product.format.includes('portrait') ? videoPortrait : videoLandscape\"\n                                           autoplay\n                                           loop\n                                           muted\n                                           playsinline\n                                           webkit-playsinline\n                                           v-cloak\n                                           v-on:click=\"() => $refs['create'].create()\">\n                                    </video>\n                                </vcs-new-3d-model>\n                            </div>\n                        </div>\n                        <div class=\"flex gap-4 justify-center mt-8 px-2\"\n                             v-if=\"product_item && product_item.elements\">\n                            <div class=\"w-1/4 pr-[0.375%] max-w-24\">\n                                <div class=\"isolate relative\">\n                                    <div class=\"cursor-pointer\"\n                                         v-bind:class=\"{\n                                            'aspect-card-portrait': product.format.includes('portrait'),\n                                            'aspect-card-landscape': product.format.includes('landscape'),\n                                         }\"\n                                         v-on:click=\"$refs.model.modelOpenMoveExecute(15, true, -5); $refs.model.hideHand('left', true); $refs.model.hideHand('right', false); $refs.model.pauseAnimation()\">\n                                        <img alt=\"\"\n                                             class=\"absolute cursor-pointer h-full w-full\"\n                                             v-bind:src=\"storageDomain + '/designs/' + product.design_uuid + '/image_front/lg'\"\n                                             style=\"z-index: 1;\">\n                                        <vcs-new-2d-model-side v-bind:format=\"product.format\"\n                                                               side=\"front\"\n                                                               v-bind:editable=\"false\"\n                                                               v-bind:flipped=\"false\"\n                                                               v-bind:value=\"product_item.elements\"></vcs-new-2d-model-side>\n                                    </div>\n                                </div>\n                                <p class=\"text-center\">\n                                    front\n                                </p>\n                            </div>\n                            <div class=\"w-1/2 max-w-48\">\n                                <div class=\"flex isolate items-stretch mb-1\">\n                                    <div class=\"relative w-1/2\">\n                                        <div class=\"cursor-pointer\"\n                                             v-bind:class=\"{\n                                                'aspect-card-portrait': product.format.includes('portrait'),\n                                                'aspect-card-landscape': product.format.includes('landscape'),\n                                             }\"\n                                             v-on:click=\"$refs.model.modelOpenMoveExecute(135, true, -15); $refs.model.playAnimation(); $refs.model.hideHand('left', false); $refs.model.hideHand('right', false);\">\n                                            <img alt=\"\"\n                                                 class=\"absolute cursor-pointer h-full w-full\"\n                                                 style=\"z-index: 1;\"\n                                                 v-bind:src=\"storageDomain + '/designs/' + product.design_uuid + '/image_inside_left/lg'\">\n                                            <vcs-new-2d-model-side v-bind:format=\"product.format\"\n                                                                   language=\"en\"\n                                                                   side=\"inside-left\"\n                                                                   v-bind:editable=\"false\"\n                                                                   v-bind:flipped=\"false\"\n                                                                   v-bind:value=\"product_item.elements\"></vcs-new-2d-model-side>\n                                        </div>\n                                    </div>\n                                    <div class=\"bg-gradient-to-r from-white from-60% to-neutral-500\"\n                                         v-bind:class=\"{\n                                                'aspect-card-divider-portrait': product.format.includes('portrait'),\n                                                'aspect-card-divider-landscape': product.format.includes('landscape'),\n                                             }\">\n                                    </div>\n                                    <div class=\"relative w-1/2\">\n                                        <div class=\"cursor-pointer\"\n                                             v-bind:class=\"{\n                                                'aspect-card-portrait': product.format.includes('portrait'),\n                                                'aspect-card-landscape': product.format.includes('landscape'),\n                                             }\"\n                                             v-on:click=\"$refs.model.modelOpenMoveExecute(135, true, -15); $refs.model.playAnimation(); $refs.model.hideHand('left', false); $refs.model.hideHand('right', false);\">\n                                            <img alt=\"\"\n                                                 class=\"absolute cursor-pointer h-full w-full\"\n                                                 style=\"z-index: 1;\"\n                                                 v-bind:src=\"storageDomain + '/designs/' + product.design_uuid + '/image_inside_right/lg'\">\n                                            <vcs-new-2d-model-inside-right v-bind:format=\"product.format\"\n                                                                           language=\"en\"\n                                                                           v-bind:editable=\"false\"\n                                                                           v-bind:item=\"product_item\"\n                                                                           v-bind:size=\"product_item.size\"></vcs-new-2d-model-inside-right>\n                                        </div>\n                                    </div>\n                                </div>\n                                <p class=\"text-center\">\n                                    inside\n                                </p>\n                            </div>\n                            <div class=\"w-1/4 pl-[0.375%] max-w-24\">\n                                <div class=\"isolate relative\">\n                                    <div class=\"cursor-pointer\"\n                                         v-bind:class=\"{\n                                            'aspect-card-portrait': product.format.includes('portrait'),\n                                            'aspect-card-landscape': product.format.includes('landscape'),\n                                         }\"\n                                         v-on:click=\"$refs.model.modelOpenMoveExecute(10, true, -170); $refs.model.hideHand('left', false); $refs.model.hideHand('right', true); $refs.model.pauseAnimation()\">\n                                        <img alt=\"\"\n                                             class=\"absolute cursor-pointer h-full w-full\"\n                                             v-bind:src=\"storageDomain + '/designs/' + product.design_uuid + '/image_back/lg'\">\n                                        <vcs-new-2d-model-side v-bind:format=\"product.format\"\n                                                               language=\"en\"\n                                                               side=\"back\"\n                                                               v-bind:editable=\"false\"\n                                                               v-bind:flipped=\"false\"\n                                                               v-bind:value=\"product_item.elements\"></vcs-new-2d-model-side>\n                                    </div>\n                                </div>\n                                <p class=\"text-center\">\n                                    back\n                                </p>\n                            </div>\n                        </div>\n                    </div>\n                    <div class=\"flex-grow flex-shrink\"\n                         v-bind:class=\"{\n                             'w-52 xl:w-auto': product.format.includes('landscape'),\n                         }\">\n                        <div class=\"flex flex-col gap-4 p-4\"\n                             v-bind:class=\"{\n                                 'lg:text-xl': product.format.includes('portrait'),\n                             }\">\n                            <div>\n                                <strong class=\"block\"\n                                        v-bind:class=\"{\n                                            'text-lg': product.format.includes('landscape'),\n                                            'text-lg lg:text-2xl': product.format.includes('portrait'),\n                                        }\">\n                                    Personalize online\n                                </strong>\n                                <p>\n                                    Personalize the layout, upload or record your video in our system.\n                                </p>\n                            </div>\n                            <ul class=\"flex-grow\">\n                                <li class=\"flex gap-2 items-center\">\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"\n                                         class=\"inline w-6 h-6 shrink-0\">\n                                        <path fill-rule=\"evenodd\"\n                                              d=\"M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z\"\n                                              clip-rule=\"evenodd\"></path>\n                                    </svg>\n                                    Easy-to-use online video card builder\n                                </li>\n                                <li class=\"flex gap-2 items-center\">\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"\n                                         class=\"inline w-6 h-6 shrink-0\">\n                                        <path fill-rule=\"evenodd\"\n                                              d=\"M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z\"\n                                              clip-rule=\"evenodd\"></path>\n                                    </svg>\n                                    Upload/record video's online\n                                </li>\n                                <li class=\"flex gap-2 items-center\">\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"\n                                         class=\"inline w-6 h-6 shrink-0\">\n                                        <path fill-rule=\"evenodd\"\n                                              d=\"M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z\"\n                                              clip-rule=\"evenodd\"></path>\n                                    </svg>\n                                    We'll load your video's onto the card\n                                </li>\n                                <li class=\"flex gap-2 items-center\">\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"\n                                         class=\"inline w-6 h-6 shrink-0\">\n                                        <path fill-rule=\"evenodd\"\n                                              d=\"M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z\"\n                                              clip-rule=\"evenodd\"></path>\n                                    </svg>\n                                    Include personal message\n                                </li>\n                                <li class=\"flex gap-2 items-center\">\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"\n                                         class=\"inline w-6 h-6 shrink-0\">\n                                        <path fill-rule=\"evenodd\"\n                                              d=\"M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z\"\n                                              clip-rule=\"evenodd\"></path>\n                                    </svg>\n                                    Add photos and images\n                                </li>\n                                <li class=\"flex gap-2 items-center\">\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"\n                                         class=\"inline w-6 h-6 shrink-0\">\n                                        <path fill-rule=\"evenodd\"\n                                              d=\"M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z\"\n                                              clip-rule=\"evenodd\"></path>\n                                    </svg>\n                                    Add stickers\n                                </li>\n                                <li class=\"flex gap-2 items-center\">\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"\n                                         class=\"inline w-6 h-6 shrink-0\">\n                                        <path fill-rule=\"evenodd\"\n                                              d=\"M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z\"\n                                              clip-rule=\"evenodd\"></path>\n                                    </svg>\n                                    Shipped to you or your recipient\n                                </li>\n                            </ul>\n                            <vcs-new-item-create v-bind:product-uuid=\"product.uuid\">\n                                <template v-slot=\"create\">\n                                    <button\n                                        class=\"border border-action-500 bg-action-500 cursor-pointer font-bold px-8 pb-3 pt-2 rounded text-2xl text-center text-white w-full\"\n                                        v-on:click=\"create.create()\">\n                                        Personalize now\n                                    </button>\n                                </template>\n                            </vcs-new-item-create>\n                        </div>\n                        <div class=\"flex flex-col gap-4 p-4\"\n                             v-if=\"!product.tags_text.includes('invitation')\"\n                             v-bind:class=\"{\n                                 'lg:text-xl': product.format.includes('portrait'),\n                             }\">\n                            <div>\n                                <strong class=\"block\"\n                                        v-bind:class=\"{\n                                            'text-lg': product.format.includes('landscape'),\n                                            'text-2xl': product.format.includes('portrait'),\n                                        }\">\n                                    Buy now\n                                </strong>\n                                <p>\n                                    For a quick and easy purchase. Add the video at home and give the card to your\n                                    loved lsone yourself.\n                                </p>\n                            </div>\n                            <ul class=\"flex-grow\">\n                                <li class=\"flex gap-2 items-center\">\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"\n                                         class=\"inline w-6 h-6 shrink-0\">\n                                        <path fill-rule=\"evenodd\"\n                                              d=\"M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z\"\n                                              clip-rule=\"evenodd\"></path>\n                                    </svg>\n                                    Shipped directly to you\n                                </li>\n                                <li class=\"flex gap-2 items-center\">\n                                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"\n                                         class=\"inline w-6 h-6 shrink-0\">\n                                        <path fill-rule=\"evenodd\"\n                                              d=\"M19.916 4.626a.75.75 0 0 1 .208 1.04l-9 13.5a.75.75 0 0 1-1.154.114l-6-6a.75.75 0 0 1 1.06-1.06l5.353 5.353 8.493-12.74a.75.75 0 0 1 1.04-.207Z\"\n                                              clip-rule=\"evenodd\"></path>\n                                    </svg>\n                                    Load videos yourself\n                                </li>\n                            </ul>\n                            <vcs-new-item-create v-bind:product-uuid=\"product.uuid\">\n                                <template v-slot=\"create\">\n                                    <button\n                                        class=\"border border-action-500 bg-action-500 cursor-pointer font-bold px-8 pb-3 pt-2 rounded text-2xl text-center text-white w-full\"\n                                        v-on:click=\"create.create(null, true)\">\n                                        Buy now\n                                    </button>\n                                </template>\n                            </vcs-new-item-create>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </template>\n    </vcs-modal>\n</template>\n\n<style scoped>\n\n</style>"],"names":["_sfc_main","handLeft","handRight","videoLandscape","videoPortrait","product"],"mappings":"wIAOA,MAAAA,EAAA,CACA,KAAA,wBACA,SAAA,CACA,cAAA,UAAA,CACA,OAAA,OAAA,WACA,CACA,EACA,KAAA,UAAA,CACA,MAAA,CACA,QAAA,KACA,aAAA,KAEA,SAAAC,EACA,UAAAC,EAEA,eAAAC,EACA,cAAAC,CACA,CACA,EACA,QAAA,CACA,aAAA,UAAA,CACA,KAAA,QAAA,KACA,KAAA,aAAA,IACA,EACA,YAAA,SAAAC,EAAA,CAEA,GAAA,OAAA,WAAA,IAAA,CACA,OAAA,SAAA,KAAAA,EAAA,MACA,MACA,CAEA,KAAA,QAAAA,EACA,KAAA,MAAA,MAAA,UAAA,CACA,CACA,CACA"}