Merge pull request 'calculator and other cleaning' (#4) from linter into main

Reviewed-on: #4

components/CartPopup.vue

@@ -2,9 +2,9 @@
   <div ref="dropdownRef">
     <div class="relative cursor-pointer" @click="openCart = !openCart">
       <i class="uil uil-shopping-cart text-[31px]"></i>
-      <div v-if="checkoutStore.products && checkoutStore.products.length > 0"
+      <div v-if="checkoutStore.totalNumberOfProducts"
            class="w-[15px] h-[15px] rounded-full bg-accent-green-light dark:bg-accent-green-light text-white flex items-center justify-center text-[9px] absolute top-1 right-0">
-        {{ checkoutStore.products.length }}
+        {{ checkoutStore.totalNumberOfProducts }}
       </div>
     </div>
     <div v-if="openCart"
@@ -69,10 +69,10 @@
           </div>
           <UiButtonArrow class="w-full" type="fill" :arrow="true" :full="true" @click="() => {
             if (userStore.isLogged) {
-              menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 12))
+              menuStore.navigateToItem(menuStore.menuItems?.find((item: any) => item.id === 12))
             }
             else {
-              menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))
+              menuStore.navigateToItem(menuStore.menuItems?.find((item: any) => item.id === 11))
             }
             openCart = false
           }">

components/HeaderBlock.vue

@@ -23,7 +23,7 @@
             <div class="flex items-center gap-[30px]">
               <div>
                 <i v-if="!userStore.isLogged" class="uil uil-user text-[31px] cursor-pointer"
-                   @click="menuStore.navigateToItem(menuStore.menuItems?.find((item) => item.id === 11))"></i>
+                   @click="menuStore.navigateToItem(menuStore.menuItems?.find((item:any) => item.id === 11))"></i>
                 <div v-else class="py-[6px] px-3 border border-block rounded-sm">
                   {{ userStore.user }}
                 </div>
@@ -60,10 +60,7 @@
             <div class="flex items-center gap-[30px]">
               <div>
                 <i v-if="!userStore.isLogged" class="uil uil-user text-[31px] cursor-pointer" @click="
-                  menuStore.navigateToItem(
+                  menuStore.navigateToItem(menuStore.menuItems?.find((item:any) => item.id === 11)) " />
-                    menuStore.menuItems?.find((item) => item.id === 11),
-                  )
-                " />
                 <div v-else class="py-[6px] px-3 border border-block rounded-sm">
                   {{ userStore.user }}
                 </div>
@@ -122,10 +119,7 @@
             <div class="flex items-center gap-[30px]">
               <div>
                 <i v-if="!userStore.isLogged" class="uil uil-user text-[31px] cursor-pointer" @click="
-                  menuStore.navigateToItem(
+                  menuStore.navigateToItem(menuStore.menuItems?.find((item:any) => item.id === 11)) " />
-                    menuStore.menuItems?.find((item) => item.id === 11),
-                  )
-                " />
                 <div v-else class="py-[6px] px-3 border border-block rounded-sm">
                   {{ userStore.user }}
                 </div>
@@ -195,12 +189,7 @@
           </ClientOnly>
           <div class="flex items-center gap-6">
             <div>
-              <i class="uil uil-user text-[30px] cursor-pointer" @click="
+              <i class="uil uil-user text-[30px] cursor-pointer" @click=" !userStore.isLogged && menuStore.navigateToItem(menuStore.menuItems?.find((item:any) => item.id === 11)) " />
-                !userStore.isLogged
-                  && menuStore.navigateToItem(
-                    menuStore.menuItems?.find((item) => item.id === 11),
-                  )
-              " />
             </div>
             <CartPopup />
             <i variant="subtle" block class="uil uil-apps text-[30px] cursor-pointer" @click="open = !open" />

components/section/FooterBlock.vue

@@ -12,7 +12,7 @@
               {{ item }}
             </div>
           </div>
-          <a href="/lei_certificate_aurrie.pdf" target="_blank" rel="noopener noreferrer">{{ $t("Footer.Lei") }}</a>
+          <a href="/lei_certificate_aurrie.pdf" target="_blank" rel="noopener noreferrer">{{ $t("footer_lei") }}</a>
         </div>
 
         <div v-for="(section, index) in docs" :key="index" class="flex flex-col gap-[25px] sm:gap-8 max-w-[280px]">

components/section/InvestmentBlock.vue

