matt
/
opnform-host-nginx
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Sliding transition for subscription modal

This commit is contained in:
Julien Nahum 2024-08-23 18:28:30 +02:00
parent 1adac8e00f
commit 2618c24293
3 changed files with 712 additions and 599 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
client/components/global/transitions/SlidingTransition.vue Normal file
View File

@ -0,0 +1,95 @@
<template>
<transition
:name="transitionName"
@enter="enter"
@leave="leave"
@after-enter="resetStyles"
@after-leave="resetStyles"
>
<slot />
</transition>
</template>
<script setup>
import { computed, ref, watch } from 'vue'
const props = defineProps({
direction: {
type: String,
default: 'horizontal',
validator: (value) => ['vertical', 'horizontal'].includes(value)
},
step: {
type: Number,
default: 1
}
})
const previousStep = ref(props.step)
const transitionName = computed(() => {
const baseTransition = props.direction === 'vertical' ? 'slide-vertical' : 'slide-horizontal'
return `${baseTransition}-${props.step > previousStep.value ? 'forward' : 'backward'}`
})
watch(() => props.step, (newStep, oldStep) => {
previousStep.value = oldStep
})
const enter = (el, done) => {
const { height } = el.getBoundingClientRect()
el.style.height = '0'
el.offsetHeight // force reflow
el.style.height = `${height}px`
el.addEventListener('transitionend', done, { once: true })
}
const leave = (el, done) => {
const { height } = el.getBoundingClientRect()
el.style.height = `${height}px`
el.offsetHeight // force reflow
el.style.height = '0'
el.addEventListener('transitionend', done, { once: true })
}
const resetStyles = (el) => {
el.style.height = ''
}
</script>
<style scoped>
.slide-horizontal-forward-enter-active,
.slide-horizontal-forward-leave-active,
.slide-horizontal-backward-enter-active,
.slide-horizontal-backward-leave-active,
.slide-vertical-forward-enter-active,
.slide-vertical-forward-leave-active,
.slide-vertical-backward-enter-active,
.slide-vertical-backward-leave-active {
transition: all 0.3s ease-out;
overflow: hidden;
}
.slide-horizontal-forward-enter-from,
.slide-horizontal-backward-leave-to {
opacity: 0;
transform: translateX(30px);
}
.slide-horizontal-forward-leave-to,
.slide-horizontal-backward-enter-from {
opacity: 0;
transform: translateX(-30px);
}
.slide-vertical-forward-enter-from,
.slide-vertical-backward-leave-to {
opacity: 0;
transform: translateY(30px);
}
.slide-vertical-forward-leave-to,
.slide-vertical-backward-enter-from {
opacity: 0;
transform: translateY(-30px);
}
</style>

344
client/components/pages/pricing/SubscriptionModal.vue
View File

