Merge pull request #161 from Josmar-jr/fix/show-more-organizations-at…

…-user-autocomplete fix: its possible show more organization options according to the search
vtex-apps · Jun 20, 2024 · 1099a4b · 1099a4b
2 parents ec08219 + 69047e0
commit 1099a4b
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 60 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,9 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Fixed
+
+- Adjusts list organization and research screening according to input at autocomplete
 
 ## [1.31.8] - 2024-06-05
 

diff --git a/react/components/UserWidget.tsx b/react/components/UserWidget.tsx
@@ -108,10 +108,8 @@ const CustomOrganizationOption = (props: any) => {
       disabled={value.status !== 'active'}
     >
       <div className="flex items-center">
-        <span className="pr2">{renderOptionHighlightedText()}</span>
-        {typeof value !== 'string' && (
-          <div className="t-mini c-muted-1">{value.caption}</div>
-        )}
+        <span className="pr2 c-on-base">{renderOptionHighlightedText()}</span>
+        {typeof value !== 'string' && <div>{value.caption}</div>}
       </div>
     </button>
   )
@@ -285,6 +283,25 @@ const UserWidget: VtexFunctionComponent<UserWidgetProps> = ({
       setOrganizationsState({
         ...organizationsState,
         organizationInput: text,
+        organizationOptions:
+          userWidgetData?.getOrganizationsByEmail
+            ?.filter((organization: any) => {
+              return organization?.organizationName
+                ?.toLowerCase()
+                .includes(text?.toLowerCase())
+            })
+            .map(
+              (organization: {
+                orgId: string
+                organizationName: string
+                organizationStatus: string
+              }) => ({
+                value: organization.orgId,
+                label: organization.organizationName,
+                status: organization.organizationStatus,
+              })
+            )
+            .slice(0, 15) ?? [],
       })
     },
     placeholder: `${formatMessage(storeMessages.autocompleteSearching)}...`,
@@ -354,17 +371,10 @@ const UserWidget: VtexFunctionComponent<UserWidgetProps> = ({
       organizationInput: userWidgetData?.getOrganizationByIdStorefront?.name,
       organizationOptions: userWidgetData?.getOrganizationsByEmail
         .slice(0, 15)
-        .map(
-          (organization: {
-            orgId: string
-            organizationName: string
-            organizationStatus: string
-          }) => ({
-            value: organization.orgId,
-            label: organization.organizationName,
-            status: organization.organizationStatus,
-          })
-        ),
+        .map((organization: { orgId: string; organizationName: string }) => ({
+          value: organization.orgId,
+          label: organization.organizationName,
+        })),
       currentRoleName: userWidgetData?.getOrganizationsByEmail?.find(
         (organizations: any) => organizations.costId === currentCostCenter
       )?.role?.name,
@@ -429,10 +439,17 @@ const UserWidget: VtexFunctionComponent<UserWidgetProps> = ({
             (organization: { orgId: string }) =>
               organization.orgId === itemSelected.value
           )
-          .map((organization: { costId: string; costCenterName: string }) => ({
-            value: organization.costId,
-            label: organization.costCenterName,
-          })) as [],
+          .map(
+            (organization: {
+              costId: string
+              costCenterName: string
+              organizationStatus: string
+            }) => ({
+              value: organization.costId,
+              label: organization.costCenterName,
+              status: organization.organizationStatus,
+            })
+          ) as [],
       })
     },
   }
