Display account entitlements

src/core/apollo/generated/apollo-helpers.ts

@@ -8,6 +8,7 @@ export type AccountKeySpecifier = (
   | 'agent'
   | 'authorization'
   | 'createdDate'
+  | 'externalSubscriptionID'
   | 'host'
   | 'id'
   | 'innovationHubs'
@@ -25,6 +26,7 @@ export type AccountFieldPolicy = {
   agent?: FieldPolicy<any> | FieldReadFunction<any>;
   authorization?: FieldPolicy<any> | FieldReadFunction<any>;
   createdDate?: FieldPolicy<any> | FieldReadFunction<any>;
+  externalSubscriptionID?: FieldPolicy<any> | FieldReadFunction<any>;
   host?: FieldPolicy<any> | FieldReadFunction<any>;
   id?: FieldPolicy<any> | FieldReadFunction<any>;
   innovationHubs?: FieldPolicy<any> | FieldReadFunction<any>;

src/core/apollo/generated/apollo-hooks.ts

@@ -5127,13 +5127,19 @@ export const AccountInformationDocument = gql`
     lookup {
       account(ID: $accountId) {
         id
+        externalSubscriptionID
         authorization {
           id
           myPrivileges
         }
         license {
           id
           availableEntitlements
+          entitlements {
+            type
+            limit
+            usage
+          }
         }
         host {
           id

src/core/apollo/generated/graphql-schema.ts

@@ -41,6 +41,8 @@ export type Account = {
   authorization?: Maybe<Authorization>;
   /** The date at which the entity was created. */
   createdDate?: Maybe<Scalars['DateTime']>;
+  /** The external subscription ID for this Account. */
+  externalSubscriptionID?: Maybe<Scalars['String']>;
   /** The Account host. */
   host?: Maybe<Contributor>;
   /** The ID of the entity */
@@ -3619,7 +3621,7 @@ export type Mutation = {
   /** Create a test customer on wingback. */
   adminWingbackCreateTestCustomer: Scalars['String'];
   /** Get wingback customer entitlements. */
-  adminWingbackGetCustomerEntitlements: Scalars['String'];
+  adminWingbackGetCustomerEntitlements: Array<LicensingGrantedEntitlement>;
   /** Reset the Authorization Policy on the specified AiServer. */
   aiServerAuthorizationPolicyReset: AiServer;
   /** Creates a new AiPersonaService on the aiServer. */
@@ -8453,13 +8455,20 @@ export type AccountInformationQuery = {
       | {
           __typename?: 'Account';
           id: string;
+          externalSubscriptionID?: string | undefined;
           authorization?:
             | { __typename?: 'Authorization'; id: string; myPrivileges?: Array<AuthorizationPrivilege> | undefined }
             | undefined;
           license: {
             __typename?: 'License';
             id: string;
             availableEntitlements?: Array<LicenseEntitlementType> | undefined;
+            entitlements: Array<{
+              __typename?: 'LicenseEntitlement';
+              type: LicenseEntitlementType;
+              limit: number;
+              usage: number;
+            }>;
           };
           host?:
             | { __typename?: 'Organization'; id: string }

src/core/i18n/en/translation.en.json

@@ -1958,6 +1958,8 @@
             "hostedSpaces": "Hosted Spaces",
             "virtualContributors": "Virtual Contributors",
             "innovationPacks": "$t(common.innovation-packs)",
+            "usageNotice": "You have created {{usage}} out of your {{limit}} available {{type}} in your account.",
+            "limitNotice": "Contact the Alkemio team to increase the limits on your account",
             "noTemplates": "This Template Pack doesn't have any template yet",
             "customHomepages": "Custom Homepages",
             "hostTitle": "Host",
@@ -2161,7 +2163,12 @@
         },
         "back-button": "All $t(common.innovation-packs)",
         "save-new-for-details": "Save the new Template Pack to edit the rest of the details",
-        "saved-successfully": "Saved Successfully"
+        "saved-successfully": "Saved Successfully",
+        "notifications": {
+          "pack-created": "$t(common.innovation-pack) created successfuly.",
+          "pack-error": "An error occurred while creating the $t(common.innovation-pack).",
+          "pack-removed": "$t(common.innovation-pack) '{{name}}' removed successfully."
+        }
       },
       "innovationHubs": {
         "create": "Create Innovation Hub",

src/core/ui/button/CreationButton.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Box, IconButton, Tooltip } from '@mui/material';
+import RoundedIcon from '@/core/ui/icon/RoundedIcon';
+import AddIcon from '@mui/icons-material/Add';
+import { Caption } from '@/core/ui/typography';
+
+const CreationButton = ({
+  disabledTooltip,
+  disabled,
+  onClick,
+}: {
+  disabledTooltip: string;
+  onClick: () => void;
+  disabled?: boolean;
+}) => {
+  const { t } = useTranslation();
+
+  const button = (
+    <IconButton
+      aria-label={t('common.add')}
+      aria-disabled={disabled}
+      aria-haspopup="true"
+      size="small"
+      onClick={onClick}
+      disabled={disabled}
+    >
+      <RoundedIcon component={AddIcon} size="medium" iconSize="small" disabled={disabled} aria-disabled={disabled} />
+    </IconButton>
+  );
+
+  return disabled && disabledTooltip ? (
+    <Tooltip arrow placement="top" title={<Caption>{disabledTooltip}</Caption>}>
+      <Box>{button}</Box>
+    </Tooltip>
+  ) : (
+    <>{button}</>
+  );
+};
+
+export default CreationButton;

src/core/ui/content/PageContentBlock.tsx

@@ -31,5 +31,6 @@ const PageContentBlock = forwardRef<HTMLDivElement, PageContentBlockProps>(({ ac
     </SwapColors>
   );
 });
+PageContentBlock.displayName = 'PageContentBlock';
 
 export default PageContentBlock;

src/core/ui/content/PageContentColumn.tsx

@@ -16,5 +16,6 @@ const PageContentColumn = forwardRef<HTMLDivElement, PageContentColumnProps>(({
     <PageContentColumnBase columns={columns} {...props} ref={ref} />
   </GridItem>
 ));
+PageContentColumn.displayName = 'PageContentColumn';
 
 export default PageContentColumn;

src/core/ui/forms/MarkdownInput/FormikMarkdownField.tsx

@@ -46,6 +46,9 @@ const FilledDetector = ({ value }: { value: string | undefined }) => {
   return null;
 };
 
+/**
+ * Requires StorageConfigContextProvider
+ */
 export const FormikMarkdownField = ({
   title,
   name,

src/core/ui/icon/RoundedIcon.tsx

@@ -7,6 +7,7 @@ export type RoundedIconProps = Pick<RoundedBadgeProps, 'size' | 'color'> &
   Omit<BoxProps, 'color'> & {
     component: ComponentType<SvgIconProps>;
     iconSize?: SvgIconProps['fontSize'] | 'xsmall';
+    disabled?: boolean;
   };
 
 const getFontSize = (theme: Theme) => (iconSize: SvgIconProps['fontSize'] | 'xsmall') => {
@@ -15,8 +16,13 @@ const getFontSize = (theme: Theme) => (iconSize: SvgIconProps['fontSize'] | 'xsm
   }
 };
 
-const RoundedIcon = ({ size, iconSize = size, component: Icon, sx, ...containerProps }: RoundedIconProps) => (
-  <RoundedBadge size={size} {...containerProps} sx={{ fontSize: theme => getFontSize(theme)(iconSize), ...sx }}>
+const RoundedIcon = ({ size, iconSize = size, component: Icon, sx, disabled, ...containerProps }: RoundedIconProps) => (
+  <RoundedBadge
+    color={disabled ? 'muted.main' : undefined}
+    size={size}
+    {...containerProps}
+    sx={{ fontSize: theme => getFontSize(theme)(iconSize), ...sx }}
+  >
     <Icon fontSize={iconSize === 'xsmall' ? 'inherit' : iconSize} />
   </RoundedBadge>
 );

src/core/ui/typography/TextWithTooltip.tsx

@@ -0,0 +1,13 @@
+import { Tooltip } from '@mui/material';
+import { Caption, Text } from '@/core/ui/typography/components';
+import React from 'react';
+
+const TextWithTooltip = ({ text, tooltip }: { text: string; tooltip: string }) => {
+  return (
+    <Tooltip arrow title={<Caption>{tooltip}</Caption>} placement="top">
+      <Text>{text}</Text>
+    </Tooltip>
+  );
+};
+
+export default TextWithTooltip;

src/domain/InnovationPack/CreateInnovationPackDialog/CreateInnovationPackDialog.tsx

@@ -1,25 +1,35 @@
-import { useState } from 'react';
 import InnovationPackForm, { InnovationPackFormValues } from '../admin/InnovationPackForm'; // Assuming InnovationPackForm is in the same directory
 import DialogWithGrid from '@/core/ui/dialog/DialogWithGrid';
 import { useTranslation } from 'react-i18next';
-import { DialogContent, IconButton } from '@mui/material';
+import { DialogContent } from '@mui/material';
 import { useCreateInnovationPackMutation } from '@/core/apollo/generated/apollo-hooks';
 import DialogHeader from '@/core/ui/dialog/DialogHeader';
 import { BlockTitle } from '@/core/ui/typography';
-import AddIcon from '@mui/icons-material/Add';
-import RoundedIcon from '@/core/ui/icon/RoundedIcon';
+import { useNotification } from '@/core/ui/notifications/useNotification';
+import { StorageConfigContextProvider } from '@/domain/storage/StorageBucket/StorageConfigContext';
+import { useUserContext } from '@/domain/community/user';
 
-const CreateInnovationPackDialog = ({ accountId }: { accountId: string | undefined }) => {
+const CreateInnovationPackDialog = ({
+  accountId,
+  open = false,
+  onClose,
+}: {
+  accountId: string | undefined;
+  open: boolean | undefined;
+  onClose?: () => void;
+}) => {
   const { t } = useTranslation();
-  const [isOpen, setIsOpen] = useState(false);
+  const notify = useNotification();
+  const { user } = useUserContext();
+  const userId = user?.user.id;
 
   const [createInnovationPack, { loading }] = useCreateInnovationPackMutation();
 
   const handleSubmit = async (formData: InnovationPackFormValues) => {
     if (!accountId) {
       return;
     }
-    const { data } = await createInnovationPack({
+    await createInnovationPack({
       variables: {
         packData: {
           accountID: accountId,
@@ -31,29 +41,32 @@ const CreateInnovationPackDialog = ({ accountId }: { accountId: string | undefin
         },
       },
       refetchQueries: ['AdminInnovationPacksList', 'AccountInformation', 'InnovationLibrary'],
+      onCompleted: () => {
+        notify(t('pages.admin.innovation-packs.notifications.pack-created'), 'success');
+        onClose?.();
+      },
+      onError: () => {
+        notify(t('pages.admin.innovation-packs.notifications.pack-error'), 'error');
+      },
     });
-    if (data?.createInnovationPack.nameID) {
-      setIsOpen(false);
-    }
   };
 
-  if (!accountId) {
+  if (!accountId || !userId) {
     return null;
   }
 
   return (
     <>
-      <DialogWithGrid open={isOpen} onClose={() => setIsOpen(false)} columns={6}>
-        <DialogHeader onClose={() => setIsOpen(false)}>
+      <DialogWithGrid open={open} onClose={onClose} columns={6}>
+        <DialogHeader onClose={onClose}>
           <BlockTitle>{t('pages.admin.innovation-packs.create')}</BlockTitle>
         </DialogHeader>
         <DialogContent>
-          <InnovationPackForm isNew onSubmit={handleSubmit} loading={loading || !accountId} />
+          <StorageConfigContextProvider userId={userId} locationType="user">
+            <InnovationPackForm isNew onSubmit={handleSubmit} loading={loading || !accountId} />
+          </StorageConfigContextProvider>
         </DialogContent>
       </DialogWithGrid>
-      <IconButton aria-label={t('common.add')} aria-haspopup="true" size="small" onClick={() => setIsOpen(true)}>
-        <RoundedIcon component={AddIcon} size="medium" iconSize="small" />
-      </IconButton>
     </>
   );
 };

src/domain/InnovationPack/admin/InnovationPackForm.tsx

@@ -45,7 +45,9 @@ type InnovationPackFormProps = {
   loading?: boolean;
   onSubmit: (formData: InnovationPackFormValues) => void;
 };
-
+/**
+ * Requires StorageConfigContextProvider
+ */
 const InnovationPackForm = ({
   isNew = false,
   nameID,
@@ -116,6 +118,7 @@ const InnovationPackForm = ({
               </>
             )}
             <FormikMarkdownField
+              temporaryLocation={isNew}
               title={t('common.description')}
               name="profile.description"
               maxLength={MARKDOWN_TEXT_LENGTH}
@@ -133,7 +136,7 @@ const InnovationPackForm = ({
             ) : (
               <BlockSectionTitle>{t('pages.admin.innovation-packs.save-new-for-details')}</BlockSectionTitle>
             )}
-            <Box display="flex" marginY={4} justifyContent="flex-end">
+            <Box display="flex" justifyContent="flex-end">
               <SaveButton loading={loading} onClick={() => handleSubmit()} />
             </Box>
           </Gutters>

src/domain/account/queries/AccountInformation.graphql

@@ -2,13 +2,19 @@ query AccountInformation($accountId: UUID!) {
   lookup {
     account(ID: $accountId) {
       id
+      externalSubscriptionID
       authorization {
         id
         myPrivileges
       }
       license {
         id
         availableEntitlements
+        entitlements {
+          type
+          limit
+          usage
+        }
       }
       host {
         id