@ozdao/prometheus-framework 0.2.127 → 0.2.129

package/src/modules/globals/components/layouts/Client.vue

@@ -4,16 +4,29 @@
 			<Loader v-if="!page" class="pos-fixed"/>
 		</transition>
 
+		<transition 
+	    name="scaleTransition" 
+	    mode="out-in"
+	  >
+	    <section 
+	      v-if="MOBILE_APP && FirstUse"
+	      class="w-100" 
+	     >
+	      <Walkthrough 
+	        @updateFirstUse="updateFirstUse" 
+	        :slides="[1,2,3]"
+	      />
+	    </section>
+	  </transition>
+
 		<transition name="moveFromTop" mode="out-in" appear>
 			<Header 
 				ref="header" 
-				class="transition-ease-in-out br-b br-solid br-grey-transp-10 pos-t-0" 
-				:theme="route.name === 'Home' ? 'dark' : 'light'"
+				class="transition-ease-in-out pos-relative br-b br-solid br-grey-transp-10 pos-t-0" 
+				:theme="headerTheme"
 				:class="{
 					'pos-l-70': store.globals.state.isOpenSidebar,
 					'pos-l-0': !store.globals.state.isOpenSidebar,
-					'pos-fixed': route.name === 'Home',
-					'bg-white ': route.name !== 'Home'
 				}"
 			/>
 		</transition>
@@ -25,21 +38,23 @@
 		  />
 		</transition>
 
-		<Sidebar 
-			v-if="show" 
-			:stateSidebar="store.globals.state.isOpenSidebar" 
-			@closeSidebar="() => { 
-				store.globals.state.isOpenSidebar = !store.globals.state.isOpenSidebar 
-			}"
+		<transition name="moveFromTop" mode="out-in" appear>
+			<Sidebar 
+				v-if="show && store.globals.state.isOpenSidebar" 
+				:stateSidebar="store.globals.state.isOpenSidebar" 
+				@closeSidebar="() => { 
+					store.globals.state.isOpenSidebar = !store.globals.state.isOpenSidebar 
+				}"
 
-			class="transition-ease-in-out pos-absolute w-70 z-index-0  bg-light"
-			:class="{
-				'pos-l-70-negative': !store.globals.state.isOpenSidebar,
-				'pos-l-0': store.globals.state.isOpenSidebar
-			}"
-		>
-			<Navigation class="h3 pd-big cols-1" />
-		</Sidebar>
+				class="transition-ease-in-out pos-absolute w-70 z-index-0  bg-light"
+				:class="{
+					'pos-l-70-negative': !store.globals.state.isOpenSidebar,
+					'pos-l-0': store.globals.state.isOpenSidebar
+				}"
+			>
+				<Navigation class="h3 pd-big cols-1" />
+			</Sidebar>
+		</transition>
 
 	  <Popup 
 	  	@close-popup="closeLocationPopup" 
@@ -50,7 +65,7 @@
 	  </Popup>
 
 		<section 
-			v-if="show"
+			v-if="((!FirstUse && MOBILE_APP) || !MOBILE_APP) && show" 
 			id="screen" 
 			ref="screen"
 			@scroll="handleScroll"
@@ -73,15 +88,17 @@
 				class="z-index-7" 
 			/>
 			
-			<router-view  v-slot="{ Component, route }">
-				<transition @before-enter="scrollTop" name="scaleIn" mode="out-in" appear>
-	      	<component 
-	      		ref="page"  
-	      		:is="Component" 
-	      		:key="route.path"
-	      	/>
-	      </transition>
-			</router-view>
+			<!-- <div class="pos-relative w-100 h-100"> -->
+				<router-view  v-slot="{ Component, route }">
+					<transition @before-enter="scrollTop" name="scaleIn" mode="out-in" appear>
+		      	<component 
+		      		ref="page"  
+		      		:is="Component" 
+		      		:key="route.path"
+		      	/>
+		      </transition>
+				</router-view>
+			<!-- </div> -->
 			
       <Footer />
 		</section>
