Merge pull request kodadot#11270 from hassnian/issue-11269

feat: Auto-select `offers` Tab after Creating Offer

components/gallery/GalleryItem.vue

@@ -181,6 +181,7 @@ import GalleryItemDescription from './GalleryItemDescription.vue'
 import GalleryItemTabsPanel from './GalleryItemTabsPanel/GalleryItemTabsPanel.vue'
 import UnlockableTag from './UnlockableTag.vue'
 import { useGalleryItem } from './useGalleryItem'
+import { GALLERY_ITEM_TABS } from '@/components/gallery/GalleryItemTabsPanel/types'
 import CollectionDetailsPopover from '@/components/collectionDetailsPopover/CollectionDetailsPopover.vue'
 import { MediaType } from '@/components/rmrk/types'
 import { usePreferencesStore } from '@/stores/preferences'
@@ -206,6 +207,7 @@ const mediaItemRef = ref<{
 } | null>(null)
 const galleryDescriptionRef = ref<{ isLewd: boolean } | null>(null)
 const preferencesStore = usePreferencesStore()
+const { getTriggerBuySuccess: triggerBuySuccess, getTriggerOfferSuccess: triggerOfferSuccess } = storeToRefs(preferencesStore)
 const pageViewCount = usePageViews()
 const fiatStore = useFiatStore()
 
@@ -216,19 +218,13 @@ const collection = computed(() => nft.value?.collection)
 
 const nftCreator = computed(() => nft.value?.dropCreator || nft.value?.issuer)
 
-const triggerBuySuccess = computed(() => preferencesStore.triggerBuySuccess)
-
 const breakPointWidth = 930
 const isMobile = computed(() => useWindowSize().width.value < breakPointWidth)
 
