feat: #1033 update web component config (#1802)

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

@@ -3,11 +3,9 @@ import {
   clientFetchAppSummarySuccess,
   clientFetchAppSummaryFailed,
   clientClearAppSummary,
-  clientOpenWebComponentConfig,
-  clientCloseWebComponentConfig,
   clientFetchWebComponentConfig,
   clientFetchWebComponentConfigSuccess,
-  clientPutWebComponentConfig,
+  clientUpdateWebComponentConfig,
   clientFetchNegotiatorsSuccess,
 } from '../client'
 import ActionTypes from '../../constants/action-types'
@@ -35,21 +33,18 @@ describe('client actions', () => {
     expect(clientClearAppSummary.type).toEqual(ActionTypes.CLIENT_CLEAR_APP_SUMMARY)
     expect(clientClearAppSummary(null).data).toEqual(null)
   })
-  it('should create a clientOpenWebComponentConfig action', () => {
-    expect(clientOpenWebComponentConfig.type).toEqual(ActionTypes.CLIENT_WEB_COMPONENT_CONFIG_OPEN)
-  })
-  it('should create a clientCloseWebComponentConfig action', () => {
-    expect(clientCloseWebComponentConfig.type).toEqual(ActionTypes.CLIENT_WEB_COMPONENT_CONFIG_CLOSE)
-  })
   it('should create a clientFetchWebComponentConfig action', () => {
     expect(clientFetchWebComponentConfig.type).toEqual(ActionTypes.CLIENT_FETCH_WEB_COMPONENT_CONFIG)
-    expect(clientFetchWebComponentConfig({ customerId: 'DXX' }).data).toEqual({ customerId: 'DXX' })
+    expect(clientFetchWebComponentConfig({ customerId: 'DXX', applicationId: 'applicationId' }).data).toEqual({
+      customerId: 'DXX',
+      applicationId: 'applicationId',
+    })
   })
   it('should create a clientFetchWebComponentConfigSuccess action', () => {
     expect(clientFetchWebComponentConfigSuccess.type).toEqual(ActionTypes.CLIENT_FETCH_WEB_COMPONENT_CONFIG_SUCCESS)
   })
   it('should create a clientPutWebComponentConfig action', () => {
-    expect(clientPutWebComponentConfig.type).toEqual(ActionTypes.CLIENT_PUT_WEB_COMPONENT_CONFIG)
+    expect(clientUpdateWebComponentConfig.type).toEqual(ActionTypes.CLIENT_UPDATE_WEB_COMPONENT_CONFIG)
   })
   it('should create a clientPutWebComponentConfig action', () => {
     expect(clientFetchNegotiatorsSuccess.type).toEqual(ActionTypes.CLIENT_FETCH_NEGOTIATORS_SUCCESS)

packages/marketplace/src/actions/client.ts

@@ -4,7 +4,7 @@ import { ClientAppSummary, ClientAppSummaryParams } from '@/reducers/client/app-
 import { AppDetailData } from '@/reducers/client/app-detail'
 import { FetchAppByIdParams } from '@/services/apps'
 import {
-  PutWebComponentConfigParams,
+  UpdateWebComponentConfigParams,
   FetchWebComponentConfigParams,
   WebComponentConfigResult,
 } from '@/services/web-component'
@@ -22,16 +22,20 @@ export const clientFetchAppDetail = actionCreator<FetchAppByIdParams>(ActionType
 export const clientFetchAppDetailSuccess = actionCreator<AppDetailData>(ActionTypes.CLIENT_FETCH_APP_DETAIL_SUCCESS)
 export const clientFetchAppDetailFailed = actionCreator<string>(ActionTypes.CLIENT_FETCH_APP_DETAIL_FAILED)
 
-export const clientOpenWebComponentConfig = actionCreator<void>(ActionTypes.CLIENT_WEB_COMPONENT_CONFIG_OPEN)
-export const clientCloseWebComponentConfig = actionCreator<void>(ActionTypes.CLIENT_WEB_COMPONENT_CONFIG_CLOSE)
 export const clientFetchWebComponentConfig = actionCreator<FetchWebComponentConfigParams>(
   ActionTypes.CLIENT_FETCH_WEB_COMPONENT_CONFIG,
 )
 export const clientFetchWebComponentConfigSuccess = actionCreator<WebComponentConfigResult>(
   ActionTypes.CLIENT_FETCH_WEB_COMPONENT_CONFIG_SUCCESS,
 )
-export const clientPutWebComponentConfig = actionCreator<PutWebComponentConfigParams>(
-  ActionTypes.CLIENT_PUT_WEB_COMPONENT_CONFIG,
+export const clientFetchWebComponentConfigFailed = actionCreator<void>(
+  ActionTypes.CLIENT_FETCH_WEB_COMPONENT_CONFIG_FAILED,
+)
+export const clientUpdateWebComponentConfig = actionCreator<UpdateWebComponentConfigParams>(
+  ActionTypes.CLIENT_UPDATE_WEB_COMPONENT_CONFIG,
+)
+export const clientUpdateWebComponentConfigFailed = actionCreator<void>(
+  ActionTypes.CLIENT_UPDATE_WEB_COMPONENT_CONFIG_FAILED,
 )
 
 export const clientFetchNegotiatorsSuccess = actionCreator<NegotiatorsResult>(

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

@@ -13,58 +13,50 @@ exports[`WebComponentConfig Should match snapshot 1`] = `
     }
   }
 >
-  <Component>
-    <Component
-      headerText="Settings"
-      isSidebar={true}
+  <MemoryRouter
+    initialEntries={
+      Array [
+        Object {
+          "key": "appDetailsRoute",
+          "pathname": "/client/apps/:appid",
+        },
+      ]
+    }
+  >
+    <Router
+      history={
+        Object {
+          "action": "POP",
+          "block": [Function],
+          "canGo": [Function],
+          "createHref": [Function],
+          "entries": Array [
+            Object {
+              "hash": "",
+              "key": "appDetailsRoute",
+              "pathname": "/client/apps/:appid",
+              "search": "",
+            },
+          ],
+          "go": [Function],
+          "goBack": [Function],
+          "goForward": [Function],
+          "index": 0,
+          "length": 1,
+          "listen": [Function],
+          "location": Object {
+            "hash": "",
+            "key": "appDetailsRoute",
+            "pathname": "/client/apps/:appid",
+            "search": "",
+          },
+          "push": [Function],
+          "replace": [Function],
+        }
+      }
     >
-      <Component
-        dataTest=""
-      >
-        <div
-          className="content "
-          data-test=""
-        >
-          <Component
-            className="mb-2"
-          >
-            <h5
-              className="title is-5 mb-2 "
-              id=""
-            >
-              Settings
-            </h5>
-          </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>
-          <Component
-            afterClose={[Function]}
-            closeModal={[Function]}
-            type="BOOK_VIEWING"
-          >
-            <Component
-              afterClose={[Function]}
-              renderChildren={true}
-              visible={true}
-            />
-          </Component>
-        </div>
-      </Component>
-    </Component>
-  </Component>
+      <Component />
+    </Router>
+  </MemoryRouter>
 </Provider>
 `;

packages/marketplace/src/components/pages/app-detail/client/__tests__/client-web-component-config.test.tsx

@@ -4,6 +4,8 @@ import appState from '@/reducers/__stubs__/app-state'
 import configureStore from 'redux-mock-store'
 import { mount } from 'enzyme'
 import { WebComponentConfig } from '../client-web-component-config'
+import Routes from '@/constants/routes'
+import { MemoryRouter } from 'react-router'
 
 describe('WebComponentConfig', () => {
   const extendStore = {
@@ -19,7 +21,9 @@ describe('WebComponentConfig', () => {
     expect(
       mount(
         <Provider store={store}>
-          <WebComponentConfig />
+          <MemoryRouter initialEntries={[{ pathname: Routes.CLIENT_APP_DETAIL, key: 'appDetailsRoute' }]}>
+            <WebComponentConfig />
+          </MemoryRouter>
         </Provider>,
       ),
     ).toMatchSnapshot()

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

@@ -1,36 +1,48 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { Button } from '@reapit/elements'
 import { useDispatch, useSelector } from 'react-redux'
-import { selectIsWebComponentOpen } from '@/selector/client'
-import { clientCloseWebComponentConfig, clientOpenWebComponentConfig } from '@/actions/client'
+import { selectWebComponentData } from '@/selector/client'
+import { clientFetchWebComponentConfig } from '@/actions/client'
 import { Dispatch } from 'redux'
 import WebComponentModal from '@/components/ui/web-component-config-modal'
 import { AppDetailSection } from '../common/ui-helpers'
+import { selectClientId } from '@/selector/auth'
+import { useParams } from 'react-router-dom'
 
-export const toggleWebComponentModal = (dispatch: Dispatch) => () => {
-  dispatch(clientOpenWebComponentConfig())
+export const toggleWebComponentModal = (setIsOpenConfigModal, isOpen) => () => {
+  setIsOpenConfigModal(isOpen)
 }
 
-export const closeWebComponentModal = (dispatch: Dispatch) => () => {
-  dispatch(clientCloseWebComponentConfig())
+export const handleFetchWebComponentConfig = (
+  dispatch: Dispatch,
+  customerId?: string,
+  applicationId?: string,
+) => () => {
+  customerId && applicationId && dispatch(clientFetchWebComponentConfig({ customerId, applicationId }))
 }
 
 export const WebComponentConfig: React.FC = () => {
   const dispatch = useDispatch()
-  const isWebComponentOpen = useSelector(selectIsWebComponentOpen)
-  const handleToggleWebComponentModal = toggleWebComponentModal(dispatch)
-  const handleCloseWebComponentModal = closeWebComponentModal(dispatch)
+  const [isOpenConfigModal, setIsOpenConfigModal] = useState(false)
+
+  const clientId = useSelector(selectClientId) || ''
+  const webComponentData = useSelector(selectWebComponentData)
+  const { appid: applicationId } = useParams()
+
+  const handleToggleWebComponentModal = toggleWebComponentModal(setIsOpenConfigModal, true)
+  const handleCloseWebComponentModal = toggleWebComponentModal(setIsOpenConfigModal, false)
+
+  useEffect(handleFetchWebComponentConfig(dispatch, clientId, applicationId), [])
+
+  if (!webComponentData) return null
+
   return (
     <AppDetailSection headerText="Settings" isSidebar>
       <Button type="button" variant="primary" fullWidth onClick={handleToggleWebComponentModal}>
         Configuration
       </Button>
-      {isWebComponentOpen && (
-        <WebComponentModal
-          type="BOOK_VIEWING"
-          afterClose={handleCloseWebComponentModal}
-          closeModal={handleCloseWebComponentModal}
-        />
+      {isOpenConfigModal && (
+        <WebComponentModal afterClose={handleCloseWebComponentModal} closeModal={handleCloseWebComponentModal} />
       )}
     </AppDetailSection>
   )