feat: implement deep linking support for marketplace items and tabs

src/features/misc/modals/Modals.jsx

@@ -7,6 +7,7 @@ import Navbar from '../../navbar/Navbar';
 import Preview from '../../helpers/preview/Preview';
 
 import EventBus from 'utils/eventbus';
+import { parseDeepLink, shouldAutoOpenModal } from 'utils/deepLinking';
 
 import Welcome from 'features/welcome/Welcome';
 
@@ -19,10 +20,22 @@ export default class Modals extends PureComponent {
       welcomeModal: false,
       appsModal: false,
       preview: false,
+      deepLinkData: null,
     };
   }
 
   componentDidMount() {
+    // Check for deep link first (has priority)
+    if (shouldAutoOpenModal()) {
+      const deepLinkData = parseDeepLink();
+      this.setState({
+        mainModal: true,
+        deepLinkData,
+      });
+      variables.stats.postEvent('modal', `Opened via deep link: ${deepLinkData.tab}`);
+      return;
+    }
+
     if (
       localStorage.getItem('showWelcome') === 'true' &&
       window.location.search !== '?nointro=true'
@@ -90,7 +103,10 @@ export default class Modals extends PureComponent {
           overlayClassName="Overlay"
           ariaHideApp={false}
         >
-          <MainModal modalClose={() => this.toggleModal('mainModal', false)} />
+          <MainModal
+            modalClose={() => this.toggleModal('mainModal', false)}
+            deepLinkData={this.state.deepLinkData}
+          />
         </Modal>
         <Modal
           closeTimeoutMS={300}

src/features/misc/views/Marketplace.jsx

@@ -4,26 +4,26 @@ import { memo } from 'react';
 import Tabs from '../../../components/Elements/MainModal/backend/Tabs';
 import MarketplaceTab from '../../marketplace/views/Browse';
 
-function Marketplace(props) {
+function Marketplace({ changeTab, deepLinkData }) {
   return (
-    <Tabs changeTab={(type) => props.changeTab(type)} current="marketplace">
+    <Tabs changeTab={(type) => changeTab(type)} current="marketplace">
       <div label={variables.getMessage('modals.main.marketplace.all')} name="all">
-        <MarketplaceTab type="all" />
+        <MarketplaceTab type="all" deepLinkData={deepLinkData} />
       </div>
       <div label={variables.getMessage('modals.main.marketplace.photo_packs')} name="photo_packs">
-        <MarketplaceTab type="photo_packs" />
+        <MarketplaceTab type="photo_packs" deepLinkData={deepLinkData} />
       </div>
       <div label={variables.getMessage('modals.main.marketplace.quote_packs')} name="quote_packs">
-        <MarketplaceTab type="quote_packs" />
+        <MarketplaceTab type="quote_packs" deepLinkData={deepLinkData} />
       </div>
       <div
         label={variables.getMessage('modals.main.marketplace.preset_settings')}
         name="preset_settings"
       >
-        <MarketplaceTab type="preset_settings" />
+        <MarketplaceTab type="preset_settings" deepLinkData={deepLinkData} />
       </div>
       <div label={variables.getMessage('modals.main.marketplace.collections')} name="collections">
-        <MarketplaceTab type="collections" />
+        <MarketplaceTab type="collections" deepLinkData={deepLinkData} />
       </div>
     </Tabs>
   );