-const tabs = {
-  activity: '1',
-  chart: '2',
-}
-const activeTab = ref(tabs.activity)
+const activeTab = ref(GALLERY_ITEM_TABS.ACTIVITY)
 
 const onNFTBought = () => {
-  activeTab.value = tabs.activity
+  activeTab.value = GALLERY_ITEM_TABS.ACTIVITY
 }
 
 const image = computed(() => {
@@ -249,6 +245,13 @@ watch(triggerBuySuccess, (value, oldValue) => {
   }
 })
 
+watch(triggerOfferSuccess, (value) => {
+  if (value) {
+    activeTab.value = GALLERY_ITEM_TABS.OFFERS
+    preferencesStore.setTriggerOfferSuccess(false)
+  }
+})
+
 const congratsNewNft = ref('')
 
 onMounted(() => {

components/gallery/GalleryItemTabsPanel/GalleryItemTabsPanel.vue

@@ -8,9 +8,8 @@
   >
     <!-- activity -->
     <NeoTabItem
-      value="1"
+      :value="GALLERY_ITEM_TABS.ACTIVITY"
       :label="$t('tabs.activity')"
-      data-testid="offer-activity"
     >
       <GalleryItemActivity
         v-if="nft?.id"
@@ -21,9 +20,8 @@
     <!-- offers -->
     <NeoTabItem
       v-if="offerVisible(urlPrefix)"
-      value="2"
+      :value="GALLERY_ITEM_TABS.OFFERS"
       :label="$t('offers')"
-      data-testid="offers-activity"
     >
       <GalleryItemOffers
         v-if="nft?.id"
@@ -33,10 +31,9 @@
 
     <!-- swaps -->
     <NeoTabItem
-      v-if="offerVisible(urlPrefix)"
-      value="3"
+      v-if="swapVisible(urlPrefix)"
+      :value="GALLERY_ITEM_TABS.SWAPS"
       :label="$t('swaps')"
-      data-testid="offers-activity"
     >
       <GalleryItemSwaps
         v-if="nft?.id"
@@ -46,7 +43,7 @@
 
     <!-- chart -->
     <NeoTabItem
-      value="4"
+      :value="GALLERY_ITEM_TABS.CHART"
       :label="$t('tabs.chart')"
       class="p-5"
     >
@@ -61,30 +58,24 @@ import GalleryItemActivity from './GalleryItemActivity.vue'
 import GalleryItemOffers from './GalleryItemOffers.vue'
 import GalleryItemSwaps from './GalleryItemSwaps.vue'
 import GalleryItemChart from './GalleryItemChart.vue'
-import { offerVisible } from '@/utils/config/permission.config'
+import { GALLERY_ITEM_TABS } from './types'
+import { offerVisible, swapVisible } from '@/utils/config/permission.config'
 
 const props = withDefaults(
   defineProps<{
-    activeTab?: string
+    activeTab?: GALLERY_ITEM_TABS
   }>(),
   {
-    activeTab: '0',
+    activeTab: GALLERY_ITEM_TABS.ACTIVITY,
   },
 )
 
 const { urlPrefix } = usePrefix()
 const { getNft: nft } = storeToRefs(useNftStore())
 
-const active = ref('1')
-const collectionId = ref('')
-
-watchEffect(() => {
-  if (props.activeTab) {
-    active.value = props.activeTab
-  }
+const active = ref<GALLERY_ITEM_TABS>(props.activeTab)
 
-  collectionId.value = nft.value?.collection.id || ''
-})
+watch(() => props.activeTab, activeTab => active.value = activeTab)
 </script>
 
 <style lang="scss">

components/gallery/GalleryItemTabsPanel/types.ts

@@ -0,0 +1,6 @@
+export enum GALLERY_ITEM_TABS {
+  ACTIVITY,
+  OFFERS,
+  SWAPS,
+  CHART,
+}

components/trade/makeOffer/MakeOfferModal.vue

@@ -219,6 +219,7 @@ useTransactionNotification({
   sessionId: lastSessionId,
   autoTeleport,
   updateSession,
+  onSuccess: () => preferencesStore.setTriggerOfferSuccess(true),
   init: () => {
     return notification(({ isSessionState, notify, session }) => {
       return notify({

composables/useTransactionNotification.ts

@@ -6,9 +6,10 @@ type TransactionNotification = {
   updateSession: ReturnType<typeof useLoadingNotfication>['updateSession']
   initOn?: TransactionStatus[]
   autoTeleport?: Ref<boolean>
+  onSuccess?: () => void
 }
 
-export default function ({ status, isError, sessionId, init, updateSession, initOn = [TransactionStatus.Broadcast], autoTeleport = ref(false) }: TransactionNotification) {
+export default function ({ status, isError, sessionId, init, updateSession, initOn = [TransactionStatus.Broadcast], autoTeleport = ref(false), onSuccess }: TransactionNotification) {
   const closeModal = ref(() => {})
 
   watchEffect(() => {
@@ -23,6 +24,8 @@ export default function ({ status, isError, sessionId, init, updateSession, init
       status,
     },
     onSuccess: () => {
+      onSuccess?.()
+
       if (sessionId.value && !autoTeleport.value) {
         updateSession(sessionId.value, {
           state: 'succeeded',

stores/preferences.ts

@@ -52,6 +52,7 @@ interface State {
   makeOfferModalOpen: boolean
   completePurchaseModal: CompletePurchaseModalState
   triggerBuySuccess: boolean
+  triggerOfferSuccess: boolean
   // Layout
   layoutClass: string
   gridConfigs: GridConfig[]
@@ -85,6 +86,7 @@ export const usePreferencesStore = defineStore('preferences', {
     listingCartModalOpen: false,
     userCartModal: undefined,
     makeOfferModalOpen: false,
+    triggerOfferSuccess: false,
     shoppingCartCollapseOpen: false,
     completePurchaseModal: {
       isOpen: false,
@@ -119,6 +121,7 @@ export const usePreferencesStore = defineStore('preferences', {
     getShoppingCartCollapse: state => state.shoppingCartCollapseOpen,
     getCompletePurchaseModal: state => state.completePurchaseModal,
     getTriggerBuySuccess: state => state.triggerBuySuccess,
+    getTriggerOfferSuccess: state => state.triggerOfferSuccess,
     getLayoutClass: state => state.layoutClass,
     getGridConfigBySection: state => (section: GridSection) =>
       state.gridConfigs.find(grid => grid.section === section),
@@ -244,6 +247,9 @@ export const usePreferencesStore = defineStore('preferences', {
     setOpenedUserCartModal(mode: UserCartMode) {
       this.userCartModal = { mode, open: true }
     },
+    setTriggerOfferSuccess(payload: boolean) {
+      this.triggerOfferSuccess = payload
+    },
   },
   persist: true,
 })

tests/e2e/galleryitem.spec.ts

@@ -1,3 +1,4 @@
+import { GALLERY_ITEM_TABS } from '../../components/gallery/GalleryItemTabsPanel/types.ts'
 import { expect, test } from './fixtures'
 
 const ITEM_ADDRESS_PATH = '/ahp/gallery/52-1'
@@ -13,7 +14,7 @@ test('Gallery item Interactions', async ({ page }) => {
   await test.step('Verifies if activity tab has content', async () => {
     await page
       .getByTestId('gallery-item-tabs')
-      .locator('[aria-controls="1-content"]')
+      .locator(`[aria-controls="${GALLERY_ITEM_TABS.ACTIVITY}-content"]`)
       .click()
     await page.getByTestId('gallery-item-activity-filter-all').click()
     await expect(
@@ -45,7 +46,7 @@ test('Gallery item Interactions', async ({ page }) => {
   await test.step('Verify chart visibility', async () => {
     await page
       .getByTestId('gallery-item-tabs')
-      .locator('[aria-controls="4-content"]')
+      .locator(`[aria-controls="${GALLERY_ITEM_TABS.CHART}-content"]`)
       .click()
     await expect(page.getByTestId('gallery-item-chart')).toBeVisible()
   })