-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
15d22f9
commit 59a7a54
Showing
28 changed files
with
461 additions
and
465 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,20 @@ | ||
| <template> | ||
| <ClientOnly> | ||
| <div v-if="!isEmpty" class="block xl:hidden"> | ||
| <UButton | ||
| variant="gradient" | ||
| size="lg" | ||
| class="items-center" | ||
| @click="isCartDrawerOpened = !isCartDrawerOpened" | ||
| > | ||
| <p>{{ $t('app.cart.title') }}</p> | ||
| <div class="rounded-full bg-white size-6 text-center"> | ||
| {{ checkout?.lines?.length }} | ||
| </div> | ||
| </UButton> | ||
| </div> | ||
| </ClientOnly> | ||
| <div v-if="!checkout.isEmpty" class="block xl:hidden"> | ||
| <UButton | ||
| variant="gradient" | ||
| size="lg" | ||
| class="items-center" | ||
| @click="isCartDrawerOpened = !isCartDrawerOpened" | ||
| > | ||
| <p>{{ $t('app.cart.title') }}</p> | ||
| <div class="pt-0.5 rounded-full bg-(--ui-bg-muted) size-6 text-center text-(--ui-primary)"> | ||
| {{ checkout.lines.length }} | ||
| </div> | ||
| </UButton> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| const { isCartDrawerOpened } = useApp() | ||
| const { checkout, isEmpty } = useCheckout() | ||
| const checkout = useCheckoutStore() | ||
| </script> |
40 changes: 19 additions & 21 deletions
40
apps/web-app/app/components/Cart/DeliveryMethodSwitch.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,25 @@ | ||
| <template> | ||
| <ClientOnly> | ||
| <div class="p-0 flex flex-row gap-0 justify-center bg-(--ui-bg-elevated) rounded-xl"> | ||
| <UButton | ||
| v-if="channel.isDeliveryAvailable" | ||
| class="w-full justify-center" | ||
| :variant="checkout?.deliveryMethod === 'DELIVERY' ? 'gradient' : 'ghost'" | ||
| @click="update({ deliveryMethod: 'DELIVERY' })" | ||
| > | ||
| {{ $t('app.cart.delivery') }} | ||
| </UButton> | ||
| <UButton | ||
| v-if="channel.isPickupAvailable" | ||
| class="w-full justify-center" | ||
| :variant="checkout?.deliveryMethod === 'WAREHOUSE' ? 'gradient' : 'ghost'" | ||
| @click="update({ deliveryMethod: 'WAREHOUSE' })" | ||
| > | ||
| {{ $t('app.cart.pickup') }} | ||
| </UButton> | ||
| </div> | ||
| </ClientOnly> | ||
| <div class="p-0 flex flex-row gap-0 justify-center bg-(--ui-bg-elevated) rounded-xl"> | ||
| <UButton | ||
| v-if="channel.isDeliveryAvailable" | ||
| class="w-full justify-center" | ||
| :variant="checkout.deliveryMethod === 'DELIVERY' ? 'gradient' : 'ghost'" | ||
| @click="checkout.change({ deliveryMethod: 'DELIVERY' })" | ||
| > | ||
| {{ $t('app.cart.delivery') }} | ||
| </UButton> | ||
| <UButton | ||
| v-if="channel.isPickupAvailable" | ||
| class="w-full justify-center" | ||
| :variant="checkout.deliveryMethod === 'WAREHOUSE' ? 'gradient' : 'ghost'" | ||
| @click="checkout.change({ deliveryMethod: 'WAREHOUSE' })" | ||
| > | ||
| {{ $t('app.cart.pickup') }} | ||
| </UButton> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| const channel = useChannelStore() | ||
| const { checkout, update } = useCheckout() | ||
| const checkout = useCheckoutStore() | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,78 +1,70 @@ | ||
| <template> | ||
| <ClientOnly> | ||
| <div v-if="checkout" class="relative rounded-2xl border border-(--ui-border) px-4 py-4 h-full flex flex-col justify-between"> | ||
| <div class="h-screen overflow-y-auto"> | ||
| <div class="mb-48"> | ||
| <div class="mb-4 flex flex-row justify-between items-center"> | ||
| <h3 class="text-2xl font-medium"> | ||
| {{ $t('app.cart.title') }} | ||
| </h3> | ||
| <div v-if="checkout.id" class="relative rounded-2xl bg-(--ui-bg) border border-(--ui-border) p-4 h-full flex flex-col justify-between"> | ||
| <div class="h-screen overflow-y-auto"> | ||
| <div class="mb-48"> | ||
| <div class="mb-4 flex flex-row justify-between items-center"> | ||
| <h3 class="text-2xl font-medium"> | ||
| {{ $t('app.cart.title') }} | ||
| </h3> | ||
|
|
||
| <button | ||
| aria-label="Close" | ||
| class="block xl:hidden rounded-xl lg:hover:scale-90 hover:bg-neutral-100 duration-200" | ||
| @click="isCartDrawerOpened = !isCartDrawerOpened" | ||
| > | ||
| <Icon :name="icons.close" class="size-8" /> | ||
| </button> | ||
| </div> | ||
|
|
||
| <div class="mt-2 mb-4"> | ||
| <CartDeliveryMethodSwitch /> | ||
| </div> | ||
| <button | ||
| aria-label="Close" | ||
| class="block xl:hidden rounded-xl lg:hover:scale-90 hover:bg-neutral-100 duration-200" | ||
| @click="isCartDrawerOpened = !isCartDrawerOpened" | ||
| > | ||
| <Icon :name="icons.close" class="size-8" /> | ||
| </button> | ||
| </div> | ||
|
|
||
| <CartEmpty v-if="isEmpty" /> | ||
| <div v-else> | ||
| <CartLine | ||
| v-for="line in checkout?.lines" | ||
| :key="line.id" | ||
| :line-id="line.id" | ||
| /> | ||
| </div> | ||
| <div class="mt-2 mb-4"> | ||
| <CartDeliveryMethodSwitch /> | ||
| </div> | ||
|
|
||
| <CartEmpty v-if="checkout.isEmpty" /> | ||
| <template v-else> | ||
| <CartLine | ||
| v-for="line in checkout.lines" | ||
| :key="line.id" | ||
| :line-id="line.id" | ||
| /> | ||
| </template> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="absolute bottom-0 left-0 right-0 rounded-2xl bg-(--ui-bg-muted)"> | ||
| <button | ||
| class="relative m-4 flex flex-row gap-2 flex-wrap items-center active:scale-95 lg:hover:scale-95 lg:active:scale-90 duration-200" | ||
| @click="modal.open(ModalDeliveryInfo)" | ||
| <div class="absolute bottom-0 left-0 right-0 rounded-2xl bg-(--ui-bg-muted)"> | ||
| <button | ||
| class="relative m-4 flex flex-row gap-2 flex-wrap items-center active:scale-95 lg:hover:scale-95 lg:active:scale-90 duration-200" | ||
| @click="modal.open(ModalDeliveryInfo)" | ||
| > | ||
| <Icon :name="icons.info" class="size-6 text-(--ui-text-dimmed)" /> | ||
| <div class="text-left text-sm text-(--ui-text-muted)"> | ||
| {{ $t('app.cart.conditions') }} | ||
| </div> | ||
| </button> | ||
|
|
||
| <div v-if="!checkout.isEmpty" class="my-4 mx-4"> | ||
| <UButton | ||
| to="/checkout" | ||
| variant="gradient" | ||
| size="xl" | ||
| class="w-full justify-between items-center" | ||
| > | ||
| <Icon :name="icons.info" class="size-6 text-(--ui-text-dimmed)" /> | ||
| <div class="text-left text-sm text-(--ui-text-muted)"> | ||
| {{ $t('app.cart.conditions') }} | ||
| <p>{{ $t('app.cart.next-label') }}</p> | ||
| <div class="text-lg tracking-tight"> | ||
| {{ formatNumberToLocal(checkout.totalPrice) }} <span class="text-base">{{ channel.currencySign }}</span> | ||
| </div> | ||
| </button> | ||
|
|
||
| <div v-if="!isEmpty" class="my-4 mx-4"> | ||
| <UButton | ||
| to="/checkout" | ||
| variant="gradient" | ||
| size="xl" | ||
| class="w-full justify-between items-center" | ||
| > | ||
| <p>{{ $t('app.cart.next-label') }}</p> | ||
| <div class="text-lg tracking-tight"> | ||
| {{ formatNumberToLocal(checkout?.totalPrice) }} <span class="text-base">{{ channel.currencySign }}</span> | ||
| </div> | ||
| </UButton> | ||
| </div> | ||
| </UButton> | ||
| </div> | ||
| </div> | ||
|
|
||
| <template #fallback> | ||
| <div class="relative h-full w-full flex flex-col justify-center items-center"> | ||
| <Icon :name="icons.loader" class="w-16 h-16 text-neutral-300 animate-pulse" /> | ||
| </div> | ||
| </template> | ||
| </ClientOnly> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import { ModalDeliveryInfo } from '#components' | ||
| const { isCartDrawerOpened } = useApp() | ||
| const { icons } = useAppConfig() | ||
| const { checkout, isEmpty } = useCheckout() | ||
| const modal = useModal() | ||
| const channel = useChannelStore() | ||
| const checkout = useCheckoutStore() | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.