feat: #3040 #3033 #3034 #3037 coming soon marketplace updates (#3043)

packages/developer-portal/src/components/ui/menu.tsx

@@ -7,6 +7,7 @@ import { FaCloud, FaReadme, FaCog, FaChartBar, FaBolt, FaDesktop, FaStoreAlt } f
 import { MdHelp } from 'react-icons/md'
 import { GoDatabase } from 'react-icons/go'
 import { menuItemOverflow } from './__styles__/menu'
+import { history } from '../../core/router'
 
 export const generateMenuConfig = (location: Location<any>): MenuConfig => {
   return {
@@ -17,6 +18,7 @@ export const generateMenuConfig = (location: Location<any>): MenuConfig => {
         key: 'LOGO',
         icon: <ReapitLogo className="nav-item-icon" />,
         type: 'LOGO',
+        callback: () => history.push(Routes.APPS),
       },
       {
         title: 'Apps',

packages/marketplace/src/components/pages/app-detail/client/__tests__/__snapshots__/app-content.test.tsx.snap

@@ -7,71 +7,73 @@ exports[`ClientAppContent ClientAppContent - should match snapshot 1`] = `
   isFlex={true}
   isFlexColumn={true}
 >
-  <Component
-    summary="vitae elementum curabitur vitae"
-  />
-  <Component
-    images={
-      Array [
-        Object {
-          "description": "Application Icon",
-          "type": "icon",
-          "uri": "https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/7d88729f-2366-4561-9d5c-282615f3946b.jpeg",
-        },
-        Object {
-          "description": "Application Image",
-          "type": "image",
-          "uri": "https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/c4a36706-aa44-47f9-9fb6-9053eef4e581.png",
-        },
-        Object {
-          "description": "Application Image",
-          "type": "image",
-          "uri": "https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/65bd3b97-e78c-41cd-b75f-e06e1d2f00df.png",
-        },
-      ]
-    }
-    numberImages={2}
-    splitIndex={1}
-  />
-  <Component
-    description="enim facilisis"
-  />
-  <Component
-    images={
-      Array [
-        Object {
-          "description": "Application Icon",
-          "type": "icon",
-          "uri": "https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/7d88729f-2366-4561-9d5c-282615f3946b.jpeg",
-        },
-        Object {
-          "description": "Application Image",
-          "type": "image",
-          "uri": "https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/c4a36706-aa44-47f9-9fb6-9053eef4e581.png",
-        },
-        Object {
-          "description": "Application Image",
-          "type": "image",
-          "uri": "https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/65bd3b97-e78c-41cd-b75f-e06e1d2f00df.png",
-        },
-      ]
-    }
-    numberImages={2}
-    splitIndex={3}
-  />
-  <Component
-    permissions={
-      Array [
-        Object {
-          "description": "Read data about developers",
-          "name": "Marketplace/developers.read",
-        },
-        Object {
-          "description": "Write data about developers",
-          "name": "Marketplace/developers.write",
-        },
-      ]
-    }
-  />
+  <mock-styled.div>
+    <Component
+      summary="vitae elementum curabitur vitae"
+    />
+    <Component
+      images={
+        Array [
+          Object {
+            "description": "Application Icon",
+            "type": "icon",
+            "uri": "https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/7d88729f-2366-4561-9d5c-282615f3946b.jpeg",
+          },
+          Object {
+            "description": "Application Image",
+            "type": "image",
+            "uri": "https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/c4a36706-aa44-47f9-9fb6-9053eef4e581.png",
+          },
+          Object {
+            "description": "Application Image",
+            "type": "image",
+            "uri": "https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/65bd3b97-e78c-41cd-b75f-e06e1d2f00df.png",
+          },
+        ]
+      }
+      numberImages={2}
+      splitIndex={1}
+    />
+    <Component
+      description="enim facilisis"
+    />
+    <Component
+      images={
+        Array [
+          Object {
+            "description": "Application Icon",
+            "type": "icon",
+            "uri": "https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/7d88729f-2366-4561-9d5c-282615f3946b.jpeg",
+          },
+          Object {
+            "description": "Application Image",
+            "type": "image",
+            "uri": "https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/c4a36706-aa44-47f9-9fb6-9053eef4e581.png",
+          },
+          Object {
+            "description": "Application Image",
+            "type": "image",
+            "uri": "https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/65bd3b97-e78c-41cd-b75f-e06e1d2f00df.png",
+          },
+        ]
+      }
+      numberImages={2}
+      splitIndex={3}
+    />
+    <Component
+      permissions={
+        Array [
+          Object {
+            "description": "Read data about developers",
+            "name": "Marketplace/developers.read",
+          },
+          Object {
+            "description": "Write data about developers",
+            "name": "Marketplace/developers.write",
+          },
+        ]
+      }
+    />
+  </mock-styled.div>
 </Component>
 `;

packages/marketplace/src/components/pages/app-detail/client/app-content.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Section } from '@reapit/elements'
+import { FadeIn, Section } from '@reapit/elements'
 import {
   SummarySection,
   AdditionalImagesSection,
@@ -18,12 +18,14 @@ const AppContent: React.FC<AppContentProps> = ({ appDetailData }) => {
 
   return (
     <Section isFlex isFlexColumn hasPadding={false} hasMargin={false}>
-      <SummarySection summary={summary} />
-      <AdditionalImagesSection images={media} splitIndex={1} numberImages={2} />
-      <DescriptionSection description={description} />
-      <AdditionalImagesSection images={media} splitIndex={3} numberImages={2} />
-      {developerAbout && <DeveloperAboutSection>{developerAbout}</DeveloperAboutSection>}
-      <PermissionsSection permissions={scopes} />
+      <FadeIn>
+        <SummarySection summary={summary} />
+        <AdditionalImagesSection images={media} splitIndex={1} numberImages={2} />
+        <DescriptionSection description={description} />
+        <AdditionalImagesSection images={media} splitIndex={3} numberImages={2} />
+        {developerAbout && <DeveloperAboutSection>{developerAbout}</DeveloperAboutSection>}
+        <PermissionsSection permissions={scopes} />
+      </FadeIn>
     </Section>
   )
 }

packages/marketplace/src/components/pages/app-detail/client/app-detail.tsx

@@ -144,9 +144,7 @@ const AppDetail: React.FC = () => {
                   }
                 />
               </FadeIn>
-              <FadeIn>
-                <AppContent appDetailData={appDetailData} />
-              </FadeIn>
+              <AppContent appDetailData={appDetailData} />
               {!isMobile && (
                 <FadeIn>
                   <BackToAppsSection onClick={onBackToAppsButtonClick(history)} />

packages/marketplace/src/components/pages/apps/coming-soon.tsx

@@ -5,13 +5,10 @@ import { GridThreeColItem, Grid, H3 } from '@reapit/elements'
 import placeHolderImage from '@/assets/images/default-feature-image.jpg'
 import comingSoonImageZoopla from '@/assets/images/coming-soon/Zoopla.jpg'
 import comingSoonImageYourkeys from '@/assets/images/coming-soon/1Yourkeys.jpg'
-import comingSoonImageStarberry from '@/assets/images/coming-soon/2Starberry.jpg'
-import comingSoonImageVyomm from '@/assets/images/coming-soon/5Vyomm.jpg'
 import comingSoonImageSpectre from '@/assets/images/coming-soon/6Spectre.jpg'
 import comingSoonImageTwentyCiVMC from '@/assets/images/coming-soon/TwentyCiVMC.jpg'
 import comingSoonImageTwentyci from '@/assets/images/coming-soon/TwentyCiProspect.jpg'
 import comingSoonImageZero from '@/assets/images/coming-soon/8Zero.jpg'
-import comingSoonImageYomdel from '@/assets/images/coming-soon/9Yomdel.jpg'
 import comingSoonImageIntegrated from '@/assets/images/coming-soon/12Integrated.jpg'
 import comingSoonSmsSpeedway from '@/assets/images/coming-soon/SMS2.jpg'
 import comingSoonSmsSpeedWayIdVerification from '@/assets/images/coming-soon/SMSMobile.jpg'
@@ -24,6 +21,20 @@ import comingSoonPerfectPortal from '@/assets/images/coming-soon/PerfectPortal.j
 import comingSoonRightMove from '@/assets/images/coming-soon/RightMove.jpg'
 import comingSoonHomeSearch from '@/assets/images/coming-soon/Homesearch.jpg'
 import comingSoonDataWarehouse from '@/assets/images/coming-soon/DataWarehouse.jpg'
+import comingSoonNotify from '@/assets/images/coming-soon/Notify.jpg'
+import comingSoonSignatureSense from '@/assets/images/coming-soon/Signature.jpg'
+import comingSoonFCCParagon from '@/assets/images/coming-soon/FCCParagon.jpg'
+import comingSoonPropoly from '@/assets/images/coming-soon/Propoly.jpg'
+import comingSoonHomeHero from '@/assets/images/coming-soon/Homehero.jpg'
+import comingSoonBarbuck from '@/assets/images/coming-soon/Barbuck.jpg'
+import comingSoonNicheCom from '@/assets/images/coming-soon/Nichecom.jpg'
+import comingSoonCoadjute from '@/assets/images/coming-soon/Coadjute.jpg'
+import comingSoonSMSWorks from '@/assets/images/coming-soon/SMSWorks.jpg'
+import comingSoonLeadPro from '@/assets/images/coming-soon/Leadpro.jpg'
+import comingSoonSpinify from '@/assets/images/coming-soon/Spinify.jpg'
+import comingSoonCanopy from '@/assets/images/coming-soon/Canopy.jpg'
+import comingSoonData8 from '@/assets/images/coming-soon/Data8.jpg'
+import comingSoonFacebook from '@/assets/images/coming-soon/Facebook.jpg'
 
 import { useReapitConnect } from '@reapit/connect-session'
 import { reapitConnectBrowserSession } from '@/core/connect-session'
@@ -42,9 +53,6 @@ export const onImageError = (event: React.SyntheticEvent<HTMLImageElement>) =>
 const comingSoonImagesMap = {
   comingSoonImageZoopla,
   comingSoonImageYourkeys,
-  comingSoonImageVyomm,
-  comingSoonImageStarberry,
-  comingSoonImageYomdel,
   comingSoonImageIntegrated,
   comingSoonImageTwentyci,
   comingSoonImageZero,
@@ -61,6 +69,20 @@ const comingSoonImagesMap = {
   comingSoonRightMove,
   comingSoonHomeSearch,
   comingSoonDataWarehouse,
+  comingSoonNotify,
+  comingSoonSignatureSense,
+  comingSoonFCCParagon,
+  comingSoonPropoly,
+  comingSoonHomeHero,
+  comingSoonBarbuck,
+  comingSoonNicheCom,
+  comingSoonCoadjute,
+  comingSoonSMSWorks,
+  comingSoonLeadPro,
+  comingSoonSpinify,
+  comingSoonCanopy,
+  comingSoonData8,
+  comingSoonFacebook,
 }
 
 export const getComingAppLinkHref = (isDesktop: boolean, email?: string) => {