From 49bd9e7c8e1a350ace96ed1f026b49df080406eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Artur=20Magalh=C3=A3es?= <artur.magalhaes@vtex.com.br>
Date: Thu, 8 Sep 2022 19:20:08 -0300
Subject: [PATCH 1/4] [CUSTOMERS-4] one to many

- Added one to many feature
---
 CHANGELOG.md                                  |   4 +
 react/components/customers-admin.tsx          | 384 +++++++++++-------
 react/mutations/{saveUser.gql => addUser.gql} |   8 +-
 react/mutations/deleteUser.gql                |   6 +-
 react/package.json                            |  10 +-
 react/queries/getOrganizationsByEmail.graphql |  15 +
 react/yarn.lock                               |  32 +-
 7 files changed, 299 insertions(+), 160 deletions(-)
 rename react/mutations/{saveUser.gql => addUser.gql} (74%)
 create mode 100644 react/queries/getOrganizationsByEmail.graphql

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5558912..072219a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+
+- Added one to many feature
+
 ## [0.2.0] - 2022-07-12
 
 ### Added
diff --git a/react/components/customers-admin.tsx b/react/components/customers-admin.tsx
index dd5ee05..a3dae32 100644
--- a/react/components/customers-admin.tsx
+++ b/react/components/customers-admin.tsx
@@ -1,15 +1,24 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import type { FC } from 'react'
-import React, { useState } from 'react'
+import React, { Fragment, useState } from 'react'
 import { useIntl, defineMessages } from 'react-intl'
 import { useQuery, useMutation, useLazyQuery } from 'react-apollo'
-import { Card, Button, Dropdown, Alert, Spinner } from 'vtex.styleguide'
+import {
+  Button,
+  Dropdown,
+  Alert,
+  Spinner,
+  Tabs,
+  Tab,
+  Table,
+} from 'vtex.styleguide'
 
 import OrganizationsAutocomplete from './OrganizationsAutocomplete'
 import GET_USER from '../queries/getUser.gql'
 import GET_ROLES from '../queries/ListRoles.gql'
 import GET_COST from '../queries/costCentersByOrg.gql'
