[chore]: add legal details #188
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughAdds reusable legal UI components, three legal pages and a contact page, updates Privacy/Terms wording to "Terms and Conditions", and updates footer navigation with new legal and contact links. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Footer
participant Router
participant LegalPageLayout
participant Components
participant External
User->>Footer: Click legal or Contact link
Footer->>Router: Navigate to route (/contact or /legal/...)
Router->>LegalPageLayout: Mount page layout
LegalPageLayout->>Components: Compose header, sections, cards, ContactInfo
Components->>External: Render mailto / tel / external links (Discord, GitHub)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
🧰 Additional context used🧬 Code graph analysis (1)apps/web/src/app/(main)/legal/cancellation-and-refund/page.tsx (7)
🔇 Additional comments (4)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (6)
apps/web/src/components/legal/LegalContent.tsx (1)
7-11: Consider using a more semantic HTML element.The component wraps children in a generic
div. For better accessibility and semantic HTML, consider using<article>or<section>depending on the content context.export function LegalContent({ children }: LegalContentProps) { return ( - <div className="space-y-8 text-[#e1e1e1] leading-relaxed">{children}</div> + <article className="space-y-8 text-[#e1e1e1] leading-relaxed">{children}</article> ); }apps/web/src/components/legal/LegalSection.tsx (1)
9-18: LGTM with a minor suggestion for className composition.The component logic is correct. However, for consistency with
LegalCard.tsxwhich uses thecnutility for className composition, consider using the same approach here to handle potential className conflicts more robustly.+import { cn } from "@/lib/utils"; + export function LegalSection({ title, children, className = "" }: LegalSectionProps) { return ( - <section className={className}> + <section className={cn(className)}> {title && ( <h2 className="text-2xl lg:text-3xl font-semibold mb-4">{title}</h2> )} {children} </section> ); }apps/web/src/components/legal/LegalFooter.tsx (1)
3-11: Consider using semantic<footer>element.For better semantic HTML and accessibility, replace the wrapping
divwith a<footer>element.export function LegalFooter() { return ( - <div className="mt-16 pt-8 border-t border-[#252525] text-center text-[#b1b1b1]"> + <footer className="mt-16 pt-8 border-t border-[#252525] text-center text-[#b1b1b1]"> <p className="text-sm"> © {new Date().getFullYear()} Opensox AI. All rights reserved. </p> - </div> + </footer> ); }apps/web/src/components/legal/LegalPageLayout.tsx (1)
7-13: Consider using semantic HTML elements for better accessibility.The layout uses nested
divelements. Consider using<main>for the outer container to indicate it's the main content area.export function LegalPageLayout({ children }: LegalPageLayoutProps) { return ( - <div className="min-h-screen bg-[#101010] text-white"> + <main className="min-h-screen bg-[#101010] text-white"> <div className="max-w-4xl mx-auto px-4 py-16 lg:py-24">{children}</div> - </div> + </main> ); }apps/web/src/components/legal/LegalPageHeader.tsx (1)
17-23: Document the precedence behavior when both props are provided.The conditional logic gives
effectiveDateprecedence oversubtitle. If both props are provided, thesubtitlewill be ignored. This might be the intended behavior, but consider adding a comment to clarify this design decision, or handle both props if needed.If showing both is desired, consider this approach:
{(effectiveDate || subtitle) && ( - <p className="text-[#b1b1b1] text-lg mb-12"> - {effectiveDate - ? `Effective date: ${effectiveDate}` - : subtitle} - </p> + <div className="text-[#b1b1b1] text-lg mb-12"> + {effectiveDate && <p>Effective date: {effectiveDate}</p>} + {subtitle && <p>{subtitle}</p>} + </div> )}Otherwise, add a comment explaining the precedence:
+ {/* effectiveDate takes precedence over subtitle when both are provided */} {(effectiveDate || subtitle) && (apps/web/src/app/(main)/legal/terms/page.tsx (1)
4-547: Suggest refactoring to use the new legal UI components.This page currently uses inline layout code (Lines 6-11, 540-544) that duplicates the functionality now available in
LegalPageLayout,LegalPageHeader,LegalContent, andLegalFootercomponents. According to the PR summary, other legal pages (shipping-and-exchange, cancellation-and-refund) are being built with these shared components. For consistency and maintainability, consider refactoring this page to use the new component library.Example refactor:
+import { + LegalPageLayout, + LegalPageHeader, + LegalContent, + LegalSection, + LegalFooter, +} from "@/components/legal"; + export default function TermsOfServicePage() { return ( - <div className="min-h-screen bg-[#101010] text-white"> - <div className="max-w-4xl mx-auto px-4 py-16 lg:py-24"> - {/* Header */} - <h1 className="text-4xl lg:text-6xl font-bold mb-4"> - Terms and Conditions - </h1> - <p className="text-[#b1b1b1] text-lg mb-12"> - Effective date: January 8, 2024 - </p> - - {/* Content */} - <div className="space-y-8 text-[#e1e1e1] leading-relaxed"> + <LegalPageLayout> + <LegalPageHeader + title="Terms and Conditions" + effectiveDate="January 8, 2024" + /> + <LegalContent> {/* existing content sections */} - </div> - - {/* Footer */} - <div className="mt-16 pt-8 border-t border-[#252525] text-center text-[#b1b1b1]"> - <p className="text-sm"> - © {new Date().getFullYear()} Opensox AI. All rights reserved. - </p> - </div> - </div> - </div> + </LegalContent> + <LegalFooter /> + </LegalPageLayout> ); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
apps/web/src/app/(main)/contact/page.tsx(1 hunks)apps/web/src/app/(main)/legal/cancellation-and-refund/page.tsx(1 hunks)apps/web/src/app/(main)/legal/privacy/page.tsx(3 hunks)apps/web/src/app/(main)/legal/shipping-and-exchange/page.tsx(1 hunks)apps/web/src/app/(main)/legal/terms/page.tsx(4 hunks)apps/web/src/components/landing-sections/footer.tsx(2 hunks)apps/web/src/components/legal/ContactInfo.tsx(1 hunks)apps/web/src/components/legal/LegalCard.tsx(1 hunks)apps/web/src/components/legal/LegalContent.tsx(1 hunks)apps/web/src/components/legal/LegalFooter.tsx(1 hunks)apps/web/src/components/legal/LegalPageHeader.tsx(1 hunks)apps/web/src/components/legal/LegalPageLayout.tsx(1 hunks)apps/web/src/components/legal/LegalSection.tsx(1 hunks)apps/web/src/components/legal/index.ts(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (10)
apps/web/src/components/legal/LegalPageLayout.tsx (3)
apps/docs/app/layout.tsx (1)
RootLayout(19-31)apps/web/src/app/(main)/login/layout.tsx (1)
RootLayout(1-15)apps/web/src/app/(main)/(landing)/page.tsx (1)
main(15-34)
apps/web/src/components/legal/LegalCard.tsx (2)
apps/web/src/components/legal/index.ts (1)
LegalCard(4-4)apps/web/src/lib/utils.ts (1)
cn(4-6)
apps/web/src/components/legal/LegalPageHeader.tsx (1)
apps/web/src/components/legal/index.ts (1)
LegalPageHeader(2-2)
apps/web/src/components/legal/LegalContent.tsx (1)
apps/web/src/components/legal/index.ts (1)
LegalContent(7-7)
apps/web/src/components/legal/LegalFooter.tsx (1)
apps/web/src/components/legal/index.ts (1)
LegalFooter(6-6)
apps/web/src/app/(main)/legal/shipping-and-exchange/page.tsx (7)
apps/web/src/components/legal/LegalPageLayout.tsx (1)
LegalPageLayout(7-13)apps/web/src/components/legal/LegalPageHeader.tsx (1)
LegalPageHeader(9-26)apps/web/src/components/legal/LegalContent.tsx (1)
LegalContent(7-11)apps/web/src/components/legal/LegalCard.tsx (1)
LegalCard(10-28)apps/web/src/components/legal/LegalSection.tsx (1)
LegalSection(9-18)apps/web/src/components/legal/ContactInfo.tsx (1)
ContactInfo(11-58)apps/web/src/components/legal/LegalFooter.tsx (1)
LegalFooter(3-11)
apps/web/src/app/(main)/contact/page.tsx (6)
apps/web/src/components/legal/LegalPageLayout.tsx (1)
LegalPageLayout(7-13)apps/web/src/components/legal/LegalPageHeader.tsx (1)
LegalPageHeader(9-26)apps/web/src/components/legal/LegalContent.tsx (1)
LegalContent(7-11)apps/web/src/components/legal/LegalCard.tsx (1)
LegalCard(10-28)apps/web/src/components/legal/LegalSection.tsx (1)
LegalSection(9-18)apps/web/src/components/legal/LegalFooter.tsx (1)
LegalFooter(3-11)
apps/web/src/app/(main)/legal/cancellation-and-refund/page.tsx (7)
apps/web/src/components/legal/LegalPageLayout.tsx (1)
LegalPageLayout(7-13)apps/web/src/components/legal/LegalPageHeader.tsx (1)
LegalPageHeader(9-26)apps/web/src/components/legal/LegalContent.tsx (1)
LegalContent(7-11)apps/web/src/components/legal/LegalCard.tsx (1)
LegalCard(10-28)apps/web/src/components/legal/LegalSection.tsx (1)
LegalSection(9-18)apps/web/src/components/legal/ContactInfo.tsx (1)
ContactInfo(11-58)apps/web/src/components/legal/LegalFooter.tsx (1)
LegalFooter(3-11)
apps/web/src/components/legal/LegalSection.tsx (1)
apps/web/src/components/legal/index.ts (1)
LegalSection(3-3)
apps/web/src/components/legal/ContactInfo.tsx (1)
apps/web/src/components/legal/index.ts (1)
ContactInfo(5-5)
🔇 Additional comments (11)
apps/web/src/components/legal/LegalCard.tsx (1)
10-28: LGTM!The component correctly handles variant-based styling and uses the
cnutility for proper className composition. The implementation is clean and follows React best practices.apps/web/src/app/(main)/legal/terms/page.tsx (1)
10-10: LGTM on terminology update.The change from "Terms of Service" to "Terms and Conditions" is consistent and aligns with the PR objectives.
apps/web/src/components/legal/index.ts (1)
1-8: ContactInfo component exists—no action required.The verification confirms that the
ContactInfocomponent exists atapps/web/src/components/legal/ContactInfo.tsx, so the barrel export on line 5 is valid.apps/web/src/components/landing-sections/footer.tsx (1)
89-118: LGTM! Navigation updates are consistent.The footer navigation changes properly reflect the new legal infrastructure:
- New Contact page link
- Updated terminology ("Terms and Conditions" instead of "Terms of Service")
- New legal policy links (Cancellation & Refunds, Shipping & Exchange)
All links are properly formatted and align with the new pages added in this PR.
apps/web/src/app/(main)/legal/privacy/page.tsx (1)
33-37: LGTM! Terminology consistently updated.The references to "Terms of Service" have been properly updated to "Terms and Conditions" throughout the Privacy Policy for consistency with the rest of the application.
Also applies to: 687-687, 788-788
apps/web/src/app/(main)/contact/page.tsx (3)
14-26: LGTM! Proper metadata and page structure.The page correctly exports Next.js metadata and uses the shared legal layout components appropriately. Using
subtitleinstead ofeffectiveDateis the right choice for a contact page.
67-72: Verify the phone number is valid and operational.The phone number format appears correct for an Indian number (+91 country code), but ensure this number is valid, active, and monitored for incoming calls during business hours as indicated.
106-175: LGTM! External links are properly secured.All external links correctly use
target="_blank"withrel="noopener noreferrer"for security, and the URLs are consistent with those in the footer.apps/web/src/components/legal/ContactInfo.tsx (1)
1-59: LGTM! Well-designed reusable component.The ContactInfo component is well-structured with:
- Sensible default values for all optional props
- Conditional rendering for flexibility
- Consistent contact information
- Proper use of Next.js Link for internal navigation
This promotes DRY principles and maintains consistency across legal pages.
apps/web/src/app/(main)/legal/cancellation-and-refund/page.tsx (1)
33-182: LGTM! Well-structured policy content.The content is well-organized with clear sections, user-friendly language, and appropriate use of the shared legal components. The policy clearly communicates:
- The no-refund stance
- Rationale and exceptions
- User guidance before purchasing
- Cancellation procedures
apps/web/src/app/(main)/legal/shipping-and-exchange/page.tsx (1)
33-208: LGTM! Clear and well-structured policy.The content effectively communicates the digital-only nature of the services with:
- Clear explanation that no physical shipping occurs
- Benefits of digital delivery (immediate access, no delays)
- Proper cross-references to related policies
- Good use of feature cards for visual clarity
- Appropriate use of ContactInfo component with custom props
Summary by CodeRabbit
New Features
Documentation