Initial commit
This commit is contained in:
132
resources/js/views/wizard-examples/create-deal/DealDetails.vue
Normal file
132
resources/js/views/wizard-examples/create-deal/DealDetails.vue
Normal file
@@ -0,0 +1,132 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
formData: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:formData'])
|
||||
|
||||
const formData = ref(props.formData)
|
||||
|
||||
const offeredItems = [
|
||||
'iPhone 12 Pro Max',
|
||||
'iPhone 12 Pro',
|
||||
'iPhone 11 Pro Max',
|
||||
'iPhone 11',
|
||||
'iPhone 12 Mini',
|
||||
'OnePlus Nord CE',
|
||||
]
|
||||
|
||||
watch(formData, () => {
|
||||
emit('update:formData', formData.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<AppTextField
|
||||
v-model="formData.title"
|
||||
label="Deal Title"
|
||||
placeholder="Black Friday Sale, 50% off on all products"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<AppTextField
|
||||
v-model="formData.code"
|
||||
label="Deal Code"
|
||||
placeholder="BLACKFRIDAY50"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<AppTextarea
|
||||
v-model="formData.description"
|
||||
label="Deal Description"
|
||||
placeholder="Write something about this deal"
|
||||
rows="5"
|
||||
auto-grow
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<AppSelect
|
||||
v-model="formData.offeredUItems"
|
||||
multiple
|
||||
chips
|
||||
label="Offered Items"
|
||||
placeholder="Select Offered Items"
|
||||
:items="offeredItems"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppSelect
|
||||
v-model="formData.cartCondition"
|
||||
label="Cart Condition"
|
||||
placeholder="Select Cart Condition"
|
||||
:items="['Cart must contain all selected Downloads', 'Cart needs one or more of the selected Downloads']"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<AppDateTimePicker
|
||||
v-model="formData.dealDuration"
|
||||
label="Deal Duration"
|
||||
placeholder="Select Date Range"
|
||||
:config="{ mode: 'range' }"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<h6 class="text-body-2 text-high-emphasis mb-2">
|
||||
Notify Users
|
||||
</h6>
|
||||
|
||||
<div class="d-flex align-center flex-wrap gap-x-3">
|
||||
<VCheckbox
|
||||
v-model="formData.notification.email"
|
||||
label="Email"
|
||||
value="email"
|
||||
/>
|
||||
<VCheckbox
|
||||
v-model="formData.notification.sms"
|
||||
label="SMS"
|
||||
value="sms"
|
||||
/>
|
||||
<VCheckbox
|
||||
v-model="formData.notification.pushNotification"
|
||||
label="Push Notification"
|
||||
value="push-notification"
|
||||
/>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
@@ -0,0 +1,128 @@
|
||||
<script setup>
|
||||
import standingGirlImg from '@images/illustrations/standingGirlImg.png'
|
||||
|
||||
const props = defineProps({
|
||||
formData: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:formData'])
|
||||
|
||||
const formData = ref(props.formData)
|
||||
|
||||
watch(formData, () => {
|
||||
emit('update:formData', formData.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
class="pb-4 pb-sm-0"
|
||||
>
|
||||
<h4 class="text-h4 mb-4">
|
||||
Almost done! 🚀
|
||||
</h4>
|
||||
|
||||
<p>Confirm your deal details information and submit to create it.</p>
|
||||
|
||||
<table class="text-base">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td style="inline-size: 150px;">
|
||||
<p class="font-weight-medium mb-2">
|
||||
Deal Type
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="mb-2">
|
||||
Percentage
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<p class="font-weight-medium mb-2">
|
||||
Amount
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="mb-2">
|
||||
25%
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<p class="font-weight-medium mb-2">
|
||||
Deal Code
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="mb-2">
|
||||
<VChip
|
||||
size="small"
|
||||
color="warning"
|
||||
label
|
||||
>
|
||||
25PEROFF
|
||||
</VChip>
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<p class="font-weight-medium mb-2">
|
||||
Deal Title
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="mb-2">
|
||||
Black friday sale, 25% OFF
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<p class="font-weight-medium mb-2">
|
||||
Deal Duration
|
||||
</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="mb-2">
|
||||
2021-07-14 to 2021-07-30
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<VSwitch
|
||||
v-model="formData.isDealDetailsConfirmed"
|
||||
label="I have confirmed the deal details."
|
||||
class="mb-3"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<div class="border rounded pa-4 pb-0">
|
||||
<VImg
|
||||
width="207"
|
||||
:src="standingGirlImg"
|
||||
class="mx-auto flip-in-rtl"
|
||||
/>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
122
resources/js/views/wizard-examples/create-deal/DealType.vue
Normal file
122
resources/js/views/wizard-examples/create-deal/DealType.vue
Normal file
@@ -0,0 +1,122 @@
|
||||
<script setup>
|
||||
import { useGenerateImageVariant } from '@core/composable/useGenerateImageVariant'
|
||||
import sittingGirlWithLaptop from '@images/illustrations/sitting-girl-with-laptop.png'
|
||||
import CreateDealBackgroundDark from '@images/pages/DealTypeBackground-dark.png'
|
||||
import CreateDealBackgroundLight from '@images/pages/DealTypeBackground-light.png'
|
||||
import card from '@images/svg/Card.svg'
|
||||
import check from '@images/svg/Check.svg'
|
||||
import diamond from '@images/svg/Diamond.svg'
|
||||
|
||||
const props = defineProps({
|
||||
formData: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:formData'])
|
||||
|
||||
const createDealBackground = useGenerateImageVariant(CreateDealBackgroundLight, CreateDealBackgroundDark)
|
||||
|
||||
const discountOffers = [
|
||||
{
|
||||
icon: {
|
||||
icon: check,
|
||||
size: '28',
|
||||
},
|
||||
title: 'Percentage',
|
||||
desc: 'Create a deal which offer uses some % off (i.e 5% OFF) on total.',
|
||||
value: 'percentage',
|
||||
},
|
||||
{
|
||||
icon: {
|
||||
icon: card,
|
||||
size: '28',
|
||||
},
|
||||
title: 'Flat Amount',
|
||||
desc: 'Create a deal which offer uses some flat amount (i.e $5 OFF) on total.',
|
||||
value: 'flat',
|
||||
},
|
||||
{
|
||||
icon: {
|
||||
icon: diamond,
|
||||
size: '28',
|
||||
},
|
||||
title: 'Prime member',
|
||||
desc: 'Create prime member only deal to encourage the prime members.',
|
||||
value: 'prime',
|
||||
},
|
||||
]
|
||||
|
||||
const formData = ref(props.formData)
|
||||
|
||||
watch(formData, () => {
|
||||
emit('update:formData', formData.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm>
|
||||
<VRow>
|
||||
<!-- 👉 Shopping girl image -->
|
||||
<VCol cols="12">
|
||||
<div class="d-flex align-center justify-center w-100 deal-type-image-wrapper border rounded px-5 pt-2 pb-5">
|
||||
<VImg :src="sittingGirlWithLaptop" />
|
||||
<VImg
|
||||
:src="createDealBackground"
|
||||
class="position-absolute deal-type-background-img d-md-block d-none"
|
||||
/>
|
||||
</div>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<CustomRadiosWithIcon
|
||||
v-model:selected-radio="formData.Offer"
|
||||
:radio-content="discountOffers"
|
||||
:grid-column="{ cols: '12', sm: '4' }"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<AppTextField
|
||||
v-model="formData.discount"
|
||||
type="number"
|
||||
label="Discount"
|
||||
placeholder="25"
|
||||
hint="Enter the discount percentage. 10 = 10%"
|
||||
persistent-hint
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<AppSelect
|
||||
v-model="formData.region"
|
||||
label="Region"
|
||||
:items="['Asia', 'Europe', 'Africa', 'Australia', 'North America', 'South America']"
|
||||
placeholder="Select Region"
|
||||
hint="Select applicable regions for the deal."
|
||||
persistent-hint
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.deal-type-image-wrapper {
|
||||
position: relative;
|
||||
block-size: 240px;
|
||||
inline-size: 210px;
|
||||
}
|
||||
|
||||
.deal-type-background-img {
|
||||
inline-size: 75%;
|
||||
inset-block-end: 0;
|
||||
}
|
||||
</style>
|
||||
101
resources/js/views/wizard-examples/create-deal/DealUsage.vue
Normal file
101
resources/js/views/wizard-examples/create-deal/DealUsage.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
formData: {
|
||||
type: null,
|
||||
required: true,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:formData'])
|
||||
|
||||
const formData = ref(props.formData)
|
||||
|
||||
watch(formData, () => {
|
||||
emit('update:formData', formData.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VForm>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<AppSelect
|
||||
v-model="formData.userType"
|
||||
label="User Type"
|
||||
placeholder="Select User Type"
|
||||
:items="['All', 'Registered', 'Unregistered', 'Prime Member']"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<AppTextField
|
||||
v-model="formData.maxUsers"
|
||||
label="Max Users"
|
||||
placeholder="1000"
|
||||
type="number"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<AppTextField
|
||||
v-model="formData.cartAmount"
|
||||
label="Minimum Cart Amount"
|
||||
placeholder="$199"
|
||||
type="number"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<AppTextField
|
||||
v-model="formData.promotionFree"
|
||||
label="Promotion Fee"
|
||||
placeholder="$4.99"
|
||||
type="number"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<AppSelect
|
||||
v-model="formData.paymentMethod"
|
||||
label="Payment Method"
|
||||
placeholder="Select Payment Method"
|
||||
:items="['Any', 'Credit Card', 'Net Banking', 'Wallet']"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<AppSelect
|
||||
v-model="formData.dealStatus"
|
||||
label="Deal Status"
|
||||
placeholder="Select Deal Status"
|
||||
:items="['Active', 'Inactive', 'Suspended', 'Abandoned']"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VSwitch
|
||||
v-model="formData.isSingleUserCustomer"
|
||||
label="Limit this discount to a single-use per customer?"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</template>
|
||||
1
resources/js/views/wizard-examples/create-deal/types.js
Normal file
1
resources/js/views/wizard-examples/create-deal/types.js
Normal file
@@ -0,0 +1 @@
|
||||
export {}
|
||||
Reference in New Issue
Block a user