feat: #2174 coming soon section in marketplace

packages/marketplace/src/components/pages/apps/__tests__/__snapshots__/coming-soon.test.tsx.snap

@@ -0,0 +1,161 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ComingSoonApps should match a snapshot 1`] = `
+<Component
+  isMultiLine={true}
+>
+  <Component
+    key=""
+  >
+    <div
+      className="card"
+    >
+      <div
+        className="card-image"
+      >
+        <img
+          className="image"
+          onError={[Function]}
+          src=""
+        />
+      </div>
+    </div>
+  </Component>
+  <Component
+    key=""
+  >
+    <div
+      className="card"
+    >
+      <div
+        className="card-image"
+      >
+        <img
+          className="image"
+          onError={[Function]}
+          src=""
+        />
+      </div>
+    </div>
+  </Component>
+  <Component
+    key=""
+  >
+    <div
+      className="card"
+    >
+      <div
+        className="card-image"
+      >
+        <img
+          className="image"
+          onError={[Function]}
+          src=""
+        />
+      </div>
+    </div>
+  </Component>
+  <Component
+    key=""
+  >
+    <div
+      className="card"
+    >
+      <div
+        className="card-image"
+      >
+        <img
+          className="image"
+          onError={[Function]}
+          src=""
+        />
+      </div>
+    </div>
+  </Component>
+  <Component
+    key=""
+  >
+    <div
+      className="card"
+    >
+      <div
+        className="card-image"
+      >
+        <img
+          className="image"
+          onError={[Function]}
+          src=""
+        />
+      </div>
+    </div>
+  </Component>
+  <Component
+    key=""
+  >
+    <div
+      className="card"
+    >
+      <div
+        className="card-image"
+      >
+        <img
+          className="image"
+          onError={[Function]}
+          src=""
+        />
+      </div>
+    </div>
+  </Component>
+  <Component
+    key=""
+  >
+    <div
+      className="card"
+    >
+      <div
+        className="card-image"
+      >
+        <img
+          className="image"
+          onError={[Function]}
+          src=""
+        />
+      </div>
+    </div>
+  </Component>
+  <Component
+    key=""
+  >
+    <div
+      className="card"
+    >
+      <div
+        className="card-image"
+      >
+        <img
+          className="image"
+          onError={[Function]}
+          src=""
+        />
+      </div>
+    </div>
+  </Component>
+  <Component
+    key=""
+  >
+    <div
+      className="card"
+    >
+      <div
+        className="card-image"
+      >
+        <img
+          className="image"
+          onError={[Function]}
+          src=""
+        />
+      </div>
+    </div>
+  </Component>
+</Component>
+`;

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

@@ -0,0 +1,10 @@
+import * as React from 'react'
+import { shallow } from 'enzyme'
+
+import ComingSoonApps from '../coming-soon'
+
+describe('ComingSoonApps', () => {
+  it('should match a snapshot', () => {
+    expect(shallow(<ComingSoonApps />)).toMatchSnapshot()
+  })
+})

packages/marketplace/src/components/pages/apps/apps.tsx

@@ -19,6 +19,7 @@ import { clientFetchAppSummary } from '@/actions/apps'
 import styles from '@/styles/pages/apps.scss?mod'
 import qs from 'query-string'
 import { getNumberOfItems } from '@/utils/browse-app'
+import ComingSoonApps from './coming-soon'
 
 export const handleAfterClose = ({ setVisible }) => () => setVisible(false)
 export const handleOnChange = history => (page: number) => {
@@ -105,6 +106,7 @@ export const Apps: React.FunctionComponent = () => {
             </>
           </TransitionGroup>
         </InfiniteScroll>
+        <ComingSoonApps />
       </Section>
     </ErrorBoundary>
   )

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

@@ -0,0 +1,45 @@
+import * as React from 'react'
+import { GridThreeColItem, Grid } from '@reapit/elements'
+import placeHolderImage from '@/assets/images/default-feature-image.jpg'
+import comingSoonImage1 from '@/assets/images/coming-soon/1Area.jpg'
+import comingSoonImage2 from '@/assets/images/coming-soon/2Starberry.jpg'
+import comingSoonImage3 from '@/assets/images/coming-soon/3IAMProperty.jpg'
+import comingSoonImage4 from '@/assets/images/coming-soon/4SMS.jpg'
+import comingSoonImage5 from '@/assets/images/coming-soon/5Vyomm.jpg'
+import comingSoonImage6 from '@/assets/images/coming-soon/6Spectre.jpg'
+import comingSoonImage7 from '@/assets/images/coming-soon/7Twentyci.jpg'
+import comingSoonImage8 from '@/assets/images/coming-soon/8Zero.jpg'
+import comingSoonImage9 from '@/assets/images/coming-soon/9Yomdel.jpg'
+
+export const onImageError = (event: React.SyntheticEvent<HTMLImageElement>) =>
+  (event.currentTarget.src = placeHolderImage)
+
+const comingSoonImagesList = [
+  comingSoonImage1,
+  comingSoonImage2,
+  comingSoonImage3,
+  comingSoonImage4,
+  comingSoonImage5,
+  comingSoonImage6,
+  comingSoonImage7,
+  comingSoonImage8,
+  comingSoonImage9,
+]
+
+const ComingSoonApps: React.FC = () => {
+  return (
+    <Grid isMultiLine>
+      {comingSoonImagesList.map(imgSrc => (
+        <GridThreeColItem key={imgSrc}>
+          <div className="card">
+            <div className="card-image">
+              <img className="image" src={imgSrc} onError={onImageError} />
+            </div>
+          </div>
+        </GridThreeColItem>
+      ))}
+    </Grid>
+  )
+}
+
+export default ComingSoonApps