From ea720745598c162d0269af9fbe679aaa56fc7684 Mon Sep 17 00:00:00 2001
From: Arina Yakovenko <yakovenko_arina@ma-al.com>
Date: Tue, 1 Jul 2025 13:35:37 +0200
Subject: [PATCH] registration

---
 components/CartPopup.vue                |  11 ++-
 components/HeaderBlock.vue              |  30 +++++--
 components/section/CheckoutMain.vue     | 106 ++++++++++++------------
 components/section/RegistrationMain.vue |  25 +++---
 components/ui/CheckoutInput.vue         |   2 +-
 5 files changed, 102 insertions(+), 72 deletions(-)

diff --git a/components/CartPopup.vue b/components/CartPopup.vue
index c57a6e0..b4cdbb3 100644
--- a/components/CartPopup.vue
+++ b/components/CartPopup.vue
@@ -66,10 +66,14 @@
                         </p>
                     </div>
                     <UiButtonArrow @click="() => {
-                        menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 12))
+                        if (userStore.isLogged) {
+                            menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 12))
+                        } else {
+                            menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))
+                        }
                         openCart = false
-                    }" class="w-full" type="fill" :arrow="true" :full="true">{{
-                        $t('to_checkout') }}
+                    }" class="w-full" type="fill" :arrow="true" :full="true">{{ userStore.isLogged ?
+                        $t('to_checkout') : $t('login') }}
                     </UiButtonArrow>
                 </div>
                 <div v-else
@@ -92,6 +96,7 @@ const productStore = useProductStore()
 const openCart = ref(false);
 
 const menuStore = useMenuStore()
