From 777f2285da10f13b5d77426f17772f8a749c0915 Mon Sep 17 00:00:00 2001
From: Wender Lima <wender.lima@vtex.com.br>
Date: Wed, 10 Nov 2021 10:18:39 -0300
Subject: [PATCH 1/2] Release v0.0.4

---
 CHANGELOG.md  | 2 ++
 manifest.json | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8f14bb4..58878f3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+## [0.0.4] - 2021-11-10
+
 ## [0.0.3] - 2021-11-03
 
 ### Fixed
diff --git a/manifest.json b/manifest.json
index 49a87b4..c2bf157 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
   "name": "storefront-permissions-components",
   "vendor": "vtex",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "title": "Storefront Permissions Components",
   "description": "Host sharable components",
   "mustUpdateAt": "2022-08-28",

From 6ad29a3ab91874fbe6fc72d2e24ae8bff76f0363 Mon Sep 17 00:00:00 2001
From: Wender Lima <wender.lima@vtex.com.br>
Date: Mon, 27 Dec 2021 19:43:06 -0300
Subject: [PATCH 2/2] Allow cleaning up Organization

---
 CHANGELOG.md                         |  5 +++
 react/components/customers-admin.tsx | 54 ++++++++++++++++++----------
 2 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 58878f3..817438e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+- Allow cleanup Organization selection
+
+### Fixed
+- Cost Center not cleaning up after organization is changed
 ## [0.0.4] - 2021-11-10
 
 ## [0.0.3] - 2021-11-03
diff --git a/react/components/customers-admin.tsx b/react/components/customers-admin.tsx
index a0f23ea..a243ce8 100644
--- a/react/components/customers-admin.tsx
+++ b/react/components/customers-admin.tsx
@@ -5,14 +5,15 @@ import React, { useState } from 'react'
 import type { WrappedComponentProps } from 'react-intl'
 import { injectIntl, defineMessages } from 'react-intl'
 import { useQuery, useMutation, useLazyQuery } from 'react-apollo'
-import { Button, Dropdown, Toggle, Alert } from 'vtex.styleguide'
+import { Button, Dropdown, Toggle, Alert, ButtonWithIcon, IconClear } from 'vtex.styleguide'
 
 import GET_USER from '../queries/getUser.gql'
 import GET_ROLES from '../queries/ListRoles.gql'
 import GET_ORG from '../queries/listOrganizations.gql'
 import GET_COST from '../queries/costCentersByOrg.gql'
 import SAVE_USER from '../mutations/saveUser.gql'
-import { stat } from 'fs'
+
+const remove = <IconClear />
 
 const messages = defineMessages({
   role: {
@@ -159,6 +160,14 @@ const UserEdit: FC<any & WrappedComponentProps> = (props: any) => {
     })
   }
 
+  const handleClear = () => {
+    setState({
+      ...state,
+      orgId: null,
+      costId: null,
+    })
+  }
+
   const optionsOrg = parseOptions(orgData?.getOrganizations) ?? []
   const optionsCost =
     parseOptions(dataCostCenter?.getCostCentersByOrganizationId) ?? []
@@ -175,7 +184,7 @@ const UserEdit: FC<any & WrappedComponentProps> = (props: any) => {
     <div className="w-100 pt6">
       {showName && <div className="mb5">{state.name}</div>}
       {showEmail && <div className="mb5">{state.email}</div>}
-      <div className="mb5">
+      <div className="mb5 w-80">
         <Dropdown
           label={intl.formatMessage(messages.role)}
           disabled={loadingRoles || loading}
@@ -195,25 +204,34 @@ const UserEdit: FC<any & WrappedComponentProps> = (props: any) => {
       </div>
 
       {dataRoles && (
-        <div className="mb5">
-          <Dropdown
-            label={intl.formatMessage(messages.organization)}
-            options={optionsOrg}
-            value={state.orgId}
-            onChange={(_: any, orgId: any) => {
-              setState({ ...state, orgId })
-              getCostCenter({
-                variables: {
-                  id: orgId,
-                },
-              })
-            }}
-          />
+        <div className="mb5 w-100">
+          <div className="flex">
+            <div className="mr2 w-80">
+              <Dropdown
+                label={intl.formatMessage(messages.organization)}
+                options={optionsOrg}
+                value={state.orgId}
+                onChange={(_: any, orgId: any) => {
+                  setState({ ...state, orgId, costId: null })
+                  getCostCenter({
+                    variables: {
+                      id: orgId,
+                    },
+                  })
+                }}
+              />
+            </div>
+            {state.orgId && <div className="mr2 mt2 w-20 mt6">
+              <ButtonWithIcon icon={remove} variation="danger-tertiary" onClick={() => {
+                handleClear()
+              }}/>
+            </div>}
+          </div>
         </div>
       )}
 
       {state.orgId && (
-        <div className="mb5">
+        <div className="mb5 w-80">
           <Dropdown
             label={intl.formatMessage(messages.costCenter)}
             options={optionsCost}