@@ -95,7 +112,7 @@
 
 
 <script setup>
-	import { computed, ref, onMounted,provide, inject, onUnmounted } from 'vue'
+	import { computed, ref, onMounted, provide, inject, onUnmounted } from 'vue'
 	// Router
 	import { useRoute, useRouter } from 'vue-router'
 	// Store
@@ -110,10 +127,35 @@
 	import Header	from '@pf/src/modules/globals/components/partials/Header.vue'
 	import Navigation from '@pf/src/modules/globals/components/partials/Navigation.vue'
 	import Footer from '@pf/src/modules/globals/components/partials/Footer.vue'
+  import NavigationBar from '@pf/src/modules/globals/components/partials/NavigationBar.vue';
+  import BottomNavigation from '@pf/src/modules/globals/components/partials/BottomNavigation.vue';
 
-  import NavigationBar from '@pf/src/modules/mobile/components/NavigationBar/NavigationBar.vue';
-  import BottomNavigation from '@pf/src/modules/mobile/components/BottomNavigation/BottomNavigation.vue';
 	import ShopCart from '@pf/src/modules/orders/components/partials/ShopCart.vue'
+	// Walkthrough
+  let Walkthrough;
+  
+  if (__MOBILE_APP__) {
+    Walkthrough = () => defineAsyncComponent(() =>
+      import('@pf/src/modules/globals/components/sections/Walkthrough.vue')
+    );
+  } else {
+    Walkthrough = null;
+  }
+  /////////////////////////////
+  // FIRST USE
+  /////////////////////////////
+  const FirstUse = ref(false);
+
+  import { Preferences } from '@capacitor/preferences';
+
+  async function getFirstUse() {
+    const ret = await Preferences.get({ key: 'first-use' });
+    FirstUse.value = ret.value ? JSON.parse(ret.value) : true;
+  }
+
+  const updateFirstUse = (value) => {
+    FirstUse.value = value;
+  }
 	/////////////////////////////
 	// CREATED
 	/////////////////////////////
@@ -131,6 +173,14 @@
 	const scrollOffset = ref(0)
 	let isScrolled = false
 	const header = ref(null)
+
+	const headerTheme = computed(() => {
+		if (scrollOffset.value > 50) {
+			return 'light'
+		} else {
+			return route.meta.header_theme || 'light'
+		}
+	})
 	/////////////////////////////
 	// Methods
 	/////////////////////////////
