fix: Congratulations popup after buying an NFT is not availiable anymore? #7512

hassnian · 2023-10-05T05:27:49Z

Thank you for your contribution to the KodaDot - One Stop Shop for Polkadot NFTs.

👇 __ Let's make a quick check before the contribution.

PR Type

Bugfix
Feature
Refactoring

Context

Closes Congratulations popup after buying an NFT is not availiable anymore? #7336

Did your issue had any of the "$" label on it?

Fill up your DOT address: Payout

Community participation

Are you at KodaDot Discord?

Screenshot 📸

My fix has changed something on UI;

Copilot Summary

`🤖 Generated by Copilot at e4327e1`

This pull request enhances the user feedback when buying an item from the gallery. It adds a MessageNotify component that shows a custom success message with the item names, and updates the Buy component and the useTransaction composable to support this feature. It also adjusts some styles and types to improve the UI and code quality.

`🤖 Generated by Copilot at e4327e1`

Buy component moved
Shows MessageNotify now
Autumn leaves of code

netlify · 2023-10-05T05:27:53Z

✅ Deploy Preview for nuxt-kodadot ready!

Name	Link
🔨 Latest commit	`d2b75a7`
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt-kodadot/deploys/651fa90715db340008a84fa7
😎 Deploy Preview	https://deploy-preview-7512--nuxt-kodadot.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

kodabot · 2023-10-05T05:27:55Z

SUCCESS @hassnian PR for issue #7336 which is assigned to you. Please wait for review and don't hesitate to grab another issue in the meantime!

reviewpad · 2023-10-05T05:28:11Z

AI-Generated Summary: This pull request mainly revolves around improving the buying notification feature within the application. It introduced changes in the Buy.vue component, MessageNotify.vue component and in the ExploreLayout.vue views, among others.

The MessageNotify.vue witnessed changes in the CSS for better position and visibility of the notification box. The Buy.vue component now emits a 'success' event when the transaction is finalized and a new null value for the 'successMessage' is introduced.

In types.ts, the 'successMessage' type was modified to allow 'null' values. Also, in useTransaction.ts, extra logic was added to take care of instances when 'successMessage' is null.

In ExploreLayout.vue, the 'Buy' component has been updated to handle a 'success' event by displaying a notification message summarizing the purchased items. Extra locales were also added in en.json to support this new functionality.

…into issue-7336

hassnian · 2023-10-05T05:41:21Z

@roiLeo I'm substituting this popup and not showing the other notification , I think it does not make any sense to have both with the same info , what do you think ?

preschian · 2023-10-05T05:52:50Z

components/buy/Buy.vue

