Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[TAS-2525] 💄 Purchase CTA button improvement #1948

Merged
merged 13 commits into from
Nov 15, 2024
Merged

[TAS-2525] 💄 Purchase CTA button improvement #1948

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
330dad7
💄 Update edition select section
AuroraHuang22 Nov 12, 2024
306737a
💄 Update column left UI
AuroraHuang22 Nov 12, 2024
5f2febc
✨ Add edition selection to GiftDialog
AuroraHuang22 Nov 13, 2024
0b283a0
💄 Add discount & stock label
AuroraHuang22 Nov 13, 2024
cb70f07
🎨 Use v-text for binding text
AuroraHuang22 Nov 13, 2024
e8fdc2a
💄 Add discount original price label
AuroraHuang22 Nov 13, 2024
3ee58a2
💄Correct divider color
AuroraHuang22 Nov 13, 2024
a52e2c6
♻️ Simplify and remove redundant code
AuroraHuang22 Nov 14, 2024
4384bc3
🎨 Fix space and padding issues
AuroraHuang22 Nov 15, 2024
532b2dc
🎨 Update button style
AuroraHuang22 Nov 15, 2024
f3d760c
🎨Update collection cta
AuroraHuang22 Nov 15, 2024
c1908eb
🎨 Update book title style
AuroraHuang22 Nov 15, 2024
7477670
🚸 Disable check if no stock
AuroraHuang22 Nov 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions src/components/NFTBook/GiftDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,21 @@
<IconGift class="w-[32px] text-like-green" />
</template>
</Label>
<div class="flex items-center gap-[12px] my-[12px] w-full flex-wrap">
<NFTEditionSelectItemV2
v-for="(item, index) in items"
:key="index"
:name="item.name"
:currency="item.currency"
:price-label="item.priceLabel"
:stock="item.stock"
:is-selected="item.value === selectedValue"
:current-price="item.price"
:default-price="item.defaultPrice"
preset="dialog"
@click="handleClickPriceSelectItem(item)"
/>
</div>
<Label
class="text-dark-gray my-[12px]"
:text="$t('nft_book_gift_dialog_description')"
Expand Down Expand Up @@ -111,13 +126,32 @@ export default {
message: '',
}),
},
items: {
type: Array,
default: () => [],
},
value: {
type: Number,
default: 0,
},
},
data() {
// NOTE: If the selected item is out of stock, select another item.
const items = [...this.items];
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why clone items?

let selectedItem = items.find(item => item.value === this.value);
if (!selectedItem || selectedItem.stock <= 0) {
selectedItem = items.find(
item =>
selectedItem && item.index !== selectedItem.index && item.stock > 0
);
}

return {
fromName: this.prefillGiftInfo?.fromName,
toName: this.prefillGiftInfo?.toName,
toEmail: this.prefillGiftInfo?.toEmail,
message: this.prefillGiftInfo?.message,
selectedValue: selectedItem?.value || this.value,
};
},
watch: {
Expand All @@ -142,6 +176,12 @@ export default {
},
});
},
handleClickPriceSelectItem({ value }) {
if (this.selectedValue === value) return;
this.selectedValue = value;
this.$emit('change', value);
this.$emit('update:value', value);
},
},
};
</script>
24 changes: 17 additions & 7 deletions src/components/NFTBook/ItemCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@
'w-full',
'rounded-[32px]',
'px-[16px] sm:px-[32px]',
{ 'laptop:px-[48px]': !isCompactPreset },
{ 'laptop:px-[20px]': !isCompactPreset },
'transition-all',
'duration-200',
bgStyle,
Expand Down Expand Up @@ -121,7 +121,7 @@
:resize="200"
/>

<div class="hidden laptop:block">
<div class="hidden w-full laptop:block">
<slot name="column-left" />
</div>
</div>
Expand Down Expand Up @@ -234,17 +234,27 @@
:preset="preset"
/>
</NFTBookSpecTable>
<div class="flex flex-col items-center w-full laptop:hidden">
<div
class="relative pt-[36px] flex flex-col items-center w-full laptop:hidden"
>
<div
class="absolute top-0 left-0 right-0 mx-[-16px] my-[16px] border-b-[1px] border-[#EBEBEB]"
/>
<slot name="column-edition-select" />
</div>
<div class="flex-col hidden w-full laptop:flex">
<slot name="column-edition-select" />
</div>
</div>
<div class="flex flex-col items-center laptop:hidden">
<div
class="relative pt-[36px] flex flex-col items-center laptop:hidden"
>
<div
class="absolute top-0 left-0 right-0 mx-[-16px] my-[16px] border-b-[1px] border-[#EBEBEB]"
/>
<slot name="column-left" />
</div>
</div>
<div class="pb-[32px] w-full hidden laptop:flex flex-col">
<slot name="column-edition-select" />
</div>
</component>

<!-- Footer -->
Expand Down
22 changes: 15 additions & 7 deletions src/components/NFTCollection/ItemCard.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
'w-full',
'rounded-[32px]',
'px-[16px] sm:px-[32px]',
{ 'laptop:px-[48px]': !isCompactPreset },
{ 'laptop:px-[20px]': !isCompactPreset },
'transition-all',
'duration-200',
bgStyle,
Expand Down Expand Up @@ -66,7 +66,7 @@
:text="$t('nft_collection_num_of_books', { num: classIds.length })"
/>

<div class="hidden laptop:block">
<div class="hidden w-full laptop:block">
<slot name="column-left" />
</div>
</div>
Expand Down Expand Up @@ -154,17 +154,25 @@
:is-downloadable="isDownloadable"
/>
</NFTBookSpecTable>
<div class="flex flex-col items-center w-full laptop:hidden">
<div
class="relative pt-[36px] flex flex-col items-center w-full laptop:hidden"
>
<div
class="absolute top-0 left-0 right-0 mx-[-16px] my-[16px] border-b-[1px] border-[#EBEBEB]"
/>
<slot name="column-edition-select" />
</div>
<div class="flex-col hidden w-full laptop:flex">
<slot name="column-edition-select" />
</div>
</div>
<div class="flex flex-col items-center laptop:hidden">
<div class="relative flex flex-col items-center laptop:hidden">
<div
class="absolute top-0 left-0 right-0 mx-[-16px] my-[16px] border-b-[1px] border-[#EBEBEB]"
/>
<slot name="column-left" />
</div>
</div>
<div class="pb-[32px] w-full hidden laptop:flex flex-col">
<slot name="column-edition-select" />
</div>
</component>

<!-- Footer -->
Expand Down
35 changes: 35 additions & 0 deletions src/components/NFTDiscountLabel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
<template>
<span
v-if="discountInfo"
:class="[
'whitespace-nowrap',
'px-[8px]',
'py-[4px]',
'rounded-[4px]',
'text-[12px]',
'font-500',
'bg-[#AAF1E7]',
'text-like-green',
]"
v-text="discountPercentage"
/>
</template>

<script>
export default {
name: 'NFTDiscountLabel',
props: {
discountInfo: {
type: Object,
default: null,
},
},
computed: {
discountPercentage() {
return this.$t('nft_edition_select_discount_label', {
percentage: this.discountInfo?.discountPercentage,
});
},
},
};
</script>
Loading
Loading