Skip to content

Commit

Permalink
fix: #1468 client standalone ui update (#1560)
Browse files Browse the repository at this point in the history
  • Loading branch information
Cuong Vu authored Jun 4, 2020
1 parent 2b49b19 commit 12a2c56
Show file tree
Hide file tree
Showing 20 changed files with 359 additions and 28 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,21 @@ exports[`AppContent renderDesktopIntegrationTypes - should match snapshot 1`] =
</div>
`;

exports[`AppContent renderDirectAPI - should match snapshot two cases 1`] = `
<div>
<div>
<Component>
Direct API
</Component>
<p>
Yes
</p>
</div>
</div>
`;

exports[`AppContent renderDirectAPI - should match snapshot two cases 2`] = `<div />`;

exports[`AppContent renderExtraMedia - should match snapshot 1`] = `
<div>
<div
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ exports[`Aside Aside - should match snapshot 1`] = `
</Component>
</div>
</div>
<div />
</div>
</div>
`;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -169,7 +169,7 @@ exports[`ClientAppDetail should not render loader when client.appDetail.data is
data-test="client-app-detail-container"
>
<div>
<DesktopAppHeader
<ClientAppHeader
appDetailData={
Object {
"key": "value",
Expand All @@ -183,15 +183,15 @@ exports[`ClientAppDetail should not render loader when client.appDetail.data is
>
<div>
<div
className="flex mb-3"
className="flex mb-3 undefined"
>
<div>
<img
alt=""
className="images "
src="https://bulma.io/images/placeholders/48x48.png"
/>
</div>
<div
style={
Object {
"backgroundImage": "url('undefined')",
}
}
/>
<div>
<Component>
<h2
Expand Down Expand Up @@ -233,11 +233,18 @@ exports[`ClientAppDetail should not render loader when client.appDetail.data is
</div>
</div>
</div>
<img
src="https://bulma.io/images/placeholders/48x48.png"
/>
<div />
<div>
<img
style={
Object {
"height": "20rem",
}
}
/>
</div>
</div>
</DesktopAppHeader>
</ClientAppHeader>
<AppContent
appDetailData={
Object {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import AppContent, {
renderDesktopIntegrationTypes,
renderExtraMedia,
renderPermissions,
renderDirectAPI,
} from '../app-content'

import { appDetailDataStub } from '@/sagas/__stubs__/app-detail'
Expand All @@ -15,32 +16,47 @@ import { DesktopIntegrationTypeModel } from '@reapit/foundations-ts-definitions'
import { AppDetailDataNotNull } from '@/reducers/client/app-detail'

describe('AppContent', () => {
test('renderCategory - should match snapshot', () => {
it('renderCategory - should match snapshot', () => {
const result = renderCategory(appDetailDataStub.data.category)
const wrapper = shallow(<div>{result}</div>)
expect(wrapper).toMatchSnapshot()
})
test('renderDescripion - should match snapshot', () => {

it('renderDescripion - should match snapshot', () => {
const result = renderDescripion(appDetailDataStub.data.description as string)
const wrapper = shallow(<div>{result}</div>)
expect(wrapper).toMatchSnapshot()
})
test('renderDesktopIntegrationTypes - should match snapshot', () => {

it('renderDesktopIntegrationTypes - should match snapshot', () => {
const result = renderDesktopIntegrationTypes(integrationTypesStub.data as DesktopIntegrationTypeModel[])
const wrapper = shallow(<div>{result}</div>)
expect(wrapper).toMatchSnapshot()
})
test('renderExtraMedia - should match snapshot', () => {

it('renderDirectAPI - should match snapshot two cases', () => {
const result1 = renderDirectAPI(true)
const wrapper1 = shallow(<div>{result1}</div>)
expect(wrapper1).toMatchSnapshot()

const result2 = renderDirectAPI(false)
const wrapper2 = shallow(<div>{result2}</div>)
expect(wrapper2).toMatchSnapshot()
})

it('renderExtraMedia - should match snapshot', () => {
const result = renderExtraMedia(appDetailDataStub.data.media)
const wrapper = shallow(<div>{result}</div>)
expect(wrapper).toMatchSnapshot()
})
test('renderPermissions - should match snapshot', () => {

it('renderPermissions - should match snapshot', () => {
const result = renderPermissions(appDetailDataStub.data.scopes)
const wrapper = shallow(<div>{result}</div>)
expect(wrapper).toMatchSnapshot()
})
test('AppContent - should match snapshot', () => {

it('AppContent - should match snapshot', () => {
const wrapper = shallow(
<AppContent
appDetailData={appDetailDataStub as AppDetailDataNotNull}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,19 @@ export const renderDesktopIntegrationTypes = (desktopIntegrationTypes: DesktopIn
)
}

export const renderDirectAPI = (isDirectAPI?: boolean) => {
if (!isDirectAPI) {
return null
}

return (
<div className={clientAppDetailStyles.gutter}>
<H5>Direct API</H5>
<p>Yes</p>
</div>
)
}

const renderExtraMediaClassNames = [clientAppDetailStyles.renderImageContainer, clientAppDetailStyles.gutter]
export const renderExtraMedia = (media: MediaModel[] = []) => (
<div className={renderExtraMediaClassNames.join(' ')}>
Expand All @@ -82,7 +95,7 @@ export const renderExtraMedia = (media: MediaModel[] = []) => (
)

const AppContent: React.FC<AppContentProps> = ({ appDetailData, desktopIntegrationTypes = [] }) => {
const { summary = '', description = '', category, scopes = [], media = [] } = appDetailData
const { summary = '', description = '', category, scopes = [], media = [], isDirectApi } = appDetailData
/**
* 0 = icon
* 1 = featured media
Expand All @@ -105,6 +118,7 @@ const AppContent: React.FC<AppContentProps> = ({ appDetailData, desktopIntegrati
<div className={clientAppDetailStyles.hiddenInDesktopScreenSize}>
{renderCategory(category)}
{renderDesktopIntegrationTypes(desktopIntegrationTypes)}
{renderDirectAPI(isDirectApi)}
<RenderWithHeader header="Developer">TBC</RenderWithHeader>
<RenderWithHeader header="About Developer">
<p>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React from 'react'
import { AboutDeveloperSection, DeveloperImageSection } from './reuse'
import { ContactDeveloperSection } from './contact-developer-section'
import standAloneAppDetailStyles from '@/styles/blocks/standalone-app-detail.scss?mod'
import { renderCategory, renderDesktopIntegrationTypes } from '../client-app-detail/app-content'
import { renderCategory, renderDesktopIntegrationTypes, renderDirectAPI } from '../client-app-detail/app-content'
import { DesktopIntegrationTypeModel } from '@reapit/foundations-ts-definitions'
import { AppDetailDataNotNull } from '@/reducers/client/app-detail'
import { Button, H5 } from '@reapit/elements'
Expand All @@ -19,7 +19,7 @@ interface AsideProps {
}

export const Aside: React.FC<AsideProps> = ({ desktopIntegrationTypes, appDetailData }) => {
const { category, isWebComponent, developer, telephone, supportEmail, homePage } = appDetailData
const { category, isWebComponent, developer, telephone, supportEmail, homePage, isDirectApi } = appDetailData

return (
<div className={standAloneAppDetailStyles.asideContainer}>
Expand All @@ -38,6 +38,7 @@ export const Aside: React.FC<AsideProps> = ({ desktopIntegrationTypes, appDetail
<div className={standAloneAppDetailStyles.headerWithoutMargin}>
{renderDesktopIntegrationTypes(desktopIntegrationTypes)}
</div>
<div className={standAloneAppDetailStyles.headerWithoutMargin}>{renderDirectAPI(isDirectApi)}</div>
{isWebComponent && (
<div className={standAloneAppDetailStyles.headerWithoutMargin}>
<WebComponentConfig />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import { selectIntegrationTypes } from '@/selector/integration-types'
import { useSelector, useDispatch } from 'react-redux'
import { selectAppDetailData, selectAppDetailLoading, selectAppDetailError } from '@/selector/client-app-detail'
import { selectLoginType, selectIsAdmin } from '@/selector/auth'
import AppHeader from '@/components/ui/standalone-app-detail/app-header'
import ClientAppHeader from '@/components/ui/client-app-detail/client-app-header'
import AppContent from './app-content'
import { Loader, Button, Alert, FormSection } from '@reapit/elements'
import clientAppDetailStyles from '@/styles/pages/client-app-detail.scss?mod'
Expand Down Expand Up @@ -173,7 +173,7 @@ const ClientAppDetail: React.FC<ClientAppDetailProps> = () => {
<div data-test="client-app-detail-container" className={clientAppDetailStyles.appDetailContainer}>
{isDesktop && <Aside appDetailData={appDetailData} desktopIntegrationTypes={userDesktopIntegrationTypes} />}
<div className={clientAppDetailStyles.mainContainer}>
<AppHeader
<ClientAppHeader
appDetailData={appDetailData}
buttonGroup={renderAppHeaderButtonGroup(
id,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`ClientAppHeader should match a snapshot 1`] = `
<div>
<div
className="flex mb-3 undefined"
>
<div
style={
Object {
"backgroundImage": "url('https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/7d88729f-2366-4561-9d5c-282615f3946b.jpeg')",
}
}
/>
<div>
<Component>
Peter's Properties
</Component>
<div>
<FaCheck />
Verified by Reapit Ltd
</div>
</div>
</div>
<div />
<div>
<img
src="https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/c4a36706-aa44-47f9-9fb6-9053eef4e581.png"
style={
Object {
"height": "auto",
}
}
/>
</div>
</div>
`;
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import * as React from 'react'
import { shallow } from 'enzyme'
import { appDetailDataStub } from '@/sagas/__stubs__/app-detail'
import ClientAppHeader, { ClientAppHeaderProps } from '../client-app-header'

const mockProps: ClientAppHeaderProps = {
appDetailData: {
...appDetailDataStub.data,
apiKey: '',
},
}

describe('ClientAppHeader', () => {
it('should match a snapshot', () => {
expect(shallow(<ClientAppHeader {...mockProps} />)).toMatchSnapshot()
})
})
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import * as React from 'react'
import { H2 } from '@reapit/elements'
import { FaCheck } from 'react-icons/fa'
import { AppDetailModel } from '@reapit/foundations-ts-definitions'
import styles from '@/styles/blocks/client-app-header.scss?mod'
import { MEDIA_INDEX } from '@/constants/media'

export type ClientAppHeaderProps = {
appDetailData: AppDetailModel & {
apiKey?: string | undefined
}
buttonGroup?: React.ReactNode
}

const ClientAppHeader: React.FC<ClientAppHeaderProps> = ({ appDetailData, buttonGroup }) => {
const { media } = appDetailData
const appIcon = media?.filter(({ type }) => type === 'icon')[MEDIA_INDEX.ICON]
const featureImageSrc = appDetailData?.media?.[MEDIA_INDEX.FEATURE_IMAGE]?.uri
const isHaveFeatureImage = !!featureImageSrc

return (
<div className={styles.appHeader}>
<div className={`flex mb-3 ${styles.titleContainer}`}>
<div className={styles.appIconContainer} style={{ backgroundImage: `url('${appIcon?.uri}')` }}></div>
<div className={styles.appHeaderTextContainer}>
<H2 className={styles.appName}>{appDetailData.name}</H2>
<div className={styles.verifyByReapitContainer}>
<FaCheck className={styles.check} /> Verified by Reapit Ltd
</div>
{buttonGroup}
</div>
</div>

<div className={styles.separator} />

<div className={styles.appHeaderFeaturedImageContainer}>
<img
className={styles.appHeaderFeaturedImage}
src={featureImageSrc}
style={{ height: isHaveFeatureImage ? 'auto' : '20rem' }}
/>
</div>
</div>
)
}

export default ClientAppHeader
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
// TODO: remove this file after we separated dev & client standalone page
import * as React from 'react'
import { H2 } from '@reapit/elements'
import { FaCheck } from 'react-icons/fa'
Expand Down
4 changes: 4 additions & 0 deletions packages/marketplace/src/constants/media.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export const MEDIA_INDEX = {
ICON: 0,
FEATURE_IMAGE: 1,
}
Loading

0 comments on commit 12a2c56

Please sign in to comment.