first commit

common/resources/client/billing/upgrade/upgrade-dialog.tsx

@@ -0,0 +1,58 @@
+import {ReactNode} from 'react';
+import {useDialogContext} from '@common/ui/overlays/dialog/dialog-context';
+import {Dialog} from '@common/ui/overlays/dialog/dialog';
+import {DialogHeader} from '@common/ui/overlays/dialog/dialog-header';
+import {Trans} from '@common/i18n/trans';
+import {DialogBody} from '@common/ui/overlays/dialog/dialog-body';
+import {SvgImage} from '@common/ui/images/svg-image/svg-image';
+import upgradeSvg from '@common/billing/upgrade/upgrade.svg';
+import {DialogFooter} from '@common/ui/overlays/dialog/dialog-footer';
+import {Button} from '@common/ui/buttons/button';
+import {Link} from 'react-router-dom';
+
+interface UpgradeDialogProps {
+  message?: ReactNode;
+  messageSuffix?: ReactNode;
+}
+export function UpgradeDialog({message, messageSuffix}: UpgradeDialogProps) {
+  const {close} = useDialogContext();
+
+  return (
+    <Dialog size="sm">
+      <DialogHeader>
+        <Trans message="Join the PROs" />
+      </DialogHeader>
+      <DialogBody>
+        <div className="mb-20 text-center">
+          <SvgImage src={upgradeSvg} className="mx-auto" height="h-100" />
+        </div>
+        <div>
+          {message} {messageSuffix}
+        </div>
+      </DialogBody>
+      <DialogFooter>
+        <Button
+          variant="text"
+          size="xs"
+          onClick={() => {
+            close();
+          }}
+        >
+          <Trans message="Maybe later" />
+        </Button>
+        <Button
+          autoFocus
+          variant="flat"
+          size="xs"
+          color="primary"
+          elementType={Link}
+          to="/pricing"
+          target="_blank"
+          onClick={() => close()}
+        >
+          <Trans message="Find out more" />
+        </Button>
+      </DialogFooter>
+    </Dialog>
+  );
+}