Merge branch 'front-styles' of ssh://git.ma-al.com:8822/goc_daniel/b2b into translate

bo/src/components/customer/PageCarts.vue

@@ -1,4 +1,5 @@
 <template>
+<<<<<<< HEAD
       <div class="flex flex-col gap-5 md:gap-10">
       <h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Shopping Cart') }}</h1>
       <div class="flex flex-col lg:flex-row gap-5 md:gap-10">
@@ -19,6 +20,30 @@
                 </div>
             </div>
 
+            <div class="w-full">
+=======
+    <div class="flex flex-col gap-5 md:gap-10">
+        <h1 class="text-2xl font-bold text-black dark:text-white">{{ t('Shopping Cart') }}</h1>
+        <div class="flex flex-col lg:flex-row gap-5 md:gap-10">
+            <div class="flex-1">
+>>>>>>> bfcfbb36c83a49ea2e6f8844beb674b845c6acdb
+                <div
+                    class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) overflow-hidden">
+                    <h2
+                        class="text-lg font-semibold text-black dark:text-white p-4 border-b border-(--border-light) dark:border-(--border-dark)">
+                        {{ t('Selected Products') }}
+                    </h2>
+                    <div v-if="cartStore.items.length > 0">
+                        <div v-for="item in cartStore.items" :key="item.id"
+                            class="grid grid-cols-5 items-center p-4 border-b border-(--border-light) dark:border-(--border-dark) w-[100%]">
+                            <div
+                                class="bg-(--second-light) dark:bg-(--main-dark) rounded flex items-center justify-center overflow-hidden">
+                                <img v-if="item.image" :src="item.image" :alt="item.name"
+                                    class="w-full h-full object-cover" />
+                                <UIcon v-else name="mdi:package-variant" class="text-2xl text-gray-400" />
+                            </div>
+                        </div>
+
                         <div class="w-full">
                             <div
                                 class="bg-(--second-light) dark:bg-(--main-dark) rounded-lg border border-(--border-light) dark:border-(--border-dark) overflow-hidden">
@@ -46,7 +71,8 @@
                                     </div>
                                 </div>
                                 <div v-else class="p-8 text-center">
-                        <UIcon name="mdi:cart-outline" class="text-4xl text-gray-300 dark:text-gray-600 mb-2" />
+                                    <UIcon name="mdi:cart-outline"
+                                        class="text-4xl text-gray-300 dark:text-gray-600 mb-2" />
                                     <p class="text-gray-500 dark:text-gray-400">{{ t('No carts yet') }}</p>
                                 </div>
                             </div>
@@ -73,27 +99,44 @@
                                     {{ t('Create') }}
                                 </UButton>
                             </div>
-              </label>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
                         </template>
+                    </UModal>
+                </div>
+<<<<<<< HEAD
+            </template>
+            <template #footer>
+                <div class="flex justify-end gap-2">
+                    <UButton variant="outline" color="neutral" @click="showCreateModal = false">
+                        {{ t('Cancel') }}
+                    </UButton>
+                    <UButton color="primary" @click="createCart" :disabled="!newCartName.trim()"
+                        class="bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) text-white">
+                        {{ t('Create') }}
+                    </UButton>
+                </div>
+              </label>
+=======
+>>>>>>> bfcfbb36c83a49ea2e6f8844beb674b845c6acdb
+            </div>
+        </div>
+    </div>
+<<<<<<< HEAD
+  </template>
+=======
+</template>
+>>>>>>> bfcfbb36c83a49ea2e6f8844beb674b845c6acdb
 
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useCartStore } from '@/stores/customer/cart'
 import { useI18n } from 'vue-i18n'
 import { useRouter } from 'vue-router'
+import { useAddressStore } from '@/stores/customer/address'
 const cartStore = useCartStore()
 const addressStore = useAddressStore()
 const { t } = useI18n()
 const router = useRouter()
 
-const cartStore = useCartStore()
-const { t } = useI18n()
-
 const showCreateModal = ref(false)
 const newCartName = ref('')