From fd4b12293689f252bde87b8f1a92bfb5658c5cf5 Mon Sep 17 00:00:00 2001 From: Arina Yakovenko Date: Mon, 30 Jun 2025 15:27:46 +0200 Subject: [PATCH] login/checkout --- app.vue | 2 +- assets/toastify-custom.css | 24 +++- components/CartPopup.vue | 8 +- components/CountryCurrencySelector.vue | 8 +- components/HeaderBlock.vue | 18 ++- components/section/CheckoutMain.vue | 140 +++++++++++++++------ components/section/LoginMain.vue | 57 +++------ components/ui/CheckoutInput.vue | 4 +- stores/checkoutStore.ts | 165 +++++++++++++------------ stores/userStore.ts | 105 +++++++++++----- types/checkout.ts | 17 +++ 11 files changed, 336 insertions(+), 212 deletions(-) diff --git a/app.vue b/app.vue index 1c8d689..e27eee2 100644 --- a/app.vue +++ b/app.vue @@ -10,5 +10,5 @@ diff --git a/assets/toastify-custom.css b/assets/toastify-custom.css index 7ca3de9..a7519d3 100644 --- a/assets/toastify-custom.css +++ b/assets/toastify-custom.css @@ -1,3 +1,4 @@ +/* ===== Base toast style (applies to all toasts) ===== */ .Toastify__toast { font-family: var(--font-inter); background-color: var(--color-bg-light); @@ -7,29 +8,44 @@ box-shadow: none; } +/* ===== Base toast style for dark mode ===== */ .dark .Toastify__toast { background-color: var(--color-bg-dark); border: 1px solid var(--color-block); color: #ffffff; } +/* ===== Error toast: red background and white text ===== */ .Toastify__toast--error { - background-color: #dc3545; - color: #fff; + background-color: var(--color-bg-light); } +/* ===== Error toast in dark mode: darker red background ===== */ .dark .Toastify__toast--error { - background-color: #c82333; + background-color: var(--color-bg-dark); } +/* ===== Default progress bar color (used for success and others) ===== */ .Toastify__progress-bar { background-color: var(--color-accent-green-dark); } +/* ===== Error toast: custom progress bar color ===== */ +.Toastify__toast--error .Toastify__progress-bar { + background-color: #dc3545; +} + +/* ===== Success toast: icon color ===== */ .Toastify__toast--success .Toastify__toast-icon svg { fill: var(--color-accent-green-dark); } +/* ===== Error toast: icon color ===== */ +.Toastify__toast--error .Toastify__toast-icon svg { + fill: #dc3545; +} + +/* ===== Close button color in dark mode ===== */ .dark .Toastify__close-button { color: #fff; - } \ No newline at end of file +} \ No newline at end of file diff --git a/components/CartPopup.vue b/components/CartPopup.vue index 5d9e217..c57a6e0 100644 --- a/components/CartPopup.vue +++ b/components/CartPopup.vue @@ -65,9 +65,11 @@ {{ productStore.cart.total_value }}

- {{ - $t('to_checkout') }} + {{ + $t('to_checkout') }}

{{ $t("country") }}

+ class="w-full ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0 space-y-1">
{{ $session.currentCountryIso }}
+ class="bg-bg-light dark:bg-bg-dark rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 ring-0 cursor-pointer w-full focus:ring-0 outline-none focus-visible:ring-0 border border-button py-[10px] px-[5px]">

{{ $t("currency") }}

+ class="w-full ring-0 cursor-pointer focus:ring-0 outline-none focus-visible:ring-0 space-y-1">
{{ $session.currentCurrencyIso }}
+ class="bg-bg-light dark:bg-bg-dark rounded-[5px] data-highlighted:not-data-disabled:before:bg-button/50 ring-0 cursor-pointer w-full focus:ring-0 outline-none focus-visible:ring-0 border border-button py-[10px] px-[5px]">

- +
+ +
+ + Arina Yakovenko +
+
@@ -74,7 +81,7 @@ {{ item.front_menu_lang[0].name }}
- + @@ -119,7 +126,7 @@ {{ item.front_menu_lang[0].name }}
- + @@ -179,7 +186,7 @@ {{ item.front_menu_lang[0].name }}
- + @@ -216,6 +223,7 @@ import CountryCurrencySelector from "./CountryCurrencySelector.vue"; import LangSwitcher from "./LangSwitcher.vue"; const menuStore = useMenuStore(); +const userStore = useUserStore(); const productStore = useProductStore(); const open = ref(false); const colorMode = useColorMode(); diff --git a/components/section/CheckoutMain.vue b/components/section/CheckoutMain.vue index 57f270c..606c306 100644 --- a/components/section/CheckoutMain.vue +++ b/components/section/CheckoutMain.vue @@ -1,6 +1,6 @@
@@ -29,21 +29,21 @@
{{ $t("first_name") - }} + }} {{ $t("surname") - }} + }} {{ $t("address") - }} + }} {{ $t("post_code") - }} + }}
{{ $t("city") - }} + }} {{ $t("country") - }} - {{ $t("phone") - }} + }} + {{ $t("phone") + }}
@@ -51,14 +51,52 @@

{{ $t("Shipping details") }}

-
- +
+
+
+
+
+
+
+ {{ checkoutStore.selectedIso.name }} +
+
+ +
+
+

+ {{ item?.name }} +

+
+
+
+
+

{{ checkoutStore.currentPrefix }}

+
+ +
+

Invalid phone number

+

{{ $t('use_account_phone') }}

@@ -119,30 +157,55 @@ {{ $t("surname") }} - {{ $t("country") }} - +
+

+ {{ $t("country") }} +

+
+
+
+ {{ checkoutStore.vNewAddressCountry ? + checkoutStore.vNewAddressCountry.name : '-' }} +
+
+ +
+
+

+ {{ item?.name }} +

+
+
+
+
{{ $t("post_code") }}
-
+
{{ $t("Remember to select a shipping address") }}
-
- +
- @@ -158,39 +221,34 @@
- +
diff --git a/components/section/LoginMain.vue b/components/section/LoginMain.vue index 1399901..b513070 100644 --- a/components/section/LoginMain.vue +++ b/components/section/LoginMain.vue @@ -41,59 +41,37 @@
- -