Merge pull request #79 from MarlonPassos-git/features/dropdown-optional

Features/dropdown optional

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+- Added the possibility to control whether to show the dropdowns in the UserWidget component when we have more than one organization associated with the email
+
 ## [1.16.3] - 2022-11-09
 
 ### Fixed

docs/README.md

@@ -1,4 +1,4 @@
-=â Use this project, [contribute](https://github.com/vtex-apps/b2b-organizations) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).
+=� Use this project, [contribute](https://github.com/vtex-apps/b2b-organizations) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).
 
 # B2B Organizations
 
@@ -72,6 +72,18 @@ Follow the instructions below to display the user widget.
 
 4. Publish and install the modified store theme. You can follow our documentation on [Making your theme content public](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-making-your-theme-content-public) to do so.
 
+## Configuration
+
+if we have only one associated organization:
+![](https://i.imgur.com/5yXFU6y.png)
+
+if we have more than one associated organization:
+![](https://i.imgur.com/ScQtfIz.png)
+
+### `b2b-user-widget`
+| Prop name                  | Type                              | Description                                                                                                             | Default value |
+| -------------------------- | --------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | ------------- |
+| `showDropdown`               | `Boolean`                          | controls whether we are viewing the dropdown if we have more than one organization associated with the same email.                  | `true`          |
 ## Customization
 
 In order to apply CSS customizations in this and other apps, follow the instructions on [Using CSS Handles for store customization](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-using-css-handles-for-store-customization).
@@ -307,7 +319,7 @@ This will lead you to the **Cost Center Details** page, where you can:
 
 The optional **Business Document** field may be used to store a Tax ID, VAT ID, CNPJ, or similar business identifier. If a Business Document is present in a user's cost center, it will be applied as the `corporateDocument` in the user's profile and therefore attached to any orders placed by the user.
 
->   The shipping addresses assigned to a cost center will be available to that cost center's users at checkout if you install [B2B Checkout Settings](https://developers.vtex.com/vtex-developer-docs/docs/vtex-b2b-checkout-settings). No other addresses will be available. Therefore, each cost center must have at least one shipping address.
+> � The shipping addresses assigned to a cost center will be available to that cost center's users at checkout if you install [B2B Checkout Settings](https://developers.vtex.com/vtex-developer-docs/docs/vtex-b2b-checkout-settings). No other addresses will be available. Therefore, each cost center must have at least one shipping address.
 
 To edit or delete an existing address, click <img src="https://user-images.githubusercontent.com/77292838/159766633-dfcb818f-6bd7-4cd0-92dc-9c682fb50d04.png" width="10" alt-text="00-ellipsis"/> next to it and select **Edit** or **Delete**.
 
@@ -502,7 +514,7 @@ To add a new cost center, they should go to **My Account > My Organization**, wh
 
 In addition, **Organization Admins** can enable specific payment terms for a cost center, by using the toggle button to activate or deactivate the payment terms assigned to the organization, as shown below.
 
->   This section will only be available on the **My Organization** page if [payment terms](#payment-terms) have previously been assigned to the organization by the VTEX Admin users.
+> � This section will only be available on the **My Organization** page if [payment terms](#payment-terms) have previously been assigned to the organization by the VTEX Admin users.
 
 ![19-payment-terms-cost-center](https://user-images.githubusercontent.com/77292838/159766775-dd0a17bd-8418-401b-a377-7d4c9ed0cf11.png)
 

react/components/UserWidget.tsx

@@ -84,7 +84,21 @@ const CustomOrganizationOption = (props: any) => {
   )
 }
 
-const UserWidget: FunctionComponent = () => {
+interface VtexFunctionComponent<T = Record<string, unknown>>
+  extends FunctionComponent<T> {
+  schema?: {
+    title?: string
+    properties?: Record<string, unknown>
+  }
+}
+
+interface UserWidgetProps {
+  showDropdown?: boolean
+}
+
+const UserWidget: VtexFunctionComponent<UserWidgetProps> = ({
+  showDropdown = true,
+}) => {
   const { navigate, rootPath } = useRuntime()
   const { formatMessage } = useIntl()
   const handles = useCssHandles(CSS_HANDLES)
@@ -304,7 +318,8 @@ const UserWidget: FunctionComponent = () => {
           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 && (
+            organizationsState.organizationOptions.length > 1 &&
+            showDropdown && (
               <AutocompleteInput
                 input={organizationAutoCompleteInput}
                 options={autoCompleteOrganizationOptions}
@@ -324,7 +339,8 @@ const UserWidget: FunctionComponent = () => {
           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 && (
+            organizationsState.organizationOptions.length > 1 &&
+            showDropdown && (
               <AutocompleteInput
                 input={costCenterAutoCompleteInput}
                 options={autoCompleteCostCentersOptions}
@@ -338,7 +354,8 @@ const UserWidget: FunctionComponent = () => {
           )}
         </div>
         {!userWidgetData?.checkImpersonation?.email &&
-          organizationsState.organizationOptions.length > 1 && (
+          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`}
             >
@@ -414,4 +431,15 @@ const UserWidget: FunctionComponent = () => {
   )
 }
 
+UserWidget.schema = {
+  title: 'userWidget',
+  properties: {
+    showDropdown: {
+      title: 'showDropdown',
+      type: 'boolean',
+      default: true,
+    },
+  },
+}
+
 export default UserWidget

store/contentSchemas.json

@@ -0,0 +1,14 @@
+{
+  "definitions": {
+    "StorefrontUserWidgetProps": {
+      "title": "userWidget",
+      "properties": {
+        "showDropdown": {
+          "title": "showDropdown",
+          "type": "boolean",
+          "default": true
+        }
+      }
+    }
+  }
+}

store/interfaces.json

@@ -24,6 +24,9 @@
     "component": "StorefrontCostCenterDetails"
   },
   "b2b-user-widget": {
-    "component": "StorefrontUserWidget"
+    "component": "StorefrontUserWidget",
+    "content": {
+      "$ref": "app:vtex.b2b-organizations#/definitions/StorefrontUserWidgetProps"
+    }
   }
 }