feat: #1033 configure my web component installations in the Marketpla…

…ce (#1313)

* feat: #1033 configure my web component installations in the Marketplace

* chore: #1033 add negotiators dropdown

* chore: #1033 update app header, update snapshot

* chore: #1033 fetch negotiators list

* chore: #1033 update api

* chore: #1033 update follow PR cmts

* chore: #1033 fix test fail

packages/elements/src/components/Checkbox/__tests__/__snapshots__/index.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`Checkbox should match a snapshot 1`] = `
 <div
-  className="field pb-4"
+  className="field pb-4 "
 >
   <div
     className="control"

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

@@ -7,6 +7,7 @@ export interface CheckboxProps {
   name: string
   dataTest?: string
   value?: string
+  className?: string
 }
 
 export type HandleCheckboxOnChangeParams = {
@@ -30,9 +31,9 @@ export const handleOnCheckboxChange = ({ field, value }: HandleCheckboxOnChangeP
   return
 }
 
-export const Checkbox = ({ name, labelText, id, dataTest = '', value = '' }: CheckboxProps) => {
+export const Checkbox = ({ name, labelText, id, dataTest = '', value = '', className = '' }: CheckboxProps) => {
   return (
-    <div className="field pb-4">
+    <div className={`field pb-4 ${className}`}>
       <div className="control">
         <Field type="checkbox" name={name}>
           {({ field }: FieldProps<string | string[]>) => {

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

@@ -13,6 +13,7 @@ export interface DropdownSelectProps extends SelectProps {
   placeholder?: string
   options: SelectOption[]
   required?: boolean
+  subText?: string
 }
 
 export interface SelectOption {
@@ -29,6 +30,7 @@ export const DropdownSelect: React.FC<DropdownSelectProps> = ({
   placeholder,
   options,
   required = false,
+  subText,
   ...restProps
 }) => {
   const handleRenderTags = (props: CustomTagProps) => {
@@ -54,6 +56,7 @@ export const DropdownSelect: React.FC<DropdownSelectProps> = ({
             return (
               <div className="field field-dropdown-select">
                 <label className={`label ${required ? 'required-label' : ''}`}>{labelText}</label>
+                {subText && <label className="subtext mb-2">{subText}</label>}
                 <Select
                   id={id}
                   placeholder={placeholder}

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

@@ -10,38 +10,43 @@ export type RadioSelectOption = {
 export type RadioSelectProps = {
   name: string
   labelText?: string
+  subText?: string
   id: string
   dataTest?: string
   options: RadioSelectOption[]
   setFieldValue: (field: string, value: any, shouldValidate?: boolean) => void
   state: any
   disabled?: boolean
+  className?: string
 }
 
 export const RadioSelect: React.FC<RadioSelectProps> = ({
   name,
   labelText,
+  subText,
   id,
   dataTest,
   options,
   setFieldValue,
   state,
   disabled = false,
+  className = '',
 }) => {
   return (
     <Field type="radio" name={name}>
       {({ meta }: FieldProps<string>) => {
         const hasError = checkError(meta)
         return (
-          <div className="field pb-2">
+          <div className={`field pb-2 ${className}`}>
             <div className="control">
               <label className="label" htmlFor={id}>
                 {labelText}
               </label>
+              {subText && <label className="subtext mb-2">{subText}</label>}
               {options.map(({ label, value }: RadioSelectOption, index: number) => (
                 <div key={index} data-test={dataTest} className="radio-wrap">
                   <input
-                    id={label as string}
+                    id={`${name}${label}`}
                     className={`checkbox ${hasError ? 'checkbox-error' : ''}`}
                     type="radio"
                     key={value}
@@ -51,7 +56,7 @@ export const RadioSelect: React.FC<RadioSelectProps> = ({
                     disabled={disabled}
                     onChange={() => setFieldValue(name, value)}
                   />
-                  <label htmlFor={label as string}>{label}</label>
+                  <label htmlFor={`${name}${label}`}>{label}</label>
                 </div>
               ))}
             </div>

packages/elements/src/styles/components/checkbox.scss

@@ -1,7 +1,6 @@
 @import '../base/colors.scss';
 
 .field {
-
   .checkbox {
     position: absolute;
     width: 0;
@@ -79,7 +78,19 @@
     margin-bottom: 4px;
   }
 
-
+  .control {
+    .subtext {
+      font-style: italic;
+      display: block;
+    }
+  }
+
+  &.checkbox-inline {
+    .radio-wrap {
+      display: inline-block;
+      margin-right: 1rem;
+    }
+  }
 }
 
 .field-checkbox {

packages/elements/src/styles/components/layout.scss

@@ -44,5 +44,8 @@
   &.has-background {
     background-color: $white;
   }
-}
 
+  &.flex-wrap {
+    flex-wrap: wrap;
+  }
+}

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

@@ -3,6 +3,12 @@ import {
   clientFetchAppSummarySuccess,
   clientFetchAppSummaryFailed,
   clientClearAppSummary,
+  clientOpenWebComponentConfig,
+  clientCloseWebComponentConfig,
+  clientFetchWebComponentConfig,
+  clientFetchWebComponentConfigSuccess,
+  clientPutWebComponentConfig,
+  clientFetchNegotiatorsSuccess,
 } from '../client'
 import ActionTypes from '../../constants/action-types'
 import { appsDataStub, featuredAppsDataStub } from '../../sagas/__stubs__/apps'
@@ -29,4 +35,23 @@ 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' })
+  })
+  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)
+  })
+  it('should create a clientPutWebComponentConfig action', () => {
+    expect(clientFetchNegotiatorsSuccess.type).toEqual(ActionTypes.CLIENT_FETCH_NEGOTIATORS_SUCCESS)
+  })
 })