first commit

common/resources/client/billing/upgrade/no-permission-button.tsx

@@ -0,0 +1,63 @@
+import {LockIcon} from '@common/icons/material/Lock';
+import {Trans} from '@common/i18n/trans';
+import {DialogTrigger} from '@common/ui/overlays/dialog/dialog-trigger';
+import {ReactNode} from 'react';
+import {Tooltip} from '@common/ui/tooltip/tooltip';
+import {useSettings} from '@common/core/settings/use-settings';
+import {FeatureLockedDialog} from '@common/billing/upgrade/feature-locked-dialog';
+import clsx from 'clsx';
+import {IconButton} from '@common/ui/buttons/icon-button';
+import {Button} from '@common/ui/buttons/button';
+
+interface UpgradeButtonProps {
+  message?: ReactNode;
+  className?: string;
+  iconButton?: boolean;
+}
+export function NoPermissionButton({
+  message,
+  className,
+  iconButton,
+}: UpgradeButtonProps) {
+  const {billing} = useSettings();
+
+  if (!billing.enable) {
+    return <GenericButton className={className} />;
+  }
+
+  return (
+    <DialogTrigger type="popover" triggerOnHover>
+      {iconButton ? (
+        <IconButton className={className} color="primary" size="sm">
+          <LockIcon />
+        </IconButton>
+      ) : (
+        <Button
+          variant="flat"
+          color="primary"
+          size="2xs"
+          startIcon={<LockIcon />}
+          className={className}
+        >
+          <Trans message="Upgrade" />
+        </Button>
+      )}
+      <FeatureLockedDialog message={message} />
+    </DialogTrigger>
+  );
+}
+
+interface GenericButtonProps {
+  className?: string;
+}
+function GenericButton({className}: GenericButtonProps) {
+  return (
+    <Tooltip
+      label={
+        <Trans message="You don't have permissions to access this feature." />
+      }
+    >
+      <LockIcon size="sm" className={clsx('text-muted', className)} />
+    </Tooltip>
+  );
+}