+const userStore = useUserStore()
 
 const dropdownRef = ref(null);
 onClickOutside(dropdownRef, () => {
diff --git a/components/HeaderBlock.vue b/components/HeaderBlock.vue
index 4db65a4..d4521d6 100644
--- a/components/HeaderBlock.vue
+++ b/components/HeaderBlock.vue
@@ -4,7 +4,7 @@
     <div class="w-full border-b border-border">
       <UiContainer class="relative">
         <div class="hidden h-[120px] w-full items-center gap-[145px] xl:flex">
-          <ul class="flex items-center justify-between whitespace-nowrap w-full">
+          <ul class="flex items-center justify-between gap-5 whitespace-nowrap w-full">
             <li v-for="(item, index) in menuStore.menu" @click="menuStore.navigateToItem(item)" :key="item.id"
               :class="['hover:text-accent-green-light dark:hover:text-accent-green-dark cursor-pointer text-lg transition-all text-inter',
                 route.params.id == item.id.toString() ? 'text-accent-green-light dark:text-accent-green-dark font-bold underline' : false]">
@@ -18,13 +18,13 @@
           </ClientOnly>
           <div class="w-full flex items-center justify-between">
             <div class="flex items-center gap-[30px]">
+              <p @click="menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 4))" class="cursor-pointer">button</p>
               <div>
                 <i v-if="!userStore.isLogged"
                   @click="menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))"
                   class="uil uil-user text-[31px] cursor-pointer"></i>
                 <div v-else class="py-[6px] px-3 border border-block rounded-sm">
-                  <!-- {{ userStore.user }} -->
-                    Arina Yakovenko
+                  {{ userStore.user }}
                 </div>
               </div>
               <CartPopup />
@@ -35,7 +35,7 @@
             </div>
             <ThemeSwitcher />
             <button @click="menuStore.navigateToShop" :class="[
-              'cursor-pointer transition-all text-inter',
+              'cursor-pointer transition-all text-inter whitespace-nowrap',
               route.params.id == '5'
                 ? 'text-accent-green-light dark:text-accent-green-dark font-bold pb-1 border-b-2'
                 : 'hover:bg-button-hover bg-button text-white font-medium rounded-xl px-6 py-3'
@@ -57,7 +57,14 @@
           </ClientOnly>
           <div class="flex items-center gap-6">
             <div class="flex items-center gap-[30px]">
-              <i class="uil uil-user text-[31px] cursor-pointer"></i>
+              <div>
+                <i v-if="!userStore.isLogged"
+                  @click="menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))"
+                  class="uil uil-user text-[31px] cursor-pointer"></i>
+                <div v-else class="py-[6px] px-3 border border-block rounded-sm">
+                  {{ userStore.user }}
+                </div>
+              </div>
               <CartPopup />
             </div>
             <div class="flex">
@@ -103,7 +110,14 @@
           </ClientOnly>
           <div class="flex items-center gap-6">
             <div class="flex items-center gap-[30px]">
-              <i class="uil uil-user text-[31px] cursor-pointer"></i>
+              <div>
+                <i v-if="!userStore.isLogged"
+                  @click="menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))"
+                  class="uil uil-user text-[31px] cursor-pointer"></i>
+                <div v-else class="py-[6px] px-3 border border-block rounded-sm">
+                  {{ userStore.user }}
+                </div>
+              </div>
               <CartPopup />
             </div>
             <i variant="subtle" block class="uil uil-apps text-[30px] cursor-pointer" @click="open = !open"></i>
@@ -165,6 +179,10 @@
               @click="menuStore.navigateToItem()" />
           </ClientOnly>
           <div class="flex items-center gap-6">
+            <div>
+              <i @click="!userStore.isLogged && menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))"
+                class="uil uil-user text-[30px] cursor-pointer"></i>
+            </div>
             <CartPopup />
             <i variant="subtle" block class="uil uil-apps text-[30px] cursor-pointer" @click="open = !open"></i>
           </div>
diff --git a/components/section/CheckoutMain.vue b/components/section/CheckoutMain.vue
index 606c306..4373104 100644
--- a/components/section/CheckoutMain.vue
+++ b/components/section/CheckoutMain.vue
@@ -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>
diff --git a/components/section/RegistrationMain.vue b/components/section/RegistrationMain.vue
index 3739dc5..76823dc 100644
--- a/components/section/RegistrationMain.vue
+++ b/components/section/RegistrationMain.vue
@@ -7,19 +7,19 @@
         }" />
         <div class="w-full sm:w-[80%] mx-auto my-auto xl:w-full xl:px-12 ">
             <div class="space-25-55">
-                <div class="flex justify-between">
+                <div class="flex flex-wrap-reverse gap-y-4 justify-between">
                     <h2 class="h2-bold-bounded">{{ $t('sign_up') }}</h2>
-                    <button
+                    <button @click="menuStore.navigateToItem()"
                         class="h-[40px] sm:h-[43px] px-[10px] sm:px-[17px] border border-gray dark:border-button-disabled text-gray dark:text-button-disabled hover:bg-gray transition-all hover:text-white rounded-[8px] cursor-pointer">{{
                             $t('back_to_home') }}</button>
                 </div>
                 <div class="space-y-[25px] sm:space-y-[30px]">
-                    <p>Obecné informace</p>
+                    <p>{{ $t('current_information') }}</p>
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-[30px]">
                         <div class="space-y-[15px]">
                             <p class="pl-6">{{ $t('first_name') }}</p>
                             <input :placeholder="$t('first_name')" type="text"
-                                class="text-sm sm:text-xl border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
+                                class="text-sm sm:text-xl border border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
                         </div>
                         <div class="space-y-[15px]">
                             <p class="pl-6">{{ $t('last_name') }}</p>
@@ -29,7 +29,7 @@
                         <div class="space-y-[15px]">
                             <p class="pl-6">{{ $t('email') }}</p>
                             <input :placeholder="$t('email')" type="text"
-                                class="text-sm sm:text-xl border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
+                                class="text-sm sm:text-xl border border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0 focus:border-2" />
                         </div>
                         <div class="space-y-[15px]" ref="dropdownRef">
                             <p class="pl-6">{{ $t('phone') }}</p>