@@ -0,0 +1,248 @@
+<template>
+  <UiContainer class="space-25-75">
+    <div>
+      <div class="flex flex-col w-full">
+        <div class="relative flex flex-col">
+          <h1 class="text-3xl font-bold">
+            {{ component.front_section_lang.at(0).data.drawing_up_a_proposal_for_asave_contract }}
+          </h1>
+          <div class="flex flex-wrap flex-1">
+            <!-- left -->
+            <div class="w-full md:w-1/2 p-4">
+              <h3 class="w-full border-b my-2">
+                {{ component.front_section_lang.at(0).data.simulation_of_the_contract_proposal }}
+              </h3>
+              <p>{{ component.front_section_lang.at(0).data.monthly_savings }}</p>
+              <div class="my-8">
+                <div class="text-2xl">
+                  {{ formater.price(store.monthlySavings) }}
+                </div>
+                <input v-model="store.monthlySavings" type="range" :max="store.getMaxAmount" :min="store.getMinAmount" class="w-full accent-button cursor-pointer" @change="investmentStore.getCalculator()">
+              </div>
+              <div class="my-8">
+                <div class="text-2xl">
+                  {{ store.storagePeriod }}
+                </div>
+                <input v-model="store.storagePeriod" type="range" :max="investmentStore.maxYear" :min="investmentStore.minYear" class="w-full accent-button cursor-pointer" @change="investmentStore.getCalculator()">
+              </div>
+            </div>
+            <!-- right -->
+            <div class="w-full md:w-1/2 p-4">
+              <h3 class="w-full border-b my-2">
+                {{ component.front_section_lang.at(0).data.details_of_the_contract_proposal }}
+              </h3>
+              <p class="flex justify-between my-4">
+                <span>{{ component.front_section_lang.at(0).data.current_price_per_bar }}</span>
+                <span>{{ formater.price(investmentStore.calculationResult.calculator_output.investment_piece.price) }}</span>
+              </p>
+
+              <p class="flex justify-between my-4">
+                <span>{{ component.front_section_lang.at(0).data.money_for_spend }}</span>
+                <span>{{ formater.price(investmentStore.calculationResult.calculator_output.money_spent) }}</span>
+              </p>
+              <p class="flex justify-between my-4">
+                <span>{{ component.front_section_lang.at(0).data.weight_per_bar }}</span>
+                <span>{{ getWeight }}</span>
+              </p>
+              <p class="flex justify-between my-4">
+                <span>{{ component.front_section_lang.at(0).data.count }}</span>
+                <span>{{ investmentStore.calculationResult.calculator_output.max_pieces_in_package }}</span>
+              </p>
+
+              <p class="flex justify-between my-4">
+                <span>{{ component.front_section_lang.at(0).data.contract_type }}</span>
+                <span>50/50</span>
+              </p>
+              <p class="flex justify-between my-4">
+                <span>{{ component.front_section_lang.at(0).data.special_fee }}</span>
+                <span>{{ formater.price(investmentStore.calculationResult.calculator_output.total_input_price_increase) }}</span>
+              </p>
+            </div>
+          </div>
+        </div>
+        <!-- next section -->
+        <div class="flex flex-wrap">
+          <!-- left -->
+          <div class="w-full md:w-1/2 p-4">
+            <h3 class="w-full border-b my-2">
+              {{ component.front_section_lang.at(0).data.graphic_simulation_of_future_profits }}
+            </h3>
+            <p class="my-4 md:my-12">
+              <img :src="`data:image/svg+xml;base64,${investmentStore.calculationResult.chart}`" alt="" class="bg-white rounded-2xl p-2">
+            </p>
+          </div>
+          <!-- right -->
+          <div class="w-full md:w-1/2 p-4">
+            <h3 class="w-full border-b my-2">
+              {{ component.front_section_lang.at(0).data.summary_of_the_contract_proposal }}
+            </h3>
+
+            <p class="flex justify-between my-4">
+              <span>{{ component.front_section_lang.at(0).data.save }}</span>
+              <span>{{ component.front_section_lang.at(0).data.expected_value_of_savings }}</span>
+            </p>
+            <p class="flex justify-between my-4">
+              <span></span>
+              <span class="font-bold text-2xl">{{ formater.price(investmentStore.calculationResult.calculator_output.total_investement_value)
+              }}</span>
+            </p>
+            <div class="flex flex-col items-center">
+              <img :src="`/api/public/file/${investmentStore.calculationResult.calculator_output.investment_piece.cover_picture_uuid}_m.webp`" :alt="investmentStore.calculationResult.calculator_output.investment_piece.name" class="object-contain object-center w-48 max-h-64">
+              <span class="my-2 text-sm">{{ investmentStore.calculationResult.calculator_output.investment_piece.name }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <hr class="my-4">
+      <div class="flex w-full flex-wrap justify-center md:justify-end mt-8">
+        <a :href="getPrintLink" target="_blank" class="my-2 mx-4">
+          <UiButtonArrow :arrow="true" type="fill" class="mx-auto sm:m-0">
+            {{ component.front_section_lang.at(0).data.print }}
+          </UiButtonArrow>
+        </a>
+        <nuxt-link :to="getInvestLink" class="my-2 mx-4">
+          <UiButtonArrow :arrow="true" type="fill" class="mx-auto sm:m-0">
+            {{ component.front_section_lang.at(0).data.invest }}
+          </UiButtonArrow>
+        </nuxt-link>
+      </div>
+    </div>
+  </UiContainer>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  component: {
+    id: number
+    name: string
+    img: string[]
+    component_name: string
+    is_no_lang: boolean
+    page_name: string
+    front_section_lang: {
+      data: {
+        drawing_up_a_proposal_for_asave_contract: string
+        simulation_of_the_contract_proposal: string
+        monthly_savings: string
+        details_of_the_contract_proposal: string
+        current_price_per_bar: string
+        money_for_spend: string
+        weight_per_bar: string
+        count: string
+        contract_type: string
+        special_fee: string
+        graphic_simulation_of_future_profits: string
+        summary_of_the_contract_proposal: string
+        save: string
+        expected_value_of_savings: string
+        print: string
+        invest: string
+      }
+      id_front_section: number
+      id_lang: number
+    }[]
+  }
+}>()
+
+const investmentStore = useInvestmentStore()
+const store = useStore()
+const formater = useFormater(useNuxtApp())
+const userStore = useUserStore()
+const router = useRouter()
+const menuStore = useMenuStore()
+
+await investmentStore.getCalculator()
+
+const getWeight = computed(() => {
+  return investmentStore.calculationResult.calculator_output.investment_piece.features.find(feature => feature.feature_id === 1)?.value
+})
+
+const getPrintLink = computed(() => {
+  const query = new URLSearchParams({
+    monthly_deposit: String(store.monthlySavings),
+    years: String(store.storagePeriod),
+    grid: 'false',
+    legend: 'false',
+    title: 'false',
+    ingots_bought_dots: 'true',
+    draw_linear: 'true',
+    annotations: 'false',
+    show_real_value: 'false',
+    series_stroke_width: '1',
+  })
+
+  return `/api/public/plan-prediction/easy/plan-proposal?${query.toString()}`
+})
+
+const getInvestLink = computed(() => {
+  if (userStore.isLogged) {
+    return { path: '/golden-panel/save-contract' }
+  }
+  return { name: router.currentRoute.value.name, params: { id: menuStore.getLoginMenu()?.id, slug: menuStore.getLoginMenu()?.front_menu_lang.at(0)?.link_rewrite }, query: { to: btoa('/golden-panel/save-contract') } }
+})
+
+/*
+INSERT INTO `front_page` (`created_at`, `updated_at`, `name`, `is_default`, `id`) VALUES ('2025-06-25 11:07:28.000','2025-06-25 11:07:28.000','investment-calculator','0','16');
+INSERT INTO `front_menu` (`created_at`, `updated_at`, `active`, `position_id`, `id_front_page`, `is_default`, `is_root`, `id`) VALUES ('2025-06-25 11:07:28.000','2025-06-25 11:07:28.000','1','1','16','0','0','16');
+INSERT INTO `front_menu_lang` (`name`, `id_lang`, `id_front_menu`, `link_rewrite`) VALUES ('investment','2','16','Investment');
+INSERT INTO `front_menu_lang` (`link_rewrite`, `id_front_menu`, `id_lang`, `name`) VALUES ('inwestycja','16','1','Inwestycja');
+INSERT INTO `front_menu_lang` (`name`, `id_lang`, `id_front_menu`, `link_rewrite`) VALUES ('investice','3','16','Investice');
+INSERT INTO `front_section` (`id`, `created_at`, `updated_at`, `name`, `img`, `component_name`, `is_no_lang`) VALUES ('35','2025-06-25 11:07:28.000','2025-06-25 11:07:28.000','investment-calculator','[]','InvestmentBlock','0');
+INSERT INTO `front_page_section` (`id_front_page`, `id_position`, `id_front_section`) VALUES ('16','1','35');
+INSERT INTO `front_page_section` (`id_front_page`, `id_position`, `id_front_section`) VALUES ('16','2','4');
+INSERT INTO `front_section_lang` (`data`, `id_front_section`, `id_lang`) VALUES ('{
+  "drawing_up_a_proposal_for_asave_contract": "Przygotowanie propozycji umowy SAVE",
+  "simulation_of_the_contract_proposal": "Symulacja propozycji umowy",
+  "monthly_savings": "Miesięczne oszczędności",
+  "details_of_the_contract_proposal": "Szczegóły propozycji umowy",
+  "current_price_per_bar": "Aktualna cena za sztabkę",
+  "money_for_spend": "Kwota do wydania",
+  "weight_per_bar": "Waga jednej sztabki",
+  "count": "Liczba",
+  "contract_type": "Typ umowy",
+  "special_fee": "Opłata specjalna",
+  "graphic_simulation_of_future_profits": "Graficzna symulacja przyszłych zysków",
+  "summary_of_the_contract_proposal": "Podsumowanie propozycji umowy",
+  "save": "Zaoszczędzona kwota",
+  "expected_value_of_savings": "Oczekiwana wartość oszczędności",
+  "print": "Drukuj",
+  "invest": "Zainwestuj"
+}', '35', '1');
+INSERT INTO `front_section_lang` (`data`, `id_front_section`, `id_lang`) VALUES ('{
+  "drawing_up_a_proposal_for_asave_contract": "Drawing up a proposal for a SAVE contract",
+  "simulation_of_the_contract_proposal": "Simulation of the contract proposal",
+  "monthly_savings": "Monthly savings",
+  "details_of_the_contract_proposal": "Details of the contract proposal",
+  "current_price_per_bar": "Current price per bar",
+  "money_for_spend": "Money for spend",
+  "weight_per_bar": "Weight per bar",
+  "count": "Count",
+  "contract_type": "Contract type",
+  "special_fee": "Special fee",
+  "graphic_simulation_of_future_profits": "Graphic simulation of future profits",
+  "summary_of_the_contract_proposal": "Summary of the contract proposal",
+  "save": "Saved Amount",
+  "expected_value_of_savings": "Expected value of savings",
+  "print": "Print",
+  "invest": "Invest"
+}', '35', '2');
+INSERT INTO `front_section_lang` (`data`, `id_front_section`, `id_lang`) VALUES ('{
+  "drawing_up_a_proposal_for_asave_contract": "Vypracování návrhu smlouvy SAVE",
+  "simulation_of_the_contract_proposal": "Simulace návrhu smlouvy",
+  "monthly_savings": "Měsíční úspory",
+  "details_of_the_contract_proposal": "Podrobnosti návrhu smlouvy",
+  "current_price_per_bar": "Aktuální cena za slitku",
+  "money_for_spend": "Částka k utracení",
+  "weight_per_bar": "Hmotnost slitku",
+  "count": "Počet",
+  "contract_type": "Typ smlouvy",
+  "special_fee": "Speciální poplatek",
+  "graphic_simulation_of_future_profits": "Grafická simulace budoucích zisků",
+  "summary_of_the_contract_proposal": "Shrnutí návrhu smlouvy",
+  "save": "Ušetřená částka",
+  "expected_value_of_savings": "Očekávaná hodnota úspor",
+  "print": "Tisk",
+  "invest": "Investovat"
+}', '35', '3');
+ */
+</script>

