Ngiler SH3LL 360
Home
Information
Create File
Create Folder
:
/
home
/
tbf
/
tbfguest.tbf.ro
/
src
/
components
/
public
/
sales
/
Information Server
MySQL :
OFF
Perl :
OFF
CURL :
ON
WGET :
OFF
PKEXEC :
OFF
Directive
Local Value
IP Address
89.40.16.97
System
Linux server.atelieruldeit.ro 3.10.0-1160.el7.x86_64 #1 SMP Mon Oct 19 16:18:59 UTC 2020 x86_64
User
tbf
PHP Version
7.3.33
Software
Apache
Doc root
Writable
close
Edit File :
Oferta.vue
| Size :
32.96
KB
Copy
<!-- @format --> <template> <!-- Informatii generale --> <div class="grid grid-cols-1 gap-x-8 gap-y-8 md:grid-cols-3 pt-10"> <div class="px-4 sm:px-0 col-span-3"> <h2 class="text-base font-semibold leading-7 text-gray-900">Ofertă produs principal</h2> <p class="mt-1 text-sm leading-6 text-gray-600"> Completează cele 4 oferte pentru acest produs. Oferta de listă este cea mai slabă ofertă, iar cea pentru ultima șansă este cea mai puternică. </p> </div> <div class="sm:rounded-xl md:col-span-3"> <div class="grid grid-cols-1 divide-gray-200 sm:grid-cols-4 gap-x-3 pb-10"> <!-- Oferta de listă --> <form class="flex-col flex justify-between bg-white ring-1 ring-gray-200 ring-inset rounded-xl" @submit.prevent="submitOffer('list_offer')"> <!-- Inputs --> <div class="px-5 py-5"> <!-- Descriere ofertă --> <div> <label for="list_offer" class="text-sm font-medium leading-6 text-gray-900"> Ofertă de listă <Popper hover :openDelay="200" offsetDistance="10" placement="right" v-if="!onlyPreviewMode.list_offer"> <span class="text-gray-400">(?)</span> <template #content> <div role="tooltip" class="bg-gray-900 shadow-sm ring-1 ring-gray-900/5 rounded-lg px-4 py-3 text-white text-xs relative max-w-[15rem]"> <div class="w-3 h-3 bg-gray-900 absolute top-[50%] -translate-y-[50%] -left-1 rotate-45"></div> <p> Oferta de listă este cea mai slabă ofertă din acest proces. Nu are limită de stoc sau termen de valabilitate. Este oferta normală pentru acest produs. </p> </div> </template> </Popper> </label> <div class="mt-2 relative"> <template v-if="!onlyPreviewMode.list_offer"> <textarea type="text" id="list_offer" rows="3" v-model="list_offer_name" placeholder="Ex: 500 RON" :class="[ v$.list_offer_name.$errors.length ? 'text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500' : 'text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-500', ]" class="block w-full rounded-md border-0 py-1.5 shadow-sm ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-5" /> </template> <p v-else-if="list_offer_name" class="text-sm text-gray-700 leading-6" v-html="list_offer_name.replace(/(?:\r\n|\r|\n)/g, `<div class='h-[6px]'></div>`)"></p> </div> </div> <!-- Valabilitate --> <div class="mt-6"> <label for="produs" class="text-sm font-medium leading-6 text-gray-900">Valabilitate</label> <div class="mt-2 relative text-sm text-gray-500 leading-6">Nelimitată</div> </div> <!-- Limită disponibilitate --> <div class="mt-6"> <label for="produs" class="text-sm font-medium leading-6 text-gray-900">Limită</label> <div class="mt-2 relative text-sm text-gray-500 leading-6">Fără limită</div> </div> </div> <!-- Buttons --> <div class="flex items-center justify-end px-5 py-4 bg-gray-50 text-white border border-gray-200 rounded-b-xl"> <template v-if="!onlyPreviewMode.list_offer"> <button v-if="canOnlyPreview.list_offer" @click="changePreviewMode('list_offer')" type="button" class="rounded-md flex items-center px-3 py-2 text-sm font-semibold text-gray-900 hover:text-gray-500"> Anulează </button> <button v-else @click="resetForm('list_offer')" type="button" class="rounded-md flex items-center px-3 py-2 text-sm font-semibold text-gray-900 hover:text-gray-500"> Resetează </button> </template> <template v-if="onlyPreviewMode.list_offer"> <button @click="changePreviewMode('list_offer')" type="button" class="rounded-md flex items-center px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 bg-white border-gray-300 text-gray-900 hover:bg-gray-50 border"> Modifică </button> </template> <button v-else type="submit" class="rounded-md flex items-center px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 bg-blue-500 text-white hover:bg-blue-400" :class="{ 'disabled:cursor-not-allowed': loadingSubmit.list_offer }" :disabled="loadingSubmit.list_offer"> <LoaderTbf class="inline-block mr-2" color="text-white" v-if="loadingSubmit.list_offer" /> Salvează </button> </div> </form> <!-- Oferta promotionala --> <form class="flex flex-col justify-between bg-white rounded-xl ring-1 ring-gray-200 ring-inset" @submit.prevent="submitOffer('promotional_offer')"> <!-- Inputs --> <div class="px-5 py-5"> <!-- Descriere ofertă --> <div> <label for="promotional_offer_name" class="text-sm font-medium leading-6 text-gray-900"> Ofertă Promoțională <Popper hover :openDelay="200" offsetDistance="10" placement="right" v-if="!onlyPreviewMode.promotional_offer"> <span class="text-gray-400">(?)</span> <template #content> <div role="tooltip" class="bg-gray-900 shadow-sm ring-1 ring-gray-900/5 rounded-lg px-4 py-3 text-white text-xs relative max-w-[15rem]"> <div class="w-3 h-3 bg-gray-900 absolute top-[50%] -translate-y-[50%] -left-1 rotate-45"></div> <p> Oferta promoțională este mai bună față de cea de listă însă mai slabă față de cea specială. Are un termen de valabilitate mai mare decât oferta specială și poate avea limită pe număr de produse sau număr de clienți care pot cumpăra. Exemplu: Discount 10% și bonus transport gratuit. </p> </div> </template> </Popper> </label> <div class="mt-2 relative"> <template v-if="!onlyPreviewMode.promotional_offer"> <textarea type="text" id="promotional_offer_name" rows="3" v-model="promotional_offer_name" :class="[ v$.promotional_offer_name.$errors.length ? 'text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500' : 'text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-500', ]" placeholder="Ex: Discount 10%" class="block w-full rounded-md border-0 py-1.5 ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-5" /> </template> <p v-else-if="promotional_offer_name" class="text-sm text-gray-700 leading-6" v-html="promotional_offer_name.replace(/(?:\r\n|\r|\n)/g, `<div class='h-[6px]'></div>`)"></p> </div> </div> <!-- Perioadă valabilitate --> <div class="mt-6"> <label for="promotional_offer_valability" class="text-sm font-medium leading-6 text-gray-900">Valabilitate</label> <div class="mt-2"> <template v-if="!onlyPreviewMode.promotional_offer"> <div class="w-20 bg-white flex rounded-md ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-blue-500" :class="[v$.promotional_offer_valability.$errors.length ? 'ring-red-300 focus-within:ring-red-500' : 'ring-gray-300 focus-within:ring-blue-500']"> <input type="text" id="promotional_offer_valability" v-model="promotional_offer_valability" :class="[v$.promotional_offer_valability.$errors.length ? 'text-red-900 placeholder:text-red-300' : 'text-gray-900 placeholder:text-gray-400']" placeholder="12" class="w-full block border-0 bg-transparent py-1.5 pr-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6" /> <span class="flex select-none items-center pr-3 text-gray-500 sm:text-sm" :class="[v$.promotional_offer_valability.$errors.length ? 'text-red-500' : 'text-gray-500']" >{{ promotional_offer_valability == 1 ? "zi" : "zile" }}</span > </div> </template> <p v-else class="text-sm text-gray-700 leading-6">{{ promotional_offer_valability }} {{ promotional_offer_valability == 1 ? "zi" : "zile" }}</p> </div> </div> <!-- Limită disponibilitate --> <div class="mt-6"> <label for="promotional_offer_limit" class="text-sm font-medium leading-6 text-gray-900">Limită</label> <div class="mt-2 relative"> <template v-if="!onlyPreviewMode.promotional_offer"> <textarea type="text" id="promotional_offer_limit" rows="3" v-model="promotional_offer_limit" :class="[ v$.promotional_offer_limit.$errors.length ? 'text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500' : 'text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-500', ]" placeholder="Ex: Nelimitat" class="text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-500 block w-full rounded-md border-0 py-1.5 ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-5" /> </template> <p v-else-if="promotional_offer_limit" class="text-sm text-gray-700 leading-6" v-html="promotional_offer_limit.replace(/(?:\r\n|\r|\n)/g, `<div class='h-[6px]'></div>`)"></p> </div> </div> </div> <!-- Buttons --> <div class="flex items-center justify-end px-5 py-4 bg-gray-50 text-white border border-gray-200 rounded-b-xl"> <template v-if="!onlyPreviewMode.promotional_offer"> <button v-if="canOnlyPreview.promotional_offer" @click="changePreviewMode('promotional_offer')" type="button" class="rounded-md flex items-center px-3 py-2 text-sm font-semibold text-gray-900 hover:text-gray-500"> Anulează </button> <button v-else @click="resetForm('promotional_offer')" type="button" class="rounded-md flex items-center px-3 py-2 text-sm font-semibold text-gray-900 hover:text-gray-500"> Resetează </button> </template> <template v-if="onlyPreviewMode.promotional_offer"> <button @click="changePreviewMode('promotional_offer')" type="button" class="rounded-md flex items-center px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 bg-white border-gray-300 text-gray-900 hover:bg-gray-50 border"> Modifică </button> </template> <button v-else type="submit" class="rounded-md flex items-center px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 bg-blue-500 text-white hover:bg-blue-400" :class="{ 'disabled:cursor-not-allowed': loadingSubmit.promotional_offer }" :disabled="loadingSubmit.promotional_offer"> <LoaderTbf class="inline-block mr-2" color="text-white" v-if="loadingSubmit.promotional_offer" /> Salvează </button> </div> </form> <!-- Oferta speciala --> <form class="flex flex-col justify-between bg-white rounded-xl ring-1 ring-gray-200 ring-inset" @submit.prevent="submitOffer('special_offer')"> <!-- Inputs --> <div class="px-5 py-5 pb-6"> <!-- Descriere ofertă --> <div> <label for="special_offer_name" class="text-sm font-medium leading-6 text-gray-900"> Ofertă Specială <Popper hover :openDelay="200" offsetDistance="10" placement="right" v-if="!onlyPreviewMode.special_offer"> <span class="text-gray-400">(?)</span> <template #content> <div role="tooltip" class="bg-gray-900 shadow-sm ring-1 ring-gray-900/5 rounded-lg px-4 py-3 text-white text-xs relative max-w-[15rem]"> <div class="w-3 h-3 bg-gray-900 absolute top-[50%] -translate-y-[50%] -left-1 rotate-45"></div> <p> Oferta specială este mai bună față de cea promoțională însă mai slabă față de cea de ultimă șansă. Poate include un discount mai mare față de cea promoțională sau unul sau mai multe bonusuri. În același timp are un termen de valabilitate mai mic față de cea precedentă și poate avea limită de stoc sau număr de clienți deserviți. </p> </div> </template> </Popper> </label> <div class="mt-2 relative"> <template v-if="!onlyPreviewMode.special_offer"> <textarea type="text" id="special_offer_name" rows="3" v-model="special_offer_name" :class="[ v$.special_offer_name.$errors.length ? 'text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500' : 'text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-500', ]" placeholder="Ex: Discount 20% și bonus montaj gratuit" class="text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-500 block w-full rounded-md border-0 py-1.5 ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-5" /> </template> <p v-else-if="special_offer_name" class="text-sm text-gray-700 leading-6" v-html="special_offer_name.replace(/(?:\r\n|\r|\n)/g, `<div class='h-[6px]'></div>`)"></p> </div> </div> <!-- Perioadă valabilitate --> <div class="mt-6"> <label for="special_offer_valability" class="text-sm font-medium leading-6 text-gray-900">Valabilitate</label> <div class="mt-2"> <template v-if="!onlyPreviewMode.special_offer"> <div class="w-20 bg-white flex rounded-md ring-1 ring-inset focus-within:ring-2 focus-within:ring-inset" :class="[v$.special_offer_valability.$errors.length ? 'ring-red-300 focus-within:ring-red-500' : 'ring-gray-300 focus-within:ring-blue-500']"> <input type="text" id="special_offer_valability" v-model="special_offer_valability" :class="[v$.special_offer_valability.$errors.length ? 'text-red-900 placeholder:text-red-300' : 'text-gray-900 placeholder:text-gray-400']" placeholder="5" class="w-full block border-0 bg-transparent py-1.5 pr-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6" /> <span class="flex select-none items-center pr-3 text-gray-500 sm:text-sm" :class="[v$.special_offer_valability.$errors.length ? 'text-red-500' : 'text-gray-500']"> {{ special_offer_valability == 1 ? "zi" : "zile" }} </span> </div> </template> <p v-else class="text-sm text-gray-700 leading-6">{{ special_offer_valability }} {{ special_offer_valability == 1 ? "zi" : "zile" }}</p> </div> </div> <!-- Limită disponibilitate --> <div class="mt-6"> <label for="special_offer_limit" class="text-sm font-medium leading-6 text-gray-900">Limită</label> <div class="mt-2 relative"> <template v-if="!onlyPreviewMode.special_offer"> <textarea type="text" id="special_offer_limit" rows="3" v-model="special_offer_limit" :class="[ v$.special_offer_limit.$errors.length ? 'text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500' : 'text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-500', ]" placeholder="Ex: Pentru maximum 200 de clienți" class="text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-500 block w-full rounded-md border-0 py-1.5 ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-5" /> </template> <p v-else-if="special_offer_limit" class="text-sm text-gray-700 leading-6" v-html="special_offer_limit.replace(/(?:\r\n|\r|\n)/g, `<div class='h-[6px]'></div>`)"></p> </div> </div> </div> <!-- Buttons --> <div class="flex items-center justify-end px-5 py-4 bg-gray-50 text-white border border-gray-200 rounded-b-xl"> <template v-if="!onlyPreviewMode.special_offer"> <button v-if="canOnlyPreview.special_offer" @click="changePreviewMode('special_offer')" type="button" class="rounded-md flex items-center px-3 py-2 text-sm font-semibold text-gray-900 hover:text-gray-500"> Anulează </button> <button v-else @click="resetForm('special_offer')" type="button" class="rounded-md flex items-center px-3 py-2 text-sm font-semibold text-gray-900 hover:text-gray-500"> Resetează </button> </template> <template v-if="onlyPreviewMode.special_offer"> <button @click="changePreviewMode('special_offer')" type="button" class="rounded-md flex items-center px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 bg-white border-gray-300 text-gray-900 hover:bg-gray-50 border"> Modifică </button> </template> <button v-else type="submit" class="rounded-md flex items-center px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 bg-blue-500 text-white hover:bg-blue-400" :class="{ 'disabled:cursor-not-allowed': loadingSubmit.special_offer }" :disabled="loadingSubmit.special_offer"> <LoaderTbf class="inline-block mr-2" color="text-white" v-if="loadingSubmit.special_offer" /> Salvează </button> </div> </form> <!-- Oferta ultima sansa --> <form class="flex flex-col justify-between bg-white rounded-xl ring-1 ring-gray-200 ring-inset" @submit.prevent="submitOffer('last_chance_offer')"> <!-- Inputs --> <div class="px-5 py-5 pb-6"> <!-- Descriere ofertă --> <div> <label for="last_chance_offer_name" class="text-sm font-medium leading-6 text-gray-900"> Ofertă Ultima Șansă <Popper hover :openDelay="200" offsetDistance="10" placement="left" v-if="!onlyPreviewMode.last_chance_offer"> <span class="text-gray-400">(?)</span> <template #content> <div role="tooltip" class="bg-gray-900 shadow-sm ring-1 ring-gray-900/5 rounded-lg px-4 py-3 text-white text-xs relative max-w-[15rem]"> <div class="w-3 h-3 bg-gray-900 absolute top-[50%] -translate-y-[50%] -right-1 rotate-45"></div> <p> Oferta de ultimă șansă este cea mai bună din cele 4. Are cel mai mare discount și cele mai bune bonusuri. Dar în același timp are și cel mai scurt termen de valabilitate și cele mai puține produse disponibile. </p> </div> </template> </Popper> </label> <div class="mt-2 relative"> <template v-if="!onlyPreviewMode.last_chance_offer"> <textarea type="text" id="last_chance_offer_name" rows="3" v-model="last_chance_offer_name" :class="[ v$.last_chance_offer_name.$errors.length ? 'text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500' : 'text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-500', ]" placeholder="Ex: Discount 20%, bonus montaj gratuit și garanție 2 ani" class="text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-500 block w-full rounded-md border-0 py-1.5 ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-5" /> </template> <p v-else-if="last_chance_offer_name" class="text-sm text-gray-700 leading-6" v-html="last_chance_offer_name.replace(/(?:\r\n|\r|\n)/g, `<div class='h-[6px]'></div>`)"></p> </div> </div> <!-- Perioadă valabilitate --> <div class="mt-6"> <label for="last_chance_offer_valability" class="text-sm font-medium leading-6 text-gray-900">Valabilitate</label> <div class="mt-2"> <template v-if="!onlyPreviewMode.last_chance_offer"> <div class="w-20 bg-white flex rounded-md ring-1 ring-inset focus-within:ring-2 focus-within:ring-inset" :class="[v$.last_chance_offer_valability.$errors.length ? 'ring-red-300 focus-within:ring-red-500' : 'ring-gray-300 focus-within:ring-blue-500']"> <input type="text" id="last_chance_offer_valability" v-model="last_chance_offer_valability" placeholder="2" :class="[v$.last_chance_offer_valability.$errors.length ? 'text-red-900 placeholder:text-red-300' : 'text-gray-900 placeholder:text-gray-400']" class="w-full block border-0 bg-transparent py-1.5 pr-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6" /> <span class="flex select-none items-center pr-3 text-gray-500 sm:text-sm" :class="[v$.last_chance_offer_valability.$errors.length ? 'text-red-500' : 'text-gray-500']"> {{ last_chance_offer_valability == 1 ? "zi" : "zile" }} </span> </div> </template> <p v-else class="text-sm text-gray-700 leading-6">{{ last_chance_offer_valability }} {{ last_chance_offer_valability == 1 ? "zi" : "zile" }}</p> </div> </div> <!-- Limită disponibilitate --> <div class="mt-6"> <label for="last_chance_offer_limit" class="text-sm font-medium leading-6 text-gray-900">Limită</label> <div class="mt-2 relative"> <template v-if="!onlyPreviewMode.last_chance_offer"> <textarea type="text" id="last_chance_offer_limit" rows="3" v-model="last_chance_offer_limit" :class="[ v$.last_chance_offer_limit.$errors.length ? 'text-red-900 ring-red-300 placeholder:text-red-300 focus:ring-red-500' : 'text-gray-900 ring-gray-300 placeholder:text-gray-400 focus:ring-blue-500', ]" placeholder="Ex: Pentru maximum 50 de clienți fildeli" class="block w-full rounded-md border-0 py-1.5 ring-1 ring-inset focus:ring-2 focus:ring-inset sm:text-sm sm:leading-5" /> </template> <p v-else-if="last_chance_offer_limit" class="text-sm text-gray-700 leading-6" v-html="last_chance_offer_limit.replace(/(?:\r\n|\r|\n)/g, `<div class='h-[6px]'></div>`)"></p> </div> </div> </div> <!-- Buttons --> <div class="flex items-center justify-end px-5 py-4 bg-gray-50 text-white border border-gray-200 rounded-b-xl"> <template v-if="!onlyPreviewMode.last_chance_offer"> <button v-if="canOnlyPreview.last_chance_offer" @click="changePreviewMode('last_chance_offer')" type="button" class="rounded-md flex items-center px-3 py-2 text-sm font-semibold text-gray-900 hover:text-gray-500"> Anulează </button> <button v-else @click="resetForm('last_chance_offer')" type="button" class="rounded-md flex items-center px-3 py-2 text-sm font-semibold text-gray-900 hover:text-gray-500"> Resetează </button> </template> <template v-if="onlyPreviewMode.last_chance_offer"> <button @click="changePreviewMode('last_chance_offer')" type="button" class="rounded-md flex items-center px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 bg-white border-gray-300 text-gray-900 hover:bg-gray-50 border"> Modifică </button> </template> <button v-else type="submit" class="rounded-md flex items-center px-3 py-2 text-sm font-semibold shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 bg-blue-500 text-white hover:bg-blue-400" :class="{ 'disabled:cursor-not-allowed': loadingSubmit.last_chance_offer }" :disabled="loadingSubmit.last_chance_offer"> <LoaderTbf class="inline-block mr-2" color="text-white" v-if="loadingSubmit.last_chance_offer" /> Salvează </button> </div> </form> </div> </div> </div> </template> <script> import { userNotificationsStore } from "@/stores/notifications.js"; import { useVuelidate } from "@vuelidate/core"; import { required } from "@vuelidate/validators"; import LoaderTbf from "@/components/public/LoadingTbf.vue"; export default { setup: () => ({ v$: useVuelidate() }), props: { productData: Object, isActive: Boolean, requiredStep: Object, }, components: { LoaderTbf, }, data() { return { realTimeNotifications: userNotificationsStore(), loadingSubmit: { list_offer: false, promotional_offer: false, special_offer: false, last_chance_offer: false, }, canOnlyPreview: { list_offer: false, promotional_offer: false, special_offer: false, last_chance_offer: false, }, onlyPreviewMode: { list_offer: false, promotional_offer: false, special_offer: false, last_chance_offer: false, }, list_offer_name: "", promotional_offer_name: "", promotional_offer_valability: "", promotional_offer_limit: "", special_offer_name: "", special_offer_valability: "", special_offer_limit: "", last_chance_offer_name: "", last_chance_offer_valability: "", last_chance_offer_limit: "", }; }, validations() { return { list_offer_name: { required }, promotional_offer_name: { required }, promotional_offer_valability: { required }, promotional_offer_limit: { required }, special_offer_name: { required }, special_offer_valability: { required }, special_offer_limit: { required }, last_chance_offer_name: { required }, last_chance_offer_valability: { required }, last_chance_offer_limit: { required }, }; }, watch: { "productData.offer"(newValue) { this.populateOffers(newValue); }, }, mounted() { if (this.productData.offer && this.productData.offer.length) { this.populateOffers(this.productData.offer, true); } }, methods: { resetForm(type) { switch (type) { case "list_offer": this.list_offer_name = ""; break; case "promotional_offer": this.promotional_offer_name = ""; this.promotional_offer_valability = ""; this.promotional_offer_limit = ""; break; case "special_offer": this.special_offer_name = ""; this.special_offer_valability = ""; this.special_offer_limit = ""; break; case "last_chance_offer": this.last_chance_offer_name = ""; this.last_chance_offer_valability = ""; this.last_chance_offer_limit = ""; break; } }, submitOffer(type) { if (!this.isActive) { this.realTimeNotifications.addNotification({ type: "error", title: "Formularul trebuie completat în ordine.", description: `Pentru a introduce date în secțiunea <span class="font-medium">Ofertă produs principal</span> e nevoie prima data să completezi începând cu secțiunea <span class="font-medium">${this.requiredStep.step}</span>. ${this.requiredStep.message}`, }); return; } this.v$.$reset(); var formData = {}; switch (type) { case "list_offer": this.v$.list_offer_name.$touch(); if (this.v$.$errors.length) { this.loadingSubmit.list_offer = false; return; } this.loadingSubmit.list_offer = true; formData = { type: "list_offer", list_price: this.list_offer_name, validity: "Nelimitată", limit: "Fără limită", }; this.storeOffer("list_offer", formData); break; case "promotional_offer": this.v$.promotional_offer_name.$touch(); this.v$.promotional_offer_valability.$touch(); this.v$.promotional_offer_limit.$touch(); if (this.v$.$errors.length) { this.loadingSubmit.promotional_offer = false; return; } this.loadingSubmit.promotional_offer = true; formData = { type: "promotional_offer", list_price: this.promotional_offer_name, validity: this.promotional_offer_valability, limit: this.promotional_offer_limit, }; this.storeOffer("promotional_offer", formData); break; case "special_offer": this.v$.special_offer_name.$touch(); this.v$.special_offer_valability.$touch(); this.v$.special_offer_limit.$touch(); if (this.v$.$errors.length) { this.loadingSubmit.special_offer = false; return; } this.loadingSubmit.special_offer = true; formData = { type: "special_offer", list_price: this.special_offer_name, validity: this.special_offer_valability, limit: this.special_offer_limit, }; this.storeOffer("special_offer", formData); break; case "last_chance_offer": this.v$.last_chance_offer_name.$touch(); this.v$.last_chance_offer_valability.$touch(); this.v$.last_chance_offer_limit.$touch(); if (this.v$.$errors.length) { this.loadingSubmit.last_chance_offer = false; return; } this.loadingSubmit.last_chance_offer = true; formData = { type: "last_chance_offer", list_price: this.last_chance_offer_name, validity: this.last_chance_offer_valability, limit: this.last_chance_offer_limit, }; this.storeOffer("last_chance_offer", formData); break; } }, storeOffer(type, formData) { axios .post(`instances/${this.$auth.user().instance.id}/products/${this.productData.id}/add-offer`, formData) .then(({ data }) => { this.$emit("updateProduct", data.data); this.canOnlyPreview[type] = true; this.onlyPreviewMode[type] = true; }) .catch((error) => { var responseError = error.response.data; this.realTimeNotifications.addNotification({ type: "error", title: "TBF ERROR", description: `"${responseError.message}"<br>Vă rugăm să ne contactați și să ne transmiteți eroare. În interesul remedierii acestei probleme cât mai curând posibil.`, }); }) .finally(() => { this.loadingSubmit[type] = false; }); }, populateOffers(offersArray, fromMounted = false) { if (offersArray.length) { offersArray.map((offer) => { switch (offer.type) { case "list_offer": this.list_offer_name = offer.list_price; this.canOnlyPreview.list_offer = true; if (fromMounted) { this.onlyPreviewMode.list_offer = true; } break; case "promotional_offer": this.promotional_offer_name = offer.list_price; this.promotional_offer_valability = offer.validity; this.promotional_offer_limit = offer.limit; this.canOnlyPreview.promotional_offer = true; if (fromMounted) { this.onlyPreviewMode.promotional_offer = true; } break; case "special_offer": this.special_offer_name = offer.list_price; this.special_offer_valability = offer.validity; this.special_offer_limit = offer.limit; this.canOnlyPreview.special_offer = true; if (fromMounted) { this.onlyPreviewMode.special_offer = true; } break; case "last_chance_offer": this.last_chance_offer_name = offer.list_price; this.last_chance_offer_valability = offer.validity; this.last_chance_offer_limit = offer.limit; this.canOnlyPreview.last_chance_offer = true; if (fromMounted) { this.onlyPreviewMode.last_chance_offer = true; } break; } }); } }, changePreviewMode(type) { this.v$.$reset(); switch (type) { case "list_offer": this.onlyPreviewMode.list_offer = !this.onlyPreviewMode.list_offer; var offer = this.productData.offer.find((el) => el.type == "list_offer"); this.list_offer_name = offer.list_price; break; case "promotional_offer": this.onlyPreviewMode.promotional_offer = !this.onlyPreviewMode.promotional_offer; var offer = this.productData.offer.find((el) => el.type == "promotional_offer"); this.promotional_offer_name = offer.list_price; this.promotional_offer_valability = offer.validity; this.promotional_offer_limit = offer.limit; break; case "special_offer": this.onlyPreviewMode.special_offer = !this.onlyPreviewMode.special_offer; var offer = this.productData.offer.find((el) => el.type == "special_offer"); this.special_offer_name = offer.list_price; this.special_offer_valability = offer.validity; this.special_offer_limit = offer.limit; break; case "last_chance_offer": this.onlyPreviewMode.last_chance_offer = !this.onlyPreviewMode.last_chance_offer; var offer = this.productData.offer.find((el) => el.type == "last_chance_offer"); this.last_chance_offer_name = offer.list_price; this.last_chance_offer_valability = offer.validity; this.last_chance_offer_limit = offer.limit; break; } }, }, }; </script>
Back