reapit · willmcvay · Dec 11, 2023 · Dec 11, 2023
diff --git a/packages/elements/src/components/nav/nav-responsive.tsx b/packages/elements/src/components/nav/nav-responsive.tsx
@@ -54,9 +54,15 @@ export interface NavResponsiveAppSwitcherOption {
   iconUrl?: ReactNode
 }
 
+export interface BrandOptions {
+  callback?: () => void
+  logoUrl?: string
+}
+
 export interface NavResponsiveProps extends HTMLAttributes<HTMLDivElement> {
   options: NavResponsiveOption[]
   appSwitcherOptions?: NavResponsiveAppSwitcherOption[]
+  brandOptions?: BrandOptions
   avatarOptions?: NavResponsiveAvatarOption[]
   avatarText?: string
   defaultNavIndex?: number
@@ -166,6 +172,7 @@ export const NavResponsive: FC<NavResponsiveProps> = ({
   defaultNavSubIndex,
   appSwitcherOptions,
   avatarOptions,
+  brandOptions,
   avatarText = '',
   ...rest
 }) => {
@@ -196,7 +203,11 @@ export const NavResponsive: FC<NavResponsiveProps> = ({
               return (
                 <NavItem className={cx(navItemIndex === itemIndex && elNavItemActive)} key={itemIndex} href={href}>
                   {appSwitcherOptions && <NavResponsiveAppSwitcher options={appSwitcherOptions} />}
-                  <Icon height="24px" width="100px" icon="reapitLogo" />
+                  {brandOptions?.logoUrl ? (
+                    <img src={brandOptions.logoUrl} height="24px" onClick={brandOptions?.callback} />
+                  ) : (
+                    <Icon onClick={brandOptions?.callback} height="24px" width="100px" icon="reapitLogo" />
+                  )}
                   <Icon
                     className={cx(elMlAuto, elMr4, elNavItemHideDesktop)}
                     icon="more"

diff --git a/packages/elements/src/components/nav/nav.stories.mdx b/packages/elements/src/components/nav/nav.stories.mdx
@@ -223,3 +223,104 @@ export interface NavResponsiveAppSwitcherOption {
 </Canvas>
 
 <RenderHtmlMarkup component="Nav" story={['React Usage']} />
+
+## React Usage With Custom Brand
+
+<ArgsTable component={NavResponsive} />
+
+We also support for the React Version, adding a custom brand and / or a callback on the logo for example, if you wish the logo to navigate back to the homepage.
+
+<Canvas>
+  <Story name="React Usage With Custom Brand">
+    <NavStateProvider>
+      <MediaStateProvider>
+        <NavResponsive
+          defaultNavIndex={1}
+          brandOptions={{
+            logoUrl: 'https://uk.payprop.com/res/assets/img/pp_logo.svg',
+            callback: () => console.log('Clicking'),
+          }}
+          appSwitcherOptions={[
+            {
+              text: 'AppMarket',
+              callback: () => console.log('Navigating'),
+              iconUrl: <Icon icon="reapitLogoSmall" />,
+            },
+            {
+              text: 'DevPortal',
+              callback: () => console.log('Navigating'),
+              iconUrl: <Icon icon="reapitLogoSmall" />,
+            },
+          ]}
+          avatarText="JD"
+          avatarOptions={[
+            {
+              text: 'Settings',
+              callback: () => console.log('Navigating'),
+            },
+            {
+              text: 'Profile',
+              callback: () => console.log('Navigating'),
+            },
+            {
+              text: 'Log Out',
+              callback: () => console.log('Navigating'),
+            },
+          ]}
+          options={[
+            {
+              itemIndex: 0,
+              callback: () => console.log('Navigating'),
+            },
+            {
+              itemIndex: 1,
+              callback: () => console.log('Navigating'),
+              text: 'Apps',
+              subItems: [
+                {
+                  itemIndex: 0,
+                  callback: () => console.log('Navigating'),
+                  text: 'App List',
+                },
+                {
+                  itemIndex: 1,
+                  callback: () => console.log('Navigating'),
+                  text: 'Create App',
+                },
+              ],
+            },
+            {
+              itemIndex: 2,
+              callback: () => console.log('Navigating'),
+              text: 'Analytics',
+              subItems: [
+                {
+                  itemIndex: 2,
+                  callback: () => console.log('Navigating'),
+                  text: 'Hits Per Day',
+                },
+                {
+                  itemIndex: 3,
+                  callback: () => console.log('Navigating'),
+                  text: 'Weekly Hits',
+                },
+              ],
+            },
+            {
+              itemIndex: 3,
+              href: 'https://marketplace.reapit.cloud',
+              text: 'Marketplace',
+            },
+            {
+              itemIndex: 4,
+              callback: () => console.log('Logging out'),
+              text: 'Logout',
+            },
+          ]}
+        />
+      </MediaStateProvider>
+    </NavStateProvider>
+  </Story>
+</Canvas>
+
+<RenderHtmlMarkup component="Nav" story={['React Usage With Custom Brand']} />
diff --git a/packages/elements/src/storybook/changelog.stories.mdx b/packages/elements/src/storybook/changelog.stories.mdx
@@ -16,7 +16,11 @@ We will publish release version history and changes here. Where possible, we wil
 
 Beta versions should be relatively stable but subject to occssional breaking changes.
 
-### **4.0.0 - 18/10/23**
+### **4.0.1 - 12/12/23**
+
+- Adds clickable and customable brand object to `Nav` component options.
+
+### **4.0.0 - 10/12/23**
 
 **Major Release - UI Refresh**
 

diff --git a/packages/marketplace/src/components/nav/nav.tsx b/packages/marketplace/src/components/nav/nav.tsx
@@ -14,7 +14,7 @@ import { navigateExternal, navigateRoute } from '../../utils/navigation'
 // import { styled } from '@linaria/react'
 import { useNavigate } from 'react-router'
 import { getAvatarInitials } from '@reapit/utils-react'
-import { selectIsAdmin } from '../../utils/auth'
+import { selectIsAdmin, selectIsDeveloper } from '../../utils/auth'
 
 export const getDefaultNavIndex = (pathname: string) => {
   if (pathname.includes('apps')) return 1
@@ -63,7 +63,7 @@ export const getDefaultNavIndex = (pathname: string) => {
 export const Nav: FC = () => {
   const { connectIsDesktop, connectSession, connectLogoutRedirect } = useReapitConnect(reapitConnectBrowserSession)
   const navigate = useNavigate()
-  const isAdmin = selectIsAdmin(connectSession)
+  const isDevOrAdmin = selectIsAdmin(connectSession) || selectIsDeveloper(connectSession)
 
   const navOptions: NavResponsiveOption[] = [
     {
@@ -109,7 +109,7 @@ export const Nav: FC = () => {
             callback: navigateRoute(navigate, RoutePaths.SETTINGS_PROFILE),
             text: 'Profile',
           },
-          isAdmin && {
+          isDevOrAdmin && {
             callback: navigateRoute(navigate, RoutePaths.SETTINGS_INSTALLED),
             text: 'Installed',
           },

diff --git a/packages/marketplace/src/components/settings/settings-installed.tsx b/packages/marketplace/src/components/settings/settings-installed.tsx
@@ -116,10 +116,12 @@ export const SettingsInstalled: FC = () => {
   const { connectSession } = useReapitConnect(reapitConnectBrowserSession)
   const { Modal, openModal, closeModal } = useModal()
   const clientId = connectSession?.loginIdentity.clientId
+  const developerId = connectSession?.loginIdentity.developerId
   const email = connectSession?.loginIdentity.email ?? ''
   const isAdmin = selectIsAdmin(connectSession)
   const { appName } = installationsFilters
   const appNameQuery = appName ? { appName } : {}
+  const developerIdQuery = developerId ? { developerId } : {}
 
   const [installations, installationsLoading, , refetchInstallations] = useReapitGet<InstallationModelPagedResult>({
     reapitConnectBrowserSession,
@@ -129,6 +131,7 @@ export const SettingsInstalled: FC = () => {
       pageSize: 12,
       clientId,
       ...appNameQuery,
+      ...developerIdQuery,
     },
     fetchWhenTrue: [clientId],
   })

diff --git a/packages/marketplace/src/utils/auth.ts b/packages/marketplace/src/utils/auth.ts
@@ -5,11 +5,22 @@ export const COGNITO_GROUP_ADMIN_USERS = 'MarketplaceAdmin'
 export const COGNITO_GROUP_ADMIN_USERS_LEGACY = 'ReapitUserAdmin'
 export const COGNITO_GROUP_USERS = 'ReapitUser'
 export const COGNITO_GROUP_ORGANISATION_ADMIN = 'OrganisationAdmin'
+export const COGNITO_GROUP_DEVELOPER_ADMIN = 'FoundationsDeveloperAdmin'
+export const COGNITO_GROUP_DEVELOPER = 'FoundationsDeveloper'
 
 export const selectIsAdmin = (state: ReapitConnectSession | null): boolean => {
   return selectIsOffGroupingAdmin(state) || selectIsNonOffGroupingAdmin(state)
 }
 
+export const selectIsDeveloper = (state: ReapitConnectSession | null): boolean => {
+  const loginIdentity = selectLoginIdentity(state)
+  return (
+    (Boolean(loginIdentity?.groups?.includes(COGNITO_GROUP_DEVELOPER_ADMIN)) ||
+      Boolean(loginIdentity?.groups?.includes(COGNITO_GROUP_DEVELOPER))) &&
+    !loginIdentity?.groups?.includes(COGNITO_GROUP_USERS)
+  )
+}
+
 export const selectIsOffGroupingAdmin = (state: ReapitConnectSession | null): boolean => {
   const hasUserGroups = selectIsOffGrouping(state)
   if (hasUserGroups) {

diff --git a/packages/payments-service/src/payment-receipt/__tests__/__snapshots__/provider.test.ts.snap b/packages/payments-service/src/payment-receipt/__tests__/__snapshots__/provider.test.ts.snap
@@ -31,9 +31,9 @@ exports[`PaymentReceiptProvider should send an email with the correct template 1
             <p style="margin-bottom: 32px">Reapit Ltd's records have been updated accordingly.</p>
             <p style="margin-bottom: 32px">Best regards,</p>
             <p style="margin-bottom: 32px">Reapit Payments Team on behalf of Reapit Ltd</p>
-            <div style="height: 40px; width: 135px; overflow: hidden">
+            <div style="height: 25px; width: 119px; overflow: hidden">
               <img
-                style="height: 40px; width: 135px"
+                style="height: 25px; width: 119px"
                 src="https://reapit-email-media.s3.eu-west-2.amazonaws.com/logo-reapit-2023.png"
                 alt="Reapit Payments Logo"
               />

diff --git a/packages/payments-service/src/payment-receipt/template.ts b/packages/payments-service/src/payment-receipt/template.ts
@@ -46,9 +46,9 @@ export const paymentReceiptTemplate = ({
             <p style="margin-bottom: 32px">${companyName}'s records have been updated accordingly.</p>
             <p style="margin-bottom: 32px">Best regards,</p>
             <p style="margin-bottom: 32px">Reapit Payments Team on behalf of ${companyName}</p>
-            <div style="height: 40px; width: 135px; overflow: hidden">
+            <div style="height: 25px; width: 119px; overflow: hidden">
               <img
-                style="height: 40px; width: 135px"
+                style="height: 25px; width: 119px"
                 src="https://reapit-email-media.s3.eu-west-2.amazonaws.com/logo-reapit-2023.png"
                 alt="Reapit Payments Logo"
               />

diff --git a/packages/payments-service/src/payment-request/__tests__/__snapshots__/provider.test.ts.snap b/packages/payments-service/src/payment-request/__tests__/__snapshots__/provider.test.ts.snap
@@ -39,9 +39,9 @@ exports[`PaymentRequestProvider should send an email with the correct template 1
             </p>
             <p style="margin-bottom: 32px">Best regards,</p>
             <p style="margin-bottom: 32px">Reapit Payments Team on behalf of Reapit Ltd</p>
-            <div style="height: 40px; width: 135px; overflow: hidden">
+            <div style="height: 25px; width: 119px; overflow: hidden">
               <img
-                style="height: 40px; width: 135px"
+                style="height: 25px; width: 119px"
                 src="https://reapit-email-media.s3.eu-west-2.amazonaws.com/logo-reapit-2023.png"
                 alt="Reapit Payments Logo"
               />

diff --git a/packages/payments-service/src/payment-request/template.ts b/packages/payments-service/src/payment-request/template.ts
@@ -56,9 +56,9 @@ export const paymentRequestTemplate = ({
             </p>
             <p style="margin-bottom: 32px">Best regards,</p>
             <p style="margin-bottom: 32px">Reapit Payments Team on behalf of ${companyName}</p>
-            <div style="height: 40px; width: 135px; overflow: hidden">
+            <div style="height: 25px; width: 119px; overflow: hidden">
               <img
-                style="height: 40px; width: 135px"
+                style="height: 25px; width: 119px"
                 src="https://reapit-email-media.s3.eu-west-2.amazonaws.com/logo-reapit-2023.png"
                 alt="Reapit Payments Logo"
               />