@@ -48,7 +48,7 @@
                                     </div>
 
                                     <div v-if="dropCountry"
-                                        class="mt-2 absolute bg-bg-light dark:bg-bg-dark rounded-[5px] ring-0 cursor-pointer w-full border border-button py-[10px] px-[5px] overflow-hidden">
+                                        class="mt-2 absolute bg-bg-light dark:bg-bg-dark rounded-[5px] ring-0 cursor-pointer w-[130px] sm:w-full border border-button py-[10px] px-[5px] overflow-hidden">
                                         <div class="overflow-y-auto h-[200px] w-full">
                                             <p v-for="item in menuStore.countries" :key="item.iso_code"
                                                 @click="() => { menuStore.selectedPhoneCountry = item; dropCountry = false }"
@@ -62,13 +62,14 @@
                                 </div>
                                 <p class="text-sm sm:text-xl font-normal">{{ menuStore.selectedPhoneCountry.call_prefix
                                     }}</p>
-                                <input :placeholder="$t('phone')" type="text"
+                                <input id="phone" :placeholder="$t('phone')" type="text"
                                     class="text-sm sm:text-xl placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light px-6 h-[50px] sm:h-[67px] w-full focus:outline-none focus:ring-0" />
                             </div>
                         </div>
                         <div class="space-y-[15px]">
                             <p class="pl-6">{{ $t('account_type') }}</p>
-                            <USelect v-model="selectedType" :items="component.front_section_lang[0].data.account_types"
+                            <USelect v-model="selectedType"
+                                :items="component.front_section_lang && component.front_section_lang[0].data.account_types"
                                 value-key="name" :searchable="false" :ui="{
                                     base: 'bg-inherit ring-0 cursor-pointer w-auto focus:ring-0 outline-none focus-visible:ring-0 h-[50px] sm:h-[67px] w-full p-0',
                                     trailing: 'hidden w-full',
@@ -83,7 +84,9 @@
                                     <div
                                         class="flex items-center justify-between gap-2 uppercase text-sm sm:text-xl border-2 border-block placeholder:text-gray dark:placeholder:text-button-disabled text-bg-dark dark:text-bg-light rounded-lg px-6 w-full h-[50px] sm:h-[67px]">
                                         <p class="truncate whitespace-nowrap">
-                                            {{ component.front_section_lang[0].data.account_types.find((item) => item.name === modelValue)?.name }}
+                                            {{component.front_section_lang &&
+                                                component.front_section_lang[0].data.account_types.find((item) => item.name
+                                                    === modelValue)?.name}}
                                         </p>
                                         <span> <i
                                                 class="uil uil-angle-down text-2xl font-light cursor-pointer"></i></span>
@@ -150,7 +153,9 @@ const menuStore = useMenuStore()
 const dropdownRef = ref(null);
 const dropCountry = ref()
 
-const selectedType = ref(props.component.front_section_lang[0].data.account_types[0].name)
+const selectedType = ref()
+if (props.component.front_section_lang)
+    selectedType.value = props.component.front_section_lang[0].data.account_types[0].name
 
 onClickOutside(dropdownRef, () => {
     dropCountry.value = false
diff --git a/components/ui/CheckoutInput.vue b/components/ui/CheckoutInput.vue
index 49d6eff..50d731c 100644
--- a/components/ui/CheckoutInput.vue
+++ b/components/ui/CheckoutInput.vue
@@ -9,7 +9,7 @@
                     :placeholder="placeholder" :disabled="disabled"
                     @input="$emit('update:modelValue', ($event.target as HTMLInputElement).value)"
                     @focus="$emit('focus')" @blur="$emit('blur')"
-                    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" />
+                    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" />
                 <i v-if="disabled"
                     class="uil uil-lock-alt text-[22px] absolute right-6 top-1/2 -translate-y-1/2 text-gray" />