Merge pull request #27 from Josmar-jr/feat/check-organization-permission

Feat/check organization permission

CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ## [Unreleased]
 
+### Added
+- Create a check organization permission component
+
 ## [1.2.1] - 2023-05-26
 
 ### Added

manifest.json

@@ -13,7 +13,9 @@
     "vtex.css-handles": "1.x",
     "vtex.styleguide": "9.x",
     "vtex.admin-customers-graphql": "3.x",
-    "vtex.storefront-permissions": "1.x"
+    "vtex.storefront-permissions": "1.x",
+    "vtex.b2b-organizations-graphql": "0.x",
+    "vtex.b2b-organizations": "1.x"
   },
   "builders": {
     "react": "3.x",

react/CheckOrganizationPermission.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import type { ElementType } from 'react'
+import { ExtensionPoint } from 'vtex.render-runtime'
+import { useQuery } from 'react-apollo'
+
+import getOrganizationPermissions from './queries/getOrganizationPermissions.gql'
+
+type OrganizationRole = 'createQuote'
+
+interface Props {
+  roles: OrganizationRole[]
+  AllowedContent?: ElementType
+  DisallowedContent?: ElementType
+  LoadingContent?: ElementType
+}
+
+function CheckOrganizationPermission({
+  roles = [],
+  AllowedContent,
+  DisallowedContent,
+  LoadingContent,
+}: Props) {
+  const { data, called, error, loading } = useQuery(
+    getOrganizationPermissions,
+    {
+      ssr: false,
+      skip: !roles.length,
+      onCompleted(insideData) {
+        if (insideData?.getOrganizationByIdStorefront?.permissions) {
+          sessionStorage.setItem(
+            'checkout.createQuote',
+            JSON.stringify(
+              insideData?.getOrganizationByIdStorefront?.permissions.createQuote
+            )
+          )
+        }
+      },
+    }
+  )
+
+  if (error) {
+    console.error('CheckOrganizationPermission component error:', error)
+
+    return null
+  }
+
+  if (called && loading) {
+    return LoadingContent ? (
+      <LoadingContent />
+    ) : (
+      <ExtensionPoint id="loading-content" />
+    )
+  }
+
+  if (!roles.length || !data) {
+    return null
+  }
+
+  const hasPermission = roles.every(
+    (key) => data.getOrganizationByIdStorefront.permissions[key] === true
+  )
+
+  if (hasPermission) {
+    return AllowedContent ? (
+      <AllowedContent />
+    ) : (
+      <ExtensionPoint id="allowed-content" />
+    )
+  }
+
+  return DisallowedContent ? (
+    <DisallowedContent />
+  ) : (
+    <ExtensionPoint id="disallowed-content" />
+  )
+}
+
+export default CheckOrganizationPermission

react/queries/getOrganizationPermissions.gql

@@ -0,0 +1,8 @@
+query GetOrganizationStorefront($id: ID) {
+  getOrganizationByIdStorefront(id: $id)
+    @context(provider: "vtex.b2b-organizations-graphql") {
+    permissions {
+      createQuote
+    }
+  }
+}

store/interfaces.json

@@ -1,4 +1,8 @@
 {
+  "check-organization-permission": {
+    "component": "CheckOrganizationPermission",
+    "allowed": ["allowed-content", "disallowed-content", "loading-content"]
+  },
   "check-permission": {
     "component": "CheckPermission",
     "allowed": ["allowed-content", "disallowed-content", "loading-content"]