feat: add hands category ftu (decentraland#1924)

Atlasnfts · Jul 13, 2023 · 62b503e · 62b503e
1 parent 79426aa
commit 62b503e
Show file tree

Hide file tree

Showing 11 changed files with 154 additions and 18 deletions.
diff --git a/webapp/src/components/HomePage/HomePage.tsx b/webapp/src/components/HomePage/HomePage.tsx
@@ -20,6 +20,7 @@ import { Slideshow } from './Slideshow'
 import { RankingsTable } from '../RankingsTable'
 import { BackToTopButton } from '../BackToTopButton'
 import { ListsLaunchModal } from '../Modals/ListsLaunchModal'
+import HandsCategoryLaunchModal from '../Modals/FTU/HandsCategoryLaunchModal'
 import { CampaignHomepageBanner } from '../Campaign/banners/CampaignHomepageBanner'
 import { Props } from './HomePage.types'
 import './HomePage.css'
@@ -213,6 +214,7 @@ const HomePage = (props: Props) => {
       <Navbar isFullscreen />
       <Navigation activeTab={NavigationTab.OVERVIEW} />
       <ListsLaunchModal />
+      <HandsCategoryLaunchModal />
       {isCampaignHomepageBannerEnabled ? (
         <CampaignBanner>
           <CampaignHomepageBanner />

diff --git a/.../src/components/Modals/FTU/HandsCategoryLaunchModal/HandsCategoryLaunchModal.container.ts b/.../src/components/Modals/FTU/HandsCategoryLaunchModal/HandsCategoryLaunchModal.container.ts
@@ -0,0 +1,15 @@
+import { connect } from 'react-redux'
+import { isLoadingFeatureFlags } from 'decentraland-dapps/dist/modules/features/selectors'
+import { RootState } from '../../../../modules/reducer'
+import { getIsHandsCategoryEnabled } from '../../../../modules/features/selectors'
+import { MapStateProps } from './HandsCategoryLaunchModal.types'
+import { HandsCategoryLaunchModal } from './HandsCategoryLaunchModal'
+
+const mapState = (state: RootState): MapStateProps => {
+  return {
+    isLoadingFeatureFlags: isLoadingFeatureFlags(state),
+    isHandsCategoryEnabled: getIsHandsCategoryEnabled(state)
+  }
+}
+
+export default connect(mapState, {})(HandsCategoryLaunchModal)
diff --git a/...pp/src/components/Modals/FTU/HandsCategoryLaunchModal/HandsCategoryLaunchModal.module.css b/...pp/src/components/Modals/FTU/HandsCategoryLaunchModal/HandsCategoryLaunchModal.module.css
@@ -0,0 +1,19 @@
+.handCategoryModal :global(.dcl.modal-navigation-title) {
+  font-size: 26px;
+  font-weight: 600;
+  margin-top: 25px;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 30px;
+  padding: 25px;
+  padding-bottom: 40px;
+}
+
+.actionButton {
+  max-width: 380px;
+}
diff --git a/webapp/src/components/Modals/FTU/HandsCategoryLaunchModal/HandsCategoryLaunchModal.tsx b/webapp/src/components/Modals/FTU/HandsCategoryLaunchModal/HandsCategoryLaunchModal.tsx
@@ -0,0 +1,67 @@
+import { useCallback, useEffect, useState } from 'react'
+import { Link } from 'react-router-dom'
+import { t } from 'decentraland-dapps/dist/modules/translation/utils'
+import { Modal, Button, ModalNavigation } from 'decentraland-ui'
+import { locations } from '../../../../modules/routing/locations'
+import { Section } from '../../../../modules/vendor/decentraland'
+import { AssetStatusFilter } from '../../../../utils/filters'
+import handsCategoryImg from '../../../../images/hands_category_img.png'
+import { Props } from './HandsCategoryLaunchModal.types'
+import styles from './HandsCategoryLaunchModal.module.css'
+
+const HANDS_CATEGORY_FTU_KEY = 'hands-category-ftu-key'
+
+export const HandsCategoryLaunchModal = ({
+  isHandsCategoryEnabled,
+  isLoadingFeatureFlags
+}: Props) => {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const onClose = useCallback(() => {
+    localStorage.setItem(HANDS_CATEGORY_FTU_KEY, 'true')
+    setIsOpen(false)
+  }, [])
+
+  useEffect(() => {
+    if (
+      !isLoadingFeatureFlags &&
+      isHandsCategoryEnabled &&
+      !localStorage.getItem(HANDS_CATEGORY_FTU_KEY)
+    ) {
+      setIsOpen(true)
+    }
+  }, [isLoadingFeatureFlags, isHandsCategoryEnabled])
+
+  return (
+    <Modal
+      open={isOpen}
+      size={'small'}
+      onClose={onClose}
+      className={styles.handCategoryModal}
+    >
+      <ModalNavigation
+        title={t('hands_category_ftu.title')}
+        onClose={onClose}
+      />
+      <div className={styles.container}>
+        <img
+          src={handsCategoryImg}
+          aria-label={t('hands_category_ftu.img_alt')}
+        />
+        <span>{t('hands_category_ftu.subtitle')}</span>
+        <Button
+          as={Link}
+          to={locations.browse({
+            section: Section.WEARABLES_HANDS,
+            status: AssetStatusFilter.ON_SALE
+          })}
+          className={styles.actionButton}
+          onClick={onClose}
+          primary
+        >
+          {t('hands_category_ftu.action')}
+        </Button>
+      </div>
+    </Modal>
+  )
+}
diff --git a/webapp/src/components/Modals/FTU/HandsCategoryLaunchModal/HandsCategoryLaunchModal.types.ts b/webapp/src/components/Modals/FTU/HandsCategoryLaunchModal/HandsCategoryLaunchModal.types.ts
@@ -0,0 +1,9 @@
+export type Props = {
+  isLoadingFeatureFlags: boolean
+  isHandsCategoryEnabled: boolean
+}
+
+export type MapStateProps = Pick<
+  Props,
+  'isHandsCategoryEnabled' | 'isLoadingFeatureFlags'
+>
diff --git a/webapp/src/components/Modals/FTU/HandsCategoryLaunchModal/index.ts b/webapp/src/components/Modals/FTU/HandsCategoryLaunchModal/index.ts
@@ -0,0 +1,3 @@
+import HandsCategoryLaunchModal from "./HandsCategoryLaunchModal.container";
+
+export default HandsCategoryLaunchModal
diff --git a/.../components/Vendor/decentraland/NFTSections/NFTSectionsMenuItems/NFTSectionsMenuItems.tsx b/.../components/Vendor/decentraland/NFTSections/NFTSectionsMenuItems/NFTSectionsMenuItems.tsx
@@ -98,20 +98,32 @@ const NFTSectionsMenuItems = ({
                 currentValue={section}
                 onMenuItemClick={handleOnSectionClick}
               />
-
-              {[
-                Section.WEARABLES_UPPER_BODY,
-                Section.WEARABLES_LOWER_BODY,
-                Section.WEARABLES_FEET
-              ].map(menuSection => (
+              <MenuItem
+                key={Section.WEARABLES_UPPER_BODY}
+                value={Section.WEARABLES_UPPER_BODY}
+                currentValue={section}
+                onClick={handleOnSectionClick}
+                nestedLevel={1}
+              />
+              {isHandsCategoryEnabled && (
                 <MenuItem
-                  key={menuSection}
-                  value={menuSection}
+                  value={Section.WEARABLES_HANDS}
                   currentValue={section}
                   onClick={handleOnSectionClick}
                   nestedLevel={1}
                 />
-              ))}
+              )}
+              {[Section.WEARABLES_LOWER_BODY, Section.WEARABLES_FEET].map(
+                menuSection => (
+                  <MenuItem
+                    key={menuSection}
+                    value={menuSection}
+                    currentValue={section}
+                    onClick={handleOnSectionClick}
+                    nestedLevel={1}
+                  />
+                )
+              )}
 
               <DropdownMenu
                 values={[
@@ -134,15 +146,6 @@ const NFTSectionsMenuItems = ({
                 onClick={handleOnSectionClick}
                 nestedLevel={1}
               />
-
-              {isHandsCategoryEnabled && (
-                <MenuItem
-                  value={Section.WEARABLES_HANDS}
-                  currentValue={section}
-                  onClick={handleOnSectionClick}
-                  nestedLevel={1}
-                />
-              )}
             </>
           ) : null}
         </>

diff --git a/webapp/src/images/hands_category_img.png b/webapp/src/images/hands_category_img.png
diff --git a/webapp/src/modules/translation/locales/en.json b/webapp/src/modules/translation/locales/en.json
@@ -1422,6 +1422,12 @@
     "explore_collectibles": "Explore collectibles",
     "view_my_lists": "View My Lists"
   },
+  "hands_category_ftu": {
+    "title": "Now you can buy Hands wearables!",
+    "subtitle": "Discover the new Hands wearables in marketplace!",
+    "action": "Discover amazing hands wearables",
+    "img_alt": "New hands category"
+  },
   "list_card": {
     "item_count": "{count} {count, plural, one {item} other {items}}",
     "edit_list": "Edit List",

diff --git a/webapp/src/modules/translation/locales/es.json b/webapp/src/modules/translation/locales/es.json
@@ -1413,6 +1413,12 @@
     "explore_collectibles": "Explora coleccionables",
     "view_my_lists": "Ver Mis Listas"
   },
+  "hands_category_ftu": {
+    "title": "¡Ahora puedes comprar manos!",
+    "subtitle": "¡Descubre los nuevos wearables en el mercado!",
+    "action": "Descubre los increibles wearables de manos",
+    "img_alt": "Categoría nueva de manos"
+  },
   "list_card": {
     "item_count": "{count} {count, plural, one {item} other {items}}",
     "edit_list": "Editar lista",

diff --git a/webapp/src/modules/translation/locales/zh.json b/webapp/src/modules/translation/locales/zh.json
@@ -1418,6 +1418,12 @@
     "explore_collectibles": "探索收藏品",
     "view_my_lists": "查看我的列表"
   },
+  "hands_category_ftu": {
+    "title": "现在，您可以买手可穿戴设备！",
+    "subtitle": "在市场上发现新手可穿戴设备！",
+    "action": "发现惊人的手可穿戴设备",
+    "img_alt": "新手类别"
+  },
   "list_card": {
     "item_count": "{count} {count, plural, one {项} other {项目}}",
     "edit_list": "编辑列表",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import HandsCategoryLaunchModal from "./HandsCategoryLaunchModal.container";

		export default HandsCategoryLaunchModal