Feature/Template picker

Author: Ryczko

.env.example

@@ -16,7 +16,6 @@ GOOGLE_SECRET=
 NEXT_PUBLIC_PROFILE_SETTINGS=
 NEXT_PUBLIC_REMOVE_ACCOUNT=
 NEXT_PUBLIC_ALLOW_MULTIPLE_ANSWERS=
-NEXT_PUBLIC_INDIVIDUAL_RESULTS=
 
 
 # Others

cypress/e2e/answerSurvey.cy.ts

@@ -11,6 +11,13 @@ describe('Answering survey tests', () => {
 
     cy.get('[data-test-id="create-survey"]').click();
     cy.url().should('include', '/survey/create');
+    cy.get('[data-test-id="start-from-scratch-field"]').click();
+    cy.get('[data-test-id="start-from-scratch-button"]').click();
+    cy.get('[data-test-id="add-question-button"]').click();
+    cy.get('[data-test-id="emoji-question-button"]').click();
+    cy.get('[data-test-id="add-question-button"]').click();
+    cy.get('[data-test-id="input-question-button"]').click();
+
     cy.get('input[name="survey-title"]').clear().type(surveyTitle);
 
     cy.get('input[data-test-id="question-input-0"]')

cypress/e2e/createSurvey.cy.ts

@@ -9,6 +9,13 @@ describe('Creating survey tests', () => {
     cy.get('[data-test-id="create-survey"]').click();
     cy.url().should('include', '/survey/create');
 
+    cy.get('[data-test-id="start-from-scratch-field"]').click();
+    cy.get('[data-test-id="start-from-scratch-button"]').click();
+    cy.get('[data-test-id="add-question-button"]').click();
+    cy.get('[data-test-id="emoji-question-button"]').click();
+    cy.get('[data-test-id="add-question-button"]').click();
+    cy.get('[data-test-id="input-question-button"]').click();
+
     cy.get('input[name="survey-title"]').clear().type(surveyTitle);
 
     cy.get('input[data-test-id="question-input-0"]')

next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.

src/features/surveys/components/ShareSurveryModal/ShareSurveyModal.tsx

@@ -33,21 +33,17 @@ export default function ShareSurveyModal({
       title={t('shareSurveyModal.title')}
       content={
         <>
-          <div className="mt-4 flex justify-center">
-            <div className="w-1/2">
-              <QRCode
-                size={256}
-                style={{ height: 'auto', maxWidth: '100%', width: '100%' }}
-                value={link}
-              />
-            </div>
+          <div className="mx-auto my-4 w-1/3">
+            <QRCode
+              size={256}
+              style={{ height: 'auto', maxWidth: '100%', width: '100%' }}
+              value={link}
+            />
           </div>
 
-          <div className="mt-4">
-            <span className="scrollbar-hide block w-full select-all overflow-x-auto whitespace-nowrap rounded-md border border-gray-300 px-3 py-2 text-center text-sm focus:outline-none">
-              {link}
-            </span>
-          </div>
+          <span className="scrollbar-hide block w-full select-all overflow-x-auto whitespace-nowrap rounded-md border border-gray-300 px-3 py-2 text-center text-sm focus:outline-none">
+            {link}
+          </span>
 
           <div className="mt-4 flex flex-col-reverse justify-between gap-2 sm:flex-row">
             <Button

src/features/surveys/features/SurveyCreator/SurveyCreator.tsx

@@ -1,13 +1,23 @@
 import React from 'react';
-import TitleAndConfigSection from 'features/surveys/features/SurveyCreator/components/TitleAndConfigSection/TitleAndConfigSection';
-import QuestionsSection from 'features/surveys/features/SurveyCreator/components/QuestionsSection/QuestionsSection';
-import ActionButtons from 'features/surveys/features/SurveyCreator/components/ActionButtons/ActionButtons';
 import clsx from 'clsx';
 import { usePreviewPanelContext } from 'features/surveys/features/SurveyCreator/managers/previewPanelManager/context';
 import PreviewPanel from 'features/surveys/features/SurveyCreator/components/PreviewPanel/PreviewPanel';
+import { useSurveyCreatorContext } from 'features/surveys/features/SurveyCreator/managers/createSurveyManager/context';
+
+import dynamic from 'next/dynamic';
+import CreatorContent from 'features/surveys/features/SurveyCreator/components/CreatorContent/CreatorContent';
+
+const Templates = dynamic(
+  () =>
+    import(
+      'features/surveys/features/SurveyCreator/components/Templates/Templates'
+    ),
+  { ssr: false }
+);
 
 export default function SurveyCreator() {
   const { isPanelOpened } = usePreviewPanelContext();
+  const { isEditMode, isTemplatePicked } = useSurveyCreatorContext();
 
   return (
     <>
@@ -18,9 +28,11 @@ export default function SurveyCreator() {
         )}
       >
         <div className="mx-auto max-w-[58rem] px-4 xl:px-10">
-          <TitleAndConfigSection />
-          <QuestionsSection />
-          <ActionButtons />
+          {!isTemplatePicked && !isEditMode ? (
+            <Templates />
+          ) : (
+            <CreatorContent />
+          )}
         </div>
       </div>
 

src/features/surveys/features/SurveyCreator/components/AddQuestionButton/AddQuestionButton.tsx

@@ -16,6 +16,7 @@ export const AddQuestionButton = ({ onClick }: AddQuestionButtonProps) => {
         onClick={openModal}
         sizeType={ButtonSize.FULL}
         className="h-[50px]"
+        data-test-id="add-question-button"
         icon={<PlusCircleIcon className="h-5  w-5" />}
       >
         Add new block

src/features/surveys/features/SurveyCreator/components/CreatorContent/CreatorContent.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import ActionButtons from 'features/surveys/features/SurveyCreator/components/ActionButtons/ActionButtons';
+import QuestionsSection from 'features/surveys/features/SurveyCreator/components/QuestionsSection/QuestionsSection';
+import TitleAndConfigSection from 'features/surveys/features/SurveyCreator/components/TitleAndConfigSection/TitleAndConfigSection';
+import withAnimation from 'shared/HOC/withAnimation';
+
+function CreatorContent() {
+  return (
+    <>
+      <TitleAndConfigSection />
+      <QuestionsSection />
+      <ActionButtons />
+    </>
+  );
+}
+
+export default withAnimation(CreatorContent);

src/features/surveys/features/SurveyCreator/components/NewQuestionModal/NewQuestionModal.tsx

@@ -86,21 +86,25 @@ export default function NewQuestionModal({
             onClick={addEmojiQuestion}
             icon={<EmojiIcon />}
             text="Emoji"
+            testSelector="emoji-question-button"
           />
           <NewQuestionModalButton
             onClick={addInputQuestion}
             icon={<InputIcon />}
             text="Text"
+            testSelector="input-question-button"
           />
           <NewQuestionModalButton
             onClick={addChoiceQuestion}
             icon={<ChoiceIcon />}
             text="Choice"
+            test-selector="choice-question-button"
           />
           <NewQuestionModalButton
             onClick={addRateQuestion}
             icon={<RateIcon />}
             text="Rate"
+            test-selector="rate-question-button"
           />
         </div>
       }

src/features/surveys/features/SurveyCreator/components/NewQuestionModal/components/NewQuestionModalButton.tsx

@@ -5,17 +5,20 @@ interface NewQuestionModalButtonProps {
   onClick: () => void;
   icon: React.ReactNode;
   text: string;
+  testSelector?: string;
 }
 
 export default function NewQuestionModalButton({
   onClick,
   icon,
   text,
+  testSelector,
 }: NewQuestionModalButtonProps) {
   return (
     <Button
       onClick={onClick}
       className="flex flex-col p-4 text-center sm:w-[160px]"
+      data-test-id={testSelector}
     >
       <div className="mb-[2px] w-[18px]">{icon}</div>
       {text}