feat: add a new tab and insert checkout group to mainupule the permis…

…sion organization

react/admin/OrganizationDetails.tsx

@@ -35,6 +35,8 @@ import OrganizationDetailsDefault from './OrganizationDetails/OrganizationDetail
 import useHashRouter from './OrganizationDetails/useHashRouter'
 import type { Seller } from './OrganizationDetails/OrganizationDetailsSellers'
 import OrganizationDetailsSellers from './OrganizationDetails/OrganizationDetailsSellers'
+import type { PermissionsOptions } from './OrganizationDetails/OrganizationDetailsSettings'
+import OrganizationDetailsSettings from './OrganizationDetails/OrganizationDetailsSettings'
 
 export interface CellRendererProps<RowType> {
   cellData: unknown
@@ -83,6 +85,10 @@ const OrganizationDetails: FunctionComponent = () => {
     [] as PaymentTerm[]
   )
 
+  const [permissionsOptions, setPermissionsOptions] = useState(
+    [] as PermissionsOptions[]
+  )
+
   // const routerRef = useRef(null as any)
 
   const [loadingState, setLoadingState] = useState(false)
@@ -96,6 +102,24 @@ const OrganizationDetails: FunctionComponent = () => {
     variables: { id: params?.id },
     skip: !params?.id,
     ssr: false,
+    onCompleted(insideData) {
+      if (!insideData?.getOrganizationById?.permissions) {
+        return
+      }
+
+      const permissionsArray = Object.entries(
+        insideData.getOrganizationById.permissions
+      ).filter(key => {
+        return !(key[0] === '__typename')
+      })
+
+      setPermissionsOptions(() => {
+        return permissionsArray.map(p => ({
+          label: p[0],
+          value: p[1] as boolean,
+        }))
+      })
+    },
   })
 
   const { data: defaultCustomFieldsData } = useQuery(GET_B2B_CUSTOM_FIELDS, {
@@ -140,11 +164,16 @@ const OrganizationDetails: FunctionComponent = () => {
       paymentTerms,
       priceTables: priceTablesState,
       customFields: customFieldsState,
-      salesChannel: salesChannelState,
+      salesChannel: salesChannelState === '' ? null : salesChannelState,
       sellers: sellersState?.map(seller => ({
         id: seller.sellerId,
         name: seller.name,
       })),
+      permissions: permissionsOptions.reduce((acc, current) => {
+        acc[current.label] = current.value
+
+        return acc
+      }, {} as Record<string, boolean>),
     }
 
     updateOrganization({ variables })
@@ -406,6 +435,16 @@ const OrganizationDetails: FunctionComponent = () => {
         <OrganizationDetailsUsers params={params} loadingState={loadingState} />
       ),
     },
+    {
+      label: 'Configurações',
+      tab: 'settings',
+      component: (
+        <OrganizationDetailsSettings
+          permissionsOptions={permissionsOptions}
+          setPermissionsOptions={setPermissionsOptions}
+        />
+      ),
+    },
   ]
 
   const { tab, handleTabChange, routerRef } = useHashRouter({

react/admin/OrganizationDetails/OrganizationDetailsSettings.tsx

@@ -0,0 +1,53 @@
+import { PageBlock, Checkbox } from 'vtex.styleguide'
+import React, { Fragment } from 'react'
+
+export interface PermissionsOptions {
+  value: boolean
+  label: string
+}
+
+type Permission = 'createQuote'
+
+interface OrganizationDetailsSettingsProps {
+  permissionsOptions: PermissionsOptions[]
+  setPermissionsOptions: React.Dispatch<
+    React.SetStateAction<PermissionsOptions[]>
+  >
+}
+
+const simulateTranslate: Record<Permission, string> = {
+  createQuote: 'Criar cota',
+}
+
+const OrganizationDetailsSettings = ({
+  permissionsOptions,
+  setPermissionsOptions,
+}: OrganizationDetailsSettingsProps) => {
+  const handleCheckboxChange = (label: string) => {
+    setPermissionsOptions(prevOptions =>
+      prevOptions.map(option =>
+        option.label === label ? { ...option, value: !option.value } : option
+      )
+    )
+  }
+
+  return (
+    <Fragment>
+      <PageBlock title="Configurações de permissão">
+        {permissionsOptions.map(permissionOption => (
+          <div>
+            <Checkbox
+              checked={permissionOption.value}
+              id="permissionOrganization"
+              name="permissionOrganization"
+              onChange={() => handleCheckboxChange(permissionOption.label)}
+              label={simulateTranslate[permissionOption.label as Permission]}
+            />
+          </div>
+        ))}
+      </PageBlock>
+    </Fragment>
+  )
+}
+
+export default OrganizationDetailsSettings