shadcn.io is not affiliated with official shadcn/ui
Refund Policy Footer Billing Block for React Aria
Pick a purchase and see where it stands against a refund policy: a scale of days with a you-are-here marker, what is left, what comes back, and a refund request that is blocked outside the window.
Installation
Overview
Answer can I still get my money back before the ticket is written, with this refund policy section for React with React Aria. A hairline frame with a plus mark on each corner holds a Native Select of three purchases from Tamarind Learn, an online course platform (Pro yearly, a Seats add-on and Pro monthly), with the day it was bought and what it cost. Under it, the refund window is a scale of days: a full refund for the first 14, a prorated one up to day 30 and none after, drawn in a solid, a hatched and a quiet band with a marker at the purchase's age, counted from a fixed today. A sentence says what stands (Full refund until 18 Oct, 3 days left) and what you would get back. A band holds the policy in one line and a link to read it. The foot holds a polite status and Request a refund, the only Shine Button, which is aria-disabled when the window has closed and says why. For course platforms, subscriptions and any store with a refund window.
FAQ
How is the window worked out?
From the purchase date and the fixed AS_OF: the age in days decides between full (up to 14), prorated (up to 30) and closed. The days left and the last day are derived from the same numbers, so the sentence, the marker and the button always agree.
How is a prorated refund calculated?
As the unused share of the 30 days, rounded to the cent: the amount times the days remaining over 30. A full refund is the whole amount, and a closed window refunds nothing. Replace refundOf with your own policy, and keep the amounts in cents.
What does Request a refund do?
In a window it keeps a request for this page, marks the purchase as requested and says so in the status line. Outside the window, or for a purchase already requested, the button stays on screen and says why nothing happened. Nothing is sent and nothing is refunded in the demo.
Is this a real policy?
No. The 14 and 30 days are the demo's, and the page does not promise any refund. Write your own terms, link to them from the footer band, and let your server make the final decision.