Add checkout box input

packages/web/components/elements/Checkbox.tsx

@@ -19,17 +19,21 @@ const CheckboxIndicator = styled(CheckboxPrimitive.Indicator, {
   color: '#FFFFFF',
 })
 
-export const CheckboxComponent:React.FC<{
-  checked: boolean;
-  setChecked:(arg: boolean) => void;
-}> = ({checked, setChecked}) => {
-  const toggleChecked = () => setChecked(!checked);
+export const CheckboxComponent: React.FC<{
+  checked: boolean
+  setChecked: (arg: boolean) => void
+}> = ({ checked, setChecked }) => {
+  const toggleChecked = () => setChecked(!checked)
 
   return (
-    <Checkbox css={{
-      border: checked ? '2px solid #F9D354': '2px solid #3F3E3C4D',
-      backgroundColor: checked ? '#F9D354' : '#FFFFFF'
-    }} checked={checked} onCheckedChange={toggleChecked}>
+    <Checkbox
+      css={{
+        border: checked ? '2px solid #F9D354' : '2px solid #3F3E3C4D',
+        backgroundColor: checked ? '#F9D354' : '#FFFFFF',
+      }}
+      checked={checked}
+      onCheckedChange={toggleChecked}
+    >
       <CheckboxIndicator>
         <CheckIcon />
       </CheckboxIndicator>

packages/web/components/elements/FormElements.tsx

@@ -1,4 +1,20 @@
 import { styled } from '../tokens/stitches.config'
+import { useState } from 'react'
+import Checkbox from './Checkbox'
+
+export interface FormInputProps {
+  name: string
+  label: string
+  value?: any
+  onChange?: (value: any) => void
+  type?: string
+  placeholder?: string
+  disabled?: boolean
+  hidden?: boolean
+  required?: boolean
+  css?: any
+  labels?: string[]
+}
 
 export const FormInput = styled('input', {
   border: 'none',
@@ -19,3 +35,62 @@ export const BorderedFormInput = styled(FormInput, {
   border: `1px solid $grayBorder`,
   p: '$3',
 })
+
+export function GeneralFormInput(props: FormInputProps): JSX.Element {
+  const [input, setInput] = useState<FormInputProps>(props)
+
+  if (props.type === 'checkbox') {
+    return (
+      <div>
+        {input.labels?.map((label, index) => (
+          <Checkbox
+            key={index}
+            checked={props.value[index]}
+            setChecked={
+              props.onChange ||
+              (() => {
+                return
+              })
+            }
+          >
+            {label}
+          </Checkbox>
+        ))}
+      </div>
+    )
+  } else {
+    return (
+      <FormInput
+        key={input.name}
+        type={input.type || 'text'}
+        value={input.value}
+        placeholder={input.placeholder}
+        onChange={(event) => {
+          if (input.onChange) {
+            // input.value = event.target.value
+            setInput(input)
+            input.onChange(event.target.value)
+          }
+        }}
+        disabled={input.disabled}
+        hidden={input.hidden}
+        required={input.required}
+        css={{
+          border: '1px solid $grayBorder',
+          borderRadius: '8px',
+          width: '100%',
+          bg: 'transparent',
+          fontSize: '16px',
+          textIndent: '8px',
+          marginBottom: '2px',
+          color: '$grayTextContrast',
+          '&:focus': {
+            outline: 'none',
+            boxShadow: '0px 0px 2px 2px rgba(255, 234, 159, 0.56)',
+          },
+        }}
+        name={input.name}
+      />
+    )
+  }
+}

packages/web/components/elements/Table.tsx

@@ -221,7 +221,8 @@ export function Table(props: TableProps): JSX.Element {
                 style="ctaWhite"
                 css={{ mr: '$1', background: '$labelButtonsBg' }}
                 onClick={() => {
-                  props.onEdit && props.onEdit(props.rows.get(key))
+                  props.onEdit &&
+                    props.onEdit({ ...props.rows.get(key), id: key })
                 }}
               >
                 <PencilSimple size={24} color={iconColor} />

packages/web/components/patterns/FormModal.tsx

@@ -7,22 +7,10 @@ import { Box, HStack, VStack } from '../elements/LayoutPrimitives'
 import { Button } from '../elements/Button'
 import { StyledText } from '../elements/StyledText'
 import { useState } from 'react'
-import { FormInput } from '../elements/FormElements'
+import { FormInputProps, GeneralFormInput } from '../elements/FormElements'
 import { CrossIcon } from '../elements/images/CrossIcon'
 import { theme } from '../tokens/stitches.config'
 
-export interface FormInputProps {
-  name: string
-  label: string
-  value?: any
-  onChange?: (value: any) => void
-  type?: string
-  placeholder?: string
-  disabled?: boolean
-  hidden?: boolean
-  required?: boolean
-}
-
 export interface FormModalProps {
   inputs?: FormInputProps[]
   title: string
@@ -89,40 +77,7 @@ export function FormModal(props: FormModalProps): JSX.Element {
                     </StyledText>
                   </Box>
                   <Box css={{ width: '100%' }}>
-                    <FormInput
-                      key={input.name}
-                      type={input.type || 'text'}
-                      value={input.value}
-                      placeholder={input.placeholder}
-                      onChange={(event) => {
-                        if (input.onChange) {
-                          inputs[index].value = event.target.value
-                          setInputs(inputs)
-                          input.onChange(
-                            event.target.value || event.target.checked
-                          )
-                        }
-                      }}
-                      disabled={input.disabled}
-                      hidden={input.hidden}
-                      required={input.required}
-                      checked={input.value}
-                      css={{
-                        border: '1px solid $grayBorder',
-                        borderRadius: '8px',
-                        width: '100%',
-                        bg: 'transparent',
-                        fontSize: '16px',
-                        textIndent: '8px',
-                        marginBottom: '2px',
-                        color: '$grayTextContrast',
-                        '&:focus': {
-                          outline: 'none',
-                          boxShadow:
-                            '0px 0px 2px 2px rgba(255, 234, 159, 0.56)',
-                        },
-                      }}
-                    />
+                    <GeneralFormInput {...input} />
                   </Box>
                 </HStack>
               ))}

packages/web/pages/settings/webhooks.tsx

@@ -10,8 +10,9 @@ import { useMemo, useState } from 'react'
 import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers'
 import { ConfirmationModal } from '../../components/patterns/ConfirmationModal'
 import { deleteWebhookMutation } from '../../lib/networking/mutations/deleteWebhookMutation'
-import { FormInputProps, FormModal } from '../../components/patterns/FormModal'
+import { FormModal } from '../../components/patterns/FormModal'
 import { setWebhookMutation } from '../../lib/networking/mutations/setWebhookMutation'
+import { FormInputProps } from '../../components/elements/FormElements'
 
 interface Webhook {
   id?: string
@@ -34,18 +35,11 @@ export default function Webhooks(): JSX.Element {
     'PAGE_CREATED',
     'HIGHLIGHT_CREATED',
   ])
-  const [enabled, setEnabled] = useState(true)
   const [contentType, setContentType] = useState('application/json')
   const [method, setMethod] = useState('POST')
   const [formInputs, setFormInputs] = useState<FormInputProps[]>([])
 
-  const [headers, setHeaders] = useState<string[]>([
-    'URL',
-    'Event Types',
-    'Method',
-    'Content Type',
-    // 'Enabled',
-  ])
+  const headers = ['URL', 'Event Types', 'Method', 'Content Type']
   const rows = useMemo(() => {
     const rows = new Map<string, Webhook>()
     webhooks.forEach((webhook) =>
@@ -54,7 +48,6 @@ export default function Webhooks(): JSX.Element {
         eventTypes: webhook.eventTypes.join(', '),
         method: webhook.method,
         contentType: webhook.contentType,
-        // enabled: webhook.enabled ? 'Yes' : 'No',
       })
     )
     return rows
@@ -73,7 +66,7 @@ export default function Webhooks(): JSX.Element {
   }
 
   async function onAdd(): Promise<void> {
-    const result = await setWebhookMutation({ url, eventTypes, enabled })
+    const result = await setWebhookMutation({ url, eventTypes })
     if (result) {
       showSuccessToast('Added', { position: 'bottom-right' })
     } else {
@@ -87,7 +80,6 @@ export default function Webhooks(): JSX.Element {
       id: onEditWebhook?.id,
       url,
       eventTypes,
-      enabled,
     })
     if (result) {
       showSuccessToast('Updated', { position: 'bottom-right' })
@@ -170,13 +162,6 @@ export default function Webhooks(): JSX.Element {
               value: contentType,
               disabled: true,
             },
-            // {
-            //   label: 'Enabled',
-            //   name: 'enabled',
-            //   type: 'checkbox',
-            //   onChange: setEnabled,
-            //   value: enabled,
-            // },
           ])
           setAddModelOpen(true)
         }}
@@ -208,13 +193,6 @@ export default function Webhooks(): JSX.Element {
               value: contentType,
               disabled: true,
             },
-            // {
-            //   label: 'Enabled',
-            //   name: 'enabled',
-            //   type: 'checkbox',
-            //   onChange: setEnabled,
-            //   value: webhook?.enabled === 'Yes',
-            // },
           ])
           setOnEditWebhook(webhook)
         }}