@ludo.ninja/components 1.5.7 → 1.5.9

package/src/components/forms/formsTemplate/index.tsx

@@ -1,772 +0,0 @@
-import React, { useCallback } from 'react';
-
-import { GetServerSideProps } from 'next';
-
-import { useRouter } from 'next/router';
-
-import { useMutation } from '@apollo/client';
-import { useGoogleReCaptcha } from 'react-google-recaptcha-v3';
-import styled from 'styled-components';
-
-import { formsSchema, hosts } from '@ludo.ninja/api';
-import { alertVariants } from '@ludo.ninja/ui/build/system/Alert/type';
-
-import { useUserStore } from '@/modules/user/store';
-
-import { useUiStore } from '@/store/ui';
-
-import { mediaQuery } from '@/styles/ScreenWidth';
-
-import Form from '@/components/forms/form';
-import FormsNavigation from '@/components/forms/formsNavigation';
-import { FormsNavigationTabs, InputProps } from '@/components/forms/types';
-
-import messages from '@/system/Forms/Messages';
-
-import { Flex } from '@system';
-
-const Wrapper = styled(Flex)`
-  ${mediaQuery.desktop} {
-    margin-left: 30px;
-  }
-
-  ${mediaQuery.tablet} {
-    margin-left: 0;
-    padding-top: 30px;
-    flex-direction: column;
-  }
-
-  ${mediaQuery.bigPhone} {
-    padding-top: 0;
-    margin-top: -15px;
-  }
-`;
-
-const FormsTemplate = () => {
-  const router = useRouter();
-  const getUser = useUserStore((state) => state.user);
-  const { executeRecaptcha } = useGoogleReCaptcha();
-  const { query } = router;
-  const openAlert = useUiStore((state) => state.openAlert);
-  const { formId, nameOfSubject, contentId } = query;
-  const form = getForm(formId as string);
-
-  let initialValues = {};
-  if (formId === FormsNavigationTabs.report) {
-    initialValues = { contentId, nameOfSubject };
-  }
-
-  const [mutate, { loading }] = useMutation(
-    form?.submitMutation || formsSchema.SubmitContentReportDocument,
-    {
-      context: {
-        uri: hosts.formsHost,
-      },
-      fetchPolicy: 'no-cache',
-      onCompleted: () => {
-        openAlert({
-          type: alertVariants.success,
-          caption: 'Form successfully submitted!',
-        });
-      },
-      onError: (error) => {
-        openAlert({
-          type: alertVariants.error,
-          caption: error.message,
-        });
-      },
-    }
-  );
-
-  const handleReCaptchaVerify = useCallback(async () => {
-    if (!executeRecaptcha) {
-      return;
-    }
-    return await executeRecaptcha(`${formId}_submit`);
-  }, [executeRecaptcha, formId]);
-
-  const handleSubmit = async (data: any) => {
-    const recaptchaToken = await handleReCaptchaVerify();
-
-    await mutate({
-      variables: {
-        input: {
-          ...formatDataToBE(data),
-          recaptchaToken,
-          userId: getUser?.userId,
-        },
-      },
-    });
-  };
-
-  if (!form) {
-    return null;
-  }
-
-  return (
-    <Wrapper>
-      <FormsNavigation />
-      <Form
-        formDescription={form.formDescription}
-        formTitle={form.formTitle}
-        inputs={form.inputs}
-        onSubmit={handleSubmit}
-        submitLoading={loading}
-        initialValues={initialValues}
-      />
-    </Wrapper>
-  );
-};
-
-export const getServerSideProps: GetServerSideProps = async (ctx) => {
-  const { query } = ctx;
-  const { formId } = query;
-  const form = getForm(formId as string);
-
-  if (!form) {
-    return {
-      redirect: {
-        permanent: false,
-        destination: `/forms/${FormsNavigationTabs.opportunity}`,
-      },
-    };
-  }
-
-  return {
-    props: {},
-  };
-};
-
-export default FormsTemplate;
-
-const getForm = (formId: string) => {
-  if (!(formId in FormsNavigationTabs)) return undefined;
-
-  return forms[formId as FormsNavigationTabs];
-};
-
-const formatDataToBE = (object: { [key in string]: any }) =>
-  Object.fromEntries(
-    Object.entries(object)
-      .filter(([, value]) => value)
-      .map(([key, value]) => {
-        if (key.includes('-other-radio')) {
-          const baseRadioInputKey = key.split('-')[0];
-          return [baseRadioInputKey, value];
-        }
-        if (key.includes('-other-checkbox')) {
-          const baseCheckboxInputKey = key.split('-')[0];
-          return [
-            baseCheckboxInputKey,
-            [
-              ...object[baseCheckboxInputKey].filter(
-                (val: string) => val !== 'other'
-              ),
-              value,
-            ].join(', '),
-          ];
-        }
-        return value instanceof Date ? [key, value.getTime()] : [key, value];
-      })
-  );
-
-export const forms: {
-  [K in FormsNavigationTabs]?: {
-    formTitle: string;
-    formDescription: string;
-    inputs: InputProps[];
-    submitMutation?: any;
-  };
-} = {
-  [FormsNavigationTabs.opportunity]: {
-    submitMutation: formsSchema.SubmitOpportunityDocument,
-    formTitle: 'opportunity Submission',
-    formDescription:
-      'Submit a project opportunity to engage and provide value to the Ludo.com community. If the opportunity is not yet on Ludo Opportunities DB you will qualify to receive a reward.',
-    inputs: [
-      {
-        label: 'Email',
-        type: 'text',
-        name: 'submitterEmail',
-        placeholder: 'Enter your email',
-        value: '',
-        validations: {
-          ...messages.userEmail,
-          required: 'Field required',
-        },
-      },
-      {
-        label: 'opportunity name (28 characters max)',
-        type: 'text',
-        name: 'name',
-        placeholder: 'Enter opportunity name',
-        value: '',
-        validations: {
-          maxLength: {
-            value: 28,
-            message: 'Please enter no more than 28 characters',
-          },
-        },
-      },
-      {
-        label: 'opportunity description',
-        type: 'textArea',
-        name: 'description',
-        placeholder: 'Briefly describe the opportunity and its benefits',
-        value: '',
-        validations: {
-          maxLength: {
-            value: 400,
-            message: 'Please enter no more than 400 characters',
-          },
-        },
-      },
-      {
-        label: 'Registration link',
-        type: 'text',
-        name: 'registrationLink',
-        placeholder:
-          'Provide the link for users to register or claim the opportunity',
-        value: '',
-        validations: {
-          ...messages.userWeb,
-          minLength: {
-            value: 2,
-            message: 'The link is too small 🤟',
-          },
-          maxLength: {
-            value: 400,
-            message: 'The link is too long 🤟',
-          },
-        },
-      },
-      {
-        label: 'Start date',
-        type: 'date',
-        name: 'startDate',
-        placeholder: 'dd.mm.yyyy',
-        value: '',
-      },
-      {
-        label: 'End date',
-        type: 'date',
-        name: 'endDate',
-        placeholder: 'dd.mm.yyyy',
-        value: '',
-      },
-    ],
-  },
-  [FormsNavigationTabs.contactSupport]: {
-    submitMutation: formsSchema.SubmitContactSupportDocument,
-    formTitle: 'Contact Ludo Support',
-    formDescription: 'Use this form to request support or report issues.',
-    inputs: [
-      {
-        label: 'Email',
-        type: 'text',
-        name: 'email',
-        placeholder: 'Enter your email',
-        value: '',
-        validations: {
-          ...messages.userEmail,
-          required: 'Field required',
-        },
-      },
-      {
-        label: 'Wallet Address',
-        type: 'text',
-        name: 'walletAddress',
-        placeholder: 'Enter your wallet address',
-        value: '',
-        validations: {
-          required: 'Field required',
-        },
-      },
-      {
-        label: 'Category of Issue',
-        type: 'radio',
-        name: 'category',
-        options: [
-          { value: 'Account Issue', desc: 'Account Issue' },
-          {
-            value: 'Ludo X ( Chrome Extension )',
-            desc: 'Ludo X ( Chrome Extension )',
-          },
-          { value: 'Telegram App', desc: 'Telegram App' },
-          { value: 'Ludo WebApp', desc: 'Ludo WebApp' },
-          { value: 'Ludo Genie', desc: 'Ludo Genie' },
-          { value: 'Ludo Rank', desc: 'Ludo Rank' },
-          { value: 'other', desc: 'Other:' },
-        ],
-        value: '',
-      },
-      {
-        label: 'Description of the Issue',
-        type: 'textArea',
-        name: 'description',
-        placeholder: 'Briefly describe the issue',
-        value: '',
-        validations: {
-          maxLength: {
-            value: 400,
-            message: 'Please enter no more than 400 characters',
-          },
-        },
-      },
-      {
-        label: 'Priority Level',
-        type: 'radio',
-        name: 'priority',
-        options: [
-          { value: 'Low', desc: 'Low' },
-          { value: 'Medium', desc: 'Medium' },
-          { value: 'High', desc: 'High' },
-        ],
-        value: '',
-      },
-    ],
-  },
-  [FormsNavigationTabs.registrationRequest]: {
-    submitMutation: formsSchema.SubmitRegistrationInviteDocument,
-    formTitle: 'Registration Invite Request',
-    formDescription:
-      'Please fill out this form to request additional registration invites for Ludo.com. Make sure to provide all the required details.',
-    inputs: [
-      {
-        label:
-          'Enter the Ludo ID or the blockchain address you used for registration',
-        type: 'text',
-        name: 'ludoIdOrAddress',
-        placeholder: 'Enter your Ludo ID or the blockchain address',
-        value: '',
-        validations: {
-          required: 'Field required',
-        },
-      },
-      {
-        label: 'Reason for Request',
-        type: 'textArea',
-        name: 'reason',
-        placeholder:
-          'Explain why you are requesting more registration invites. Please provide as much detail as possible to help us understand your needs.',
-        value: '',
-        validations: {
-          required: 'Field required',
-        },
-      },
-    ],
-  },
-  [FormsNavigationTabs.report]: {
-    submitMutation: formsSchema.SubmitContentReportDocument,
-    formTitle: 'Content Report Form',
-    formDescription:
-      'Please use this form to report any content (NFT, Collection, opportunity) that violates our community guidelines or terms of service',
-    inputs: [
-      {
-        label: 'Email',
-        type: 'text',
-        name: 'email',
-        placeholder: 'Enter your email',
-        value: '',
-        validations: {
-          ...messages.userEmail,
-          required: 'Field required',
-        },
-      },
-      {
-        label: 'Name of the NFT/opportunity/Project',
-        type: 'text',
-        name: 'nameOfSubject',
-        placeholder: 'Enter name of the NFT/opportunity/Project',
-        value: '',
-        validations: {
-          maxLength: {
-            value: 100,
-            message: 'The name is too long',
-          },
-        },
-      },
-      {
-        label: 'What type of content are you reporting?',
-        type: 'radio',
-        name: 'contentType',
-        options: [
-          { value: 'NFT ( Asset )', desc: 'NFT ( Asset )' },
-          {
-            value: 'Collection ( Project )',
-            desc: 'Collection ( Project )',
-          },
-          { value: 'Opportunity', desc: 'Opportunity' },
-        ],
-        value: '',
-      },
-      {
-        label: 'Please provide the ID or URL of the content you are reporting.',
-        type: 'text',
-        name: 'contentId',
-        placeholder: 'Enter the ID or URL of the content',
-        value: '',
-      },
-      {
-        label: 'Why are you reporting this content?',
-        type: 'checkbox',
-        name: 'reportReason',
-        options: [
-          { value: 'Inappropriate Content', desc: 'Inappropriate Content' },
-          {
-            value: 'Copyright Infringement',
-            desc: 'Copyright Infringement',
-          },
-          { value: 'Scam/Fraud', desc: 'Scam/Fraud' },
-          { value: 'other', desc: 'Other:' },
-        ],
-        value: '',
-      },
-      {
-        label: 'Please describe the issue with the content.',
-        type: 'textArea',
-        name: 'description',
-        placeholder: 'Briefly describe the issue',
-        value: '',
-        validations: {
-          maxLength: {
-            value: 400,
-            message: 'Please enter no more than 400 characters',
-          },
-        },
-      },
-      {
-        label:
-          'If possible, add link to any evidence supporting your report (e.g., screenshots)',
-        type: 'text',
-        name: 'evidenceFileUrl',
-        placeholder: 'Enter the ID or URL of the content',
-        value: '',
-        validations: {
-          ...messages.userWeb,
-          minLength: {
-            value: 2,
-            message: 'The URL is too small 🤟',
-          },
-          maxLength: {
-            value: 400,
-            message: 'The URL is too long 🤟',
-          },
-        },
-      },
-    ],
-  },
-  [FormsNavigationTabs.feedback]: {
-    submitMutation: formsSchema.SubmitUserFeedbackDocument,
-    formTitle: 'User Feedback',
-    formDescription: '',
-    inputs: [
-      {
-        label: 'Email',
-        type: 'text',
-        name: 'email',
-        placeholder: 'Enter your email',
-        value: '',
-        validations: {
-          ...messages.userEmail,
-          required: 'Field required',
-        },
-      },
-      {
-        label: 'How satisfied are you with Ludo.com?',
-        type: 'radio',
-        name: 'satisfactionScore',
-        options: [
-          { value: '1', desc: '1 - Very dissatisfied' },
-          { value: '2', desc: '2' },
-          { value: '3', desc: '3' },
-          { value: '4', desc: '4' },
-          { value: '5', desc: '5 - Very satisfied' },
-        ],
-        value: '',
-        validations: {
-          required: 'Field required',
-        },
-      },
-      {
-        label: 'Which features of Ludo.com do you use the most?',
-        type: 'radio',
-        name: 'missedFeature',
-        options: [
-          { value: 'XP gamification', desc: 'XP gamification' },
-          { value: 'Reputation', desc: 'Reputation' },
-          { value: 'Opportunities Discovery', desc: 'Opportunities Discovery' },
-          { value: 'other', desc: 'Other:' },
-        ],
-        value: '',
-      },
-      {
-        label: 'How easy is it to use Ludo.com?',
-        type: 'radio',
-        name: 'howEasyToUseScore',
-        options: [
-          { value: 'Very easy', desc: 'Very easy' },
-          { value: 'Easy', desc: 'Easy' },
-          { value: 'Neutral', desc: 'Neutral' },
-          { value: 'Difficult', desc: 'Difficult' },
-          { value: 'Very Difficult', desc: 'Very Difficult' },
-        ],
-        value: '',
-      },
-      {
-        label: 'How would you rate the performance and speed of Ludo.com?',
-        type: 'radio',
-        name: 'performanceScore',
-        options: [
-          { value: '1', desc: '1 - Slow' },
-          { value: '2', desc: '2' },
-          { value: '3', desc: '3' },
-          { value: '4', desc: '4' },
-          { value: '5', desc: '5 - Fast' },
-        ],
-        value: '',
-      },
-      {
-        label:
-          'What features would you like to see added or improved on Ludo.com?',
-        type: 'textArea',
-        name: 'whatToImprove',
-        placeholder: '',
-        value: '',
-        validations: {
-          maxLength: {
-            value: 500,
-            message: 'Please enter no more than 500 characters',
-          },
-        },
-      },
-      {
-        label: 'Any other comments or suggestions?',
-        type: 'textArea',
-        name: 'comments',
-        placeholder: '',
-        value: '',
-        validations: {
-          maxLength: {
-            value: 500,
-            message: 'Please enter no more than 500 characters',
-          },
-        },
-      },
-    ],
-  },
-  [FormsNavigationTabs.partnership]: {
-    submitMutation: formsSchema.SubmitPartnershipInquiryDocument,
-    formTitle: 'Partnership Inquiry Form',
-    formDescription: '',
-    inputs: [
-      {
-        label: 'Name',
-        type: 'text',
-        name: 'name',
-        placeholder: 'Enter your name',
-        value: '',
-        validations: {
-          required: 'Field required',
-        },
-      },
-      {
-        label: 'Email',
-        type: 'text',
-        name: 'email',
-        placeholder: 'Enter your email',
-        value: '',
-        validations: {
-          ...messages.userEmail,
-          required: 'Field required',
-        },
-      },
-      {
-        label: 'Project Name',
-        type: 'text',
-        name: 'projectName',
-        placeholder: 'Enter your project name',
-        value: '',
-        validations: {
-          required: 'Field required',
-        },
-      },
-      {
-        label: 'Website',
-        type: 'text',
-        name: 'website',
-        placeholder: 'Enter your website',
-        value: '',
-        validations: {
-          ...messages.userWeb,
-          required: 'Field required',
-        },
-      },
-      {
-        label:
-          'Tell us about your project and why you want to partner with Ludo.com',
-        type: 'textArea',
-        name: 'aboutProject',
-        placeholder:
-          'Tell us about your project and why you want to partner with Ludo.com',
-        value: '',
-        validations: {
-          maxLength: {
-            value: 500,
-            message: 'Please enter no more than 500 characters',
-          },
-          required: 'Field required',
-        },
-      },
-      {
-        label: 'What type of partnership are you interested in?',
-        type: 'radio',
-        name: 'partnershipType',
-        options: [
-          { value: 'Blockchain', desc: 'Blockchain' },
-          { value: 'Collection', desc: 'Collection' },
-          { value: 'Artist', desc: 'Artist' },
-          { value: 'Argos Brand Protection', desc: 'Argos Brand Protection' },
-          { value: 'Web3 Game', desc: 'Web3 Game' },
-          { value: 'dApp', desc: 'dApp' },
-          { value: 'Exchange', desc: 'Exchange' },
-          { value: 'Wallet', desc: 'Wallet' },
-          { value: 'Developer', desc: 'Developer' },
-          { value: 'other', desc: 'Other:' },
-        ],
-        value: '',
-        validations: {
-          required: 'Field required',
-        },
-      },
-      {
-        label: 'How did you hear about Ludo.com?',
-        type: 'radio',
-        name: 'ludoReferrerInfo',
-        options: [
-          { value: 'Search Engine', desc: 'Search Engine' },
-          { value: 'Social Media', desc: 'Social Media' },
-          { value: 'World of Mouth', desc: 'World of Mouth' },
-          { value: 'other', desc: 'Other:' },
-        ],
-        value: '',
-      },
-    ],
-  },
-  [FormsNavigationTabs.investor]: {
-    submitMutation: formsSchema.SubmitInvestorInquiryDocument,
-    formTitle: 'Investor Relations Inquiry Form',
-    formDescription: '',
-    inputs: [
-      {
-        label: 'Name',
-        type: 'text',
-        name: 'name',
-        placeholder: 'Enter your name',
-        value: '',
-        validations: {
-          required: 'Field required',
-        },
-      },
-      {
-        label: 'Email',
-        type: 'text',
-        name: 'email',
-        placeholder: 'Enter your email',
-        value: '',
-        validations: {
-          ...messages.userEmail,
-          required: 'Field required',
-        },
-      },
-      {
-        label: 'Phone Number',
-        type: 'text',
-        name: 'phoneNumber',
-        placeholder: 'Enter your phone number',
-        value: '',
-        validations: {
-          required: 'Field required',
-        },
-      },
-      {
-        label: 'Telegram ID - optional',
-        type: 'text',
-        name: 'telegramId',
-        placeholder: 'Enter your Telegram ID',
-        value: '',
-      },
-      {
-        label:
-          'Are you an individual investor or representing an organization?',
-        type: 'radio',
-        name: 'investorType',
-        options: [
-          { value: 'Venture Capitalist', desc: 'Venture Capitalist' },
-          { value: 'Family Office', desc: 'Family Office' },
-          { value: 'Angel Investor', desc: 'Angel Investor' },
-          { value: 'Individual Investor', desc: 'Individual Investor' },
-          { value: 'Institutional Investor', desc: 'Institutional Investor' },
-          { value: 'other', desc: 'Other:' },
-        ],
-        value: '',
-        validations: {
-          required: 'Field required',
-        },
-      },
-      {
-        label: 'How much are you looking to invest?',
-        type: 'text',
-        name: 'investmentAmount',
-        placeholder: '',
-        value: '',
-      },
-      {
-        label: 'What is your investment background and experience?',
-        type: 'textArea',
-        name: 'investmentExperience',
-        placeholder: 'Tell us about your investment background and experience',
-        value: '',
-        validations: {
-          maxLength: {
-            value: 500,
-            message: 'Please enter no more than 500 characters',
-          },
-          required: 'Field required',
-        },
-      },
-      {
-        label:
-          'What specific information or assistance are you seeking from our investor relations team?',
-        type: 'textArea',
-        name: 'assistanceRequest',
-        placeholder: '',
-        value: '',
-        validations: {
-          maxLength: {
-            value: 500,
-            message: 'Please enter no more than 500 characters',
-          },
-          required: 'Field required',
-        },
-      },
-      {
-        label: 'How did you hear about our investment opportunities?',
-        type: 'radio',
-        name: 'ludoReferrerInfo',
-        options: [
-          { value: 'Website', desc: 'Website' },
-          { value: 'News Article', desc: 'News Article' },
-          { value: 'Referral', desc: 'Referral' },
-          { value: 'Social Media', desc: 'Social Media' },
-          { value: 'Word of Mouth', desc: 'Word of Mouth' },
-          { value: 'other', desc: 'Other:' },
-        ],
-        value: '',
-        validations: {
-          required: 'Field required',
-        },
-      },
-    ],
-  },
-};