Add billing (#329)

app/javascript/components/TenantSignUp/ConfirmSignUpPage.tsx

@@ -18,7 +18,7 @@ const ConfirmSignUpPage = ({
     <img src={pendingTenantImage} width={64} height={64} style={{margin: '12px auto'}} />
 
     <p style={{textAlign: 'center'}}>
-      Check your email <b>{userEmail}</b> to activate your new feedback space {subdomain}.astuto.io!
+      Check your email <b>{userEmail}</b> to activate your new feedback space <a href={`https://${subdomain}.astuto.io`} className="link">{`${subdomain}.astuto.io`}</a>!
     </p>
   </Box>
 );

app/javascript/components/TenantSignUp/TenantSignUpForm.tsx

@@ -4,7 +4,7 @@ import { SubmitHandler, useForm } from 'react-hook-form';
 import Box from '../common/Box';
 import Button from '../common/Button';
 import Spinner from '../common/Spinner';
-import { DangerText } from '../common/CustomTexts';
+import { DangerText, SmallMutedText } from '../common/CustomTexts';
 import { ITenantSignUpTenantForm } from './TenantSignUpP';
 import HttpStatus from '../../constants/http_status';
 import { getLabel, getValidationMessage } from '../../helpers/formUtils';
@@ -13,12 +13,14 @@ interface Props {
   isSubmitting: boolean;
   error: string;
   handleSignUpSubmit(siteName: string, subdomain: string): void;
+  trialPeriodDays: number;
 }
 
 const TenantSignUpForm = ({
   isSubmitting,
   error,
   handleSignUpSubmit,
+  trialPeriodDays,
 }: Props) => {
   const { register, handleSubmit, formState: { errors } } = useForm<ITenantSignUpTenantForm>();
   const onSubmit: SubmitHandler<ITenantSignUpTenantForm> = data => {
@@ -80,6 +82,12 @@ const TenantSignUpForm = ({
         >
           { isSubmitting ? <Spinner /> : 'Create feedback space' }
         </Button>
+        <p className="smallMutedText" style={{textAlign: 'center'}}>
+          Your trial starts now and ends in {trialPeriodDays.toString()} days.
+        </p>
+        <p className="smallMutedText" style={{textAlign: 'center'}}>
+          By clicking "Create", you agree to our <a href="https://astuto.io/terms-of-service" target="_blank" className="link">Terms of Service</a> and <a href="https://astuto.io/privacy-policy" target="_blank" className="link">Privacy Policy</a>.
+        </p>
 
         { error !== '' && <DangerText>{ error }</DangerText> }
       </form>

app/javascript/components/TenantSignUp/TenantSignUpP.tsx

@@ -30,6 +30,8 @@ interface Props {
   pendingTenantImage: string;
 
   baseUrl: string;
+  trialPeriodDays: number;
+
   authenticityToken: string;
 }
 
@@ -58,6 +60,7 @@ const TenantSignUpP = ({
   astutoLogoImage,
   pendingTenantImage,
   baseUrl,
+  trialPeriodDays,
   authenticityToken
 }: Props) => {
   // authMethod is either 'none', 'email' or 'oauth'
@@ -124,6 +127,7 @@ const TenantSignUpP = ({
             isSubmitting={isSubmitting}
             error={error}
             handleSignUpSubmit={handleSignUpSubmit}
+            trialPeriodDays={trialPeriodDays}
           />
       }
 

app/javascript/components/TenantSignUp/index.tsx

@@ -15,6 +15,7 @@ interface Props {
   baseUrl: string;
   astutoLogoImage: string;
   pendingTenantImage: string;
+  trialPeriodDays: number;
   authenticityToken: string;
 }
 
@@ -36,6 +37,7 @@ class TenantSignUpRoot extends React.Component<Props> {
       astutoLogoImage,
       pendingTenantImage,
       baseUrl,
+      trialPeriodDays,
       authenticityToken,
     } = this.props;
 
@@ -49,6 +51,7 @@ class TenantSignUpRoot extends React.Component<Props> {
           astutoLogoImage={astutoLogoImage}
           pendingTenantImage={pendingTenantImage}
           baseUrl={baseUrl}
+          trialPeriodDays={trialPeriodDays}
           authenticityToken={authenticityToken}
         />
       </Provider>