chore: #1033 fetch negotiators list

packages/marketplace/src/actions/__tests__/client.ts

@@ -8,6 +8,7 @@ import {
   clientFetchWebComponentConfig,
   clientFetchWebComponentConfigSuccess,
   clientPutWebComponentConfig,
+  clientFetchNegotiatorsSuccess,
 } from '../client'
 import ActionTypes from '../../constants/action-types'
 import { appsDataStub, featuredAppsDataStub } from '../../sagas/__stubs__/apps'
@@ -50,4 +51,7 @@ describe('client actions', () => {
   it('should create a clientPutWebComponentConfig action', () => {
     expect(clientPutWebComponentConfig.type).toEqual(ActionTypes.CLIENT_PUT_WEB_COMPONENT_CONFIG)
   })
+  it('should create a clientPutWebComponentConfig action', () => {
+    expect(clientFetchNegotiatorsSuccess.type).toEqual(ActionTypes.CLIENT_FETCH_NEGOTIATORS_SUCCESS)
+  })
 })

packages/marketplace/src/actions/client.ts

@@ -8,6 +8,7 @@ import {
   FetchWebComponentConfigParams,
   WebComponentConfigResult,
 } from '@/services/web-component'
+import { NegotiatorsResult } from '@/services/negotiators'
 
 export const clientFetchAppSummary = actionCreator<ClientAppSummaryParams>(ActionTypes.CLIENT_FETCH_APP_SUMMARY)
 export const clientFetchAppSummarySuccess = actionCreator<ClientAppSummary | undefined>(
@@ -32,3 +33,7 @@ export const clientFetchWebComponentConfigSuccess = actionCreator<WebComponentCo
 export const clientPutWebComponentConfig = actionCreator<PutWebComponentConfigParams>(
   ActionTypes.CLIENT_PUT_WEB_COMPONENT_CONFIG,
 )
+
+export const clientFetchNegotiatorsSuccess = actionCreator<NegotiatorsResult>(
+  ActionTypes.CLIENT_FETCH_NEGOTIATORS_SUCCESS,
+)

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

@@ -50,3 +50,62 @@ exports[`Aside Aside - should match snapshot 1`] = `
   </div>
 </div>
 `;
+
+exports[`WebComponentConfig Should match snapshot 1`] = `
+<Provider
+  store={
+    Object {
+      "clearActions": [Function],
+      "dispatch": [Function],
+      "getActions": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+    }
+  }
+>
+  <Component>
+    <Component>
+      <div
+        className="column  "
+      >
+        <Component>
+          <h6
+            className="title is-6  "
+            id=""
+          >
+            Settings
+          </h6>
+        </Component>
+        <Component
+          fullWidth={true}
+          onClick={[Function]}
+          type="button"
+          variant="primary"
+        >
+          <button
+            className="button  is-primary is-fullwidth "
+            data-test=""
+            disabled={false}
+            onClick={[Function]}
+            type="button"
+          >
+            Configuration
+          </button>
+        </Component>
+      </div>
+    </Component>
+    <Component
+      afterClose={[Function]}
+      closeModal={[Function]}
+      type="BOOK_VIEWING"
+    >
+      <Component
+        afterClose={[Function]}
+        renderChildren={true}
+        visible={true}
+      />
+    </Component>
+  </Component>
+</Provider>
+`;

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

@@ -1,10 +1,14 @@
 import React from 'react'
 import { Aside } from '../aside'
-import { shallow } from 'enzyme'
+import { shallow, mount } from 'enzyme'
 import { integrationTypesStub } from '@/sagas/__stubs__/integration-types'
 import { appDetailDataStub } from '@/sagas/__stubs__/app-detail'
 import { AppDetailDataNotNull } from '@/reducers/client/app-detail'
 import { DesktopIntegrationTypeModel } from '@/actions/app-integration-types'
+import configureStore from 'redux-mock-store'
+import { ReduxState } from '@/types/core'
+import { Provider } from 'react-redux'
+import { WebComponentConfig } from '../aside'
 
 describe('Aside', () => {
   test('Aside - should match snapshot', () => {
@@ -18,3 +22,27 @@ describe('Aside', () => {
     ).toMatchSnapshot()
   })
 })
+
+describe('WebComponentConfig', () => {
+  const mockState = {
+    client: {
+      webComponent: {
+        loading: false,
+        updating: false,
+        data: null,
+        isShowModal: true,
+      },
+    },
+  } as ReduxState
+  const mockStore = configureStore()
+  const store = mockStore(mockState)
+  it('Should match snapshot', () => {
+    expect(
+      mount(
+        <Provider store={store}>
+          <WebComponentConfig />
+        </Provider>,
+      ),
+    ).toMatchSnapshot()
+  })
+})

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

@@ -4,14 +4,20 @@ import standAloneAppDetailStyles from '@/styles/blocks/standalone-app-detail.scs
 import { renderCategory, renderDesktopIntegrationTypes } from '../client-app-detail/app-content'
 import { DesktopIntegrationTypeModel } from '@reapit/foundations-ts-definitions'
 import { AppDetailDataNotNull } from '@/reducers/client/app-detail'
+import { GridItem, Button, H6 } from '@reapit/elements'
+import { useDispatch, useSelector } from 'react-redux'
+import { selectIsWebComponentOpen } from '@/selector/client'
+import { clientCloseWebComponentConfig, clientOpenWebComponentConfig } from '@/actions/client'
+import { Dispatch } from 'redux'
+import WebComponentModal from '@/components/ui/web-component-config-modal'
 
 interface AsideProps {
   appDetailData: AppDetailDataNotNull
   desktopIntegrationTypes: DesktopIntegrationTypeModel[]
 }
 
 export const Aside: React.FC<AsideProps> = ({ desktopIntegrationTypes, appDetailData }) => {
-  const { category } = appDetailData
+  const { category, isWebComponent } = appDetailData
 
   return (
     <div className={standAloneAppDetailStyles.asideContainer}>
@@ -22,6 +28,39 @@ export const Aside: React.FC<AsideProps> = ({ desktopIntegrationTypes, appDetail
       <div className={standAloneAppDetailStyles.headerWithoutMargin}>
         {renderDesktopIntegrationTypes(desktopIntegrationTypes)}
       </div>
+      {isWebComponent && <WebComponentConfig />}
     </div>
   )
 }
+
+export const toggleWebComponentModal = (dispatch: Dispatch) => () => {
+  dispatch(clientOpenWebComponentConfig())
+}
+
+export const closeWebComponentModal = (dispatch: Dispatch) => () => {
+  dispatch(clientCloseWebComponentConfig())
+}
+
+export const WebComponentConfig = () => {
+  const dispatch = useDispatch()
+  const isWebComponentOpen = useSelector(selectIsWebComponentOpen)
+  const handleToggleWebComponentModal = toggleWebComponentModal(dispatch)
+  const handleCloseWebComponentModal = closeWebComponentModal(dispatch)
+  return (
+    <>
+      <GridItem>
+        <H6>Settings</H6>
+        <Button type="button" variant="primary" fullWidth onClick={handleToggleWebComponentModal}>
+          Configuration
+        </Button>
+      </GridItem>
+      {isWebComponentOpen && (
+        <WebComponentModal
+          type="BOOK_VIEWING"
+          afterClose={handleCloseWebComponentModal}
+          closeModal={handleCloseWebComponentModal}
+        />
+      )}
+    </>
+  )
+}

packages/marketplace/src/components/ui/app-detail/app-header/__test__/__snapshots__/app-header.test.tsx.snap

@@ -1,104 +1,28 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AppContent should match a snapshot 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <AppHeader
-    appDetailData={
-      Object {
-        "apiKey": "",
-        "description": "enim facilisis gravida neque convallis a cras semper auctor neque vitae tempus quam 
-    pellentesque nec nam aliquam sem et tortor consequat id porta nibh venenatis cras 
-    sed felis eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar 
-    elementum integer enim neque volutpat ac tincidunt vitae semper quis lectus nulla 
-    at volutpat diam ut venenatis tellus in metus vulputate eu scelerisque felis imperdiet 
-    proin fermentum leo vel orci porta non pulvinar neque laoreet suspendisse interdum co",
-        "developer": "Pete's Proptech World Ltd",
-        "homePage": "http://myawesomeproptechproduct.io",
-        "id": "9b6fd5f7-2c15-483d-b925-01b650538e52",
-        "media": 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",
-          },
-        ],
-        "name": "Peter's Properties",
-        "scopes": Array [
-          Object {
-            "description": "Read data about developers",
-            "name": "Marketplace/developers.read",
-          },
-          Object {
-            "description": "Write data about developers",
-            "name": "Marketplace/developers.write",
-          },
-        ],
-        "summary": "vitae elementum curabitur vitae nunc sed velit eget gravida cum sociis natoque!!",
-        "supportEmail": "[email protected]",
-        "telephone": "0113 288 2900",
-      }
-    }
+<Fragment>
+  <Component
+    className="is-vcentered "
   >
     <Component
-      className="is-vcentered "
+      className="is-4"
     >
-      <div
-        className="columns  is-vcentered "
-      >
-        <Component
-          className="is-4"
-        >
-          <div
-            className="column  is-4"
-          >
-            <div>
-              <img
-                alt="Peter's Properties"
-                className="image"
-                src="https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/7d88729f-2366-4561-9d5c-282615f3946b.jpeg"
-              />
-            </div>
-          </div>
-        </Component>
-        <Component
-          className="is-8"
-        >
-          <div
-            className="column  is-8"
-          >
-            <Component>
-              <h3
-                className="title is-3  "
-                id=""
-              >
-                Peter's Properties
-              </h3>
-            </Component>
-          </div>
-        </Component>
+      <div>
+        <img
+          alt="Peter's Properties"
+          className="image"
+          src="https://reapit-app-store-app-media.s3.eu-west-2.amazonaws.com/7d88729f-2366-4561-9d5c-282615f3946b.jpeg"
+        />
       </div>
     </Component>
-  </AppHeader>
-</Provider>
+    <Component
+      className="is-8"
+    >
+      <Component>
+        Peter's Properties
+      </Component>
+    </Component>
+  </Component>
+</Fragment>
 `;

packages/marketplace/src/components/ui/app-detail/app-header/__test__/app-header.test.tsx

@@ -1,10 +1,8 @@
 import * as React from 'react'
 import { appDetailDataStub } from '@/sagas/__stubs__/app-detail'
 import AppHeader, { AppHeaderProps } from '../app-header'
-import { mount } from 'enzyme'
-import configureStore from 'redux-mock-store'
-import { ReduxState } from '@/types/core'
-import { Provider } from 'react-redux'
+import { shallow } from 'enzyme'
+
 const mockProps: AppHeaderProps = {
   appDetailData: {
     ...appDetailDataStub.data,
@@ -14,24 +12,6 @@ const mockProps: AppHeaderProps = {
 
 describe('AppContent', () => {
   it('should match a snapshot', () => {
-    const mockState = {
-      client: {
-        webComponent: {
-          loading: false,
-          updating: false,
-          data: null,
-          isShowModal: true,
-        },
-      },
-    } as ReduxState
-    const mockStore = configureStore()
-    const store = mockStore(mockState)
-    expect(
-      mount(
-        <Provider store={store}>
-          <AppHeader {...mockProps} />
-        </Provider>,
-      ),
-    ).toMatchSnapshot()
+    expect(shallow(<AppHeader {...mockProps} />)).toMatchSnapshot()
   })
 })