Add a survey after free trials have been done for a few days

.vscode/cspell.json

@@ -89,6 +89,7 @@
         "nivo",
         "nochallenge",
         "nodetails",
+        "Noek",
         "noextracontrols",
         "nolink",
         "npgettext",

src/components/AutoTranslate/AutoTranslate.tsx

@@ -103,7 +103,7 @@ export function AutoTranslate({
     );
 }
 
-async function auto_translate(text: string): Promise<Translation> {
+export async function auto_translate(text: string): Promise<Translation> {
     let res: Promise<Translation>;
 
     if (current_language === "debug") {

src/components/FreeTrialBanner/FreeTrialBanner.styl

@@ -151,20 +151,3 @@
         }
     }
 }
-
-
-/*
-
-body.dark, body.accessible {
-    .FreeTrialBanner {
-        border: 1px solid hsl(48, 100%, 80%);
-    }
-}
-
-body.light {
-    .FreeTrialBanner {
-        border: 1px solid hsl(48, 100%, 80%);
-    }
-}
-
-*/

src/components/FreeTrialSurvey/FreeTrialSurvey.styl

@@ -0,0 +1,83 @@
+/*
+ * Copyright (C)  Online-Go.com
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+.FreeTrialSurvey-container {
+    display: flex;
+    justify-content: center;
+    margin: 2rem 1rem;
+
+    @media screen and (max-width: 850px){
+        margin: 2rem 0;
+    }
+}
+
+.FreeTrialSurvey {
+    border: 1px solid hsl(48, 100%, 40);
+    border-radius: 0.5rem;
+    display: flex;
+    flex-direction: column;
+    width: 60rem;
+    max-width: calc(min(100%, 100vw));
+    min-height: 12rem;
+    overflow: scroll;
+    padding: 1rem;
+
+
+    @media screen and (max-width: 850px){
+        flex-direction: column;
+        height: 30rem;
+        align-items: stretch;
+        align-content: stretch;
+        justify-content: stretch;
+        width: 100%;
+    }
+
+    hr {
+        margin: 1rem 0;
+    }
+
+
+    .other {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .indent {
+        margin-left: 2rem;
+    }
+
+    /* The markdown auto-linkifies our online-go.com text, which isn't
+     * important in this context and is just distracting */ 
+    a {
+        themed color fg
+    }
+
+    textarea {
+        height: 10rem;
+    }
+
+
+    .buttons {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+        margin: 0.5rem;
+
+        .translation-original, .language-map { 
+            display: none;
+        }
+    }
+}

src/components/FreeTrialSurvey/FreeTrialSurvey.tsx

