Add referral link

api/server/handlers/user/create_test.go

@@ -245,6 +245,6 @@ func TestCreateUserReferralCode(t *testing.T) {
 	// This is the default lenth of a shortuuid
 	desiredLenth := 22
 	assert.NotEmpty(t, gotUser.ReferralCode, "referral code should not be empty")
-	assert.Len(t, gotUser.ReferralCode, desiredLenth, "referral code should be 20 characters long")
+	assert.Len(t, gotUser.ReferralCode, desiredLenth, "referral code should be 22 characters long")
 	assert.Equal(t, gotUser.ReferralRewardClaimed, false, "referral reward claimed should be false for new user")
 }

dashboard/src/lib/hooks/useStripe.tsx

@@ -471,4 +471,4 @@ export const useClaimReferralReward = (): (() => void) => {
 
   // Return a function that can be called to execute the mutation
   return () => referralsReq.mutate();
-};
+};

dashboard/src/main/auth/Register.tsx

@@ -1,5 +1,6 @@
 import React, { useContext, useEffect, useState } from "react";
 import styled from "styled-components";
+import { useLocation } from "react-router-dom";
 
 import Heading from "components/form-components/Heading";
 import Button from "components/porter/Button";
@@ -74,6 +75,16 @@ const Register: React.FC<Props> = ({ authenticate }) => {
     { value: "Other", label: "Other" },
   ];
 
+  const { search } = useLocation()
+  const searchParams = new URLSearchParams(search)
+  const referralCodeFromUrl = searchParams.get("referral")
+
+  useEffect(() => {
+    if (referralCodeFromUrl) {
+      setReferralCode(referralCodeFromUrl);
+    }
+  }, [referralCodeFromUrl]); // Only re-run the effect if referralCodeFromUrl changes
+
   const handleRegister = (): void => {
     const isHosted = window.location.hostname === "cloud.porter.run";
     if (!emailRegex.test(email)) {

dashboard/src/main/home/project-settings/ReferralsPage.tsx

@@ -3,12 +3,14 @@ import Spacer from "components/porter/Spacer";
 import Text from "components/porter/Text";
 import { useClaimReferralReward, useReferralDetails, useReferrals } from "lib/hooks/useStripe";
 import Button from "components/porter/Button";
+import Link from "components/porter/Link";
 
 function ReferralsPage(): JSX.Element {
     const referralRewardRequirement = 5;
     const { referralDetails } = useReferralDetails();
     const { referralsCount } = useReferrals();
     const claimReferralReward = useClaimReferralReward();
+    const baseUrl = window.location.origin;
 
     const eligibleForReward = (): boolean => {
         if (referralsCount === null) {
@@ -66,6 +68,16 @@ function ReferralsPage(): JSX.Element {
                 Refer people to Porter to earn credits.
             </Text>
             <Spacer y={1} />
+            {referralDetails !== null && (
+                <>
+                    <Text>
+                        Your referral link is {" "}
+                    </Text>
+                    <Link to={baseUrl + "/register?referral=" + referralDetails.code}>{baseUrl + "/register?referral=" + referralDetails.code}</Link>
+                </>
+
+            )}
+            <Spacer y={1} />
             {displayReferral()}
             <Spacer y={1} />
         </>