@ -5,320 +5,29 @@
max-width="screen-lg"
backdrop-blur
@close="subscriptionModalStore.closeModal()"
>
<div class="overflow-hidden">
<SlidingTransition
direction="horizontal"
:step="currentStep"
>
<div
:key="currentStep"
class="w-full"
>
<div
v-if="currentStep === 1"
class="flex flex-col items-center pr-4 pb-20 pl-6 rounded-2xl max-md:pl-5 relative"
key="step1"
class="flex flex-col items-center px-4 pb-20 rounded-2xl relative"
>
<main class="flex flex-col mt-4 max-w-full text-center w-[591px] max-md:mt-10">
<svg
<img
src="/img/subscription-modal-icon.svg"
alt="Subscription Icon"
class="self-center max-w-full aspect-[0.98] w-[107px]"
viewBox="0 0 108 109"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g opacity="0.5">
<path
d="M94.5371 90H95.5371V89V22C95.5371 18.134 92.4031 15 88.5371 15H37.5371C33.6711 15 30.5371 18.134 30.5371 22V89V90H31.5371H94.5371Z"
fill="url(#paint0_linear_6894_874)"
/>
<path
d="M94.5371 90H95.5371V89V22C95.5371 18.134 92.4031 15 88.5371 15H37.5371C33.6711 15 30.5371 18.134 30.5371 22V89V90H31.5371H94.5371Z"
stroke="url(#paint1_linear_6894_874)"
stroke-width="2"
/>
<rect
x="39.5371"
y="24"
width="47"
height="4"
rx="2"
fill="url(#paint2_linear_6894_874)"
/>
<rect
x="39.5371"
y="34"
width="47"
height="4"
rx="2"
fill="url(#paint3_linear_6894_874)"
/>
<rect
x="39.5371"
y="44"
width="24"
height="4"
rx="2"
fill="url(#paint4_linear_6894_874)"
/>
</g>
<path
d="M78.5371 96H79.5371V95V28C79.5371 24.134 76.4031 21 72.5371 21H21.5371C17.6711 21 14.5371 24.134 14.5371 28V95V96H15.5371H78.5371Z"
fill="url(#paint5_linear_6894_874)"
/>
<path
d="M78.5371 96H79.5371V95V28C79.5371 24.134 76.4031 21 72.5371 21H21.5371C17.6711 21 14.5371 24.134 14.5371 28V95V96H15.5371H78.5371Z"
stroke="url(#paint6_linear_6894_874)"
stroke-width="2"
/>
<rect
x="23.5371"
y="30"
width="47"
height="4"
rx="2"
fill="url(#paint7_linear_6894_874)"
/>
<rect
x="23.5371"
y="40"
width="47"
height="4"
rx="2"
fill="url(#paint8_linear_6894_874)"
/>
<rect
x="23.5371"
y="50"
width="24"
height="4"
rx="2"
fill="url(#paint9_linear_6894_874)"
/>
<rect
width="100"
height="100"
transform="translate(0.5 9)"
fill="url(#paint10_linear_6894_874)"
/>
<path
d="M89.7665 18.8875L88.75 22.236L87.7335 18.8875C87.1996 17.1288 85.7389 15.754 83.8702 15.2515L80.3125 14.2948L83.8702 13.3381C85.7389 12.8356 87.1996 11.4608 87.7335 9.70209L88.75 6.35363L89.7665 9.70209C90.3004 11.4608 91.7611 12.8356 93.6298 13.3381L97.1875 14.2948L93.6298 15.2515C91.7611 15.754 90.3004 17.1288 89.7665 18.8875Z"
stroke="url(#paint11_linear_6894_874)"
stroke-width="1.25"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M100.324 10.4296L100 11.6477L99.6764 10.4296C99.2985 9.00696 98.1183 7.89618 96.6068 7.54053L95.3125 7.23598L96.6068 6.93144C98.1183 6.57579 99.2985 5.46501 99.6764 4.04241L100 2.82422L100.324 4.04241C100.701 5.46501 101.882 6.57579 103.393 6.93144L104.688 7.23598L103.393 7.54053C101.882 7.89618 100.701 9.00695 100.324 10.4296Z"
stroke="url(#paint12_linear_6894_874)"
stroke-width="1.25"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M98.6178 24.3739L98.125 25.7654L97.6322 24.3739C97.3523 23.5835 96.6932 22.9633 95.8534 22.6998L94.375 22.236L95.8534 21.7722C96.6932 21.5087 97.3523 20.8884 97.6322 20.098L98.125 18.7066L98.6178 20.098C98.8977 20.8884 99.5568 21.5087 100.397 21.7722L101.875 22.236L100.397 22.6998C99.5568 22.9633 98.8977 23.5835 98.6178 24.3739Z"
stroke="url(#paint13_linear_6894_874)"
stroke-width="1.25"
stroke-linecap="round"
stroke-linejoin="round"
/>
<defs>
<linearGradient
id="paint0_linear_6894_874"
x1="31.6431"
y1="17.1538"
x2="97.3504"
y2="81.7277"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#F5F8FB" />
<stop
offset="1"
stop-color="white"
/>
</linearGradient>
<linearGradient
id="paint1_linear_6894_874"
x1="31.2928"
y1="93.4417"
x2="93.1583"
y2="93.3534"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#CBD5E1" />
<stop
offset="1"
stop-color="#EAEEF2"
/>
</linearGradient>
<linearGradient
id="paint2_linear_6894_874"
x1="39.3548"
y1="28.2434"
x2="85.4911"
y2="27.347"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#CBD5E1" />
<stop
offset="1"
stop-color="#EAEEF2"
/>
</linearGradient>
<linearGradient
id="paint3_linear_6894_874"
x1="39.3548"
y1="38.2434"
x2="85.4911"
y2="37.347"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#CBD5E1" />
<stop
offset="1"
stop-color="#EAEEF2"
/>
</linearGradient>
<linearGradient
id="paint4_linear_6894_874"
x1="39.444"
y1="48.2434"
x2="63.0096"
y2="48.0096"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#CBD5E1" />
<stop
offset="1"
stop-color="#EAEEF2"
/>
</linearGradient>
<linearGradient
id="paint5_linear_6894_874"
x1="15.6431"
y1="23.1538"
x2="81.3504"
y2="87.7277"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#F5F8FB" />
<stop
offset="1"
stop-color="white"
/>
</linearGradient>
<linearGradient
id="paint6_linear_6894_874"
x1="15.2928"
y1="99.4417"
x2="77.1583"
y2="99.3534"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#CBD5E1" />
<stop
offset="1"
stop-color="#EAEEF2"
/>
</linearGradient>
<linearGradient
id="paint7_linear_6894_874"
x1="23.3548"
y1="34.2434"
x2="69.4911"
y2="33.347"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#CBD5E1" />
<stop
offset="1"
stop-color="#EAEEF2"
/>
</linearGradient>
<linearGradient
id="paint8_linear_6894_874"
x1="23.3548"
y1="44.2434"
x2="69.4911"
y2="43.347"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#CBD5E1" />
<stop
offset="1"
stop-color="#EAEEF2"
/>
</linearGradient>
<linearGradient
id="paint9_linear_6894_874"
x1="23.444"
y1="54.2434"
x2="47.0096"
y2="54.0096"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#CBD5E1" />
<stop
offset="1"
stop-color="#EAEEF2"
/>
</linearGradient>
<linearGradient
id="paint10_linear_6894_874"
x1="50"
y1="0"
x2="50"
y2="100"
gradientUnits="userSpaceOnUse"
>
<stop
offset="0.53"
stop-color="white"
stop-opacity="0"
/>
<stop
offset="0.84"
stop-color="white"
/>
</linearGradient>
<linearGradient
id="paint11_linear_6894_874"
x1="92.5"
y1="2.82422"
x2="92.5"
y2="25.7654"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#B4D5FF" />
<stop
offset="1"
stop-color="#2B88FD"
/>
</linearGradient>
<linearGradient
id="paint12_linear_6894_874"
x1="92.5"
y1="2.82422"
x2="92.5"
y2="25.7654"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#B4D5FF" />
<stop
offset="1"
stop-color="#2B88FD"
/>
</linearGradient>
<linearGradient
id="paint13_linear_6894_874"
x1="92.5"
y1="2.82422"
x2="92.5"
y2="25.7654"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#B4D5FF" />
<stop
offset="1"
stop-color="#2B88FD"
/>
</linearGradient>
</defs>
</svg>
<section class="flex flex-col mt-2 max-md:max-w-full">
<h1
class="justify-center self-center text-2xl font-bold tracking-tight leading-9 text-slate-800 max-md:max-w-full"
>
<h1 class="text-2xl font-bold tracking-tight leading-9 text-slate-800 max-md:max-w-full">
{{ subscriptionModalStore.modal_title }}
</h1>
<p class="mt-4 text-base leading-6 text-slate-500 max-md:max-w-full">
@ -339,9 +48,9 @@
class="flex flex-col w-6/12 max-md:ml-0 max-md:w-full m-auto"
>
<div class="flex flex-col grow justify-between p-6 w-full bg-blue-50 rounded-2xl max-md:px-5 max-md:mt-2">
<div class="flex flex-col">
<div class="flex flex-col items-center">
<div class="flex gap-2 py-px">
<h2 class="my-auto text-lg font-medium tracking-tighter leading-5 text-slate-900">
<h2 class="my-auto text-xl font-semibold tracking-tighter leading-5 text-slate-900">
Pro
</h2>
<span
@ -352,7 +61,7 @@
</span>
</div>
<div class="flex flex-col justify-end mt-4 leading-[100%]">
<p class="text-2xl font-semibold tracking-tight text-slate-900">
<p class="text-2xl font-semibold tracking-tight text-slate-900 text-center">
<template v-if="isYearly">
$16
</template>
@ -370,9 +79,6 @@
</template>
</p>
</div>
<p class="mt-4 text-sm leading-5 text-slate-500">
For companies and more customization on their forms.
</p>
</div>
<v-button
v-if="!user?.is_subscribed"
@ -496,6 +202,7 @@
</div>
<section
v-else-if="currentStep === 2"
key="step2"
class="flex flex-col items-center px-6 pb-4 bg-white rounded-2xl w-full"
>
<div class="flex gap-2 max-md:flex-wrap">
@ -503,7 +210,7 @@
<Icon
name="heroicons:chevron-left-16-solid"
class="h-6 w-6 cursor-pointer"
@click.prevent="currentStep=1"
@click.prevent="goBackToStep1"
/>
</div>
<h1 class="flex-1 my-auto text-xl font-bold leading-8 text-center text-slate-800 max-md:max-w-full">
@ -605,17 +312,21 @@
<UButton
size="md"
color="white"
@click="currentStep=1"
@click="goBackToStep1"
>
Back
</UButton>
</div>
</div>
</section>
</div>
</SlidingTransition>
</div>
</modal>
</template>
<script setup>
import SlidingTransition from '~/components/global/transitions/SlidingTransition.vue'
import { fetchAllWorkspaces } from '~/stores/workspaces.js'
const router = useRouter()
@ -715,7 +426,6 @@ onMounted(() => {
}
})
const onSelectPlan = (planName) => {
if (!authenticated.value) {
subscriptionModalStore.closeModal()
@ -729,6 +439,10 @@ const onSelectPlan = (planName) => {
currentStep.value = 2
}
const goBackToStep1 = () => {
currentStep.value = 1
}
const saveDetails = () => {
if (form.busy)
return

304
client/public/img/subscription-modal-icon.svg Normal file
View File

@ -0,0 +1,304 @@
<svg
class="self-center max-w-full aspect-[0.98] w-[107px]"
viewBox="0 0 108 109"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g opacity="0.5">
<path
d="M94.5371 90H95.5371V89V22C95.5371 18.134 92.4031 15 88.5371 15H37.5371C33.6711 15 30.5371 18.134 30.5371 22V89V90H31.5371H94.5371Z"
fill="url(#paint0_linear_6894_874)"
/>
<path
d="M94.5371 90H95.5371V89V22C95.5371 18.134 92.4031 15 88.5371 15H37.5371C33.6711 15 30.5371 18.134 30.5371 22V89V90H31.5371H94.5371Z"
stroke="url(#paint1_linear_6894_874)"
stroke-width="2"
/>
<rect
x="39.5371"
y="24"
width="47"
height="4"
rx="2"
fill="url(#paint2_linear_6894_874)"
/>
<rect
x="39.5371"
y="34"
width="47"
height="4"
rx="2"
fill="url(#paint3_linear_6894_874)"
/>
<rect
x="39.5371"
y="44"
width="24"
height="4"
rx="2"
fill="url(#paint4_linear_6894_874)"
/>
</g>
<path
d="M78.5371 96H79.5371V95V28C79.5371 24.134 76.4031 21 72.5371 21H21.5371C17.6711 21 14.5371 24.134 14.5371 28V95V96H15.5371H78.5371Z"
fill="url(#paint5_linear_6894_874)"
/>
<path
d="M78.5371 96H79.5371V95V28C79.5371 24.134 76.4031 21 72.5371 21H21.5371C17.6711 21 14.5371 24.134 14.5371 28V95V96H15.5371H78.5371Z"
stroke="url(#paint6_linear_6894_874)"
stroke-width="2"
/>
<rect
x="23.5371"
y="30"
width="47"
height="4"
rx="2"
fill="url(#paint7_linear_6894_874)"
/>
<rect
x="23.5371"
y="40"
width="47"
height="4"
rx="2"
fill="url(#paint8_linear_6894_874)"
/>
<rect
x="23.5371"
y="50"
width="24"
height="4"
rx="2"
fill="url(#paint9_linear_6894_874)"
/>
<rect
width="100"
height="100"
transform="translate(0.5 9)"
fill="url(#paint10_linear_6894_874)"
/>
<path
d="M89.7665 18.8875L88.75 22.236L87.7335 18.8875C87.1996 17.1288 85.7389 15.754 83.8702 15.2515L80.3125 14.2948L83.8702 13.3381C85.7389 12.8356 87.1996 11.4608 87.7335 9.70209L88.75 6.35363L89.7665 9.70209C90.3004 11.4608 91.7611 12.8356 93.6298 13.3381L97.1875 14.2948L93.6298 15.2515C91.7611 15.754 90.3004 17.1288 89.7665 18.8875Z"
stroke="url(#paint11_linear_6894_874)"
stroke-width="1.25"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M100.324 10.4296L100 11.6477L99.6764 10.4296C99.2985 9.00696 98.1183 7.89618 96.6068 7.54053L95.3125 7.23598L96.6068 6.93144C98.1183 6.57579 99.2985 5.46501 99.6764 4.04241L100 2.82422L100.324 4.04241C100.701 5.46501 101.882 6.57579 103.393 6.93144L104.688 7.23598L103.393 7.54053C101.882 7.89618 100.701 9.00695 100.324 10.4296Z"
stroke="url(#paint12_linear_6894_874)"
stroke-width="1.25"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M98.6178 24.3739L98.125 25.7654L97.6322 24.3739C97.3523 23.5835 96.6932 22.9633 95.8534 22.6998L94.375 22.236L95.8534 21.7722C96.6932 21.5087 97.3523 20.8884 97.6322 20.098L98.125 18.7066L98.6178 20.098C98.8977 20.8884 99.5568 21.5087 100.397 21.7722L101.875 22.236L100.397 22.6998C99.5568 22.9633 98.8977 23.5835 98.6178 24.3739Z"
stroke="url(#paint13_linear_6894_874)"
stroke-width="1.25"
stroke-linecap="round"
stroke-linejoin="round"
/>
<defs>
<linearGradient
id="paint0_linear_6894_874"
x1="31.6431"
y1="17.1538"
x2="97.3504"
y2="81.7277"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#F5F8FB" />
<stop
offset="1"
stop-color="white"
/>
</linearGradient>
<linearGradient
id="paint1_linear_6894_874"
x1="31.2928"
y1="93.4417"
x2="93.1583"
y2="93.3534"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#CBD5E1" />
<stop
offset="1"
stop-color="#EAEEF2"
/>
</linearGradient>
<linearGradient
id="paint2_linear_6894_874"
x1="39.3548"
y1="28.2434"
x2="85.4911"
y2="27.347"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#CBD5E1" />
<stop
offset="1"
stop-color="#EAEEF2"
/>
</linearGradient>
<linearGradient
id="paint3_linear_6894_874"
x1="39.3548"
y1="38.2434"
x2="85.4911"
y2="37.347"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#CBD5E1" />
<stop
offset="1"
stop-color="#EAEEF2"
/>
</linearGradient>
<linearGradient
id="paint4_linear_6894_874"
x1="39.444"
y1="48.2434"
x2="63.0096"
y2="48.0096"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#CBD5E1" />
<stop
offset="1"
stop-color="#EAEEF2"
/>
</linearGradient>
<linearGradient
id="paint5_linear_6894_874"
x1="15.6431"
y1="23.1538"
x2="81.3504"
y2="87.7277"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#F5F8FB" />
<stop
offset="1"
stop-color="white"
/>
</linearGradient>
<linearGradient
id="paint6_linear_6894_874"
x1="15.2928"
y1="99.4417"
x2="77.1583"
y2="99.3534"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#CBD5E1" />
<stop
offset="1"
stop-color="#EAEEF2"
/>
</linearGradient>
<linearGradient
id="paint7_linear_6894_874"
x1="23.3548"
y1="34.2434"
x2="69.4911"
y2="33.347"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#CBD5E1" />
<stop
offset="1"
stop-color="#EAEEF2"
/>
</linearGradient>
<linearGradient
id="paint8_linear_6894_874"
x1="23.3548"
y1="44.2434"
x2="69.4911"
y2="43.347"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#CBD5E1" />
<stop
offset="1"
stop-color="#EAEEF2"
/>
</linearGradient>
<linearGradient
id="paint9_linear_6894_874"
x1="23.444"
y1="54.2434"
x2="47.0096"
y2="54.0096"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#CBD5E1" />
<stop
offset="1"
stop-color="#EAEEF2"
/>
</linearGradient>
<linearGradient
id="paint10_linear_6894_874"
x1="50"
y1="0"
x2="50"
y2="100"
gradientUnits="userSpaceOnUse"
>
<stop
offset="0.53"
stop-color="white"
stop-opacity="0"
/>
<stop
offset="0.84"
stop-color="white"
/>
</linearGradient>
<linearGradient
id="paint11_linear_6894_874"
x1="92.5"
y1="2.82422"
x2="92.5"
y2="25.7654"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#B4D5FF" />
<stop
offset="1"
stop-color="#2B88FD"
/>
</linearGradient>
<linearGradient
id="paint12_linear_6894_874"
x1="92.5"
y1="2.82422"
x2="92.5"
y2="25.7654"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#B4D5FF" />
<stop
offset="1"
stop-color="#2B88FD"
/>
</linearGradient>
<linearGradient
id="paint13_linear_6894_874"
x1="92.5"
y1="2.82422"
x2="92.5"
y2="25.7654"
gradientUnits="userSpaceOnUse"
>
<stop stop-color="#B4D5FF" />
<stop
offset="1"
stop-color="#2B88FD"
/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 9.7 KiB