yakovenko_arina/your-gold
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

registration

Browse Source
This commit is contained in:
Arina Yakovenko
2025-07-01 13:35:37 +02:00
parent fd4b122936
commit ea72074559
5 changed files with 102 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
components/section/CheckoutMain.vue
View File

@ -1,49 +1,47 @@
<template>
<UiContainer>
<div class="w-[85%] mx-auto">
<div class="xl:w-[85%] mx-auto">
<div v-if="userStore.isLogged" class="space-25-55">
<div class="w-full flex items-center justify-center">
<div class="flex justify-between">
<div class="flex items-center gap-[25px] text-gray dark:text-button-disabled">
<div class="px-6 py-3 mx-auto">
{{ $t("login") }}
</div>
<div
class="cursor-pointer transition-all text-inter hover:bg-button-hover bg-button text-white font-medium rounded-xl px-6 py-3">
{{ $t("address") }}
</div>
<div class="px-6 py-3 mx-auto">
{{ $t("summary") }}
</div>
<div class="px-6 py-3 mx-auto">
{{ $t("order_placed") }}
</div>
<div class="w-full flex items-center sm:justify-center">
<div
class="flex items-center justify-between sm:justify-center sm:gap-[25px] text-gray dark:text-button-disabled w-full sm:w-auto">
<div class="sm:px-6 sm:py-3 mx-auto">
{{ $t("login") }}
</div>
<div
class="cursor-pointer transition-all text-inter hover:bg-button-hover bg-button text-white font-medium rounded-xl px-3 py-1 sm:px-6 sm:py-3">
{{ $t("address") }}
</div>
<div class="sm:px-6 sm:py-3 mx-auto">
{{ $t("summary") }}
</div>
<div class="hidden sm:block sm:px-6 sm:py-3 sm:mx-auto">
{{ $t("order_placed") }}
</div>
</div>
</div>
<div class="space-y-[30px]">
<div class="space-y-[25px] sm:space-y-[30px]">
<h2 class="h2-bold-bounded">
{{ $t("Account address") }}
</h2>
<div class="flex flex-col gap-[30px] xl:flex-row">
<div class="flex flex-col w-1/2 gap-[30px]">
<div class="flex flex-col gap-[30px] sm:flex-row">
<div class="flex flex-col sm:w-1/2 gap-[25px] sm:gap-[30px]">
<CheckoutInput v-model="checkoutStore.userName" :id="1" disabled>{{ $t("first_name")
}} </CheckoutInput>
}} </CheckoutInput>
<CheckoutInput v-model="checkoutStore.lastName" :id="2" disabled>{{ $t("surname")
}} </CheckoutInput>
}} </CheckoutInput>
<CheckoutInput v-model="checkoutStore.address" :id="3" disabled>{{ $t("address")
}} </CheckoutInput>
}} </CheckoutInput>
<CheckoutInput v-model="checkoutStore.postCode" :id="4" disabled>{{ $t("post_code")
}} </CheckoutInput>
}} </CheckoutInput>
</div>
<div class="flex flex-col w-1/2 gap-[30px]">
<div class="flex flex-col sm:w-1/2 gap-[30px]">
<CheckoutInput v-model="checkoutStore.city" :id="5" disabled>{{ $t("city")
}} </CheckoutInput>
}} </CheckoutInput>
<CheckoutInput v-model="checkoutStore.country" :id="6" disabled>{{ $t("country")
}} </CheckoutInput>
}} </CheckoutInput>
<CheckoutInput v-model="checkoutStore.accountPhoneNumber" :id="7" disabled>{{ $t("phone")
}} </CheckoutInput>
}} </CheckoutInput>
</div>
</div>
</div>
@ -51,23 +49,27 @@
<h2 class="h2-bold-bounded">
{{ $t("Shipping details") }}
</h2>
<div class="relative border border-block rounded-lg px-6 h-[67px] w-full">
<div class="flex items-center gap-[10px]">
<div class="flex items-center gap-[25px]" v-if="!checkoutStore.vUseAccountPhoneNumber">
<div class="flex flex-col gap-2">
<div
:class="['flex items-center gap-[10px] relative border border-block rounded-lg h-[50px] sm:h-[67px] w-full', checkoutStore.vUseAccountPhoneNumber && 'px-6']">
<div class="flex items-center gap-5 sm:gap-[25px]"
v-if="!checkoutStore.vUseAccountPhoneNumber">
<div class="flex flex-col items-start gap-[25px]">
<div ref="dropdownIsoRef"
class="pl-[25px] relative w-full ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0">
class="pl-5 sm:pl-[25px] relative w-full ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0">
<div class="p-0" @click="dropIso = !dropIso">
<div
class="flex items-center gap-2 text-xl font-medium uppercase text-text-light dark:text-text-dark">
{{ checkoutStore.selectedIso.name }} <span> <i
class="flex items-center gap-2 text-base sm:text-xl font-medium uppercase text-text-light dark:text-text-dark">
<p class="hidden sm:block">{{ checkoutStore.selectedIso.name }}</p>
<p class="sm:hidden">{{ checkoutStore.selectedIso.iso_code }}</p>
<span> <i
class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
</div>
</div>
<div v-if="dropIso"
class="absolute w-full mt-2 left-0 bg-bg-light dark:bg-bg-dark rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0 border border-button py-[10px] px-[5px]">
<div class="overflow-auto h-[200px] w-full">
class="absolute w-[130px] sm:w-full mt-2 left-0 bg-bg-light dark:bg-bg-dark rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0 border border-button py-[10px] px-[5px]">
<div class="overflow-auto h-[200px] w-full overflow-x-hidden">
<p @click="() => { checkoutStore.selectedIso = item; dropIso = false; checkoutStore.changePrefix(item.call_prefix as string) }"
class="w-full hover:bg-block dark:hover:bg-button pl-2 py-2 text-base text-text-light dark:text-text-dark rounded-[5px]"
v-for="item in menuStore.countries" :key="item.iso_code">
@ -77,23 +79,23 @@
</div>
</div>
</div>
<p class="text-xl">{{ checkoutStore.currentPrefix }}</p>
<p class="text-sm sm:text-xl border-r pr-[10px] border-block">{{ checkoutStore.currentPrefix }}</p>
</div>
<input
<input id="phone"
:value="checkoutStore.vUseAccountPhoneNumber ? checkoutStore.accountPhoneNumber : checkoutStore.phoneNumber"
:disabled="checkoutStore.vUseAccountPhoneNumber" @input="(e) => {
if (!checkoutStore.vUseAccountPhoneNumber) {
checkoutStore.phoneNumber = (e.target as HTMLInputElement).value;
}
}" type="tel" placeholder="123 xxxx xxx"
class="placeholder:text-xl placeholder:text-gray placeholder:uppercase dark:placeholder:text-bg-light rounded-lg h-[67px] w-full focus:outline-none focus:ring-0 focus:border-0" />
class="placeholder:text-sm sm:placeholder:text-xl placeholder:text-gray placeholder:uppercase dark:placeholder:text-bg-light rounded-lg h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-0" />
</div>
<p v-if="checkoutStore.phoneValidation === false && !checkoutStore.vUseAccountPhoneNumber"
class="text-red-500">Invalid phone number</p>
</div>
<div class="flex items-center gap-2">
<input @change="(event: Event) => {
<input id="checkbox" @change="(event: Event) => {
const target = event.target as HTMLInputElement
target.checked ? checkoutStore.vUseAccountPhoneNumber = true : checkoutStore.vUseAccountPhoneNumber = false
checkoutStore.phoneValidation = null
@ -101,23 +103,23 @@
<p>{{ $t('use_account_phone') }}</p>
</div>
</div>
<div class="space-y-[30px]">
<div class="space-y-[30px] h-full">
<h2 class="h2-bold-bounded">
{{ $t("Select delivery address") }}
</h2>
<div class="flex items-center justify-center gap-[25px] h-[225px]">
<div class="w-[500px] flex flex-col gap-4 h-full">
<div class="flex flex-col md:flex-row items-center justify-center gap-[10px] sm:gap-[25px] md:h-[225px]">
<div class="w-full sm:w-[500px] flex flex-col gap-4 h-full">
<div v-for="(item, index) in checkoutStore.addressesList" :key="index"
:class="['flex h-full flex-col py-[15px] px-[25px] gap-[15px] rounded-lg border-2', checkoutStore.activeAddress === item ? 'border-button' : 'border-block']">
:class="['flex min-h-[200px] md:h-full flex-col py-[15px] px-[25px] gap-[15px] rounded-lg border-2', checkoutStore.activeAddress === item ? 'border-button' : 'border-block']">
<div
:class="['flex flex-col justify-between mt-1 h-full', checkoutStore.activeAddress !== item && 'text-gray dark:text-button-disabled']">
:class="['flex flex-col justify-between gap-[10px] h-full', checkoutStore.activeAddress !== item && 'text-gray dark:text-button-disabled']">
<span>{{ item.address.name }} {{ item.address.surname }}</span>
<span>{{ item.address.street }}</span>
<span>{{ item.address.postcode }} {{ item.address.city }}</span>
<span>{{ item.address.country_iso }}</span>
</div>
<div class="flex items-center gap-2 border-t pt-[15px] border-block">
<input :checked="checkoutStore.activeAddress ? true : false" @change="(event: Event) => {
<input id="checkbox" :checked="checkoutStore.activeAddress ? true : false" @change="(event: Event) => {
const target = event.target as HTMLInputElement
target.checked ? checkoutStore.activeAddress = item : checkoutStore.activeAddress = null;
checkoutStore.isOpen = false;
@ -131,7 +133,7 @@
checkoutStore.isOpen = !checkoutStore.isOpen
checkoutStore.activeAddress = null
}"
:class="['cursor-pointer w-[500px] py-[15px] px-[25px] rounded-lg border-2 flex flex-col items-center justify-center h-full', checkoutStore.isOpen ? 'border-button text-button' : 'text-gray border-block ']">
:class="['cursor-pointer w-full sm:w-[500px] py-[15px] px-[25px] rounded-lg border-2 flex flex-col items-center justify-center min-h-[200px] md:h-full', checkoutStore.isOpen ? 'border-button text-button' : 'text-gray border-block ']">
<h4
:class="['font-inter text-base leading-[150%] uppercase text-[16px] sm:text-[20px] border-b', checkoutStore.isOpen ? 'border-button' : 'border-gray']">
{{ $t("add_new_address") }}
@ -142,7 +144,7 @@
<div v-if="checkoutStore.isOpen"
class="flex flex-col items-center gap-[30px] justify-center w-full">
<div class="flex flex-col gap-[30px] xl:flex-row w-full">
<div class="flex flex-col w-1/2 gap-[30px]">
<div class="flex flex-col sm:w-1/2 gap-[25px] sm:gap-[30px]">
<CheckoutInput v-model="checkoutStore.vNewAddressName" :placeholder="$t('first_name')"
:id="8">{{ $t("first_name") }}
</CheckoutInput>
@ -153,7 +155,7 @@
:id="10">{{ $t("city") }}
</CheckoutInput>
</div>
<div class="flex flex-col w-1/2 gap-[30px]">
<div class="flex flex-col sm:w-1/2 gap-[25px] sm:gap-[30px]">
<CheckoutInput v-model="checkoutStore.vNewAddressSurname" :placeholder="$t('surname')"
:id="11">{{ $t("surname") }}
</CheckoutInput>
@ -163,10 +165,10 @@
</p>
<div ref="dropdownCountryRef"
class="relative w-full ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0">
<div class="border border-block placeholder:text-gray dark:placeholder:text-button-disabled rounded-lg px-6 h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2 flex items-center justify-start"
<div class="border border-block placeholder:text-gray dark:placeholder:text-button-disabled rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2 flex items-center justify-start"
@click="dropCountry = !dropCountry">
<div
class="flex items-center gap-2 text-xl font-medium uppercase text-text-light dark:text-text-dark">
class="flex items-center gap-2 text-base sm:text-xl font-medium uppercase text-text-light dark:text-text-dark">
{{ checkoutStore.vNewAddressCountry ?
checkoutStore.vNewAddressCountry.name : '-' }} <span> <i
class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>