@@ -76,7 +80,7 @@ const handleBuy = async (nfts: TokenToBuy | TokenToBuy[]) => {
 interaction: ShoppingActions.BUY,
 nfts,
 urlPrefix: urlPrefix.value,
- successMessage: $i18n.t('mint.successNewNfts'),
+ successMessage: null,


What if we pass another parameter to trigger a bigger notification component instead of null?

sure , good idea

layouts/explore-layout.vue

prury · 2023-10-05T18:21:51Z

it works now! tested on snek
QR button border a bit odd, can it be a square instead of rectangle?

hassnian · 2023-10-06T06:23:32Z

@prury now it's squared :D

it was not missing there , but i spotted the old messages that are still there , will remove that (done)

feel free try again anywhere else where you can open the buy modal , cart , explore pages, collection , profile , etc , it's the same code so there should be no issue

sonarcloud · 2023-10-06T06:29:18Z

Kudos, SonarCloud Quality Gate passed!

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
No Duplication information

prury · 2023-10-06T12:29:46Z

@prury now it's squared :D

it was not missing there , but i spotted the old messages that are still there , will remove that (done)

feel free try again anywhere else where you can open the buy modal , cart , explore pages, collection , profile , etc , it's the same code so there should be no issue

oh, nice catch!

prury · 2023-10-06T12:33:28Z

Perfect, ty @hassnian

roiLeo

✅ otherwise code lgtm

roiLeo · 2023-10-09T06:24:47Z

components/shared/modals/ModalWrapper.vue

+.is-squared {
+ width: 36px;
+ height: 36px;
+}


maybe icon is the problem, can't we do withtout fixed size?

yangwao · 2023-10-10T11:03:00Z

pay 30 usd

yangwao · 2023-10-10T11:03:10Z

😍 Perfect, I’ve sent the payout
💵 $30 @ 3.82 USD/DOT ~ 7.853 $DOT
🧗 13QUj3pZyFNfYj4AM336hRdyLQbevj5H3sR4PKmLEXLdwZhh
🔗 0x6385575d192e71250d9ecbc2e3ce47f9f22626b917bbc8985d112c4b90cacc1b

🪅 Let’s grab another issue and get rewarded!
🪄 github.com/kodadot/nft-gallery/issues

add: explore layout buy notification

e4327e1

hassnian changed the title ~~add: explore layout buy notification~~ fix: Congratulations popup after buying an NFT is not availiable anymore? Oct 5, 2023

reviewpad bot added the small Pull request is small label Oct 5, 2023

Merge branch 'nuxt' into issue-7336

02b745c

hassnian marked this pull request as ready for review October 5, 2023 05:32

hassnian requested a review from a team as a code owner October 5, 2023 05:32

hassnian requested review from preschian and roiLeo and removed request for a team October 5, 2023 05:32

reviewpad bot added the waiting-for-review label Oct 5, 2023

hassnian added 2 commits October 5, 2023 10:38

fix: translation

d89e656

Merge branch 'issue-7336' of https://github.com/hassnian/nft-gallery …

ec0dfb7

…into issue-7336

preschian reviewed Oct 5, 2023

View reviewed changes

roiLeo reviewed Oct 5, 2023

View reviewed changes

layouts/explore-layout.vue Outdated Show resolved Hide resolved

ref: large notification

17ff890

reviewpad bot added medium Pull request is medium and removed small Pull request is small labels Oct 5, 2023

remove: space

2d4fbb6

hassnian requested review from preschian and roiLeo October 5, 2023 10:20

prury requested a review from exezbcz October 5, 2023 18:13

add: squared icon

7152b12

remove: old congrats notification from itemgallery

d2b75a7

preschian approved these changes Oct 6, 2023

View reviewed changes

prury added the S-works-for-me-✅ qa-guild has tested PR from end user perspective and functionality worked label Oct 6, 2023

prury self-requested a review October 6, 2023 12:33

prury approved these changes Oct 6, 2023

View reviewed changes

exezbcz approved these changes Oct 7, 2023

View reviewed changes

roiLeo approved these changes Oct 9, 2023

View reviewed changes

yangwao merged commit 85ff19c into kodadot:nuxt Oct 10, 2023
9 of 12 checks passed

yangwao added the paid pull-request has been paid label Oct 10, 2023

hassnian deleted the issue-7336 branch October 10, 2023 11:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: Congratulations popup after buying an NFT is not availiable anymore? #7512

fix: Congratulations popup after buying an NFT is not availiable anymore? #7512

hassnian commented Oct 5, 2023 •

edited

Loading

netlify bot commented Oct 5, 2023 •

edited

Loading

kodabot commented Oct 5, 2023

reviewpad bot commented Oct 5, 2023

hassnian commented Oct 5, 2023 •

edited

Loading

preschian Oct 5, 2023

hassnian Oct 5, 2023 •

edited

Loading

prury commented Oct 5, 2023 •

edited

Loading

hassnian commented Oct 6, 2023 •

edited

Loading

sonarcloud bot commented Oct 6, 2023

prury commented Oct 6, 2023

prury commented Oct 6, 2023

roiLeo left a comment

roiLeo Oct 9, 2023

yangwao commented Oct 10, 2023

yangwao commented Oct 10, 2023

fix: Congratulations popup after buying an NFT is not availiable anymore? #7512

fix: Congratulations popup after buying an NFT is not availiable anymore? #7512

Conversation

hassnian commented Oct 5, 2023 • edited Loading

PR Type

Context

Did your issue had any of the "$" label on it?

Community participation

Screenshot 📸

Copilot Summary

🤖 Generated by Copilot at e4327e1

🤖 Generated by Copilot at e4327e1

netlify bot commented Oct 5, 2023 • edited Loading

✅ Deploy Preview for nuxt-kodadot ready!

kodabot commented Oct 5, 2023

reviewpad bot commented Oct 5, 2023

hassnian commented Oct 5, 2023 • edited Loading

preschian Oct 5, 2023

Choose a reason for hiding this comment

hassnian Oct 5, 2023 • edited Loading

Choose a reason for hiding this comment

prury commented Oct 5, 2023 • edited Loading

hassnian commented Oct 6, 2023 • edited Loading

sonarcloud bot commented Oct 6, 2023

prury commented Oct 6, 2023

prury commented Oct 6, 2023

roiLeo left a comment

Choose a reason for hiding this comment

roiLeo Oct 9, 2023

Choose a reason for hiding this comment

yangwao commented Oct 10, 2023

yangwao commented Oct 10, 2023

hassnian commented Oct 5, 2023 •

edited

Loading

`🤖 Generated by Copilot at e4327e1`

`🤖 Generated by Copilot at e4327e1`

netlify bot commented Oct 5, 2023 •

edited

Loading

hassnian commented Oct 5, 2023 •

edited

Loading

hassnian Oct 5, 2023 •

edited

Loading

prury commented Oct 5, 2023 •

edited

Loading

hassnian commented Oct 6, 2023 •

edited

Loading