@@ -0,0 +1,153 @@
+/*
+ * Copyright (C)  Online-Go.com
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import * as React from "react";
+import * as data from "data";
+import { _, current_language } from "translate";
+import { AutoTranslate, auto_translate } from "AutoTranslate";
+import { useUser, useData } from "hooks";
+import { post } from "requests";
+import { LoadingButton } from "LoadingButton";
+import { errorAlerter } from "misc";
+import { toast } from "toast";
+
+const letter = `
+#### Thank you for trying out the AI reviews and site supporter features!
+
+I hope you enjoyed your trial. As you may or may not know, 
+Online-Go.com is a very very small company, but we'd love to 
+grow so we can continue making the site better for go players 
+all around the world. As such, I, Akita Noek (anoek), lead 
+developer, president of Online-Go.com, Inc., and general 
+doer of things that need doing would love to hear how we can 
+make things better, in particular as it relates to AI reviews 
+and site supporter features that might entice you to
+sign up for a supporter membership.
+
+I will personally be reading every one of these responses,
+so please be honest, candid, and preferably constructive.
+
+Thank you!
+
+    - anoek
+`;
+
+export function FreeTrialSurvey(): JSX.Element | null {
+    const user = useUser();
+    const [surveySubmitted] = useData("free-trial-survey-submitted-timestamp", 0);
+
+    const [sendText, setSendText] = React.useState<string | null>(null);
+    const [placeholder, setPlaceholder] = React.useState<string | null>(null);
+    const [feedback, _setFeedback] = React.useState<string>("");
+    const [submitting, setSubmitting] = React.useState<boolean>(false);
+
+    // If they've had a trial, are still not a supporter, and haven't submitted or dismissed the survey
+    const should_show =
+        user &&
+        user.last_supporter_trial &&
+        !surveySubmitted &&
+        !user.supporter &&
+        Date.now() - new Date(user.last_supporter_trial).getTime() > 1000 * 60 * 60 * 24 * 10; // 10 days
+
+    React.useEffect(() => {
+        if (should_show) {
+            auto_translate("Send to the president!")
+                .then((res) => {
+                    setSendText(res.target_text);
+                })
+                .catch(console.error);
+            auto_translate("Enter your feedback, comments, or ideas here")
+                .then((res) => {
+                    setPlaceholder(res.target_text);
+                })
+                .catch(console.error);
+        }
+    }, [should_show]);
+
+    const setFeedback = React.useCallback(
+        (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+            _setFeedback(e.target.value);
+        },
+        [_setFeedback],
+    );
+
+    const close = React.useCallback(() => {
+        data.set(
+            "free-trial-survey-submitted-timestamp",
+            -Date.now(),
+            data.Replication.REMOTE_OVERWRITES_LOCAL,
+        );
+    }, []);
+
+    const sendFeedback = React.useCallback(() => {
+        setSubmitting(true);
+        post("polls/supporter_improvement_ideas", {
+            feedback,
+            current_language,
+        })
+            .then(() => {
+                setSubmitting(false);
+                toast(<AutoTranslate source={"Thank you for your feedback!"} />);
+                data.set(
+                    "free-trial-survey-submitted-timestamp",
+                    Date.now(),
+                    data.Replication.REMOTE_OVERWRITES_LOCAL,
+                );
+            })
+            .catch((err) => {
+                setSubmitting(false);
+                errorAlerter(err);
+            });
+    }, [feedback]);
+
+    if (!should_show) {
+        return null;
+    }
+
+    return (
+        <div className="FreeTrialSurvey-container">
+            <div className="FreeTrialSurvey">
+                <AutoTranslate source={letter} markdown={true} />
+
+                <hr />
+
+                <h3>
+                    <AutoTranslate
+                        source={
+                            "What might entice you to sign up as a site supporter and/or user of AI reviews?"
+                        }
+                    />
+                </h3>
+                <textarea placeholder={placeholder || ""} value={feedback} onChange={setFeedback} />
+
+                <hr />
+
+                <div className="buttons">
+                    <button onClick={close}>{_("Close")}</button>
+                    <LoadingButton
+                        className="primary"
+                        disabled={feedback.trim().length === 0}
+                        loading={submitting}
+                        onClick={sendFeedback}
+                    >
+                        {sendText}
+                    </LoadingButton>
+                </div>
+            </div>
+        </div>
+    );
+}

src/components/FreeTrialSurvey/index.ts

@@ -0,0 +1,18 @@
+/*
+ * Copyright (C)  Online-Go.com
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+export * from "./FreeTrialSurvey";

src/lib/data_schema.ts

@@ -253,6 +253,7 @@ export interface DataSchema
     "payment-problem-banner-dismissed-timestamp": number;
     "active-tournament": Announcement;
     "free-trial-saved-for-later-timestamp": number;
+    "free-trial-survey-submitted-timestamp": number;
 
     "chat-manager.last-seen": { [channel: string]: number };
     "device.uuid": string;

src/views/Overview/EXV6Overview.tsx

@@ -41,6 +41,7 @@ import { ModerationOffer } from "ModerationOffer";
 import { NewUserRankChooser } from "NewUserRankChooser";
 import { FreeTrialBanner } from "FreeTrialBanner";
 import { SupporterProblems } from "SupporterProblems";
+import { FreeTrialSurvey } from "FreeTrialSurvey";
 
 declare let ogs_missing_translation_count: number;
 
@@ -158,6 +159,7 @@ export class EXV6Overview extends React.Component<{}, OverviewState> {
                         <div className="left">
                             <SupporterProblems />
                             <FreeTrialBanner />
+                            <FreeTrialSurvey />
                             <DismissableMessages />
                             <EmailBanner />
                             <ActiveAnnouncements />

src/views/Overview/Overview.tsx

@@ -45,6 +45,7 @@ import { ActiveDroppedGameList } from "ActiveDroppedGameList";
 import { NewUserRankChooser } from "NewUserRankChooser";
 import { FreeTrialBanner } from "FreeTrialBanner";
 import { SupporterProblems } from "SupporterProblems";
+import { FreeTrialSurvey } from "FreeTrialSurvey";
 
 declare let ogs_missing_translation_count: number;
 
@@ -176,6 +177,7 @@ export class OldOverview extends React.Component<{}, OverviewState> {
                         <div className="left">
                             <SupporterProblems />
                             <FreeTrialBanner />
+                            <FreeTrialSurvey />
                             <DismissableMessages />
                             <EmailBanner />
                             <PaymentProblemBanner />