@@ -141,26 +191,26 @@
 		document.getElementById('app').scrollIntoView();
 	}
 	const handleScroll = () => {
-	  const currentScroll = event.target.scrollTop
+	  scrollOffset.value = event.target.scrollTop
 
-	  if (currentScroll > 150 && !isScrolled) {
+	  if (scrollOffset.value > 50 && !isScrolled) {
 	    isScrolled = true;
-	    // header.value.props.theme = "light"
+
 	    header.value.$el.classList.add('scrolled');
-	    header.value.$el.style.transition = 'background 0.3s ease-in-out';
 
 	    const firstRect = header.value.$el.getBoundingClientRect();
 	    const invert = -firstRect.top;
 
 	    header.value.$el.style.transform = `translateY(${invert}px)`;
 
+	    // headerTheme.value - light
+
 	    setTimeout(() => {
 	      header.value.$el.style.transform = 'translateY(0)';
 	    }, 0);
-	  } else if (currentScroll <= 150 && isScrolled) {
+	  } else if (scrollOffset.value <= 75 && isScrolled) {
 	    isScrolled = false;
 	    header.value.$el.classList.remove('scrolled');
-	    header.value.$el.style.transition = 'background 0.3s ease-in-out';
 
 	    const firstRect = header.value.$el.getBoundingClientRect();
 	    const invert = firstRect.top;
@@ -176,7 +226,18 @@
 	// MOUNTED
 	/////////////////////////////
 	onMounted(async () => {
-		console.log('header is', header.value.$el.$el)
+		await getFirstUse()
+		 
+		if ('serviceWorker' in navigator) {
+	   	window.addEventListener('load', () => {
+	     	navigator.serviceWorker.register('/service-worker.js').then(registration => {
+	       	console.log('SW registered: ', registration);
+	     	}).catch(registrationError => {
+	       	console.log('SW registration failed: ', registrationError);
+	     	});
+	   });
+	 	}
+	 	
 		if (page) show.value = true
 		
 		const savedPosition = localStorage.getItem('position');
@@ -194,10 +255,6 @@
 </script>
 
 <style lang="scss">;	
-.scrolled {
-	background: black !important;
-} 
-
 	.scaleIn-enter-active,
 	.scaleIn-leave-active {
 		transform: scale(1);  
@@ -236,7 +293,6 @@
 		transform: translateY(-1rem);
 		opacity: 0;
 		transition: all 0.5s ease;
-		
 	}
 	.ScaleOut-enter-active,
 	.ScaleOut-leave-active {

package/src/modules/globals/components/pages/401.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="">
+    401 Unauthorized
+  </div>
+</template>

package/src/modules/globals/components/pages/404.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="">
+    404 Not Found
+  </div>
+</template>

package/src/modules/globals/components/partials/Footer.vue

@@ -1,6 +1,11 @@
 <template>
-<div class="pd-t-zero pd-thin">
-  <footer class="bg-light t-black radius-big pd-thin">
+  <footer 
+    class="pd-thin pd-t-zero"
+    :class="{
+      't-black bg-white': route.meta.footer_theme === 'light',
+      't-white bg-black': route.meta.footer_theme === 'dark'  
+    }"
+  >
 <!-- 
     <div id="top-footer" class="cols-3 section">
      
@@ -90,18 +95,25 @@
       <a href="https://ozdao.dev" class="t-main" target="_blank" rel="noopener" >OZ DAO.</a>
     </p>
   </footer>
-</div>
 </template>
 
 <script setup="props">
   import { computed,onMounted, toRefs,ref } from 'vue'
-  import { useRouter } from 'vue-router'
+  import { useRouter, useRoute } from 'vue-router'
   import { useI18n }    from 'vue-i18n'
   
   import * as categories from '@pf/src/modules/products/store/categories';
 
+  // Props
+  const props = defineProps({
+    theme: {
+      type: String,
+      default: "light"
+    }
+  });
+
   const router = useRouter()
-  // await dispatch('pages/fetchAll')
+  const route = useRoute()
     
   const text = {
     locale: 'en',

package/src/modules/globals/components/partials/Header.vue

@@ -56,19 +56,28 @@
 			z-index-2 
 		"
 		:class="{
-  		't-black': theme === 'light',
-  		't-white': theme === 'dark'  
+  		't-black bg-white': theme === 'light',
+  		't-white bg-black': theme === 'dark'  
   	}"
 	>
 		<!-- MENU -->
 		<button  
-			@click.stop="() => store.globals.state.isOpenSidebar = !store.globals.state.isOpenSidebar" 
-			class="menu-btn mobile-only"
+			@click="() => store.globals.state.isOpenSidebar = !store.globals.state.isOpenSidebar" 
+			class="mobile-only menu-btn"
 			:class="{
 				'menu-btn_active': store.globals.state.isOpenSidebar
 			}"
 		>
-	    <span/>
+	    <span
+	    	class="no-events"
+		    :class="{
+		      'bg-black': theme === 'light',
+		      'bg-white': theme === 'dark'
+		    }"
+		  >
+		    <span class="menu-btn__before" :class="{ 'bg-black': theme === 'light', 'bg-white': theme === 'dark' }"></span>
+		    <span class="menu-btn__after" :class="{ 'bg-black': theme === 'light', 'bg-white': theme === 'dark' }"></span>
+		  </span>
 	  </button>
 
 		<!-- LOGO -->
@@ -130,7 +139,7 @@
 			:counter="store.shopcart.getters.cartTotalAmount" 
 			:showSucces="false"
 			:showLoader="false"
-			class="pd-zero mn-l-auto"
+			class="pd-zero mn-l-auto mn-r-micro"
 			> 
 			<IconShopcart 
 				class="i-semi"
@@ -158,7 +167,7 @@
 		</Button>
 
 
-		<Select 
+		<!-- <Select 
 			v-model:select="$i18n.locale"
 		  :options="[{name: '🌎&nbsp;En', value: 'en'}, {name: '🇷🇺&nbsp;Ru', value: 'ru'}]"
 		  :property="'value'"
@@ -167,7 +176,7 @@
     		'bg-light t-black': theme === 'light',
     		'bg-dark t-white': theme === 'dark'  
     	}"
-    />
+    /> -->
 	</header>
 </template>
 
@@ -186,27 +195,37 @@
   position: relative;
 }
 .menu-btn span,
-.menu-btn span::before,
-.menu-btn span::after {
+.menu-btn__before,
+.menu-btn__after {
   position: absolute;
-  top: 50%; margin-top: -1px;
-  left: 50%; margin-left: -10px;
+  top: 50%;
+  margin-top: -1px;
+  left: 50%;
+  margin-left: -10px;
   width: 20px;
   height: 2px;
-  background-color: rgb(var(--black));
 }
-.menu-btn span::before,
-.menu-btn span::after {
-  content: '';
+.menu-btn__before,
+.menu-btn__after {
   display: block;
   transition: 0.2s;
 }
-.menu-btn span::before {
+.menu-btn__before {
   transform: translateY(-5px);
 }
-.menu-btn span::after {
+.menu-btn__after {
   transform: translateY(5px);
 }
+.menu-btn_active .menu-btn__before {
+  transform: rotate(-35deg);
+  width: 10px;
+  transform-origin: left bottom;
+}
+.menu-btn_active .menu-btn__after {
+  transform: rotate(35deg);
+  width: 10px;
+  transform-origin: left top;
+}
 
 .menu-btn_active span:before {
   transform: rotate(-35deg);

package/src/modules/globals/components/partials/Navigation.vue

@@ -3,12 +3,14 @@
     <li>
       <router-link  
         :to="getMarketplaceLink(null,store.globals.state.position?.country,store.globals.state.position?.state,store.globals.state.position?.city)"
+        class="font-second"
      >
         {{ t('HEADER.MENU.MARKETPLACE') }}
       </router-link>
     </li>
     <li>
       <router-link    
+        class="font-second"
         :to="getSpotsLink(store.globals.state.position?.country,store.globals.state.position?.state,store.globals.state.position?.city)"
      >
         {{ t('HEADER.MENU.DISPENSARIES') }}
@@ -23,17 +25,19 @@
       </router-link>
     </li> -->
     
-    <li>
+   <!--  <li>
       <router-link  
         to="/events"
+        class="font-second"
      >
         {{ t('HEADER.MENU.EVENTS') }}
       </router-link>
-    </li>
+    </li> -->
    
     <li>
       <router-link  
         to="/community" 
+        class="font-second"
      >
         {{ t('HEADER.MENU.BLOG') }}
       </router-link>
@@ -41,6 +45,7 @@
     <li>
       <router-link  
         to="/governance" 
+        class="font-second"
      >
         {{ t('HEADER.MENU.GOVERNANCE') }}
       </router-link>

package/src/modules/landing/components/sections/MobileApp.vue

@@ -40,7 +40,7 @@
           > 
             <span 
               v-if="te('features.soonLabel')"
-              class="z-index-2 radius-big bg-main t-semi uppercase pd-l-thin pd-r-thin pos-absolute pos-r-small-negative pos-t-small-negative"
+              class="z-index-2 radius-big bg-main t-semi uppercase pd-l-thin pd-r-thin pos-absolute pos-r-10-negative pos-t-10-negative"
             >
               {{ t('features.soonLabel') }}
             </span>
@@ -54,7 +54,7 @@
           > 
             <span 
               v-if="te('features.soonLabel')"
-              class="z-index-2 pd-l-thin pd-r-thin radius-big bg-main t-semi uppercase pos-absolute pos-r-small-negative pos-t-small-negative"
+              class="z-index-2 pd-l-thin pd-r-thin radius-big bg-main t-semi uppercase pos-absolute pos-r-10-negative pos-t-10-negative"
             >
               {{ t('features.soonLabel') }}
             </span>

package/src/modules/landing/components/sections/SubscribeNewsletter.vue

@@ -17,7 +17,7 @@
             action="Subscribe"
             @update:input="email = $event"
             @action="sendApplication"
-            class="mn-l-auto mn-r-auto bg-white t-black w-50"
+            class="mn-l-auto mn-r-auto bg-white t-black w-100 w-max-30r"
           />
         </div>
       </div>

package/src/modules/landing/router/landing.js

@@ -3,7 +3,8 @@ const landing = [
     path: '',
     name: "Home",
     meta: {
-      title_hide: true
+      title_hide: true,
+      header_theme: 'dark',
     },
     component: () => import(/* webpackChunkName: 'Home' */ '@pf/src/modules/landing/components/pages/Home.vue'),
   },
@@ -29,17 +30,6 @@ const landing = [
     },
     component: () => import(/* webpackChunkName: 'Governance' */ '@pf/src/modules/landing/components/pages/Farming.vue'),
   },
-  {
-    path: 'pages/:url',
-    name: 'Page',
-    meta: {
-      title: {
-        en: 'Page',
-        ru: 'Страница'
-      }
-    },
-    component: () => import(/* webpackChunkName: 'Page' */ '@pf/src/modules/landing/components/pages/Page.vue')
-  }
 ];
 
 export default landing;

package/src/modules/legal/components/pages/Legal.vue

@@ -40,8 +40,8 @@
 	import Field         from '@pf/src/components/Field/Field.vue'
 	import Button        from '@pf/src/components/Button/Button.vue'
 	// Mobile Module
-	import Menu from '@pf/src/modules/mobile/components/Menu/Menu.vue'
-	import MenuItem from '@pf/src/modules/mobile/components/Menu/MenuItem.vue'
+	import Menu from '@pf/src/components/Menu/Menu.vue'
+	import MenuItem from '@pf/src/components/Menu/MenuItem.vue'
 	// Import libs
 	import { computed, watch, onMounted, ref, onBeforeMount } from 'vue'
 	import { useRoute, useRouter } from 'vue-router'

package/src/modules/marketplace/components/layouts/Marketplace.vue

@@ -4,17 +4,17 @@
     	<h2 class="t-semi  mn-b-thin t-left">
     		<span class="">Weed in </span>
 
-    		<p 
+    		<span 
     			v-if="localPosition.city || localPosition.state || localPosition.country"
     			@click="a => { store.globals.state.isOpenLocationPopup = true }" 
-    			class="h2 pd-l-small pd-r-small pd-t-micro pd-b-micro d-inline-block t-semi radius-extra bg-main t-black cursor-pointer "
+    			class="t-main cursor-pointer "
     		>
   				<template v-if="localPosition.city">{{localPosition.city}}, </template>
   				<template v-if="localPosition.state">{{localPosition.state}}, </template>
   				<template v-if="localPosition.country">{{localPosition.country}}</template>
-    		</p>
+    		</span>
 
-    		<span v-else @click="a => { store.globals.state.isOpenLocationPopup = true }"  class="t-semi t-black cursor-pointer hover-t-underline">
+    		<span v-else @click="a => { store.globals.state.isOpenLocationPopup = true }"  class="h2 pd-l-small pd-r-small pd-t-micro pd-b-micro d-inline-block t-semi radius-extra bg-main t-black cursor-pointer">
 						The World
     		</span>
     	</h2>
@@ -24,11 +24,17 @@
 			class="mn-b-thin"
 		/> -->
 
-		<!-- Catalog wrapper -->
-		<div class="cols-1 gap-thin pd-thin">
-			<router-view  v-slot="{ Component, route }">
-				<component ref="page" :key="route" :localPosition="localPosition" :is="Component" />
-			</router-view>
+		<div class="gap-thin 	cols-2-1_3">
+	 		<FilterProducts
+	 			ref="desktopFilters"
+	 			class="desktop-only "
+	    /> 
+			<!-- Catalog wrapper -->
+			<div class="rows-1 gap-thin">
+				<router-view  v-slot="{ Component, route }">
+					<component ref="page" :key="route" :localPosition="localPosition" :is="Component" />
+				</router-view>
+			</div>
 		</div>
 	</div>
 </template>
@@ -41,10 +47,9 @@
 	import { useRoute, useRouter,onBeforeRouteLeave } from 'vue-router'
 	import { useI18n } from 'vue-i18n'
 
-	// Import components
-	import BlockSearch from '@pf/src/modules/globals/components/blocks/BlockSearch.vue'
 
 	import Filters from '@pf/src/modules/marketplace/components/sections/Filters.vue'
+	import FilterProducts from '@pf/src/modules/products/components/sections/FilterProducts.vue'
 
 	// Accessing router and store
 	const store = useStore()
@@ -57,6 +62,8 @@
 		country: null
 	});
 
+	const desktopFilters = ref(null)
+
 	function denormalizeUrlParam(param) {
 	  return param
 	    .replace(/-/g, ' ') // Замена дефисов на пробелы
@@ -91,14 +98,24 @@
 	    delivery: query.delivery ? query.delivery.split(',') : [],
 	  };
 
-		store.marketplace.state.filter = newFilterValue;
+		// store.marketplace.state.filter = newFilterValue;
 	}
 
 	if (route.query.sortParam) store.marketplace.state.sort.param = route.query.sortParam
 	if (route.query.sortOrder) store.marketplace.state.sort.order = route.query.sortOrder
 
 	onMounted(async () => {
-	  
+	  let options = {
+      status: 'published'
+    }
+
+		const categoriesFilter = await store.categories.actions.fetchCategories(options)
+
+		console.log(desktopFilters.value.style.display)
+		// store.marketplace.state.filter.options[0].options = categoriesFilter.map(category => ({
+		//   value: category.url,
+		//   label: category.name
+		// }));
 	})
 
 	watch(() => store.marketplace.state.sort, (newSortValue, oldSortValue) => {

package/src/modules/marketplace/components/pages/Catalog.vue

@@ -1,6 +1,7 @@
 <template>
 	<Feed
 		v-model:sort="store.marketplace.state.sort"
+		v-model:filter="store.marketplace.state.filter"
     :search="true"
     :showLoadMore="false"
     :states="{
@@ -25,7 +26,7 @@
     v-slot="{ 
       items 
     }"
-    class="cols-1 gap-thin"
+    class="rows-1 gap-thin"
   >
     <CardOrganization 
 	    v-for="organization in items" 

package/src/modules/marketplace/router/marketplace.js

@@ -35,17 +35,19 @@ const marketplace = [
     ],
 
   },{
-        path: 'products/recommendation',
-        name: 'Product Recommmendation',
-        meta: {
-          title: {
-            en: 'Product Recommmendation',
-            ru: 'Рекомендации продукта'
-          }
-        },
-        component: () => import(/* webpackChunkName: 'Product Recommmendation' */ '@pf/src/modules/products/components/pages/ProductRecommmendation.vue'),
-        props: route => ({ mood: route.query.mood }) 
+    path: 'products/recommendation',
+    name: 'Product Recommmendation',
+    meta: {
+      title: {
+        en: 'Product Recommmendation',
+        ru: 'Рекомендации продукта'
       },
+      header_theme: 'dark',
+      footer_theme: 'dark',
+    },
+    component: () => import(/* webpackChunkName: 'Product Recommmendation' */ '@pf/src/modules/products/components/pages/ProductRecommmendation.vue'),
+    props: route => ({ mood: route.query.mood }) 
+  },
 ];