Added Payment Page in VigyBag #2178
Conversation
|
@SadafKausar2025 is attempting to deploy a commit to the Vivek Prajapati's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughThis update introduces a new payment information page to the VigyBag application, enhancing user navigation and functionality. New routes for the Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Footer
participant App
participant Payment_Page
participant Payment_Policy
User->>Footer: Clicks on "payments"
Footer->>App: Navigates to /payment-page
App->>Payment_Page: Renders payment options
Payment_Page-->>User: Displays payment information
User->>Footer: Clicks on "payment policy"
Footer->>App: Navigates to /payment-policy
App->>Payment_Policy: Renders payment policy
Payment_Policy-->>User: Displays payment policy information
Assessment against linked issues
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (invoked as PR comments)
Additionally, you can add CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (3)
- src/App.jsx (2 hunks)
- src/User/components/Footer/Footer.jsx (1 hunks)
- src/User/pages/Payment-Page/payment-page.jsx (1 hunks)
Additional comments not posted (4)
src/User/components/Footer/Footer.jsx (1)
238-239: Verify navigation change from "Terms & Conditions" to "payments".The link text and destination have been changed from "Terms & Conditions" to "payments". Ensure this change aligns with the intended user journey and that users will not miss important legal information previously accessible here.
Verification successful
Navigation change verified: "Terms & Conditions" is still accessible.
The "Terms & Conditions" link is still present in the footer and on the payment page, ensuring users can access important legal information. The change to "payments" does not remove this access.
src/User/components/Footer/Footer.jsx: Contains "Terms & Conditions".src/User/pages/Payment-Page/payment-page.jsx: References "Terms & Conditions".Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of "Terms & Conditions" in the codebase to ensure it is still accessible. # Test: Search for "Terms & Conditions" usage. Expect: Occurrences of the term in other parts of the codebase. rg --type js -A 5 $'Terms & Conditions'Length of output: 929
src/App.jsx (2)
41-41: Import statement forPayment_Pagecomponent.The import statement for the
Payment_Pagecomponent is correctly added. Ensure that the path is accurate and the component is implemented as expected.
186-186: New route forPayment_Pageadded.The route for the
Payment_Pagecomponent has been added successfully. Verify that this page is accessible and functions as intended within the application.src/User/pages/Payment-Page/payment-page.jsx (1)
3-612: Content and structure ofPayment_Page.The content is detailed and covers various aspects of payment methods and policies. Ensure that all information is accurate and up-to-date. Consider adding links to bank registration pages for 3D Secure passwords if applicable.
|
|
||
| const Payment_Page = () => { | ||
| useEffect(() => { | ||
| document.title = "VigyBag | Return and Cancellation"; |
There was a problem hiding this comment.
Update document title to reflect the page content.
The document title is set to "VigyBag | Return and Cancellation", which seems incorrect for a payment page. Update the title to accurately reflect the page's purpose.
- document.title = "VigyBag | Return and Cancellation";
+ document.title = "VigyBag | Payment Information";Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| document.title = "VigyBag | Return and Cancellation"; | |
| document.title = "VigyBag | Payment Information"; |
|
rename this routes to payment-policy or payment-information not payment page |
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- src/User/pages/Payment-Page/payment-page.jsx (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- src/User/pages/Payment-Page/payment-page.jsx
|
hello @codervivek5 |
There was a problem hiding this comment.
Actionable comments posted: 1
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (2)
- src/App.jsx (2 hunks)
- src/User/pages/Payment-Policy/payment-policy.jsx (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- src/App.jsx
Additional comments not posted (2)
src/User/pages/Payment-Policy/payment-policy.jsx (2)
1-6: LGTM! Proper use of imports anduseEffect.The import statement and
useEffectusage for setting the document title are correct and appropriate.
620-620: LGTM! Correct export statement.The default export of the component is correct and follows React best practices.
| </tr> | ||
| </tbody> | ||
| </table> | ||
| <p className="text-sm"> | ||
| There is NO processing fee charged for availing VigyBag's EMI | ||
| payment option. On return or exchange, interest charged by the | ||
| bank till that time will not be refunded by VigyBag. | ||
| </p> | ||
| <p className="text-sm"> | ||
| You may check with the respective bank/issuer on how a | ||
| cancellation, refund or pre-closure could affect the EMI terms, | ||
| and what interest charges would be levied on you for the same. | ||
| </p> | ||
| <h4>Example and Calculations</h4> | ||
| <p className="text-sm"> | ||
| The table below shows a representative rendering of EMI plans for | ||
| a ₹20,000 purchase on VigyBag paid using the EMI payment plan: | ||
| </p> | ||
| <div className="overflow-x-auto"> | ||
| <table className="min-w-full border-2 border-black"> | ||
| <thead className="border-2"> | ||
| <tr className="border-2 border-black"> | ||
| <th className="border-2 border-black">Tenure (months)</th> | ||
| <th className="border-2 border-black">Loan amount</th> | ||
| <th className="border-2 border-black"> | ||
| Monthly installment | ||
| </th> | ||
| <th className="border-2 border-black"> | ||
| Bank interest rate | ||
| </th> | ||
| <th className="border-2 border-black"> | ||
| Total effective price you pay | ||
| </th> | ||
| <th className="border-2 border-black"> | ||
| Interest paid to Bank | ||
| </th> | ||
| </tr> | ||
| </thead> | ||
| <tbody> | ||
| <tr className="border-2 border-black"> | ||
| <td className="border-2 border-black">3</td> | ||
| <td className="border-2 border-black">₹20,000</td> | ||
| <td className="border-2 border-black">₹6,800.44</td> | ||
| <td className="border-2 border-black">12.00%</td> | ||
| <td className="border-2 border-black">₹20,401.33</td> | ||
| <td className="border-2 border-black">₹401.33</td> | ||
| </tr> | ||
| <tr className="border-2 border-black"> | ||
| <td className="border-2 border-black">6</td> | ||
| <td className="border-2 border-black">₹20,000</td> | ||
| <td className="border-2 border-black">₹3,450.97</td> | ||
| <td className="border-2 border-black">12.00%</td> | ||
| <td className="border-2 border-black">₹20,705.80</td> | ||
| <td className="border-2 border-black">₹705.80</td> | ||
| </tr> | ||
| <tr className="border-2 border-black"> | ||
| <td className="border-2 border-black">9</td> | ||
| <td className="border-2 border-black">₹20,000</td> | ||
| <td className="border-2 border-black">₹2,344.32</td> | ||
| <td className="border-2 border-black">13.00%</td> | ||
| <td className="border-2 border-black">₹21,098.89</td> | ||
| <td className="border-2 border-black">₹1,098.89</td> | ||
| </tr> | ||
| <tr className="border-2 border-black"> | ||
| <td className="border-2 border-black">12</td> | ||
| <td className="border-2 border-black">₹20,000</td> | ||
| <td className="border-2 border-black">₹1,786.35</td> | ||
| <td className="border-2 border-black">13.00%</td> | ||
| <td className="border-2 border-black">₹21,436.15</td> | ||
| <td className="border-2 border-black">₹1,436.15</td> | ||
| </tr> | ||
| </tbody> | ||
| </table> | ||
| </div> | ||
| <br /> | ||
| <h3 className="text-black font-bold text-sm"> | ||
| How do I make a payment using VigyBag's credit card EMI option? | ||
| </h3> | ||
| <br /> | ||
| <p className="text-sm"> | ||
| Once you've added the desired items to your VigyBag shopping cart, | ||
| proceed with your order as usual by entering your address. When | ||
| you're prompted to choose a payment mode for your order, select | ||
| 'EMI' & follow these simple steps: | ||
| </p> | ||
| <ol> | ||
| <li>Choose your credit-card issuing bank you wish to pay from</li> | ||
| <li>Select the EMI plan of your preference</li> | ||
| <li>Enter your credit card details</li> | ||
| <li>Click 'Save and Pay'</li> | ||
| </ol> | ||
| <p className="text-sm"> | ||
| Please note that the full amount will be charged on your card the | ||
| day of the transaction. | ||
| </p> | ||
| </section> | ||
| </main> | ||
| </div> | ||
| </div> | ||
| ); |
There was a problem hiding this comment.
Consider breaking down the component into smaller components.
The component contains a lot of static text, which could be broken down into smaller, reusable components. This would improve maintainability and readability.
// Example of breaking down into smaller components
const PaymentMethods = () => (
<section>
<h3 className="text-black font-bold text-sm">How do I pay for a VigyBag purchase?</h3>
<p className="text-sm">VigyBag offers you multiple payment methods...</p>
</section>
);
// Usage in the main component
const Payment_Policy = () => {
useEffect(() => {
document.title = "VigyBag | Return and Cancellation";
}, []);
return (
<div className="bg-[#fff0e3ff] text-gray-800 p-4 md:p-8 font-sm">
<div className="max-w-6xl mx-auto bg-white shadow-md p-4 md:p-8 rounded-lg mt-24">
<main>
<PaymentMethods />
{/* Other sections */}
</main>
</div>
</div>
);
};
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Congratulations, Your pull request has been successfully merged 🥳🎉 Thank you for your contribution to the project 🚀 Keep Contributing!! ✨ |
Fixes Issue #2177
Closes #2177
Changes proposed
Screenshots
Note to reviewers
Summary by CodeRabbit
New Features
payment-page.Bug Fixes
Documentation