components/section/InvestmentZone.vue

@@ -73,22 +73,11 @@
           <div class="flex flex-col gap-4">
             <div class="flex justify-between">
               <p>{{ $t("monthly_savings") }}</p>
-              <p
+              <p class="text-accent-green-light dark:text-accent-green-dark font-bold">
-                class="text-accent-green-light dark:text-accent-green-dark font-bold"
+                {{ formater.price(store.monthlySavings) }}
-              >
-                {{ store.monthlySavings }}
-                {{ menuStore.selectedCurrency?.sign }}
               </p>
             </div>
-            <input
+            <input v-model="store.monthlySavings" type="range" :max="store.getMaxAmount" :min="store.getMinAmount" class="w-full accent-button cursor-pointer" @change="store.getCalculator()">
-              v-model="store.monthlySavings"
-              type="range"
-              max="600"
-              :min="store.minValue"
-              class="w-full accent-button cursor-pointer"
-              @mouseup="store.getCalculator()"
-              @touchend="store.getCalculator()"
-            >
           </div>
           <div class="flex flex-col gap-4">
             <div class="flex justify-between">
@@ -99,14 +88,7 @@
                 {{ store.storagePeriod }}
               </p>
             </div>
-            <input
+            <input v-model="store.storagePeriod" type="range" max="20" class="w-full accent-button cursor-pointer" @change="store.getCalculator()">
-              v-model="store.storagePeriod"
-              type="range"
-              max="20"
-              class="w-full accent-button cursor-pointer"
-              @mouseup="store.getCalculator()"
-              @touchend="store.getCalculator()"
-            >
           </div>
         </div>
         <div
