fix rz[p amount issue

Author: vinaypuppal

src/components/CrowdFund/donors.tsx

@@ -5,6 +5,7 @@ import AutoSizer from 'react-virtualized-auto-sizer';
 
 import { AwardIcon } from '../../components/Icons/common';
 import { CampaignWithFundings } from '../../services/airtable';
+import { truncateString } from '../../utils';
 
 interface Props {
   campaign: CampaignWithFundings;
@@ -43,7 +44,9 @@ export const DonorsList: FunctionComponent<Props> = ({ campaign }) => {
                     <AwardIcon />
                   </div>
                   <div className="flex-1">
-                    <h6 className="font-medium text-gray-800">{item.name}</h6>
+                    <h6 className="font-medium text-gray-800" title={item.name}>
+                      {truncateString(item.name, 15)}
+                    </h6>
                     <p className="text-xs text-gray-600">
                       {fromnow(new Date(item.created_at), { max: 2, suffix: true })}
                     </p>

src/components/common/PaymentForm.tsx

@@ -74,7 +74,7 @@ export const PaymentForm: FunctionComponent<Props> = ({ campaign, inlineForm = f
       setIsSubmitting(true);
       await openRzp({
         ...form,
-        amount: Number(finalAmount.toFixed(1)),
+        amount,
         campaign: campaign ? campaign.slug : undefined,
       });
       setIsSubmitting(false);

src/pages/api/rzp.ts

@@ -3,6 +3,7 @@ import cuid from 'cuid';
 import { NextApiRequest, NextApiResponse } from 'next';
 
 import { donationsBase, PaymentStatus, fundingsBase } from '../../services/airtable';
+import { getFinalAmount } from '../../utils';
 
 const RZP_KEY = process.env.NODE_ENV === 'development' ? process.env.RZP_TEST_KEY : process.env.RZP_LIVE_KEY;
 
@@ -20,7 +21,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     const { email, name, amount, phone, paymentMethod = 'Razorpay', campaign } = req.body;
     const id = cuid();
     const data: { id: string; status: PaymentStatus } = await razorpay.orders.create({
-      amount: amount * 100, // in paise
+      amount: getFinalAmount(Number(amount)) * 100, // in paise
       currency: 'INR',
       receipt: id,
       payment_capture: true,

src/services/rzp.ts

@@ -1,5 +1,6 @@
 import { RZP_KEY, DEFAULT_TITLE, DEFAULT_DESCRIPTION, CODERPLEX_LOGO, THEME_COLOR } from '../constants';
 import { RzpResponse } from '../../types/rzp';
+import { getFinalAmount } from '../utils';
 
 interface RzpData {
   name: string;
@@ -40,7 +41,7 @@ export async function openRzp(data: RzpData) {
       const order = await getOrderId(data);
       const options = {
         key: RZP_KEY,
-        amount: amount * 100, // in paisa
+        amount: getFinalAmount(amount) * 100, // in paisa
         order_id: order.id,
         name: DEFAULT_TITLE,
         description: DEFAULT_DESCRIPTION,

src/utils/index.ts

@@ -3,7 +3,8 @@ import Router from 'next/router';
 import { NextPageContext } from 'next';
 
 export function getFinalAmount(amount: number) {
-  return Number(amount) * (1 + PROCESSING_CHARGE_PERCENT / 100);
+  const finalAmount = Number(amount) * (1 + PROCESSING_CHARGE_PERCENT / 100);
+  return Math.round(finalAmount * 100) / 100;
 }
 
 export const redirect = (ctx: NextPageContext, to = '/') => {
@@ -14,3 +15,7 @@ export const redirect = (ctx: NextPageContext, to = '/') => {
   }
   Router.push(to);
 };
+
+export function truncateString(str: string, num: number) {
+  return str.length > num ? str.slice(0, num) + '...' : str;
+}