feat: storefront with checkout

Author: hmbanan666

apps/web-app/app/components/Navigation.vue

@@ -80,10 +80,9 @@ const menuItems = computed(() => [
 const linkItems = computed(() => [
   {
     label: 'Новое меню',
-    to: '/storefront',
+    to: 'https://orderdemo.online',
     target: '_blank',
     icon: 'i-lucide-flask-conical',
-    active: route.path.startsWith('/storefront'),
   },
   {
     label: 'Все задачи',

apps/web-app/app/components/storefront/Navigation.vue

@@ -2,9 +2,9 @@
   <div class="w-full h-screen mx-auto grid grid-cols-1 lg:grid-cols-2">
     <div class="hidden lg:block bg-[#54b948]">
       <img
-        src="/sushi-heart.svg"
+        src="/sushi-heart-light.png"
         alt=""
-        class="w-2/3 opacity-10 brightness-[1000] absolute bottom-0 left-0 motion-preset-pulse motion-duration-4000"
+        class="w-2/3 max-w-4xl opacity-10 fixed bottom-0 left-0 motion-preset-pulse motion-duration-4000"
       >
     </div>
 

apps/web-app/app/pages/sign-in.vue

@@ -1,9 +1,5 @@
 import { repository } from '@sushi-atrium/database'
 
 export default defineEventHandler(async () => {
-  try {
-    return repository.product.list()
-  } catch (error) {
-    throw errorResolver(error)
-  }
+  return repository.product.list()
 })

apps/web-app/server/api/product/list.get.ts

@@ -136,26 +136,26 @@ interface Options {
   headContrastColor?: string[]
 }
 
-type PossibleEmotion =
-  | 'rage'
-  | 'veryAngry'
-  | 'solemn'
-  | 'tired'
-  | 'serious'
-  | 'eyesClosed'
-  | 'smile'
-  | 'calm'
-  | 'eatingHappy'
-  | 'lovingGrin1'
+type PossibleEmotion
+  = | 'rage'
+    | 'veryAngry'
+    | 'solemn'
+    | 'tired'
+    | 'serious'
+    | 'eyesClosed'
+    | 'smile'
+    | 'calm'
+    | 'eatingHappy'
+    | 'lovingGrin1'
 
-type PossibleAccessories =
-  | 'glasses'
-  | 'glasses2'
-  | 'glasses3'
-  | 'glasses4'
-  | 'glasses5'
-  | 'sunglasses'
-  | 'sunglasses2'
+type PossibleAccessories
+  = | 'glasses'
+    | 'glasses2'
+    | 'glasses3'
+    | 'glasses4'
+    | 'glasses5'
+    | 'sunglasses'
+    | 'sunglasses2'
 
 export interface AvatarParams {
   gender?: Gender

apps/web-app/server/utils/avatar.ts

@@ -0,0 +1,11 @@
+# Session password for Nuxt Auth Utils
+NUXT_SESSION_PASSWORD=""
+
+# Main database
+DATABASE_URL=""
+
+# URL to media server (probably s3 bucket with static URL)
+NUXT_PUBLIC_MEDIA_URL=""
+
+# App version
+VERSION=""

apps/web-storefront/.env.example

@@ -0,0 +1,55 @@
+export default defineAppConfig({
+  ui: {
+    button: {
+      slots: {
+        base: 'font-semibold',
+      },
+      variants: {
+        size: {
+          xl: {
+            base: 'px-4 py-3 font-semibold',
+          },
+        },
+        variant: {
+          gradient: 'text-white bg-linear-to-br from-secondary-400 to-secondary-500 hover:opacity-90 aria-disabled:from-neutral-400 aria-disabled:to-neutral-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary',
+        },
+        color: {
+          secondary: '!text-white disabled:!bg-inverted/50',
+        },
+      },
+    },
+    tabs: {
+      variants: {
+        variant: {
+          pill: {
+            trigger: 'data-[state=active]:!text-white',
+          },
+          gradient: {
+            list: 'bg-elevated rounded-lg',
+            trigger: 'data-[state=active]:bg-linear-to-br from-secondary-400 to-secondary-500 data-[state=active]:text-white data-[state=active]:font-semibold flex-1 w-full',
+            indicator: 'rounded-md shadow-xs',
+          },
+        },
+      },
+    },
+    modal: {
+      slots: {
+        content: 'divide-y-0',
+        header: 'pb-0 min-h-12',
+        title: 'text-xl/5 font-semibold',
+      },
+    },
+    navigationMenu: {
+      slots: {
+        link: 'text-sm',
+      },
+    },
+    toast: {
+      slots: {
+        title: 'text-lg/6',
+        description: 'leading-4',
+        icon: 'shrink-0 size-7',
+      },
+    },
+  },
+})

apps/web-storefront/app/app.config.ts

@@ -0,0 +1,37 @@
+<template>
+  <UApp
+    :locale="locales[locale]"
+    :tooltip="{ delayDuration: 0 }"
+    class="min-h-svh"
+  >
+    <NuxtLoadingIndicator :color="false" class="bg-primary h-[2px]" />
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </UApp>
+</template>
+
+<script setup lang="ts">
+import * as locales from '@nuxt/ui/locale'
+
+const { locale } = useI18n()
+
+const lang = computed(() => locales[locale.value].code)
+const dir = computed(() => locales[locale.value].dir)
+
+useHead({
+  htmlAttrs: {
+    lang,
+    dir,
+  },
+})
+
+// Init Stores
+const menu = useMenuStore()
+const checkout = useCheckoutStore()
+
+await Promise.all([
+  menu.update(),
+  checkout.update(),
+])
+</script>

apps/web-storefront/app/app.vue

@@ -0,0 +1,3 @@
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-headers);
+}

apps/web-storefront/app/assets/css/styles.css

@@ -13,7 +13,7 @@
       icon="i-lucide-undo-2"
       class="w-full md:w-auto mx-auto md:mx-0 justify-center"
       :label="$t('common.return')"
-      @click="back()"
+      @click="router.back()"
     />
   </div>
 </template>
@@ -23,5 +23,5 @@ defineProps<{
   items: { label: string, icon?: string, to?: string }[]
 }>()
 
-const { back } = useRouter()
+const router = useRouter()
 </script>