@@ -604,14 +621,12 @@ const UserWidget: VtexFunctionComponent<UserWidgetProps> = ({
             <div
               className={`${handles.userWidgetItem} pa3 br2 bg-base--inverted hover-bg-base--inverted active-bg-base--inverted c-on-base--inverted hover-c-on-base--inverted active-c-on-base--inverted dib mr3`}
             >
-              {(!userWidgetData?.checkImpersonation?.email &&
-                organizationsState.organizationOptions.length > 1 &&
-                showDropdown && (
-                  <AutocompleteInput
-                    input={organizationAutoCompleteInput}
-                    options={autoCompleteOrganizationOptions}
-                  />
-                )) || (
+              {(!userWidgetData?.checkImpersonation?.email && showDropdown && (
+                <AutocompleteInput
+                  input={organizationAutoCompleteInput}
+                  options={autoCompleteOrganizationOptions}
+                />
+              )) || (
                 <Fragment>
                   {`${formatMessage(messages.organization)} ${
                     userWidgetData?.getOrganizationByIdStorefront?.name
@@ -625,48 +640,44 @@ const UserWidget: VtexFunctionComponent<UserWidgetProps> = ({
             <div
               className={`${handles.userWidgetItem} pa3 br2 bg-base--inverted hover-bg-base--inverted active-bg-base--inverted c-on-base--inverted hover-c-on-base--inverted active-c-on-base--inverted dib mr3`}
             >
-              {(!userWidgetData?.checkImpersonation?.email &&
-                organizationsState.organizationOptions.length > 1 &&
-                showDropdown && (
-                  <AutocompleteInput
-                    input={costCenterAutoCompleteInput}
-                    options={autoCompleteCostCentersOptions}
-                  />
-                )) || (
+              {(!userWidgetData?.checkImpersonation?.email && showDropdown && (
+                <AutocompleteInput
+                  input={costCenterAutoCompleteInput}
+                  options={autoCompleteCostCentersOptions}
+                />
+              )) || (
                 <Fragment>
                   {`${formatMessage(messages.costCenter)} ${
                     userWidgetData?.getCostCenterByIdStorefront?.name
                   }`}
                 </Fragment>
               )}
             </div>
-            {!userWidgetData?.checkImpersonation?.email &&
-              organizationsState.organizationOptions.length > 1 &&
-              showDropdown && (
-                <div
-                  className={`${handles.userWidgetItem} pa3 br2 bg-base--inverted hover-bg-base--inverted active-bg-base--inverted c-on-base--inverted hover-c-on-base--inverted active-c-on-base--inverted dib mr3`}
+            {!userWidgetData?.checkImpersonation?.email && showDropdown && (
+              <div
+                className={`${handles.userWidgetItem} pa3 br2 bg-base--inverted hover-bg-base--inverted active-bg-base--inverted c-on-base--inverted hover-c-on-base--inverted active-c-on-base--inverted dib mr3`}
+              >
+                <Button
+                  variation="primary"
+                  size="small"
+                  disabled={
+                    organizationsState.currentCostCenter ===
+                    userWidgetData?.getCostCenterByIdStorefront?.id
+                  }
+                  isLoading={loadingState}
+                  onClick={() => handleSetCurrentOrganization()}
                 >
-                  <Button
-                    variation="primary"
-                    size="small"
-                    disabled={
-                      organizationsState.currentCostCenter ===
-                      userWidgetData?.getCostCenterByIdStorefront?.id
-                    }
-                    isLoading={loadingState}
-                    onClick={() => handleSetCurrentOrganization()}
+                  {formatMessage(messages.setCurrentOrganization)}
+                </Button>
+                {errorOrganization && (
+                  <div
+                    className={`${handles.userWidgetOrganizationError} error`}
                   >
-                    {formatMessage(messages.setCurrentOrganization)}
-                  </Button>
-                  {errorOrganization && (
-                    <div
-                      className={`${handles.userWidgetOrganizationError} error`}
-                    >
-                      <FormattedMessage id="store/b2b-organizations.set-organization-error" />
-                    </div>
-                  )}
-                </div>
-              )}
+                    <FormattedMessage id="store/b2b-organizations.set-organization-error" />
+                  </div>
+                )}
+              </div>
+            )}
             <div
               className={`${handles.userWidgetItem} pa3 br2 bg-base--inverted hover-bg-base--inverted active-bg-base--inverted c-on-base--inverted hover-c-on-base--inverted active-c-on-base--inverted dib mr3`}
             >