Public-bug-form-and-google-api

.env.development

@@ -1,9 +1,9 @@
 REACT_APP_GTM_ID=
 
-REACT_APP_API_URL=https://dv-crowd.app-quality.com/api
+REACT_APP_API_URL=https://dev.tryber.me/api
 
 REACT_APP_DEFAULT_TOKEN=
 
-REACT_APP_CROWD_WP_URL=https://dv-crowd.app-quality.com
+REACT_APP_CROWD_WP_URL=https://dev.tryber.me
 
 REACT_APP_DATADOG_CLIENT_TOKEN=

public/index.html

@@ -75,7 +75,7 @@
     <script src="https://polyfill.io/v3/polyfill.min.js?features=String.prototype.replaceAll%2CIntersectionObserver%2CArray.prototype.map%2CArray.prototype.reduce"></script>
     <script
       type="text/javascript"
-      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBUdy4MdXmZPTFMC2Q6O37pm0uq1WFhcoc&libraries=places"
+      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDy8e6_8uv8JnNZFRXng6HfbhnhvobWyac&libraries=places"
     ></script>
 
     <script type="text/javascript" src="/static/env-config.js"></script>

src/Page.tsx

@@ -26,6 +26,7 @@ import referralStore from "./redux/referral";
 import { refreshUser } from "./redux/user/actions/refreshUser";
 import BugForm from "./pages/BugForm";
 import ThankYouPage from "./pages/ThankYou";