@@ -117,17 +99,14 @@
             <h2
               class="h2-bold-bounded text-accent-green-light dark:text-accent-green-dark"
             >
-              {{ menuStore.selectedCurrency?.sign }} {{ store.totalInvestment }}
+              {{ formater.price(store.totalInvestment) }}
             </h2>
           </div>
-          <UiButtonArrow :arrow="true"
+          <nuxt-link :to="{ name: `id-slug___${$i18n.locale}`, params: { id: menuStore.getInvestmentCalculatorMenu()?.id, slug: menuStore.getInvestmentCalculatorMenu()?.front_menu_lang.at(0)?.link_rewrite } }">
-                         type="fill"
+            <UiButtonArrow :arrow="true" type="fill" class="mx-auto sm:m-0">
-                         class="mx-auto sm:m-0"
+              {{ component.front_section_lang[0].data.button }}
-          >
+            </UiButtonArrow>
-            {{
+          </nuxt-link>
-              component.front_section_lang[0].data.button
-            }}
-          </UiButtonArrow>
         </div>
       </div>
     </div>
@@ -168,9 +147,11 @@ defineProps<{
 
 const store = useStore()
 const menuStore = useMenuStore()
+const { $session } = useNuxtApp()
 
 const itemCount = ref(4)
 const productStore = useProductStore()
+const formater = useFormater(useNuxtApp())
 
 async function updateItemCount() {
   const width = window.innerWidth
@@ -185,6 +166,10 @@ watch(itemCount, async () => {
   await productStore.getList(itemCount.value)
 })
 
+watch($session.cookieData, async () => {
+  await productStore.getList(itemCount.value)
+})
+
 onMounted(async () => {
   await updateItemCount()
   window.addEventListener('resize', updateItemCount)

components/section/MainProducts.vue

@@ -43,6 +43,7 @@ defineProps<{
 const menuStore = useMenuStore()
 const itemCount = ref(4)
 const productStore = useProductStore()
+const { $session } = useNuxtApp()
 
 async function updateItemCount() {
   const width = window.innerWidth
@@ -57,6 +58,10 @@ watch(itemCount, async () => {
   await productStore.getList(itemCount.value)
 })
 
+watch($session.cookieData, async () => {
+  await productStore.getList(itemCount.value)
+})
+
 onMounted(async () => {
   await updateItemCount()
   window.addEventListener('resize', updateItemCount)

components/section/Product.vue

@@ -29,7 +29,7 @@
           <div class="flex items-center justify-between">
             <p
               class="text-accent-green-light font-inter text-[12px] sm:text-[21px] md:text-2xl leading-[150%] font-bold">
-              {{ product.formatted_price }}
+              {{ formater.price(product.price) }}
             </p>
             <button
               class="w-[22px] h-[22px] sm:w-9 sm:h-9 md:w-12 md:h-12 rounded-[5px] text-bg-light sm:rounded-xl bg-button cursor-pointer hover:bg-button-hover transition-all flex items-center justify-center p-1"
@@ -57,7 +57,7 @@ defineProps<{ product: Product }>()
 
 const productStore = useProductStore()
 const menuStore = useMenuStore()
-
+const formater = useFormater(useNuxtApp())
 function handleImageError(event: Event) {
   const img = event.target as HTMLImageElement
   img.src = '/photo.svg'

components/section/ProductBlock.vue

@@ -13,7 +13,7 @@
         </button>
       </div>
     </transition>
-    <div class="space-y-10 sm:space-y-[75px]">
+    <div ref="productBlockRef" class="space-y-10 sm:space-y-[75px]">
       <div class="flex flex-col items-start xl:flex-row gap-[40px] sm:gap-[100px] border-b-2 border-block pb-[25px]">
         <!-- images block -->
         <button
@@ -70,14 +70,14 @@
                   }}</span>
                 </p>
               </div>
-              <div class="mx-auto sm:mx-0 group flex cursor-pointer items-center justify-start gap-2 whitespace-nowrap">
+              <div class="mx-auto sm:mx-0 group flex cursor-pointer items-center justify-start gap-2 whitespace-nowrap" @click="productStore.incrementCartItem(product.id)">
                 <button
                   class="h-[40px] cursor-pointer min-w-40 rounded-[10px] px-[22px] transition-all sm:h-[50px] md:h-[65px] md:rounded-[15px] md:px-[42px] bg-button text-text-dark group-hover:bg-button-hover">
                   Add to cart
                 </button>
                 <div :disabled="!product.sale_active" class="
               flex h-[40px] w-[40px] items-center justify-center rounded-[10px] p-2.5 transition-all sm:h-[50px] sm:w-[50px] md:h-[65px] md:w-[65px] md:rounded-[15px] bg-button text-text-dark group-hover:bg-button-hover
-            " @click="productStore.incrementCartItem(product.id)">
+            ">
                   <i class="uil uil-shopping-cart text-[23px] sm:text-[33px]"></i>
                 </div>
               </div>
@@ -115,7 +115,7 @@
                   .link_rewrite,
               },
               query: { prod_id: item?.id, name: item?.link_rewrite },
-            }">
+            }" @click.stop.prevent="scrollToTop">
               <div
                 class="w-[200px] sm:w-[260px] md:w-[290px] sm:py-5 sm:px-[15px] py-[15px] px-[10px] bg-block rounded-2xl flex flex-col items-center gap-5 sm:gap-7 h-full">
                 <img :src="`/api/public/file/${item.cover_picture_uuid}.webp`" alt="pics"
@@ -176,10 +176,11 @@ const menuStore = useMenuStore()
 const { $session } = useNuxtApp()
 const productStore = useProductStore()
 const dropdownRef = ref()
+const productBlockRef = ref()
 
-// const addToCart = (p: ProductItem) => {
+function scrollToTop() {
-//     alert('add to cart product: ' + p.name)
+  productBlockRef.value?.scrollIntoView({ behavior: 'smooth' })
-// }
+}
 
 const formatPrice = (p: number) => {
   const formatdecimal = new Intl.NumberFormat(

components/section/RegistrationMain.vue

@@ -94,12 +94,7 @@
                   <div
                     class="flex items-center justify-between gap-2 uppercase 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 w-full h-[50px] sm:h-[67px]">
                     <p class="truncate whitespace-nowrap">
-                      {{
+                      {{ component.front_section_lang.at(0).data.account_types.find((item: any) => 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" /></span>

components/section/ShopMain.vue

@@ -350,10 +350,7 @@ async function loadMoreProducts() {
 
   qParams.append('p', `${page.value}`)
   qParams.append('elems', `${elems.value}`)
-  qParams.append(
+  qParams.append('features', selectedFilters.value.length > 0 ? `${selectedFilters.value}` : '')
-    'features',
-    selectedFilters.value.length > 0 ? selectedFilters.value : null,
-  )
 
   try {
     const { data } = await useMyFetch<GenericResponseItems<ProductType[]>>(
@@ -395,7 +392,7 @@ const changeCategory = (item: CategoryItem) => {
   categoryId.value = item.id
 }
 
-watch(selectedFilters, async (newQuestion: string) => {
+watch(selectedFilters, async (newQuestion) => {
   if (newQuestion) {
     page.value = 1
     reachedEnd.value = false
@@ -407,7 +404,7 @@ watch(selectedFilters, async (newQuestion: string) => {
     qParams.append('elems', `${elems.value}`)
     qParams.append(
       'features',
-      selectedFilters.value.length > 0 ? selectedFilters.value : null,
+      selectedFilters.value.length > 0 ? `${selectedFilters.value}` : '',
     )
 
     try {
@@ -443,7 +440,7 @@ watch(categoryId, async (newCategoryId) => {
     qParams.append('elems', `${elems.value}`)
     qParams.append(
       'features',
-      selectedFilters.value.length > 0 ? selectedFilters.value : null,
+      selectedFilters.value.length > 0 ? `${selectedFilters.value}` : '',
     )
 
     try {

composables/useFormater.ts

@@ -0,0 +1,30 @@
+import type { NuxtApp } from '#app'
+
+export const useFormater = (nuxtApp: NuxtApp) => {
+  return new Formater(nuxtApp)
+}
+
+class Formater {
+  private session
+  constructor(nuxtApp: NuxtApp) {
+    const { $session } = nuxtApp
+    this.session = $session
+  }
+
+  price(p: number) {
+    const formatdecimal = new Intl.NumberFormat(
+      this.session.cookieData.value.country.iso_code,
+      {
+        style: 'decimal',
+        maximumFractionDigits: this.session.cookieData.value.currency.precision,
+        minimumFractionDigits: this.session.cookieData.value.currency.precision,
+      },
+    )
+    if (this.session.cookieData.value.currency.suffix) {
+      return this.session.cookieData.value.currency.sign + ' ' + formatdecimal.format(p)
+    }
+    else {
+      return formatdecimal.format(p) + ' ' + this.session.cookieData.value.currency.sign
+    }
+  }
+}

pages/[id]/[slug].vue

@@ -15,10 +15,6 @@ import ScrollTrigger from 'gsap/ScrollTrigger'
 
 gsap.registerPlugin(ScrollTrigger)
 
-watch(useColorMode(), (color) => {
-  console.log(color)
-})
-
 onMounted(() => {
   const anim = gsap.fromTo(
     'h1',

plugins/02_initLoad.ts

@@ -5,6 +5,8 @@ export default defineNuxtPlugin(async () => {
   await menuStore.loadMenu()
   await menuStore.getLocales()
   const store = useStore()
-  await store.getMinValue()
+  await store.getMinMaxRange()
   await store.getCalculator()
+  const userStore = useUserStore()
+  await userStore.checkIsLogged()
 })

stores/checkoutStore.ts

@@ -21,6 +21,7 @@ export const useCheckoutStore = defineStore('checkoutStore', () => {
   const vNote = ref('')
   const legalValidation = ref(false)
   const termsValidation = ref(false)
+  const totalNumberOfProducts = ref(0)
 
   // get address list
   const addressesList = ref<AddressesList[]>()
@@ -265,6 +266,13 @@ export const useCheckoutStore = defineStore('checkoutStore', () => {
         },
       )
 
+      totalNumberOfProducts.value = 0
+      if (data.cart_items && Array.isArray(data.cart_items)) {
+        for (const item of data.cart_items) {
+          totalNumberOfProducts.value = totalNumberOfProducts.value + item.quantity
+        }
+      }
+
       products.value = data.cart_items
       fullPrice.value = data.total_value
       fullProductsPrice.value = data.total_value
@@ -551,6 +559,7 @@ export const useCheckoutStore = defineStore('checkoutStore', () => {
     paymentMethods,
     currentPayment,
     fullAddress,
+    totalNumberOfProducts,
 
     vLegal,
     vTerms,

stores/investmentStore.ts

@@ -0,0 +1,49 @@
+// import { useMyFetch } from '#imports'
+
+import type { CalculatorOutput, GenericResponse } from '~/types'
+
+export const useInvestmentStore = defineStore('investmentStore', () => {
+  const store = useStore()
+  // const monthlySavings = ref(store.monthlySavings || 100)
+  // const yearsNumber = ref(store.storagePeriod || 10)
+
+  const calculationResult = ref<CalculatorOutput>({} as CalculatorOutput)
+
+  const minYear = 1
+  const maxYear = 20
+
+  const { $session: session } = useNuxtApp()
+  watch(session.cookieData, async () => {
+    await getCalculator()
+  }, { deep: true })
+
+  const getCalculator = async () => {
+    const query = new URLSearchParams({
+      monthly_deposit: String(store.monthlySavings),
+      years: String(store.storagePeriod),
+      format: 'svg',
+      grid: 'false',
+      legend: 'false',
+      title: 'false',
+      ingots_bought_dots: 'true',
+      draw_linear: 'true',
+      annotations: 'false',
+      show_real_value: 'false',
+      series_stroke_width: '1',
+      // colors: '#004f3d,#004f3d,#004f3d,#004f3d,#000',
+      colors: '#9a7f62,#9a7f62,#9a7f62,#9a7f62,#000',
+    })
+
+    const { data } = await useMyFetch<GenericResponse<CalculatorOutput>>(`/api/public/plan-prediction/easy/chart?${query.toString()}`)
+    calculationResult.value = data
+  }
+
+  return {
+    // monthlySavings,
+    // yearsNumber,
+    minYear,
+    maxYear,
+    calculationResult,
+    getCalculator,
+  }
+})

stores/menuStore.ts

@@ -171,6 +171,10 @@ export const useMenuStore = defineStore('menuStore', () => {
     return menuItems.value?.find(item => item.id === 15)
   }
 
+  function getInvestmentCalculatorMenu() {
+    return menuItems.value?.find(item => item.id === 16)
+  }
+
   const getFirstImage = (size: 'l' | 'm' | 's' = 'm', needbaseurl: boolean) => {
     const req = useRequestEvent()
     const url = useRequestURL()
@@ -273,7 +277,7 @@ export const useMenuStore = defineStore('menuStore', () => {
     async () => {
       await getLocales()
       await loadMenu()
-      await store.getMinValue()
+      await store.getMinMaxRange()
       await store.getCalculator()
     },
     { deep: true },
@@ -309,5 +313,6 @@ export const useMenuStore = defineStore('menuStore', () => {
     getContactMenu,
     getShopMenu,
     getRegistrationMenu,
+    getInvestmentCalculatorMenu,
   }
 })

stores/store.ts

@@ -5,6 +5,7 @@ import type {
   PlanPrediction,
 } from '~/types'
 import type { FrontPageSection } from '~/types/frontSection'
+import type { MinMaxRange } from '~/types/planPrediction'
 
 export const useStore = defineStore('store', () => {
   const currentPageID = ref('')
@@ -13,7 +14,7 @@ export const useStore = defineStore('store', () => {
   const monthlySavings = ref(137)
   const storagePeriod = ref(10)
   const totalInvestment: Ref<number> = ref(0)
-  const minValue = ref()
+  const minMaxRange = ref({} as MinMaxRange)
 
   const components = ref({} as FrontPageSection[])
 
@@ -84,10 +85,10 @@ export const useStore = defineStore('store', () => {
     }
   }
 
-  async function getMinValue() {
+  async function getMinMaxRange() {
     try {
-      const { data } = await useMyFetch<GenericResponse<number>>(
+      const { data } = await useMyFetch<GenericResponse<MinMaxRange>>(
-        '/api/public/plan-prediction/free/minimum',
+        '/api/public/front/minmaxinvestment',
         {
           headers: {
             'Content-Type': 'application/json',
@@ -98,23 +99,32 @@ export const useStore = defineStore('store', () => {
         },
       )
 
-      minValue.value = data
+      minMaxRange.value = data
     }
     catch (error) {
       console.error('getList error:', error)
     }
   }
 
+  const getMinAmount = computed(() => {
+    return Math.ceil(minMaxRange.value.min)
+  })
+  const getMaxAmount = computed(() => {
+    return Math.ceil(minMaxRange.value.max)
+  })
+
   return {
     currentPageID,
     components,
     totalInvestment,
     monthlySavings,
     storagePeriod,
-    minValue,
+    minMaxRange,
     getCalculator,
     getComponents,
     getSections,
-    getMinValue,
+    getMinMaxRange,
+    getMinAmount,
+    getMaxAmount,
   }
 })

types/index.ts

@@ -112,11 +112,6 @@ export interface GenericResponseChildren<Data> {
   status: number
 }
 
-export type {
-  InvestmentPiece,
-  PlanPrediction,
-  PeriodToFirstPiece,
-} from './planPrediction'
 export type {
   Product,
   ProductItem,
@@ -128,3 +123,4 @@ export type {
 } from './product'
 export type { FrontMenu, FrontMenuLang, UIFrontMenu } from './frontMenu'
 export type { Contact, Footer, FooterDoc, FooterPdf } from './footer'
+export type { CalculatorOutput, PlanPrediction, FeatureCalculator, InvestmentPiece, PeriodToFirstPiece } from './planPrediction'

types/planPrediction.ts

@@ -1,3 +1,8 @@
+export interface CalculatorOutput {
+  calculator_output: PlanPrediction
+  chart: string
+}
+
 export interface PlanPrediction {
   total_investement_value: number
   total_input_price_increase: number
@@ -23,10 +28,10 @@ export interface InvestmentPiece {
   currency_conversion_rate: string
   max_comission_value: number
   average_input_price_increase: number
-  features: Feature[]
+  features: FeatureCalculator[]
 }
 
-export interface Feature {
+export interface FeatureCalculator {
   feature_id: number
   feature: string
   value_id: number
@@ -38,3 +43,8 @@ export interface PeriodToFirstPiece {
   months: number
   days: number
 }
+
+export interface MinMaxRange {
+  min: number
+  max: number
+}