-import SAVE_USER from '../mutations/saveUser.gql'
+import GET_ORGANIZATIONS from '../queries/getOrganizationsByEmail.graphql'
+import ADD_USER from '../mutations/addUser.gql'
 import DELETE_USER from '../mutations/deleteUser.gql'
 
 export const messages = defineMessages({
@@ -53,6 +62,26 @@ export const messages = defineMessages({
     id: 'admin/storefront-permissions.button.save',
     defaultMessage: 'Save',
   },
+  add: {
+    id: 'admin/storefront-permissions.button.add',
+    defaultMessage: 'Add',
+  },
+  remove: {
+    id: 'admin/storefront-permissions.button.remove',
+    defaultMessage: 'Remove',
+  },
+  options: {
+    id: 'admin/storefront-permissions.label.options',
+    defaultMessage: 'Options',
+  },
+  b2bRoles: {
+    id: 'admin/storefront-permissions.label.b2bRoles',
+    defaultMessage: 'B2b Roles',
+  },
+  addNew: {
+    id: 'admin/storefront-permissions.button.addNew',
+    defaultMessage: 'Add New',
+  },
   delete: {
     id: 'admin/storefront-permissions.button.delete',
     defaultMessage: 'Remove B2B Info',
@@ -120,11 +149,11 @@ const UserEdit: FC<any> = (props: any) => {
     email,
   })
 
-  const {
-    data: userData,
-    loading,
-    refetch,
-  } = useQuery(GET_USER, {
+  const [tabs, setTabs] = useState(0)
+  const [organizations, setOrganizations] = useState([])
+  const [isRemoving, setIsRemoving] = useState(false)
+
+  const { loading, refetch } = useQuery(GET_USER, {
     skip: !id,
     variables: {
       id,
@@ -139,14 +168,47 @@ const UserEdit: FC<any> = (props: any) => {
     },
   })
 
+  const handleTabs = (tab: number) => {
+    setTabs(tab)
+    setState({
+      ...state,
+      message: null,
+    })
+  }
+
+  const { refetch: refetchOrganizations, loading: loadingOrganizations } =
+    useQuery(GET_ORGANIZATIONS, {
+      variables: {
+        email,
+      },
+      fetchPolicy: 'network-only',
+      notifyOnNetworkStatusChange: true,
+      onCompleted: (res: any) => {
+        const result = res.getOrganizationsByEmail?.map((organization: any) => {
+          return {
+            ...organization,
+            role: organization.role.name,
+          }
+        })
+
+        if (result.length === 0) {
+          handleTabs(1)
+        }
+
+        setOrganizations(result)
+      },
+    })
+
   const { loading: loadingRoles, data: dataRoles } = useQuery(GET_ROLES)
 
-  const [saveUser, { loading: saveUserLoading }] = useMutation(SAVE_USER)
+  const [saveUser, { loading: saveUserLoading }] = useMutation(ADD_USER)
 
   const [deleteUser, { loading: deleteUserLoading }] = useMutation(DELETE_USER)
 
-  const [getCostCenter, { data: dataCostCenter, called }] =
-    useLazyQuery(GET_COST)
+  const [
+    getCostCenter,
+    { data: dataCostCenter, called, loading: loadingCostCenters },
+  ] = useLazyQuery(GET_COST)
 
   const onMutationError = () => {
     setState({
@@ -157,7 +219,6 @@ const UserEdit: FC<any> = (props: any) => {
 
   const handleSaveUser = () => {
     const variables = {
-      id: state.id,
       clId: state.clId,
       userId: state.userId,
       roleId: state.roleId,
@@ -181,17 +242,21 @@ const UserEdit: FC<any> = (props: any) => {
           id: state.id ?? res?.data?.saveUser?.id,
           message: 'success',
         })
+        refetchOrganizations()
       })
       .catch(onMutationError)
   }
 
-  const handleDeleteUser = () => {
+  const handleDeleteUser = (userData: any) => {
     const variables = {
-      id: state.id,
-      userId: state.userId,
+      id: userData.id,
+      userId: userData.userId,
       email: state.email,
+      clId: userData.clId,
     }
 
+    setIsRemoving(true)
+
     deleteUser({
       variables,
     })
@@ -209,8 +274,12 @@ const UserEdit: FC<any> = (props: any) => {
           message: 'success',
         })
         refetch()
+        refetchOrganizations()
       })
       .catch(onMutationError)
+      .finally(() => {
+        setIsRemoving(false)
+      })
   }
 
   const optionsCost = parseOptions(
@@ -233,150 +302,193 @@ const UserEdit: FC<any> = (props: any) => {
     })
   }
 
-  if (loading || loadingRoles) {
+  if (loading || loadingRoles || loadingCostCenters) {
     return (
-      <div className="w-100 pt6">
+      <div className="w-100 pt6 flex items-center justify-center">
         <Spinner />
       </div>
     )
   }
 
+  const customSchema = {
+    properties: {
+      role: {
+        title: formatMessage(messages.role),
+      },
+      organizationName: {
+        title: formatMessage(messages.organization),
+      },
+      costCenterName: {
+        title: formatMessage(messages.costCenter),
+      },
+      options: {
+        title: formatMessage(messages.options),
+        // you can customize cell component render (also header component with headerRenderer)
+        cellRenderer: ({ rowData }: any) => {
+          return (
+            <Fragment>
+              <div className="mt2 mb2">
+                <Button
+                  variation="danger"
+                  size="small"
+                  disabled={isRemoving}
+                  onClick={() => handleDeleteUser(rowData)}
+                >
+                  {formatMessage(messages.remove)}
+                </Button>
+              </div>
+            </Fragment>
+          )
+        },
+      },
+    },
+  }
+
   return (
     <div className="w-100 pt6">
-      <Card>
-        <h5 className="t-heading-5 fw4 mt1 mb6">
-          {formatMessage(messages.b2bInfo)}
-        </h5>
-        {showName && <div className="mb5">{state.name}</div>}
-        {showEmail && <div className="mb5">{state.email}</div>}
-        {roleOptions.length > 1 && (
-          <div className="mb5 w-80">
-            <Dropdown
-              label={formatMessage(messages.role)}
-              options={roleOptions}
-              value={state.roleId}
-              onChange={(_: any, v: string) => {
-                setState({
-                  ...state,
-                  roleId: v,
-                })
-              }}
+      <Tabs fullWidth className="mb4">
+        <Tab
+          active={tabs === 0}
+          label={formatMessage(messages.b2bRoles)}
+          onClick={() => handleTabs(0)}
+        />
+        <Tab
+          active={tabs === 1}
+          label={formatMessage(messages.addNew)}
+          onClick={() => handleTabs(1)}
+        />
+      </Tabs>
+      <div className="pa7">
+        {tabs === 0 ? (
+          <Fragment>
+            <Table
+              loading={loadingOrganizations || isRemoving}
+              fullWidth
+              schema={customSchema}
+              items={organizations}
             />
-          </div>
-        )}
+          </Fragment>
+        ) : (
+          <Fragment>
+            {showName && <div className="mb5">{state.name}</div>}
+            {showEmail && <div className="mb5">{state.email}</div>}
+            {roleOptions.length > 1 && (
+              <div className="mb5">
+                <Dropdown
+                  label={formatMessage(messages.role)}
+                  options={roleOptions}
+                  value={state.roleId}
+                  onChange={(_: any, v: string) => {
+                    setState({
+                      ...state,
+                      roleId: v,
+                    })
+                  }}
+                />
+              </div>
+            )}
 
-        {dataRoles && state.roleId && (
-          <div className="mb5 w-100">
-            <div className="flex">
-              <div className="mr2 w-80">
-                <label className="h-100">
-                  <span className="db mt0 mb3 c-on-base t-small">
-                    {formatMessage(messages.organization)}
-                  </span>
-                  <OrganizationsAutocomplete
-                    organizationId={state.orgId}
-                    onChange={(event) => {
-                      if (event.value === state.orgId) {
-                        return
-                      }
-
-                      setState({
-                        ...state,
-                        orgId: event.value,
-                        costId: null,
-                      })
-                      if (!event.value) return
-                      getCostCenter({
-                        variables: {
-                          id: event.value,
-                        },
-                      })
-                    }}
-                  />
-                </label>
+            {dataRoles && state.roleId && (
+              <div className="mb5 w-100">
+                <div className="flex">
+                  <div className="w-100">
+                    <label className="h-100">
+                      <span className="db mt0 mb3 c-on-base t-small">
+                        {formatMessage(messages.organization)}
+                      </span>
+                      <OrganizationsAutocomplete
+                        organizationId={state.orgId}
+                        onChange={(event) => {
+                          if (event.value === state.orgId) {
+                            return
+                          }
+
+                          setState({
+                            ...state,
+                            orgId: event.value,
+                            costId: null,
+                          })
+                          if (!event.value) return
+                          getCostCenter({
+                            variables: {
+                              id: event.value,
+                            },
+                          })
+                        }}
+                      />
+                    </label>
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-        )}
+            )}
 
-        {state.orgId && (
-          <div className="mb5 w-80">
-            <Dropdown
-              label={formatMessage(messages.costCenter)}
-              options={optionsCost}
-              value={state.costId}
-              onChange={(_: any, costId: string) => {
-                setState({ ...state, costId })
-              }}
-            />
-          </div>
-        )}
+            {state.orgId && (
+              <div className="mb5">
+                <Dropdown
+                  label={formatMessage(messages.costCenter)}
+                  options={optionsCost}
+                  value={state.costId}
+                  onChange={(_: any, costId: string) => {
+                    setState({ ...state, costId })
+                  }}
+                />
+              </div>
+            )}
 
-        {state.orgId && !state.costId ? (
-          <div className="mv4">
-            <Alert type="error">{formatMessage(messages.alertPick)}</Alert>
-          </div>
-        ) : null}
+            {state.orgId && !state.costId ? (
+              <div className="mv4">
+                <Alert type="error">{formatMessage(messages.alertPick)}</Alert>
+              </div>
+            ) : null}
 
-        <div className="mv4 flex justify-start">
-          {showCancel && onCancel && (
-            <div className="mr3">
+            <div className="mv4 flex justify-start">
+              {showCancel && onCancel && (
+                <div className="mr3">
+                  <Button
+                    variation="tertiary"
+                    disabled={loading}
+                    onClick={() => {
+                      onCancel()
+                    }}
+                  >
+                    {formatMessage(messages.cancel)}
+                  </Button>
+                </div>
+              )}
               <Button
-                variation="tertiary"
-                disabled={loading}
+                variation="primary"
+                disabled={
+                  loading ||
+                  saveUserLoading ||
+                  deleteUserLoading ||
+                  !state.name ||
+                  !state.email ||
+                  !state.orgId ||
+                  !state.costId ||
+                  !state.roleId
+                }
                 onClick={() => {
-                  onCancel()
+                  handleSaveUser()
                 }}
               >
-                {formatMessage(messages.cancel)}
+                {formatMessage(messages.add)}
               </Button>
             </div>
-          )}
-          <Button
-            variation="primary"
-            disabled={
-              loading ||
-              saveUserLoading ||
-              deleteUserLoading ||
-              !state.name ||
-              !state.email ||
-              !state.orgId ||
-              !state.costId ||
-              !state.roleId
-            }
-            onClick={() => {
-              handleSaveUser()
-            }}
-          >
-            {formatMessage(messages.save)}
-          </Button>
-          {userData?.getUser?.roleId && (
-            <div className="ml3">
-              <Button
-                variation="danger"
-                disabled={loading || saveUserLoading || deleteUserLoading}
-                onClick={() => {
-                  handleDeleteUser()
+            {state.message && (
+              <Alert
+                type={state.message}
+                onClose={() => {
+                  setState({ ...state, message: null })
                 }}
               >
-                {formatMessage(messages.delete)}
-              </Button>
-            </div>
-          )}
-        </div>
-        {state.message && (
-          <Alert
-            type={state.message}
-            onClose={() => {
-              setState({ ...state, message: null })
-            }}
-          >
-            {state.message === 'success'
-              ? formatMessage(messages.success)
-              : formatMessage(messages.error)}
-          </Alert>
+                {state.message === 'success'
+                  ? formatMessage(messages.success)
+                  : formatMessage(messages.error)}
+              </Alert>
+            )}
+          </Fragment>
         )}
-      </Card>
+      </div>
     </div>
   )
 }
diff --git a/react/mutations/saveUser.gql b/react/mutations/addUser.gql
similarity index 74%
rename from react/mutations/saveUser.gql
rename to react/mutations/addUser.gql
index 895d57f..e07d385 100644
--- a/react/mutations/saveUser.gql
+++ b/react/mutations/addUser.gql
@@ -1,7 +1,6 @@
-mutation save(
+mutation add(
   $id: ID
   $roleId: ID!
-  $clId: ID!
   $userId: ID
   $orgId: ID
   $costId: ID
@@ -9,17 +8,16 @@ mutation save(
   $name: String!
   $email: String!
 ) {
-  saveUser(
+  addUser(
     id: $id
     roleId: $roleId
-    clId: $clId
     userId: $userId
     orgId: $orgId
     costId: $costId
     canImpersonate: $canImpersonate
     name: $name
     email: $email
-  ) @context(provider: "vtex.storefront-permissions") {
+  ) @context(provider: "vtex.b2b-organizations-graphql") {
     id
     status
     message
diff --git a/react/mutations/deleteUser.gql b/react/mutations/deleteUser.gql
index d1dea83..de47f1e 100644
--- a/react/mutations/deleteUser.gql
+++ b/react/mutations/deleteUser.gql
@@ -1,6 +1,6 @@
-mutation DeleteUser($id: ID!, $userId: ID, $email: String!) {
-  deleteUser(id: $id, userId: $userId, email: $email)
-    @context(provider: "vtex.storefront-permissions") {
+mutation DeleteUser($id: ID!, $userId: ID, $email: String!, $clId: ID!) {
+  removeUser(id: $id, userId: $userId, email: $email, clId: $clId)
+    @context(provider: "vtex.b2b-organizations-graphql") {
     id
     status
     message
diff --git a/react/package.json b/react/package.json
index f4428c6..5bd74e8 100644
--- a/react/package.json
+++ b/react/package.json
@@ -13,10 +13,12 @@
     "graphql": "^14.0.2",
     "prop-types": "^15.7.2",
     "typescript": "3.9.7",
-    "vtex.admin-customers-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.admin-customers-graphql@3.0.1/public/@types/vtex.admin-customers-graphql",
-    "vtex.b2b-organizations-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.b2b-organizations-graphql@0.9.1/public/@types/vtex.b2b-organizations-graphql",
-    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.132.3/public/@types/vtex.render-runtime",
-    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.2/public/@types/vtex.styleguide"
+    "vtex.admin-customers-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.admin-customers-graphql@3.0.2/public/@types/vtex.admin-customers-graphql",
+    "vtex.b2b-organizations-graphql": "https://b2borg2--sandboxusdev.myvtex.com/_v/private/typings/linked/v1/vtex.b2b-organizations-graphql@0.19.8+build1662661768/public/@types/vtex.b2b-organizations-graphql",
+    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.132.4/public/@types/vtex.render-runtime",
+    "vtex.storefront-permissions": "https://b2borg2--sandboxusdev.myvtex.com/_v/private/typings/linked/v1/vtex.storefront-permissions@1.23.0+build1662661707/public/@types/vtex.storefront-permissions",
+    "vtex.storefront-permissions-components": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.storefront-permissions-components@0.2.0/public/@types/vtex.storefront-permissions-components",
+    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.3/public/@types/vtex.styleguide"
   },
   "dependencies": {
     "faker": "^4.1.0",
diff --git a/react/queries/getOrganizationsByEmail.graphql b/react/queries/getOrganizationsByEmail.graphql
new file mode 100644
index 0000000..8d92f5f
--- /dev/null
+++ b/react/queries/getOrganizationsByEmail.graphql
@@ -0,0 +1,15 @@
+query GetOrganizationsByEmail($email: String!) {
+  getOrganizationsByEmail(email: $email)
+    @context(provider: "vtex.b2b-organizations-graphql") {
+    id
+    costId
+    orgId
+    roleId
+    clId
+    organizationName
+    costCenterName
+    role {
+      name
+    }
+  }
+}
diff --git a/react/yarn.lock b/react/yarn.lock
index b17e30a..492f755 100644
--- a/react/yarn.lock
+++ b/react/yarn.lock
@@ -480,21 +480,29 @@ typescript@3.9.7:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa"
   integrity sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw==
 
-"vtex.admin-customers-graphql@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.admin-customers-graphql@3.0.1/public/@types/vtex.admin-customers-graphql":
-  version "3.0.1"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.admin-customers-graphql@3.0.1/public/@types/vtex.admin-customers-graphql#d18295715e60b1b7d917714530c22a98a1f4e88f"
+"vtex.admin-customers-graphql@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.admin-customers-graphql@3.0.2/public/@types/vtex.admin-customers-graphql":
+  version "3.0.2"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.admin-customers-graphql@3.0.2/public/@types/vtex.admin-customers-graphql#f560494187e1fbbd2d744bd6be92896140d8539f"
 
-"vtex.b2b-organizations-graphql@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.b2b-organizations-graphql@0.9.1/public/@types/vtex.b2b-organizations-graphql":
-  version "0.9.1"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.b2b-organizations-graphql@0.9.1/public/@types/vtex.b2b-organizations-graphql#f8752829d0902191de6f4b3bfa7580926b9cbe64"
+"vtex.b2b-organizations-graphql@https://b2borg2--sandboxusdev.myvtex.com/_v/private/typings/linked/v1/vtex.b2b-organizations-graphql@0.19.8+build1662661768/public/@types/vtex.b2b-organizations-graphql":
+  version "0.19.8"
+  resolved "https://b2borg2--sandboxusdev.myvtex.com/_v/private/typings/linked/v1/vtex.b2b-organizations-graphql@0.19.8+build1662661768/public/@types/vtex.b2b-organizations-graphql#b6c9c731b3c1c4c3012d43ec0d2a27ea29f4868f"
 
-"vtex.render-runtime@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.132.3/public/@types/vtex.render-runtime":
-  version "8.132.3"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.132.3/public/@types/vtex.render-runtime#c7dd142e384f38bd7a7c841543b73e9349fadc93"
+"vtex.render-runtime@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.132.4/public/@types/vtex.render-runtime":
+  version "8.132.4"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.132.4/public/@types/vtex.render-runtime#66bb41bd4d342e37c9d85172aad5f7eefebfb6dc"
 
-"vtex.styleguide@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.2/public/@types/vtex.styleguide":
-  version "9.145.2"
-  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.2/public/@types/vtex.styleguide#ca64bf8408ad3eb487b0822dd68f77565c986a56"
+"vtex.storefront-permissions-components@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.storefront-permissions-components@0.2.0/public/@types/vtex.storefront-permissions-components":
+  version "0.2.0"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.storefront-permissions-components@0.2.0/public/@types/vtex.storefront-permissions-components#9cb628984efc7df805719a580180d8f90878ee1c"
+
+"vtex.storefront-permissions@https://b2borg2--sandboxusdev.myvtex.com/_v/private/typings/linked/v1/vtex.storefront-permissions@1.23.0+build1662661707/public/@types/vtex.storefront-permissions":
+  version "1.23.0"
+  resolved "https://b2borg2--sandboxusdev.myvtex.com/_v/private/typings/linked/v1/vtex.storefront-permissions@1.23.0+build1662661707/public/@types/vtex.storefront-permissions#1a59222d404a42ac9ee6a4adf2f4abb9d4d062d1"
+
+"vtex.styleguide@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.3/public/@types/vtex.styleguide":
+  version "9.146.3"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.3/public/@types/vtex.styleguide#05558160f29cd8f4aefe419844a4bd66e2b3fdbb"
 
 zen-observable-ts@^0.8.21:
   version "0.8.21"

From 78b175dce02ce765814879e1ba496146b2bd7119 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Artur=20Magalh=C3=A3es?= <artur.magalhaes@vtex.com.br>
Date: Fri, 9 Sep 2022 15:24:24 -0300
Subject: [PATCH 2/4] feat: added the new user by adding directly to the state

---
 react/components/customers-admin.tsx | 40 +++++++++++++++++++---------
 react/package.json                   |  4 +--
 react/yarn.lock                      | 10 +++----
 3 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/react/components/customers-admin.tsx b/react/components/customers-admin.tsx
index a3dae32..fba5f03 100644
--- a/react/components/customers-admin.tsx
+++ b/react/components/customers-admin.tsx
@@ -127,6 +127,7 @@ const initialState = {
   name: null,
   email: null,
   canImpersonate: false,
+  organizationName: null,
 }
 
 const UserEdit: FC<any> = (props: any) => {
@@ -150,7 +151,7 @@ const UserEdit: FC<any> = (props: any) => {
   })
 
   const [tabs, setTabs] = useState(0)
-  const [organizations, setOrganizations] = useState([])
+  const [organizations, setOrganizations] = useState([] as any)
   const [isRemoving, setIsRemoving] = useState(false)
 
   const { loading, refetch } = useQuery(GET_USER, {
@@ -217,6 +218,18 @@ const UserEdit: FC<any> = (props: any) => {
     })
   }
 
+  const roleOptions =
+    dataRoles?.listRoles?.map((role: any) => {
+      return {
+        value: role.id,
+        label: role.name,
+      }
+    }) ?? []
+
+  const optionsCost = parseOptions(
+    dataCostCenter?.getCostCentersByOrganizationId
+  )
+
   const handleSaveUser = () => {
     const variables = {
       clId: state.clId,
@@ -243,6 +256,18 @@ const UserEdit: FC<any> = (props: any) => {
           message: 'success',
         })
         refetchOrganizations()
+        setOrganizations([
+          ...organizations,
+          {
+            ...variables,
+            role: roleOptions.find((role: any) => role.roleId === state.roleId)
+              ?.name,
+            organizationName: state.organizationName,
+            costCenterName: optionsCost.find(
+              (costCenter: any) => costCenter.id === state.costId
+            )?.name,
+          },
+        ])
       })
       .catch(onMutationError)
   }
@@ -282,18 +307,6 @@ const UserEdit: FC<any> = (props: any) => {
       })
   }
 
-  const optionsCost = parseOptions(
-    dataCostCenter?.getCostCentersByOrganizationId
-  )
-
-  const roleOptions =
-    dataRoles?.listRoles?.map((role: any) => {
-      return {
-        value: role.id,
-        label: role.name,
-      }
-    }) ?? []
-
   if (state.costId && !called) {
     getCostCenter({
       variables: {
@@ -407,6 +420,7 @@ const UserEdit: FC<any> = (props: any) => {
                             ...state,
                             orgId: event.value,
                             costId: null,
+                            organizationName: event.label,
                           })
                           if (!event.value) return
                           getCostCenter({
diff --git a/react/package.json b/react/package.json
index 5bd74e8..7af644f 100644
--- a/react/package.json
+++ b/react/package.json
@@ -14,9 +14,9 @@
     "prop-types": "^15.7.2",
     "typescript": "3.9.7",
     "vtex.admin-customers-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.admin-customers-graphql@3.0.2/public/@types/vtex.admin-customers-graphql",
-    "vtex.b2b-organizations-graphql": "https://b2borg2--sandboxusdev.myvtex.com/_v/private/typings/linked/v1/vtex.b2b-organizations-graphql@0.19.8+build1662661768/public/@types/vtex.b2b-organizations-graphql",
+    "vtex.b2b-organizations-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.b2b-organizations-graphql@0.19.7/public/@types/vtex.b2b-organizations-graphql",
     "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.132.4/public/@types/vtex.render-runtime",
-    "vtex.storefront-permissions": "https://b2borg2--sandboxusdev.myvtex.com/_v/private/typings/linked/v1/vtex.storefront-permissions@1.23.0+build1662661707/public/@types/vtex.storefront-permissions",
+    "vtex.storefront-permissions": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.storefront-permissions@1.23.0/public/@types/vtex.storefront-permissions",
     "vtex.storefront-permissions-components": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.storefront-permissions-components@0.2.0/public/@types/vtex.storefront-permissions-components",
     "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.3/public/@types/vtex.styleguide"
   },
diff --git a/react/yarn.lock b/react/yarn.lock
index 492f755..2b20dac 100644
--- a/react/yarn.lock
+++ b/react/yarn.lock
@@ -484,9 +484,9 @@ typescript@3.9.7:
   version "3.0.2"
   resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.admin-customers-graphql@3.0.2/public/@types/vtex.admin-customers-graphql#f560494187e1fbbd2d744bd6be92896140d8539f"
 
-"vtex.b2b-organizations-graphql@https://b2borg2--sandboxusdev.myvtex.com/_v/private/typings/linked/v1/vtex.b2b-organizations-graphql@0.19.8+build1662661768/public/@types/vtex.b2b-organizations-graphql":
-  version "0.19.8"
-  resolved "https://b2borg2--sandboxusdev.myvtex.com/_v/private/typings/linked/v1/vtex.b2b-organizations-graphql@0.19.8+build1662661768/public/@types/vtex.b2b-organizations-graphql#b6c9c731b3c1c4c3012d43ec0d2a27ea29f4868f"
+"vtex.b2b-organizations-graphql@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.b2b-organizations-graphql@0.19.7/public/@types/vtex.b2b-organizations-graphql":
+  version "0.19.7"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.b2b-organizations-graphql@0.19.7/public/@types/vtex.b2b-organizations-graphql#02c153b6a8f63153d045168d84cd540814f06292"
 
 "vtex.render-runtime@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.132.4/public/@types/vtex.render-runtime":
   version "8.132.4"
@@ -496,9 +496,9 @@ typescript@3.9.7:
   version "0.2.0"
   resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.storefront-permissions-components@0.2.0/public/@types/vtex.storefront-permissions-components#9cb628984efc7df805719a580180d8f90878ee1c"
 
-"vtex.storefront-permissions@https://b2borg2--sandboxusdev.myvtex.com/_v/private/typings/linked/v1/vtex.storefront-permissions@1.23.0+build1662661707/public/@types/vtex.storefront-permissions":
+"vtex.storefront-permissions@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.storefront-permissions@1.23.0/public/@types/vtex.storefront-permissions":
   version "1.23.0"
-  resolved "https://b2borg2--sandboxusdev.myvtex.com/_v/private/typings/linked/v1/vtex.storefront-permissions@1.23.0+build1662661707/public/@types/vtex.storefront-permissions#1a59222d404a42ac9ee6a4adf2f4abb9d4d062d1"
+  resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.storefront-permissions@1.23.0/public/@types/vtex.storefront-permissions#2a12e48a1b630d6d9cd64115572bcae55a7aa756"
 
 "vtex.styleguide@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.3/public/@types/vtex.styleguide":
   version "9.146.3"

From 1875187dbfc8274711fd0f15d3707ed7ad82fc49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Artur=20Magalh=C3=A3es?= <artur.magalhaes@vtex.com.br>
Date: Fri, 9 Sep 2022 16:06:51 -0300
Subject: [PATCH 3/4] fix: fixed

---
 react/components/customers-admin.tsx | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/react/components/customers-admin.tsx b/react/components/customers-admin.tsx
index fba5f03..deb5895 100644
--- a/react/components/customers-admin.tsx
+++ b/react/components/customers-admin.tsx
@@ -173,6 +173,9 @@ const UserEdit: FC<any> = (props: any) => {
     setTabs(tab)
     setState({
       ...state,
+      roleId: null,
+      orgId: null,
+      costId: null,
       message: null,
     })
   }
@@ -196,7 +199,13 @@ const UserEdit: FC<any> = (props: any) => {
           handleTabs(1)
         }
 
-        setOrganizations(result)
+        setOrganizations([
+          ...result,
+          ...organizations.filter(
+            (item: any) =>
+              !result.find((subitem: any) => subitem.id !== item.id)
+          ),
+        ])
       },
     })
 
@@ -260,11 +269,11 @@ const UserEdit: FC<any> = (props: any) => {
           ...organizations,
           {
             ...variables,
-            role: roleOptions.find((role: any) => role.roleId === state.roleId)
+            role: roleOptions.find((role: any) => role.value === state.roleId)
               ?.name,
             organizationName: state.organizationName,
             costCenterName: optionsCost.find(
-              (costCenter: any) => costCenter.id === state.costId
+              (costCenter: any) => costCenter.value === state.costId
             )?.name,
           },
         ])

From 63e6dde78ceb6b423f591aeec6409efe89e38007 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Artur=20Magalh=C3=A3es?= <artur.magalhaes@vtex.com.br>
Date: Fri, 9 Sep 2022 16:42:29 -0300
Subject: [PATCH 4/4] fix: bug fix on handling the organizations

---
 react/components/customers-admin.tsx | 23 ++++++++++++++++-------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/react/components/customers-admin.tsx b/react/components/customers-admin.tsx
index deb5895..b032451 100644
--- a/react/components/customers-admin.tsx
+++ b/react/components/customers-admin.tsx
@@ -251,6 +251,16 @@ const UserEdit: FC<any> = (props: any) => {
       canImpersonate: state.canImpersonate,
     }
 
+    const roleName = roleOptions.find(
+      (role: any) => role.value === state.roleId
+    )?.name
+
+    const costCenterName = optionsCost.find(
+      (costCenter: any) => costCenter.value === state.costId
+    )?.name
+
+    const { organizationName } = state
+
     saveUser({
       variables,
     })
@@ -261,7 +271,7 @@ const UserEdit: FC<any> = (props: any) => {
 
         setState({
           ...state,
-          id: state.id ?? res?.data?.saveUser?.id,
+          id: state.id ?? res?.data?.addUser?.id,
           message: 'success',
         })
         refetchOrganizations()
@@ -269,12 +279,10 @@ const UserEdit: FC<any> = (props: any) => {
           ...organizations,
           {
             ...variables,
-            role: roleOptions.find((role: any) => role.value === state.roleId)
-              ?.name,
-            organizationName: state.organizationName,
-            costCenterName: optionsCost.find(
-              (costCenter: any) => costCenter.value === state.costId
-            )?.name,
+            id: res?.data?.addUser?.id,
+            role: roleName,
+            organizationName,
+            costCenterName,
           },
         ])
       })
@@ -307,6 +315,7 @@ const UserEdit: FC<any> = (props: any) => {
           id: state.id ?? res?.data?.deleteUser?.id,
           message: 'success',
         })
+        setOrganizations([])
         refetch()
         refetchOrganizations()
       })