[dashboard] tell users to verify by signing up (#19799)

Author: svenefftinge

components/dashboard/src/start/VerifyModal.tsx

@@ -16,6 +16,7 @@ import { useFeatureFlag } from "../data/featureflag-query";
 import { verificationClient } from "../service/public-api";
 import { InputField } from "../components/forms/InputField";
 import { TextInputField } from "../components/forms/TextInputField";
+import { Link } from "react-router-dom";
 
 interface VerifyModalState {
     phoneNumber?: string;
@@ -70,7 +71,13 @@ export function VerifyModal() {
                 onSubmit={sendCode}
                 title="User Validation Required"
                 buttons={
-                    <div>
+                    <div className="space-x-4">
+                        <Link to="/billing">
+                            {/* secondary button */}
+                            <Button type="button" variant="secondary">
+                                Subscribe to paid plan
+                            </Button>
+                        </Link>
                         <Button type="submit" disabled={!state.phoneNumberValid || state.sending}>
                             {phoneVerificationByCall ? "Send Code via Voice call" : "Send Code via SMS"}
                         </Button>
@@ -79,11 +86,15 @@ export function VerifyModal() {
                 visible={true}
             >
                 <Alert type="warning" className="mt-2">
-                    To use Gitpod you'll need to validate your account with your phone number. This is required to
-                    discourage and reduce abuse on Gitpod infrastructure.
+                    To use Gitpod for free you'll need to validate your account with your phone number. This is required
+                    to discourage and reduce abuse on Gitpod infrastructure.
+                </Alert>
+                <Alert type="info" className="mt-4">
+                    Alternatively, you can verify by subscribing to our paid plan.
                 </Alert>
                 <div className="text-gray-600 dark:text-gray-400 mt-2">
-                    Enter a mobile phone number you would like to use to verify your account. If you encounter issues, please retry later or use a different number.
+                    Enter a mobile phone number you would like to use to verify your account. If you encounter issues,
+                    please retry later or use a different number.
                 </div>
                 {state.message ? (
                     <Alert type={state.message.type} className="mt-4 py-3">
@@ -172,7 +183,13 @@ export function VerifyModal() {
                 onSubmit={verifyToken}
                 title="User Validation Required"
                 buttons={
-                    <div>
+                    <div className="space-x-4">
+                        <Link to="/billing">
+                            {/* secondary button */}
+                            <Button type="button" variant="secondary">
+                                Subscribe to paid plan
+                            </Button>
+                        </Link>
                         <Button type="submit" disabled={!isTokenFilled()}>
                             Validate Account
                         </Button>
@@ -181,8 +198,8 @@ export function VerifyModal() {
                 visible={true}
             >
                 <Alert type="warning" className="mt-2">
-                    To use Gitpod you'll need to validate your account with your phone number. This is required to
-                    discourage and reduce abuse on Gitpod infrastructure.
+                    To use Gitpod for free you'll need to validate your account with your phone number. This is required
+                    to discourage and reduce abuse on Gitpod infrastructure.
                 </Alert>
                 <div className="pt-4">
                     <LinkButton onClick={reset}>&larr; Use a different phone number</LinkButton>