+import VdpPage from "./pages/VDP";
 
 if (process.env.REACT_APP_DATADOG_CLIENT_TOKEN) {
   datadogLogs.init({
@@ -101,6 +102,7 @@ function Page() {
         </Route>
 
         <Route path={`${base}/my-bugs`} component={MyBugs} />
+        <Route path={`${base}/vdp/:id/:token`} component={VdpPage} />
         <Route
           path={`${base}/experience-points`}
           component={ExperiencePoints}

src/features/NotLoggedOnly.tsx

@@ -4,6 +4,7 @@ import { useHistory } from "react-router-dom";
 
 import Loading from "./Loading";
 import SiteHeader from "./SiteHeader";
+import { useAppSelector } from "src/store";
 
 const NotLoggedOnly = ({
   children,
@@ -14,6 +15,9 @@ const NotLoggedOnly = ({
 }) => {
   const { user, error, isLoading } = useUser();
   const history = useHistory();
+  const isPublicUser = useAppSelector(
+    (state) => state.publicUserPages.isPublic
+  );
 
   if (isLoading) {
     return <Loading />;
@@ -32,7 +36,7 @@ const NotLoggedOnly = ({
 
   return (
     <>
-      <SiteHeader />
+      {!isPublicUser && <SiteHeader />}
       {children}
     </>
   );

src/features/PageTemplate.tsx

@@ -1,10 +1,13 @@
 import { Container, PageTitle } from "@appquality/appquality-design-system";
-import React, { FC } from "react";
+import React, { FC, useEffect } from "react";
 
 import GoogleTagManager from "./GoogleTagManager";
 import LoggedOnly from "./LoggedOnly";
 import NotLoggedOnly from "./NotLoggedOnly";
 import TesterSidebar from "./TesterSidebar";
+import { useParams } from "react-router-dom";
+import { resetUserToken, setUserTokenPublic } from "src/redux/publicUserPages";
+import { useAppDispatch } from "src/store";
 
 const ContentTemplate = ({
   title,
@@ -55,6 +58,8 @@ export const PageTemplate: FC<{
   containerClass = "aq-pb-3",
   route,
 }) => {
+  const dispatch = useAppDispatch();
+
   const LoggedStatusWrapper = shouldBeLoggedIn
     ? ({ children }: { children: React.ReactNode }) => (
         <LoggedOnly showHeader={showHeader}>{children}</LoggedOnly>
@@ -63,6 +68,16 @@ export const PageTemplate: FC<{
         <NotLoggedOnly>{children}</NotLoggedOnly>
       );
 
+  /**
+   * In the /VDP page we set the user token to public in order to allow the user to submit a bug report.
+   * Every other page should be private.
+   */
+  const { token } = useParams<{ token?: string }>();
+  useEffect(() => {
+    if (token) dispatch(setUserTokenPublic(token));
+    else dispatch(resetUserToken());
+  }, [token]);
+
   // map children and separate Modal components from the rest
   const [modalChildren, pageChildren] = React.Children.toArray(children).reduce(
     (acc: React.ReactNode[], child) => {

src/pages/BugForm/BugDetails/BugDetails.tsx

@@ -20,6 +20,7 @@ import { UseCase } from "src/pages/BugForm/BugDetails/select/UseCase";
 import { TextareaField } from "src/pages/BugForm/BugDetails/TextareaField/TextareaField";
 import { LabelWithHelper } from "src/pages/BugForm/LabelWithHelper/LabelWithHelper";
 import useCampaignData from "src/pages/BugForm/useCampaignData";
+import { useAppSelector } from "src/store";
 
 interface BugDetailsProps {
   className?: string;
@@ -32,6 +33,10 @@ export const BugDetails = ({ className }: BugDetailsProps) => {
     `only screen and (min-width: ${aqBootstrapTheme.grid.breakpoints.lg})`
   ).matches;
 
+  const isPublicPage = useAppSelector(
+    (state) => state.publicUserPages.isPublic
+  );
+
   return (
     <Card
       className={className}
@@ -56,9 +61,11 @@ export const BugDetails = ({ className }: BugDetailsProps) => {
           defaultValue: "[Phase / Section] - Briefly Issue description",
         })}
       />
-      <div className="aq-mb-3">
-        <Devices />
-      </div>
+      {!isPublicPage && (
+        <div className="aq-mb-3">
+          <Devices />
+        </div>
+      )}
       <div className="aq-mb-3">
         <BugType />
       </div>
@@ -68,9 +75,11 @@ export const BugDetails = ({ className }: BugDetailsProps) => {
       <div className="aq-mb-3">
         <BugReplicability />
       </div>
-      <div className="aq-mb-3">
-        <UseCase />
-      </div>
+      {!isPublicPage && (
+        <div className="aq-mb-3">
+          <UseCase />
+        </div>
+      )}
       <TextareaField
         className="aq-mb-3"
         name="stepDescription"

src/pages/BugForm/BugFormContainer.tsx

@@ -49,6 +49,10 @@ export const BugFormContainer = () => {
   const { mediaList } = useAppSelector((state) => state.bugForm);
   const [submitForm] = usePostUsersMeCampaignsByCampaignIdBugsMutation();
 
+  const isPublicPage = useAppSelector(
+    (state) => state.publicUserPages.isPublic
+  );
+
   if (!data) return null;
 
   const initialBugValues: BugFormValues = {
@@ -72,6 +76,14 @@ export const BugFormContainer = () => {
     initialBugValues.device = device[0].id.toString();
   }
 
+  if (isPublicPage) {
+    /**
+     * In a public page, we don't want to show the usecase selector,
+     * so we set it to the default value (not a specific usecase)
+     */
+    initialBugValues.useCase = "-1";
+  }
+
   data.additionalFields?.forEach(
     (f) => (initialBugValues.additional[f.slug] = "")
   );
@@ -191,32 +203,35 @@ export const BugFormContainer = () => {
                       "The bug you reported has been uploaded successfully!",
                   })}
                 </strong>
-                <div>
-                  <Trans
-                    i18nKey={
-                      "Available tags: <bugs_link> (Link to bugs page):::BUGFORM_CONFIRMUPLOAD_TXT"
-                    }
-                    components={{
-                      bugs_link: (
-                        <a
-                          href={`${
-                            i18next.language === "en"
-                              ? ""
-                              : "/" + i18next.language
-                          }/bugs/show/${payload.id}/`}
-                          target="_blank"
-                          rel="noreferrer"
-                        />
-                      ),
-                    }}
-                    defaults="<bugs_link>Go to the Bugs page</bugs_link> to check all the bugs you have uploaded."
-                  />
-                </div>
+                {!isPublicPage && (
+                  <div>
+                    <Trans
+                      i18nKey={
+                        "Available tags: <bugs_link> (Link to bugs page):::BUGFORM_CONFIRMUPLOAD_TXT"
+                      }
+                      components={{
+                        bugs_link: (
+                          <a
+                            href={`${
+                              i18next.language === "en"
+                                ? ""
+                                : "/" + i18next.language
+                            }/bugs/show/${payload.id}/`}
+                            target="_blank"
+                            rel="noreferrer"
+                          />
+                        ),
+                      }}
+                      defaults="<bugs_link>Go to the Bugs page</bugs_link> to check all the bugs you have uploaded."
+                    />
+                  </div>
+                )}
               </Text>,
               "success",
               false
             )
           );
+
           localStorage.setItem(data.id.toString(), JSON.stringify(additional));
           now = new Date();
           setDisableSubmit(false);

src/pages/BugForm/FileUploader/FileList.tsx

@@ -41,6 +41,14 @@ export const FileList = () => {
     return typeof meta.error === "string" && meta.touched;
   };
   const [deleteMedia] = useDeleteMediaMutation();
+
+  /**
+   * Hide delete action if the form is public
+   */
+  const hideDeleteAction = useAppSelector(
+    (state) => state.publicUserPages.isPublic
+  );
+
   const onDelete = async (fileElement: FileElement) => {
     if (fileElement.status === "uploading") return;
     if (
@@ -95,7 +103,11 @@ export const FileList = () => {
             key={f.id}
             className="file-list-card"
             fileElement={f}
-            onDelete={f.status !== "uploading" ? () => onDelete(f) : undefined}
+            onDelete={
+              !hideDeleteAction && f.status !== "uploading"
+                ? () => onDelete(f)
+                : undefined
+            }
           />
         ))}
       </StyledFileList>

src/pages/BugForm/index.tsx

@@ -9,29 +9,35 @@ import useCampaignData from "./useCampaignData";
 import Loading from "src/features/Loading";
 import { useTranslation } from "react-i18next";
 
-export default function BugForm() {
+export default function BugForm({
+  shouldBeLoggedIn = true,
+  customRoute,
+}: {
+  shouldBeLoggedIn?: boolean;
+  customRoute?: string;
+}) {
   const { data, isError, noDevice, isFetching, campaignId } = useCampaignData();
   const { t } = useTranslation();
-  const route = `campaign/${campaignId}/bugform`;
+  const route = customRoute || `campaign/${campaignId}/bugform`;
 
   if (isFetching) {
     return (
-      <PageTemplate route={route} shouldBeLoggedIn>
+      <PageTemplate route={route} shouldBeLoggedIn={shouldBeLoggedIn}>
         <Loading />
       </PageTemplate>
     );
   }
   if (isError || !data?.hasBugForm) {
     return (
-      <PageTemplate route={route} shouldBeLoggedIn>
+      <PageTemplate route={route} shouldBeLoggedIn={shouldBeLoggedIn}>
         <BugFormUnauthorized />
       </PageTemplate>
     );
   }
 
   if (noDevice) {
     return (
-      <PageTemplate route={route} shouldBeLoggedIn>
+      <PageTemplate route={route} shouldBeLoggedIn={shouldBeLoggedIn}>
         <BugFormNoDevice />
       </PageTemplate>
     );
@@ -41,7 +47,7 @@ export default function BugForm() {
       title={t("BUGFORM_MAINTITLE", { defaultValue: "Bug form" })}
       heading={data ? `[CP${data.id}] - ${data.title}` : ""}
       route={route}
-      shouldBeLoggedIn
+      shouldBeLoggedIn={shouldBeLoggedIn}
     >
       <DatepickerGlobalStyle />
       <BugFormContainer />

src/pages/VDP/index.tsx

@@ -0,0 +1,21 @@
+import { useParams } from "react-router-dom";
+import { useAppSelector } from "src/store";
+import BugForm from "../BugForm";
+import Loading from "src/features/Loading";
+import { PageTemplate } from "src/features/PageTemplate";
+
+export default function VdpPage() {
+  const { id } = useParams<{ id: string }>();
+  const isPublic = useAppSelector((state) => state.publicUserPages.isPublic);
+  const route = `/vdp/${id}`;
+
+  if (!isPublic) {
+    return (
+      <PageTemplate route={route} shouldBeLoggedIn={false}>
+        <Loading />
+      </PageTemplate>
+    );
+  }
+
+  return <BugForm customRoute={route} shouldBeLoggedIn={false} />;
+}