chore: #1033 update api

packages/elements/src/components/RadioSelect/index.tsx

@@ -46,7 +46,7 @@ export const RadioSelect: React.FC<RadioSelectProps> = ({
               {options.map(({ label, value }: RadioSelectOption, index: number) => (
                 <div key={index} data-test={dataTest} className="radio-wrap">
                   <input
-                    id={(name + label) as string}
+                    id={`${name}${label}`}
                     className={`checkbox ${hasError ? 'checkbox-error' : ''}`}
                     type="radio"
                     key={value}
@@ -56,7 +56,7 @@ export const RadioSelect: React.FC<RadioSelectProps> = ({
                     disabled={disabled}
                     onChange={() => setFieldValue(name, value)}
                   />
-                  <label htmlFor={(name + label) as string}>{label}</label>
+                  <label htmlFor={`${name}${label}`}>{label}</label>
                 </div>
               ))}
             </div>

packages/marketplace/src/components/ui/web-component-config-modal/__test__/__snapshots__/config-modal-inner.test.tsx.snap

@@ -69,7 +69,8 @@ exports[`Config-modal-inner should WebComponentConfigModalInner match a snapshot
     closeModal={[MockFunction]}
     config={
       Object {
-        "subtext": "Please use the following form to configure your diary settings for your ‘Book a Viewing’ widget on your website",
+        "subtext": "Please use the following form to configure your diary settings for your
+     ‘Book a Viewing’ widget on your website",
         "title": "Book a Viewing Configuration",
       }
     }
@@ -177,7 +178,8 @@ exports[`Config-modal-inner should WebComponentConfigModalInner match a snapshot
                     },
                   }
                 }
-                subtext="Please use the following form to configure your diary settings for your ‘Book a Viewing’ widget on your website"
+                subtext="Please use the following form to configure your diary settings for your
+     ‘Book a Viewing’ widget on your website"
               />
             }
           >
@@ -249,10 +251,12 @@ exports[`Config-modal-inner should WebComponentConfigModalInner match a snapshot
                     },
                   }
                 }
-                subtext="Please use the following form to configure your diary settings for your ‘Book a Viewing’ widget on your website"
+                subtext="Please use the following form to configure your diary settings for your
+     ‘Book a Viewing’ widget on your website"
               >
                 <p>
-                  Please use the following form to configure your diary settings for your ‘Book a Viewing’ widget on your website
+                  Please use the following form to configure your diary settings for your
+     ‘Book a Viewing’ widget on your website
                 </p>
                 <Component
                   className="checkbox-inline mt-5"

packages/marketplace/src/components/ui/web-component-config-modal/__test__/__snapshots__/config-modal.test.tsx.snap

@@ -10,7 +10,8 @@ exports[`Config-modal should match snapshot 1`] = `
     closeModal={[MockFunction]}
     config={
       Object {
-        "subtext": "Please use the following form to configure your diary settings for your ‘Book a Viewing’ widget on your website",
+        "subtext": "Please use the following form to configure your diary settings for your
+     ‘Book a Viewing’ widget on your website",
         "title": "Book a Viewing Configuration",
       }
     }

packages/marketplace/src/components/ui/web-component-config-modal/__test__/config-modal-inner.test.tsx

@@ -10,7 +10,7 @@ import { mount } from 'enzyme'
 import configureStore from 'redux-mock-store'
 import { ReduxState } from '@/types/core'
 import { Provider } from 'react-redux'
-import { BOOK_VIEWING_CONSTANT } from '../config-modal'
+import { WEB_COMPONENT_TYPES } from '../config-modal'
 import { PutWebComponentConfigParams } from '@/services/web-component'
 import { clientPutWebComponentConfig, clientFetchWebComponentConfig } from '@/actions/client'
 
@@ -74,7 +74,7 @@ describe('Config-modal-inner', () => {
     expect(
       mount(
         <Provider store={store}>
-          <WebComponentConfigModalInner config={BOOK_VIEWING_CONSTANT} closeModal={jest.fn()} />
+          <WebComponentConfigModalInner config={WEB_COMPONENT_TYPES['BOOK_VIEWING']} closeModal={jest.fn()} />
         </Provider>,
       ),
     ).toMatchSnapshot()

packages/marketplace/src/components/ui/web-component-config-modal/config-modal.tsx

@@ -2,30 +2,29 @@ import * as React from 'react'
 import { Modal } from '@reapit/elements'
 import { WebComponentConfigModalInner } from './config-modal-inner'
 
-export const BOOK_VIEWING_CONSTANT = {
-  title: 'Book a Viewing Configuration',
-  subtext:
-    'Please use the following form to configure your diary settings for your ‘Book a Viewing’ widget on your website',
-}
-
-export const BOOK_VALUATION_CONSTANT = {
-  title: 'Book a Valuation Configuration',
-  subtext:
-    'Please use the following form to configure your diary settings for your ‘Book a Valuation’ widget on your website',
-}
-
 export type WebComponentModalProps = {
   type: 'BOOK_VIEWING' | 'BOOK_VALUATION'
   afterClose: () => void
   closeModal: () => void
 }
 
-export const WebComponentModal = ({ type, afterClose, closeModal }: WebComponentModalProps) => {
-  const config = type === 'BOOK_VIEWING' ? BOOK_VIEWING_CONSTANT : BOOK_VALUATION_CONSTANT
+export const WEB_COMPONENT_TYPES = {
+  BOOK_VALUATION: {
+    title: 'Book a Valuation Configuration',
+    subtext: `Please use the following form to configure your diary settings for your 
+    ‘Book a Valuation’ widget on your website`,
+  },
+  BOOK_VIEWING: {
+    title: 'Book a Viewing Configuration',
+    subtext: `Please use the following form to configure your diary settings for your
+     ‘Book a Viewing’ widget on your website`,
+  },
+}
 
+export const WebComponentModal = ({ type, afterClose, closeModal }: WebComponentModalProps) => {
   return (
     <Modal visible renderChildren afterClose={afterClose}>
-      <WebComponentConfigModalInner config={config} closeModal={closeModal} />
+      <WebComponentConfigModalInner config={WEB_COMPONENT_TYPES[type]} closeModal={closeModal} />
     </Modal>
   )
 }

packages/marketplace/src/core/index.tsx

@@ -27,6 +27,7 @@ window.reapit = {
     chatbotAppId: '',
     marketplaceUrl: '',
     platformApiUrl: '',
+    webComponentConfigApiUrl: '',
   },
 }
 

packages/marketplace/src/services/constants.ts

@@ -18,4 +18,5 @@ export const URLS = {
   trafficEventBilling: '/trafficevents/billing',
   trafficEventStatistics: '/trafficevents/trafficStatistics',
   negotiators: '/negotiators',
+  webComponentConfig: '/v1/web-components-config',
 }

packages/marketplace/src/services/web-component.ts

@@ -1,6 +1,7 @@
 import { fetcher } from '@reapit/elements'
 import { generateHeader } from './utils'
 import { logger } from 'logger'
+import { URLS } from './constants'
 
 export interface FetchWebComponentConfigParams {
   customerId: string
@@ -24,17 +25,14 @@ export type WebComponentConfigResult = {
   negotiatorIds: string[]
 } | null
 
-const API = '/dev/v1/web-components-config'
-
 export const fetchWebComponentConfig = async (
   params: FetchWebComponentConfigParams,
 ): Promise<WebComponentConfigResult> => {
-  return sampleRespone() //SHOULD REMOVE WHEN API READY
   try {
     const { customerId } = params
     const response = await fetcher({
-      url: `${API}/${customerId}`,
-      api: 'http://localhost:3000',
+      url: `${URLS.webComponentConfig}/${customerId}`,
+      api: window.reapit.config.webComponentConfigApiUrl,
       method: 'GET',
       headers: generateHeader(window.reapit.config.marketplaceApiKey),
     })
@@ -46,12 +44,11 @@ export const fetchWebComponentConfig = async (
 }
 
 export const putWebComponentConfig = async (params: PutWebComponentConfigParams): Promise<WebComponentConfigResult> => {
-  return sampleRespone() //SHOULD REMOVE WHEN API READY
   try {
     const { customerId = 'DXX', ...rest } = params
     const response = await fetcher({
-      url: `${API}/${customerId}`,
-      api: 'http://localhost:3000',
+      url: `${URLS.webComponentConfig}/${customerId}`,
+      api: window.reapit.config.webComponentConfigApiUrl,
       method: 'PATCH',
       headers: generateHeader(window.reapit.config.marketplaceApiKey),
       body: rest,
@@ -62,20 +59,3 @@ export const putWebComponentConfig = async (params: PutWebComponentConfigParams)
     throw new Error(error)
   }
 }
-
-//SHOULD REMOVE WHEN API READY
-function sampleRespone(): Promise<WebComponentConfigResult> {
-  return new Promise(res => {
-    setTimeout(() => {
-      const data = {
-        appointmentLength: 15,
-        appointmentTimeGap: 60,
-        appointmentTypes: [{ value: 'value1', id: 'id1' }],
-        customerId: 'DXX',
-        daysOfWeek: ['1', '2', '3', '5', '6'],
-        negotiatorIds: ['AACC', 'AAAN'],
-      } as WebComponentConfigResult
-      res(data)
-    }, 1000)
-  })
-}

packages/marketplace/src/types/global.d.ts

@@ -13,6 +13,7 @@ export type Config = {
   chatbotAppId: string
   marketplaceUrl: string
   platformApiUrl: string
+  webComponentConfigApiUrl: string
 }
 
 declare global {