Appsumo (#232)
* Implemented webhooks * oAuth wip * Implement the whole auth flow * Implement file upload limit depending on appsumo license
This commit is contained in:
@@ -7,24 +7,24 @@
|
||||
>
|
||||
<template v-if="!loading">
|
||||
<span class="no-underline mx-auto">
|
||||
<slot/>
|
||||
</span>
|
||||
<slot />
|
||||
</span>
|
||||
<svg v-if="arrow" class="ml-2 w-3 h-3 inline" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 11L11 1M11 1H1M11 1V11" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round"/>
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
</template>
|
||||
<loader v-else class="h-6 w-6 mx-auto" :class="`text-${colorShades['text']}`"/>
|
||||
<loader v-else class="h-6 w-6 mx-auto" :class="`text-${colorShades['text']}`" />
|
||||
</button>
|
||||
<router-link v-else :class="btnClasses" :to="to" :target="target"
|
||||
>
|
||||
<span class="no-underline mx-auto">
|
||||
<slot/>
|
||||
</span>
|
||||
<router-link v-else :class="btnClasses" :to="to" :target="target">
|
||||
<span class="no-underline mx-auto">
|
||||
<slot />
|
||||
</span>
|
||||
<svg v-if="arrow" class="ml-2 w-3 h-3 inline" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 11L11 1M11 1H1M11 1V11" stroke="currentColor" stroke-width="2" stroke-linecap="round"
|
||||
stroke-linejoin="round"/>
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</router-link>
|
||||
</template>
|
||||
@@ -72,11 +72,11 @@ export default {
|
||||
target: {
|
||||
type: String,
|
||||
default: '_self'
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
btnClasses() {
|
||||
btnClasses () {
|
||||
const sizes = this.sizes
|
||||
const colorShades = this.colorShades
|
||||
return `v-btn ${sizes['p-y']} ${sizes['p-x']}
|
||||
@@ -84,14 +84,14 @@ export default {
|
||||
${colorShades?.text} transition ease-in duration-200 text-center text-${sizes?.font} font-medium focus:outline-none focus:ring-2
|
||||
focus:ring-offset-2 rounded-lg flex items-center hover:no-underline`
|
||||
},
|
||||
colorShades() {
|
||||
colorShades () {
|
||||
if (this.color === 'blue') {
|
||||
return {
|
||||
main: 'bg-blue-600',
|
||||
hover: 'hover:bg-blue-700',
|
||||
ring: 'focus:ring-blue-500',
|
||||
'ring-offset': 'focus:ring-offset-blue-200',
|
||||
text: 'text-white',
|
||||
text: 'text-white'
|
||||
}
|
||||
} else if (this.color === 'outline-blue') {
|
||||
return {
|
||||
@@ -99,7 +99,15 @@ export default {
|
||||
hover: 'hover:bg-blue-600',
|
||||
ring: 'focus:ring-blue-500',
|
||||
'ring-offset': 'focus:ring-offset-blue-200',
|
||||
text: 'text-blue-600 hover:text-white',
|
||||
text: 'text-blue-600 hover:text-white'
|
||||
}
|
||||
} else if (this.color === 'outline-gray') {
|
||||
return {
|
||||
main: 'bg-transparent border border-gray-300',
|
||||
hover: 'hover:bg-gray-500',
|
||||
ring: 'focus:ring-gray-500',
|
||||
'ring-offset': 'focus:ring-offset-gray-200',
|
||||
text: 'text-gray-500 hover:text-white'
|
||||
}
|
||||
} else if (this.color === 'red') {
|
||||
return {
|
||||
@@ -107,7 +115,7 @@ export default {
|
||||
hover: 'hover:bg-red-700',
|
||||
ring: 'focus:ring-red-500',
|
||||
'ring-offset': 'focus:ring-offset-red-200',
|
||||
text: 'text-white',
|
||||
text: 'text-white'
|
||||
}
|
||||
} else if (this.color === 'gray') {
|
||||
return {
|
||||
@@ -115,7 +123,7 @@ export default {
|
||||
hover: 'hover:bg-gray-700',
|
||||
ring: 'focus:ring-gray-500',
|
||||
'ring-offset': 'focus:ring-offset-gray-200',
|
||||
text: 'text-white',
|
||||
text: 'text-white'
|
||||
}
|
||||
} else if (this.color === 'light-gray') {
|
||||
return {
|
||||
@@ -123,7 +131,7 @@ export default {
|
||||
hover: 'hover:bg-gray-100',
|
||||
ring: 'focus:ring-gray-500',
|
||||
'ring-offset': 'focus:ring-offset-gray-300',
|
||||
text: 'text-gray-700',
|
||||
text: 'text-gray-700'
|
||||
}
|
||||
} else if (this.color === 'green') {
|
||||
return {
|
||||
@@ -131,7 +139,7 @@ export default {
|
||||
hover: 'hover:bg-green-700',
|
||||
ring: 'focus:ring-green-500',
|
||||
'ring-offset': 'focus:ring-offset-green-200',
|
||||
text: 'text-white',
|
||||
text: 'text-white'
|
||||
}
|
||||
} else if (this.color === 'yellow') {
|
||||
return {
|
||||
@@ -139,7 +147,7 @@ export default {
|
||||
hover: 'hover:bg-yellow-700',
|
||||
ring: 'focus:ring-yellow-500',
|
||||
'ring-offset': 'focus:ring-offset-yellow-200',
|
||||
text: 'text-white',
|
||||
text: 'text-white'
|
||||
}
|
||||
} else if (this.color === 'white') {
|
||||
return {
|
||||
@@ -147,12 +155,12 @@ export default {
|
||||
hover: 'hover:bg-gray-200',
|
||||
ring: 'focus:ring-white-500',
|
||||
'ring-offset': 'focus:ring-offset-white-200',
|
||||
text: 'text-gray-700',
|
||||
text: 'text-gray-700'
|
||||
}
|
||||
}
|
||||
console.error('Unknown color')
|
||||
},
|
||||
sizes() {
|
||||
sizes () {
|
||||
if (this.size === 'small') {
|
||||
return {
|
||||
font: 'sm',
|
||||
@@ -169,8 +177,8 @@ export default {
|
||||
},
|
||||
|
||||
methods: {
|
||||
onClick(event) {
|
||||
this.$emit('click',event)
|
||||
onClick (event) {
|
||||
this.$emit('click', event)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
77
resources/js/components/vendor/appsumo/AppSumoBilling.vue
vendored
Normal file
77
resources/js/components/vendor/appsumo/AppSumoBilling.vue
vendored
Normal file
@@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div v-if="user.active_license" class="border p-5 shadow-md rounded-md">
|
||||
<div class="w-auto flex flex-col items-center">
|
||||
<img :src="asset('img/appsumo/as-taco-white-bg.png')" class="max-w-[60px]" alt="AppSumo">
|
||||
<img :src="asset('img/appsumo/as-Select-dark.png')" class="max-w-[150px]" alt="AppSumo">
|
||||
</div>
|
||||
<p class="mt-6">
|
||||
Your AppSumo <span class="font-semibold">lifetime deal tier {{ licenseTier }}</span> license is active. Here's a reminder of your plan details:
|
||||
</p>
|
||||
<ul class="list-disc pl-5 mt-4">
|
||||
<li>Number of Forms: <span class="font-semibold">{{ tierFeatures.form_quantity }}</span></li>
|
||||
<li>Custom domains: <span class="font-semibold">{{ tierFeatures.domain_names }}</span></li>
|
||||
<li>File Size Uploads: <span class="font-semibold">{{ tierFeatures.file_upload_size }}</span></li>
|
||||
</ul>
|
||||
<div class="w-max">
|
||||
<v-button color="outline-gray" shade="lighter" class="mt-4 block" href="https://appsumo.com/account/products/" target="_blank">
|
||||
Mangage in AppSumo
|
||||
</v-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapGetters } from 'vuex'
|
||||
import VButton from '../../common/Button.vue'
|
||||
|
||||
export default {
|
||||
|
||||
name: 'AppSumoBilling',
|
||||
components: { VButton },
|
||||
|
||||
data () {
|
||||
return {
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapGetters({
|
||||
user: 'auth/user'
|
||||
}),
|
||||
licenseTier () {
|
||||
return this.user?.active_license?.meta?.tier
|
||||
},
|
||||
tierFeatures () {
|
||||
if (!this.licenseTier) return {}
|
||||
return {
|
||||
1: {
|
||||
form_quantity: 'Unlimited',
|
||||
file_upload_size: '25mb',
|
||||
domain_names: '5'
|
||||
},
|
||||
2: {
|
||||
form_quantity: 'Unlimited',
|
||||
file_upload_size: '50mb',
|
||||
domain_names: '25'
|
||||
},
|
||||
3: {
|
||||
form_quantity: 'Unlimited',
|
||||
file_upload_size: '75mb',
|
||||
domain_names: 'Unlimited'
|
||||
}
|
||||
}[this.licenseTier]
|
||||
}
|
||||
},
|
||||
|
||||
watch: {},
|
||||
|
||||
mounted () {},
|
||||
|
||||
created () {
|
||||
},
|
||||
destroyed () {
|
||||
},
|
||||
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
50
resources/js/components/vendor/appsumo/AppSumoRegister.vue
vendored
Normal file
50
resources/js/components/vendor/appsumo/AppSumoRegister.vue
vendored
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<div v-if="hasValidLicense" class="p-6 bg-white border shadow-md rounded-md">
|
||||
<img :src="asset('img/appsumo/as-taco-white-bg.png')" class="max-w-[60px] mx-auto" alt="AppSumo">
|
||||
<img :src="asset('img/appsumo/as-Select-dark.png')" class="max-w-[300px] mx-auto" alt="AppSumo">
|
||||
<p class="mt-6">
|
||||
<span class="text-green-500">We found your AppSumo Lifetime deal license!</span> Just complete the registration form to finalize the activation of
|
||||
your license.
|
||||
</p>
|
||||
</div>
|
||||
<div v-else-if="hasLicenseError" class="p-6 bg-white border border-red-500 shadow-md rounded-md">
|
||||
<img :src="asset('img/appsumo/as-taco-white-bg.png')" class="max-w-[60px] mx-auto" alt="AppSumo">
|
||||
<img :src="asset('img/appsumo/as-Select-dark.png')" class="max-w-[300px] mx-auto" alt="AppSumo">
|
||||
<p class="mt-6">
|
||||
<span class="text-red-600">Invalid AppSumo license</span>. The license was probably already attached to an OpnForm account. Please contact support.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
name: 'AppSumoRegister',
|
||||
|
||||
data () {
|
||||
return {
|
||||
hasValidLicense: false,
|
||||
hasLicenseError: false
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
|
||||
mounted () {
|
||||
if (this.$route.query.appsumo_license !== undefined && this.$route.query.appsumo_license) {
|
||||
this.hasValidLicense = true
|
||||
} else if (this.$route.query.appsumo_error !== undefined && this.$route.query.appsumo_error) {
|
||||
this.hasLicenseError = true
|
||||
}
|
||||
},
|
||||
|
||||
created () {
|
||||
},
|
||||
destroyed () {
|
||||
},
|
||||
|
||||
methods: {}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user