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"]