Add message field to the payment form

Author: pbteja1998

src/components/CrowdFund/donors.tsx

@@ -50,6 +50,7 @@ export const DonorsList: FunctionComponent<Props> = ({ campaign }) => {
                     <p className="text-xs text-gray-600">
                       {fromnow(new Date(item.created_at), { max: 2, suffix: true })}
                     </p>
+                    <p className="text-xs text-gray-600">{item.message}</p>
                   </div>
                   <div className="px-4">
                     <span className="inline-block bg-green-600 text-xs rounded-full px-3 py-1 text-white">

src/components/common/PaymentForm.tsx

@@ -23,6 +23,7 @@ interface FormState {
   email: string;
   phone: string;
   name: string;
+  message: string;
 }
 
 export const PaymentForm: FunctionComponent<Props> = ({ campaign, inlineForm = false, isPayment = false }) => {
@@ -36,6 +37,7 @@ export const PaymentForm: FunctionComponent<Props> = ({ campaign, inlineForm = f
     email: '',
     phone: '',
     name: '',
+    message: '',
   };
   const [form, setFormValue] = useState(initialState);
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -250,6 +252,22 @@ export const PaymentForm: FunctionComponent<Props> = ({ campaign, inlineForm = f
             />
           </div>
         </div>
+        <div className="mb-6">
+          <label className="text-sm text-gray-800 mb-1 block" htmlFor="message">
+            Message
+          </label>
+          <div>
+            <input
+              className="bg-white focus:outline-0 border border-gray-300 rounded py-2 px-2 block w-full appearance-none leading-normal"
+              type="text"
+              name="message"
+              id="message"
+              value={form.message}
+              onChange={onChange}
+              disabled={isSubmitting}
+            />
+          </div>
+        </div>
         <div className="flex justify-center mb-3">
           <Button type="submit" isLoading={isSubmitting} disabled={isSubmitting}>
             <IconCards width={27} height={22} />

src/pages/api/campaigns/[slug].tsx

@@ -20,16 +20,16 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       .select({ view: Views.grid, sort: [{ field: 'created_at', direction: 'desc' }] })
       .firstPage();
     const fundings = fundingResults
-      .map(({ fields: { name, donated_amount, created_at, campaign, status }, id }) => ({
+      .map(({ fields: { name, donated_amount, created_at, campaign, status, message }, id }) => ({
         name,
         donated_amount,
         created_at,
         campaign,
         status,
         id,
+        message,
       }))
       .filter(({ campaign, status }) => campaign === _slug && status === PaymentStatus.captured);
-
     res.send({ ...campaign, fundings });
   } catch (error) {
     console.log(error);

src/pages/api/rzp.ts

@@ -26,6 +26,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
       hours_spent_cost,
       tip,
       phone,
+      message,
       paymentMethod = 'Razorpay',
       campaign,
       isPayment,
@@ -42,6 +43,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
         name,
         campaign,
         isPayment,
+        message,
       },
     });
     if (campaign) {
@@ -52,6 +54,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
           email,
           phone,
           campaign,
+          message,
           donated_amount: Number(amount),
           payment_method: paymentMethod,
           status: PaymentStatus.created,
@@ -67,6 +70,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
           name,
           email,
           phone,
+          message,
           hours_spent: Number(hours_spent),
           hours_spent_cost: Number(hours_spent_cost),
           tip: Number(tip),
@@ -85,6 +89,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
           name,
           email,
           phone,
+          message,
           donated_amount: Number(amount),
           payment_method: paymentMethod,
           status: PaymentStatus.created,

src/services/airtable.ts

@@ -25,6 +25,7 @@ export interface RZPPayment {
   name: string;
   email: string;
   phone: string;
+  message: string;
   payment_method: string;
   created_at: string;
   order_id: string;