feat(core): impl team workspace (#8920)

AF-1738 AF-1735 AF-1731 AF-1721 AF-1717 AF-1736 AF-1727 AF-1719 AF-1877
UI for team workspaces :
- add upgrade to team & successful upgrade page ( `/upgrade-to-team` & `/upgrade-success/team`)
- update team plans on pricing page ( settings —> pricing plans )
- update reaching the usage/member limit modal
- update invite member modal
- update member CRUD options

packages/frontend/component/src/ui/modal/confirm-modal.tsx

@@ -12,7 +12,9 @@ import { Modal } from './modal';
 const styles = BUILD_CONFIG.isMobileEdition ? mobileStyles : desktopStyles;
 
 export interface ConfirmModalProps extends ModalProps {
+  customConfirmButton?: () => React.ReactNode;
   confirmButtonOptions?: Omit<ButtonProps, 'children'>;
+  childrenContentClassName?: string;
   onConfirm?: (() => void) | (() => Promise<void>);
   onCancel?: () => void;
   confirmText?: React.ReactNode;
@@ -29,6 +31,7 @@ export interface ConfirmModalProps extends ModalProps {
 export const ConfirmModal = ({
   children,
   confirmButtonOptions,
+  customConfirmButton: CustomConfirmButton,
   // FIXME: we need i18n
   confirmText,
   cancelText = 'Cancel',
@@ -40,6 +43,7 @@ export const ConfirmModal = ({
   autoFocusConfirm = true,
   headerClassName,
   descriptionClassName,
+  childrenContentClassName,
   contentOptions,
   ...props
 }: ConfirmModalProps) => {
@@ -66,7 +70,11 @@ export const ConfirmModal = ({
       descriptionClassName={clsx(styles.description, descriptionClassName)}
       {...props}
     >
-      {children ? <div className={styles.content}>{children}</div> : null}
+      {children ? (
+        <div className={clsx(styles.content, childrenContentClassName)}>
+          {children}
+        </div>
+      ) : null}
       <div
         className={clsx(styles.footer, {
           modalFooterWithChildren: !!children,
@@ -83,15 +91,19 @@ export const ConfirmModal = ({
             {cancelText}
           </Button>
         </DialogTrigger>
-        <Button
-          className={styles.action}
-          onClick={onConfirmClick}
-          data-testid="confirm-modal-confirm"
-          autoFocus={autoFocusConfirm}
-          {...confirmButtonOptions}
-        >
-          {confirmText}
-        </Button>
+        {CustomConfirmButton ? (
+          <CustomConfirmButton data-testid="confirm-modal-confirm" />
+        ) : (
+          <Button
+            className={styles.action}
+            onClick={onConfirmClick}
+            data-testid="confirm-modal-confirm"
+            autoFocus={autoFocusConfirm}
+            {...confirmButtonOptions}
+          >
+            {confirmText}
+          </Button>
+        )}
       </div>
     </Modal>
   );