diff --git a/CHANGELOG.md b/CHANGELOG.md
index a311202..92fa394 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/manifest.json b/manifest.json
index c7503b5..651db15 100644
--- a/manifest.json
+++ b/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",
diff --git a/react/CheckOrganizationPermission.tsx b/react/CheckOrganizationPermission.tsx
new file mode 100644
index 0000000..c0d2815
--- /dev/null
+++ b/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 ? (
+
+ ) : (
+
+ )
+ }
+
+ if (!roles.length || !data) {
+ return null
+ }
+
+ const hasPermission = roles.every(
+ (key) => data.getOrganizationByIdStorefront.permissions[key] === true
+ )
+
+ if (hasPermission) {
+ return AllowedContent ? (
+
+ ) : (
+
+ )
+ }
+
+ return DisallowedContent ? (
+
+ ) : (
+
+ )
+}
+
+export default CheckOrganizationPermission
diff --git a/react/queries/getOrganizationPermissions.gql b/react/queries/getOrganizationPermissions.gql
new file mode 100644
index 0000000..cb30344
--- /dev/null
+++ b/react/queries/getOrganizationPermissions.gql
@@ -0,0 +1,8 @@
+query GetOrganizationStorefront($id: ID) {
+ getOrganizationByIdStorefront(id: $id)
+ @context(provider: "vtex.b2b-organizations-graphql") {
+ permissions {
+ createQuote
+ }
+ }
+}
diff --git a/store/interfaces.json b/store/interfaces.json
index 9fccdbe..087a7cf 100644
--- a/store/interfaces.json
+++ b/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"]