From a23bf282d942b6446ea641d1aab361f357af65f9 Mon Sep 17 00:00:00 2001
From: Aditya Veer Parmar <nakulparmar15@gmail.com>
Date: Wed, 29 Mar 2023 12:27:39 +0530
Subject: [PATCH] fix: multi page bug fixes

---
 app/modules/Collection/Form/Field/index.tsx   |  8 +--
 .../FormBuilder/ConnectPage/ProfileInfo.tsx   |  1 -
 .../Form/FormBuilder/ConnectPage/index.tsx    | 12 ++--
 .../Form/FormBuilder/SubmittedPage/index.tsx  | 13 ++--
 .../Collection/Form/FormBuilder/index.tsx     |  9 +--
 app/modules/Plugins/guildxyz/index.tsx        |  2 +-
 app/modules/PublicForm/FormFields.tsx         | 69 +++++++++----------
 app/modules/PublicForm/index.tsx              |  1 -
 8 files changed, 59 insertions(+), 56 deletions(-)

diff --git a/app/modules/Collection/Form/Field/index.tsx b/app/modules/Collection/Form/Field/index.tsx
index bd03cac9..85142fe2 100644
--- a/app/modules/Collection/Form/Field/index.tsx
+++ b/app/modules/Collection/Form/Field/index.tsx
@@ -280,7 +280,7 @@ function FieldComponent({
         </Box>
       )}
       {collection.properties[id]?.type === "discord" && (
-        <Box marginTop="4" width="1/3">
+        <Box marginTop="4" width="64">
           <PrimaryButton
             variant="tertiary"
             icon={<FaDiscord size={24} />}
@@ -291,7 +291,7 @@ function FieldComponent({
         </Box>
       )}
       {collection.properties[id]?.type === "twitter" && (
-        <Box marginTop="4" width="1/3">
+        <Box marginTop="4" width="64">
           <PrimaryButton
             variant="tertiary"
             icon={<FaTwitter size={24} />}
@@ -302,7 +302,7 @@ function FieldComponent({
         </Box>
       )}
       {collection.properties[id]?.type === "telegram" && (
-        <Box marginTop="4" width="1/3">
+        <Box marginTop="4" width="64">
           <PrimaryButton
             variant="tertiary"
             icon={<FaTelegramPlane size={24} />}
@@ -313,7 +313,7 @@ function FieldComponent({
         </Box>
       )}
       {collection.properties[id]?.type === "github" && (
-        <Box marginTop="4" width="1/3">
+        <Box marginTop="4" width="64">
           <PrimaryButton
             variant="tertiary"
             icon={<FaGithub size={24} />}
diff --git a/app/modules/Collection/Form/FormBuilder/ConnectPage/ProfileInfo.tsx b/app/modules/Collection/Form/FormBuilder/ConnectPage/ProfileInfo.tsx
index dc2e5932..8df6b5f2 100644
--- a/app/modules/Collection/Form/FormBuilder/ConnectPage/ProfileInfo.tsx
+++ b/app/modules/Collection/Form/FormBuilder/ConnectPage/ProfileInfo.tsx
@@ -1,7 +1,6 @@
 import { UserType } from "@/app/types";
 import { GithubOutlined, TwitterOutlined } from "@ant-design/icons";
 import { Avatar, Box, Button, Stack, Tag, Text } from "degen";
-import { motion } from "framer-motion";
 import { Tooltip } from "react-tippy";
 import DiscordIcon from "@/app/assets/icons/discordIcon.svg";
 import { Globe } from "react-feather";
diff --git a/app/modules/Collection/Form/FormBuilder/ConnectPage/index.tsx b/app/modules/Collection/Form/FormBuilder/ConnectPage/index.tsx
index 40685d0f..39fb0044 100644
--- a/app/modules/Collection/Form/FormBuilder/ConnectPage/index.tsx
+++ b/app/modules/Collection/Form/FormBuilder/ConnectPage/index.tsx
@@ -66,7 +66,6 @@ const ConnectPage = ({ form, setForm, currentPage, setCurrentPage }: Props) => {
           stampsWithScore.push(stampWithScore);
         }
       }
-      console.log({ stampsWithScore });
       setStamps(stampsWithScore.sort((a, b) => b.score - a.score));
     }
   };
@@ -133,7 +132,7 @@ const ConnectPage = ({ form, setForm, currentPage, setCurrentPage }: Props) => {
   return (
     <Box
       style={{
-        height: "calc(100vh - 20rem)",
+        minHeight: "calc(100vh - 20rem)",
       }}
       display="flex"
       flexDirection="column"
@@ -308,7 +307,12 @@ const ConnectPage = ({ form, setForm, currentPage, setCurrentPage }: Props) => {
             md: "64",
           }}
         >
-          <Stack direction="horizontal">
+          <Stack
+            direction={{
+              xs: "vertical",
+              md: "horizontal",
+            }}
+          >
             {connectedUser && (
               <Box width="full">
                 <Logout />
@@ -356,7 +360,7 @@ const ConnectPage = ({ form, setForm, currentPage, setCurrentPage }: Props) => {
 
 const StampScrollContainer = styled(Box)`
   overflow-y: auto;
-  height: calc(100vh - 35rem);
+  height: 20rem;
   ::-webkit-scrollbar {
     width: 5px;
   }
diff --git a/app/modules/Collection/Form/FormBuilder/SubmittedPage/index.tsx b/app/modules/Collection/Form/FormBuilder/SubmittedPage/index.tsx
index 3cae8eeb..1acdff04 100644
--- a/app/modules/Collection/Form/FormBuilder/SubmittedPage/index.tsx
+++ b/app/modules/Collection/Form/FormBuilder/SubmittedPage/index.tsx
@@ -27,21 +27,24 @@ const SubmittedPage = ({
   return (
     <Box
       style={{
-        height: "calc(100vh - 20rem)",
+        minHeight: "calc(100vh - 20rem)",
       }}
       display="flex"
       flexDirection="column"
       justifyContent="space-between"
     >
       <Stack align="center" space="8">
-        <Text size="headingTwo">{form.formMetadata.messageOnSubmission}</Text>
-        <Stack direction="horizontal">
+        <Text size="headingTwo" align="center">
+          {form.formMetadata.messageOnSubmission}
+        </Text>
+        <Box marginBottom="8" />
+        <Stack>
           {/* <Image src="/spectDemo.gif" width="1727" height="1082" /> */}
           <img
             src="https://bafybeicot4vgylc7gimu5bzo7megpeo5po3ybp6lov3wft24b666wxzfh4.ipfs.w3s.link/spectDemoCompressed.gif"
             style={{
-              width: "80%",
-              height: "80%",
+              width: "100%",
+              height: "100%",
             }}
           />
           <Stack align={"center"}>
diff --git a/app/modules/Collection/Form/FormBuilder/index.tsx b/app/modules/Collection/Form/FormBuilder/index.tsx
index 310b5381..09314945 100644
--- a/app/modules/Collection/Form/FormBuilder/index.tsx
+++ b/app/modules/Collection/Form/FormBuilder/index.tsx
@@ -414,9 +414,6 @@ function FormBuilder() {
               minHeight: "calc(100vh - 20rem)",
             }}
           >
-            <Droppable droppableId="activeFields" type="field">
-              {FieldDraggableCallback}
-            </Droppable>
             <Stack align="center">
               <Stepper
                 steps={pageOrder.length}
@@ -425,7 +422,11 @@ function FormBuilder() {
                   setCurrentPage(pageOrder[step]);
                 }}
               />
+              <Box marginBottom="4" />
             </Stack>
+            <Droppable droppableId="activeFields" type="field">
+              {FieldDraggableCallback}
+            </Droppable>
           </FormContainer>
         </Container>
       </Box>
@@ -474,7 +475,7 @@ const CoverImageButtonContainer = styled(Box)`
 `;
 
 const FormBuilderContainer = styled(Box)`
-  height: calc(100vh - 20rem);
+  min-height: calc(100vh - 20rem);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
diff --git a/app/modules/Plugins/guildxyz/index.tsx b/app/modules/Plugins/guildxyz/index.tsx
index 84df03f4..607f7b5d 100644
--- a/app/modules/Plugins/guildxyz/index.tsx
+++ b/app/modules/Plugins/guildxyz/index.tsx
@@ -209,7 +209,7 @@ export default function RoleGate({ handleClose }: Props) {
               >
                 Save
               </PrimaryButton>
-              {collection.formMetadata?.formRoleGating?.length && (
+              {(collection.formMetadata?.formRoleGating?.length || 0) > 0 && (
                 <PrimaryButton
                   loading={loading}
                   variant="tertiary"
diff --git a/app/modules/PublicForm/FormFields.tsx b/app/modules/PublicForm/FormFields.tsx
index 9406aa27..cd26470a 100644
--- a/app/modules/PublicForm/FormFields.tsx
+++ b/app/modules/PublicForm/FormFields.tsx
@@ -141,7 +141,6 @@ function FormFields({ form, setForm }: Props) {
   useEffect(() => {
     if (form) {
       const tempData: any = {};
-      console.log({ form: form.formMetadata, submitted });
       if (form?.formMetadata.previousResponses?.length > 0 && submitted) {
         const lastResponse =
           form.formMetadata.previousResponses[
@@ -378,6 +377,37 @@ function FormFields({ form, setForm }: Props) {
 
   return (
     <Container borderRadius="2xLarge">
+      <Stack align="center">
+        {form && (
+          <Stepper
+            steps={form.formMetadata.pageOrder.length}
+            currentStep={form.formMetadata.pageOrder.indexOf(currentPage || "")}
+            onStepChange={(step) => {
+              if (submitted) {
+                setCurrentPage(form.formMetadata.pageOrder[step]);
+              } else if (updateResponse || !submitted) {
+                // can only go back
+                if (
+                  step < form.formMetadata.pageOrder.indexOf(currentPage || "")
+                ) {
+                  setCurrentPage(form.formMetadata.pageOrder[step]);
+                } else {
+                  if (currentPage === "start") {
+                    toast.error(
+                      "You can get started by clicking on the start button"
+                    );
+                  } else {
+                    toast.error("You can only go back");
+                  }
+                }
+              } else {
+                setCurrentPage(form.formMetadata.pageOrder[step]);
+              }
+            }}
+          />
+        )}
+        <Box marginBottom="4" />
+      </Stack>
       {emailModalOpen && (
         <Modal
           title="Please enter email"
@@ -456,9 +486,6 @@ function FormFields({ form, setForm }: Props) {
             const fields = pages[currentPage || ""]?.properties;
             return (
               <FormFieldContainer
-                style={{
-                  height: "calc(100vh - 20rem)",
-                }}
                 display="flex"
                 flexDirection="column"
                 justifyContent="space-between"
@@ -581,36 +608,6 @@ function FormFields({ form, setForm }: Props) {
           }
         }
       })}
-      <Stack align="center">
-        {form && (
-          <Stepper
-            steps={form.formMetadata.pageOrder.length}
-            currentStep={form.formMetadata.pageOrder.indexOf(currentPage || "")}
-            onStepChange={(step) => {
-              if (submitted) {
-                setCurrentPage(form.formMetadata.pageOrder[step]);
-              } else if (updateResponse || !submitted) {
-                // can only go back
-                if (
-                  step < form.formMetadata.pageOrder.indexOf(currentPage || "")
-                ) {
-                  setCurrentPage(form.formMetadata.pageOrder[step]);
-                } else {
-                  if (currentPage === "start") {
-                    toast.error(
-                      "You can get started by clicking on the start button"
-                    );
-                  } else {
-                    toast.error("You can only go back");
-                  }
-                }
-              } else {
-                setCurrentPage(form.formMetadata.pageOrder[step]);
-              }
-            }}
-          />
-        )}
-      </Stack>
     </Container>
   );
 }
@@ -634,7 +631,7 @@ const Container = styled(Box)`
   padding: 2rem;
   padding-bottom: 1rem;
 
-  height: calc(100vh - 15rem);
+  min-height: calc(100vh - 15rem);
 
   ::-webkit-scrollbar {
     width: 0.5rem;
@@ -644,7 +641,7 @@ const Container = styled(Box)`
 `;
 
 const FormFieldContainer = styled(Box)`
-  height: calc(100vh - 15rem);
+  min-height: calc(100vh - 15rem);
 
   ::-webkit-scrollbar {
     width: 0.5rem;
diff --git a/app/modules/PublicForm/index.tsx b/app/modules/PublicForm/index.tsx
index 25dd0bdd..035ce54c 100644
--- a/app/modules/PublicForm/index.tsx
+++ b/app/modules/PublicForm/index.tsx
@@ -92,7 +92,6 @@ export const CoverImage = styled(Box)<{ src: string }>`
   background-image: url(${(props) => props.src});
   background-size: cover;
   z-index: -1;
-  border-radius: 1rem;
 `;
 
 const FormContainer = styled(Box)`