feat: #1127 preview app from app details page (#1573)

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

@@ -195,12 +195,7 @@ describe('ClientAppDetail', () => {
   })
   describe('onBackToAppsButtonClick', () => {
     it('should run correctly', () => {
-      const fn = onBackToAppsButtonClick(history, 'DEVELOPER')
-      fn()
-      expect(history.push).toBeCalledWith(Routes.DEVELOPER_MY_APPS)
-    })
-    it('should run correctly', () => {
-      const fn = onBackToAppsButtonClick(history, 'CLIENT')
+      const fn = onBackToAppsButtonClick(history)
       fn()
       expect(history.push).toBeCalledWith(Routes.CLIENT)
     })

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

@@ -14,7 +14,7 @@ import { Loader, Button, Alert, FormSection } from '@reapit/elements'
 import clientAppDetailStyles from '@/styles/pages/client-app-detail.scss?mod'
 import ClientAppInstallConfirmation from '@/components/ui/client-app-detail/client-app-install-confirmation'
 import { Aside } from './aside'
-import { clientFetchAppDetailFailed } from '@/actions/client'
+import { clientFetchAppDetail } from '@/actions/client'
 import { developerApplyAppDetails } from '@/actions/developer'
 import { useParams } from 'react-router'
 import { Dispatch } from 'redux'
@@ -52,11 +52,8 @@ export const handleUnInstallAppButtonClick = (setIsVisibleUnInstallConfirmation:
   }
 }
 
-export const onBackToAppsButtonClick = (history: History, loginType: LoginType) => {
+export const onBackToAppsButtonClick = (history: History) => {
   return () => {
-    if (loginType === 'DEVELOPER') {
-      history.push(Routes.DEVELOPER_MY_APPS)
-    }
     history.push(Routes.CLIENT)
   }
 }
@@ -69,18 +66,14 @@ export const handleApplyAppDetailsFromLocalStorage = (
   if (loginType !== 'DEVELOPER' || !appId) return
   try {
     const appDataString = localStorage.getItem('developer-preview-app')
-    if (!appDataString) {
-      throw 'No app preview'
-    }
+    if (!appDataString) throw 'No preview data'
 
     const appData = JSON.parse(appDataString)
-    if (appData.id !== appId) {
-      throw 'No app preview'
-    }
+    if (appData.id !== appId) throw 'Preview data not match appId'
 
     dispatch(developerApplyAppDetails(appData))
   } catch (err) {
-    dispatch(clientFetchAppDetailFailed(err))
+    dispatch(clientFetchAppDetail({ id: appId }))
   }
 }
 
@@ -186,20 +179,22 @@ const ClientAppDetail: React.FC<ClientAppDetailProps> = () => {
           )}
         />
         <AppContent desktopIntegrationTypes={userDesktopIntegrationTypes} appDetailData={appDetailData} />
-        <FormSection className={clientAppDetailStyles.footerContainer}>
-          <div className={clientAppDetailStyles.hiddenInDesktopScreenSize}>
-            <ContactDeveloperSection
-              contact={{
-                developer,
-                telephone,
-                supportEmail,
-                homePage,
-              }}
-              hasGutter={false}
-            />
-          </div>
-          <Button onClick={onBackToAppsButtonClick(history, loginType)}>Back To Apps</Button>
-        </FormSection>
+        {loginType !== 'DEVELOPER' && (
+          <FormSection className={clientAppDetailStyles.footerContainer}>
+            <div className={clientAppDetailStyles.hiddenInDesktopScreenSize}>
+              <ContactDeveloperSection
+                contact={{
+                  developer,
+                  telephone,
+                  supportEmail,
+                  homePage,
+                }}
+                hasGutter={false}
+              />
+            </div>
+            <Button onClick={onBackToAppsButtonClick(history)}>Back To Apps</Button>
+          </FormSection>
+        )}
         {isVisibleUninstallConfirmation && (
           <ClientAppUninstallConfirmation
             visible={isVisibleUninstallConfirmation}

packages/marketplace/src/components/pages/developer-app-detail/app-detail/__test__/__snapshots__/app-content.test.tsx.snap

@@ -74,17 +74,21 @@ exports[`AppContent AppContent - should match snapshoot 1`] = `
               See listing preview
             </span>
              
-            <FaExternalLinkAlt>
+            <FaExternalLinkAlt
+              onClick={[Function]}
+            >
               <IconBase
                 attr={
                   Object {
                     "viewBox": "0 0 512 512",
                   }
                 }
+                onClick={[Function]}
               >
                 <svg
                   fill="currentColor"
                   height="1em"
+                  onClick={[Function]}
                   stroke="currentColor"
                   strokeWidth="0"
                   style={

packages/marketplace/src/components/pages/developer-app-detail/app-detail/__test__/app-content.test.tsx

@@ -10,6 +10,7 @@ import AppContent, {
   handleUninstallSuccess,
   renderAuthentication,
   renderInstallationsTable,
+  handleOpenAppPreview,
 } from '../app-content/app-content'
 import { Provider } from 'react-redux'
 import { ReduxState } from '@/types/core'
@@ -100,4 +101,14 @@ describe('AppContent', () => {
       expect(wrapper).toMatchSnapshot()
     })
   })
+
+  describe('handleOpenAppPreview', () => {
+    it('should run correctly', () => {
+      const appId = 'appId'
+      const spyOpenUrl = jest.spyOn(window, 'open')
+      const fn = handleOpenAppPreview(appId)
+      fn()
+      expect(spyOpenUrl).toBeCalledWith('developer/apps/appId/preview', '_blank')
+    })
+  })
 })

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

@@ -92,6 +92,11 @@ export const handleUninstallSuccess = ({
   )
 }
 
+export const handleOpenAppPreview = (appId: string) => () => {
+  const url = `developer/apps/${appId}/preview`
+  window.open(url, '_blank')
+}
+
 export const CustomUninstallCell: React.FC<{ onClick: () => void }> = ({ onClick }) => (
   <a onClick={onClick}>Uninstall</a>
 )
@@ -146,7 +151,7 @@ const AppContent: React.FC<AppContentProps> = ({ appDetailState }) => {
       <div className={appDetailStyles.gutter}>
         <H5 className="flex items-center">
           <span className="mr-1">See listing preview</span>{' '}
-          <FaExternalLinkAlt className={developerAppDetailStyles.listPreviewIcon} />
+          <FaExternalLinkAlt className={developerAppDetailStyles.listPreviewIcon} onClick={handleOpenAppPreview(id)} />
         </H5>
         <p>The listing preview will display your app as it would appear in the Marketplace</p>
       </div>

packages/marketplace/src/components/pages/developer-submit-app/general-information-section.tsx

@@ -17,6 +17,7 @@ import linkStyles from '@/styles/elements/link.scss?mod'
 import { useSelector } from 'react-redux'
 import { selectCategories } from '@/selector/app-categories'
 import { CategoryModel } from '@reapit/foundations-ts-definitions'
+import styles from '@/styles/pages/developer-submit-app.scss?mod'
 
 export type GeneralInformationSectionProps = {}
 
@@ -122,7 +123,7 @@ const GeneralInformationSection: React.FC<GeneralInformationSectionProps> = () =
             placeholder={'A short strapline summary for your app listing. Must be between 50 and 150 characters'}
           />
         </GridItem>
-        <GridItem>
+        <GridItem className={styles.descriptionColumn}>
           <TextAreaEditor
             id="description"
             actions={[

packages/marketplace/src/styles/blocks/diff-render-html.scss

@@ -19,10 +19,12 @@
     margin-top: 0;
     margin-left: 0;
     list-style-position: inside;
+
     & li div {
       display: inline-block;
     }
   }
+
   & p {
     margin: 1rem 0;
   }
@@ -42,6 +44,7 @@
 }
 
 .block {
+  word-wrap: break-word;
   border-radius: 4px;
   width: 50%;
 }

packages/marketplace/src/styles/pages/developer-submit-app.scss

@@ -1,3 +1,15 @@
+@import '../base/screen-size.scss';
+
+.description-column {
+  @include for-mobile-only {
+    width: 100%;
+  }
+
+  @include for-tablet-and-desktop {
+    width: 50%;
+  }
+}
+
 .terms-submit-app {
   height: 100%;
   width: 100%;
@@ -8,9 +20,11 @@
     white-space: nowrap;
   }
 }
+
 .label-terms {
   cursor: pointer;
 }
+
 .terms-link {
   text-decoration: underline;
 }