stats and layout
This commit is contained in:
Karol Wypchlo
parent
4d3615e493
commit
d5fca433fb
|
|
@ -136,13 +136,11 @@ export default function Layout({ title, children }) {
|
||||||
Settings
|
Settings
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
<a
|
{/* <Link href="/payments">
|
||||||
href="#"
|
<a className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
|
||||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
Payments
|
||||||
role="menuitem"
|
</a>
|
||||||
>
|
</Link> */}
|
||||||
Payments (coming soon)
|
|
||||||
</a>
|
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
|
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 cursor-pointer"
|
||||||
|
|
@ -245,12 +243,11 @@ export default function Layout({ title, children }) {
|
||||||
Settings
|
Settings
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
<a
|
{/* <Link href="/payments">
|
||||||
href="#"
|
<a className="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">
|
||||||
className="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700"
|
Payments
|
||||||
>
|
</a>
|
||||||
Payments (coming soon)
|
</Link> */}
|
||||||
</a>
|
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
onClick={handleSignOut}
|
onClick={handleSignOut}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
import user from "./user.json";
|
||||||
|
|
||||||
|
export default (req, res) => {
|
||||||
|
res.json(user);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
{
|
||||||
|
"sub": "ab776d6d-f324-4fa7-a728-7587d5215481",
|
||||||
|
"tier": 1,
|
||||||
|
"subscribedUntil": "0001-01-01T00:00:00Z"
|
||||||
|
}
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
// import items from "./downloads.json";
|
import items from "./downloads.json";
|
||||||
const items = [];
|
|
||||||
|
|
||||||
export default (req, res) => {
|
export default (req, res) => {
|
||||||
const offset = parseInt(req.query?.offset ?? 0, 10);
|
const offset = parseInt(req.query?.offset ?? 0, 10);
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
import stats from "./stats.json";
|
||||||
|
|
||||||
|
export default (req, res) => {
|
||||||
|
res.json(stats);
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
{
|
||||||
|
"storageUsed": 809500672,
|
||||||
|
"numRegReads": 0,
|
||||||
|
"numRegWrites": 0,
|
||||||
|
"numUploads": 13,
|
||||||
|
"numDownloads": 78,
|
||||||
|
"totalUploadsSize": 618649028,
|
||||||
|
"totalDownloadsSize": 32307956843,
|
||||||
|
"bwUploads": 2810183680,
|
||||||
|
"bwDownloads": 32323934976,
|
||||||
|
"bwRegReads": 0,
|
||||||
|
"bwRegWrites": 0
|
||||||
|
}
|
||||||
|
|
@ -92,7 +92,7 @@ function SkylinkList({ items = [] }) {
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
const { data: user } = useSWR("/user", fetcher);
|
const { data: stats } = useSWR(`${apiPrefix}/user/stats`, fetcher);
|
||||||
const { data: downloads } = useSWR(`${apiPrefix}/user/downloads?pageSize=3&offset=0`, fetcher);
|
const { data: downloads } = useSWR(`${apiPrefix}/user/downloads?pageSize=3&offset=0`, fetcher);
|
||||||
const { data: uploads } = useSWR(`${apiPrefix}/user/uploads?pageSize=3&offset=0`, fetcher);
|
const { data: uploads } = useSWR(`${apiPrefix}/user/uploads?pageSize=3&offset=0`, fetcher);
|
||||||
|
|
||||||
|
|
@ -155,7 +155,7 @@ export default function Home() {
|
||||||
<div className="ml-5 w-0 flex-1">
|
<div className="ml-5 w-0 flex-1">
|
||||||
<dt className="text-sm font-medium text-gray-500 truncate">Storage used</dt>
|
<dt className="text-sm font-medium text-gray-500 truncate">Storage used</dt>
|
||||||
<dd className="flex items-baseline">
|
<dd className="flex items-baseline">
|
||||||
<div className="text-2xl font-semibold text-grey-900">{prettyBytes(user?.storageUsed ?? 0)}</div>
|
<div className="text-2xl font-semibold text-grey-900">{prettyBytes(stats?.storageUsed ?? 0)}</div>
|
||||||
</dd>
|
</dd>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -190,7 +190,7 @@ export default function Home() {
|
||||||
<div className="ml-5 w-0 flex-1">
|
<div className="ml-5 w-0 flex-1">
|
||||||
<dt className="text-sm font-medium text-gray-500 truncate">Bandwidth used</dt>
|
<dt className="text-sm font-medium text-gray-500 truncate">Bandwidth used</dt>
|
||||||
<dd className="flex items-baseline">
|
<dd className="flex items-baseline">
|
||||||
<div className="text-2xl font-semibold text-grey-900">{prettyBytes(user?.bandwidthUsed ?? 0)}</div>
|
<div className="text-2xl font-semibold text-grey-900">{prettyBytes(stats?.bwDownloads ?? 0)}</div>
|
||||||
</dd>
|
</dd>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,14 +1,19 @@
|
||||||
import Link from "next/link";
|
import dayjs from "dayjs";
|
||||||
import Layout from "../components/Layout";
|
import Layout from "../components/Layout";
|
||||||
import useSWR from "swr";
|
import useSWR from "swr";
|
||||||
|
|
||||||
const apiPrefix = process.env.NODE_ENV === "development" ? "/api/stubs" : "/api";
|
const plans = [
|
||||||
|
{ id: "initial_free", name: "Free", price: 0, description: "Unlimited bandwidth with throttled speed" },
|
||||||
|
{ id: "initial_plus", name: "Skynet Plus", price: 5, description: "1 TB premium bandwidth with full speed" },
|
||||||
|
{ id: "initial_pro", name: "Skynet Pro", price: 20, description: "5 TB premium bandwidth with full speed" },
|
||||||
|
{ id: "initial_extreme", name: "Skynet Extreme", price: 80, description: "20 TB premium bandwidth with full speed" },
|
||||||
|
];
|
||||||
|
const currentlyActivePlan = "initial_free";
|
||||||
|
|
||||||
const fetcher = (url) => fetch(url).then((r) => r.json());
|
const fetcher = (url) => fetch(url).then((r) => r.json());
|
||||||
|
|
||||||
export default function Payments() {
|
export default function Payments() {
|
||||||
const { data: invoices, error } = useSWR(`${apiPrefix}/square/invoices`, fetcher);
|
const { data: invoices, error } = useSWR("/api/square/invoices", fetcher);
|
||||||
|
|
||||||
console.log(invoices);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout title="Payments">
|
<Layout title="Payments">
|
||||||
|
|
@ -19,12 +24,12 @@ export default function Payments() {
|
||||||
<div className="bg-white overflow-hidden shadow rounded-lg">
|
<div className="bg-white overflow-hidden shadow rounded-lg">
|
||||||
<div className="px-4 py-5 sm:p-6">
|
<div className="px-4 py-5 sm:p-6">
|
||||||
<dt className="text-sm font-medium text-gray-500 truncate">Current plan</dt>
|
<dt className="text-sm font-medium text-gray-500 truncate">Current plan</dt>
|
||||||
<dd className="mt-1 text-3xl font-semibold text-gray-900">Free Plan</dd>
|
<dd className="mt-1 text-3xl font-semibold text-gray-900">Free</dd>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="bg-white overflow-hidden shadow rounded-lg">
|
<div className="bg-white overflow-hidden shadow rounded-lg">
|
||||||
<div className="px-4 py-5 sm:p-6">
|
<div className="px-4 py-5 sm:p-6">
|
||||||
<dt className="text-sm font-medium text-gray-500 truncate">Next invoice</dt>
|
<dt className="text-sm font-medium text-gray-500 truncate">Current payment</dt>
|
||||||
<dd className="mt-1 text-3xl font-semibold text-gray-900">—</dd>
|
<dd className="mt-1 text-3xl font-semibold text-gray-900">—</dd>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -36,135 +41,6 @@ export default function Payments() {
|
||||||
</div>
|
</div>
|
||||||
</dl>
|
</dl>
|
||||||
|
|
||||||
<section aria-labelledby="payment_details_heading">
|
|
||||||
<form action="#" method="POST">
|
|
||||||
<div className="shadow sm:rounded-md sm:overflow-hidden">
|
|
||||||
<div className="bg-white py-6 px-4 sm:p-6">
|
|
||||||
<div>
|
|
||||||
<h2 id="payment_details_heading" className="text-lg leading-6 font-medium text-gray-900">
|
|
||||||
Payment details
|
|
||||||
</h2>
|
|
||||||
<p className="mt-1 text-sm text-gray-500">
|
|
||||||
Update your billing information. Please note that updating your location could affect your tax
|
|
||||||
rates.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="mt-6 grid grid-cols-4 gap-6">
|
|
||||||
<div className="col-span-4 sm:col-span-2">
|
|
||||||
<label htmlFor="first_name" className="block text-sm font-medium text-gray-700">
|
|
||||||
First name
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
name="first_name"
|
|
||||||
id="first_name"
|
|
||||||
autoComplete="cc-given-name"
|
|
||||||
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="col-span-4 sm:col-span-2">
|
|
||||||
<label htmlFor="last_name" className="block text-sm font-medium text-gray-700">
|
|
||||||
Last name
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
name="last_name"
|
|
||||||
id="last_name"
|
|
||||||
autoComplete="cc-family-name"
|
|
||||||
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="col-span-4 sm:col-span-2">
|
|
||||||
<label htmlFor="email_address" className="block text-sm font-medium text-gray-700">
|
|
||||||
Email address
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
name="email_address"
|
|
||||||
id="email_address"
|
|
||||||
autoComplete="email"
|
|
||||||
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="col-span-4 sm:col-span-1">
|
|
||||||
<label htmlFor="expiration_date" className="block text-sm font-medium text-gray-700">
|
|
||||||
Expration date
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
name="expiration_date"
|
|
||||||
id="expiration_date"
|
|
||||||
autoComplete="cc-exp"
|
|
||||||
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
|
|
||||||
placeholder="MM / YY"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="col-span-4 sm:col-span-1">
|
|
||||||
<label htmlFor="security_code" className="flex items-center text-sm font-medium text-gray-700">
|
|
||||||
<span>Security code</span>
|
|
||||||
{/* Heroicon name: solid/question-mark-circle */}
|
|
||||||
<svg
|
|
||||||
className="ml-1 flex-shrink-0 h-5 w-5 text-gray-300"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
fill="currentColor"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
fillRule="evenodd"
|
|
||||||
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
|
|
||||||
clipRule="evenodd"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
name="security_code"
|
|
||||||
id="security_code"
|
|
||||||
autoComplete="cc-csc"
|
|
||||||
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="col-span-4 sm:col-span-2">
|
|
||||||
<label htmlFor="country" className="block text-sm font-medium text-gray-700">
|
|
||||||
Country / Region
|
|
||||||
</label>
|
|
||||||
<select
|
|
||||||
id="country"
|
|
||||||
name="country"
|
|
||||||
autoComplete="country"
|
|
||||||
className="mt-1 block w-full bg-white border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
|
|
||||||
>
|
|
||||||
<option>United States</option>
|
|
||||||
<option>Canada</option>
|
|
||||||
<option>Mexico</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div className="col-span-4 sm:col-span-2">
|
|
||||||
<label htmlFor="postal_code" className="block text-sm font-medium text-gray-700">
|
|
||||||
ZIP / Postal
|
|
||||||
</label>
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
name="postal_code"
|
|
||||||
id="postal_code"
|
|
||||||
autoComplete="postal-code"
|
|
||||||
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="px-4 py-3 bg-gray-50 text-right sm:px-6">
|
|
||||||
<button
|
|
||||||
type="submit"
|
|
||||||
className="bg-gray-800 border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
|
|
||||||
>
|
|
||||||
Save
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</section>
|
|
||||||
{/* Plan */}
|
{/* Plan */}
|
||||||
<section aria-labelledby="plan_heading">
|
<section aria-labelledby="plan_heading">
|
||||||
<form action="#" method="POST">
|
<form action="#" method="POST">
|
||||||
|
|
@ -176,129 +52,55 @@ export default function Payments() {
|
||||||
Plan
|
Plan
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<div className="ml-4 mt-2 flex-shrink-0">
|
|
||||||
<Link href="/plans">
|
|
||||||
<a className="font-medium text-green-600 hover:text-green-500">help me choose a plan</a>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<fieldset>
|
<fieldset>
|
||||||
<legend className="sr-only">Pricing plans</legend>
|
<legend className="sr-only">Pricing plans</legend>
|
||||||
<ul className="relative bg-white rounded-md -space-y-px">
|
<ul className="relative bg-white rounded-md -space-y-px">
|
||||||
<li>
|
{plans.map((plan, index) => (
|
||||||
{/* On: "bg-orange-50 border-orange-200 z-10", Off: "border-gray-200" */}
|
<li key={plan.id}>
|
||||||
<div className="relative border rounded-tl-md rounded-tr-md p-4 flex flex-col md:pl-4 md:pr-6 md:grid md:grid-cols-3">
|
{/* On: "bg-orange-50 border-orange-200 z-10", Off: "border-gray-200" */}
|
||||||
<label className="flex items-center text-sm cursor-pointer">
|
<div
|
||||||
<input
|
className={`relative border ${index === 0 ? "rounded-tl-md rounded-tr-md" : ""} ${
|
||||||
name="pricing_plan"
|
index === plans.length - 1 ? "rounded-bl-md rounded-br-md" : ""
|
||||||
type="radio"
|
} p-4 flex flex-col md:pl-4 md:pr-6 md:grid md:grid-cols-3`}
|
||||||
className="h-4 w-4 text-orange-500 cursor-pointer focus:ring-gray-900 border-gray-300"
|
>
|
||||||
aria-describedby="plan-option-pricing-0 plan-option-limit-0"
|
<label className="flex items-center text-sm cursor-pointer">
|
||||||
defaultChecked
|
<input
|
||||||
/>
|
name="pricing_plan"
|
||||||
<span className="ml-3 font-medium text-gray-900">Free</span>
|
type="radio"
|
||||||
</label>
|
className="h-4 w-4 text-orange-500 cursor-pointer focus:ring-gray-900 border-gray-300"
|
||||||
<p id="plan-option-pricing-0" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-center">
|
aria-describedby="plan-option-pricing-0 plan-option-limit-0"
|
||||||
{/* On: "text-orange-900", Off: "text-gray-900" */}
|
defaultChecked
|
||||||
<span className="font-medium">—</span>
|
/>
|
||||||
|
<span className="ml-3 font-medium text-gray-900">{plan.name}</span>
|
||||||
|
</label>
|
||||||
|
<p id="plan-option-pricing-0" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-center">
|
||||||
|
{/* On: "text-orange-900", Off: "text-gray-900" */}
|
||||||
|
<span className="font-medium">{plan.price ? `$${plan.price} / mo` : "no cost"}</span>
|
||||||
|
{/* On: "text-orange-700", Off: "text-gray-500" */}
|
||||||
|
{/* <span>($290 / yr)</span> */}
|
||||||
|
</p>
|
||||||
{/* On: "text-orange-700", Off: "text-gray-500" */}
|
{/* On: "text-orange-700", Off: "text-gray-500" */}
|
||||||
{/* <span>($290 / yr)</span> */}
|
<p id="plan-option-limit-0" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-right">
|
||||||
</p>
|
{plan.description}
|
||||||
{/* On: "text-orange-700", Off: "text-gray-500" */}
|
</p>
|
||||||
<p id="plan-option-limit-0" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-right">
|
</div>
|
||||||
Unlimited bandwidth with throttled speed
|
</li>
|
||||||
</p>
|
))}
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
{/* On: "bg-orange-50 border-orange-200 z-10", Off: "border-gray-200" */}
|
|
||||||
<div className="relative border border-gray-200 p-4 flex flex-col md:pl-4 md:pr-6 md:grid md:grid-cols-3">
|
|
||||||
<label className="flex items-center text-sm cursor-pointer">
|
|
||||||
<input
|
|
||||||
name="pricing_plan"
|
|
||||||
type="radio"
|
|
||||||
className="h-4 w-4 text-orange-500 cursor-pointer focus:ring-gray-900 border-gray-300"
|
|
||||||
aria-describedby="plan-option-pricing-1 plan-option-limit-1"
|
|
||||||
/>
|
|
||||||
<span className="ml-3 font-medium text-gray-900">Skynet Plus</span>
|
|
||||||
</label>
|
|
||||||
<p id="plan-option-pricing-1" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-center">
|
|
||||||
{/* On: "text-orange-900", Off: "text-gray-900" */}
|
|
||||||
<span className="font-medium">$5 / mo</span>
|
|
||||||
{/* On: "text-orange-700", Off: "text-gray-500" */} <span>($50 / yr)</span>
|
|
||||||
</p>
|
|
||||||
{/* On: "text-orange-700", Off: "text-gray-500" */}
|
|
||||||
<p id="plan-option-limit-1" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-right">
|
|
||||||
1 TB premium bandwidth with full speed
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
{/* On: "bg-orange-50 border-orange-200 z-10", Off: "border-gray-200" */}
|
|
||||||
<div className="relative border border-gray-200 rounded-bl-md rounded-br-md p-4 flex flex-col md:pl-4 md:pr-6 md:grid md:grid-cols-3">
|
|
||||||
<label className="flex items-center text-sm cursor-pointer">
|
|
||||||
<input
|
|
||||||
name="pricing_plan"
|
|
||||||
type="radio"
|
|
||||||
className="h-4 w-4 text-orange-500 cursor-pointer focus:ring-gray-900 border-gray-300"
|
|
||||||
aria-describedby="plan-option-pricing-2 plan-option-limit-2"
|
|
||||||
/>
|
|
||||||
<span className="ml-3 font-medium text-gray-900">Skynet Pro</span>
|
|
||||||
</label>
|
|
||||||
<p id="plan-option-pricing-2" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-center">
|
|
||||||
{/* On: "text-orange-900", Off: "text-gray-900" */}
|
|
||||||
<span className="font-medium">$20 / mo</span>
|
|
||||||
{/* On: "text-orange-700", Off: "text-gray-500" */} <span>($200 / yr)</span>
|
|
||||||
</p>
|
|
||||||
{/* On: "text-orange-700", Off: "text-gray-500" */}
|
|
||||||
<p id="plan-option-limit-2" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-right">
|
|
||||||
5 TB premium bandwidth with full speed
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
{/* On: "bg-orange-50 border-orange-200 z-10", Off: "border-gray-200" */}
|
|
||||||
<div className="relative border border-gray-200 rounded-bl-md rounded-br-md p-4 flex flex-col md:pl-4 md:pr-6 md:grid md:grid-cols-3">
|
|
||||||
<label className="flex items-center text-sm cursor-pointer">
|
|
||||||
<input
|
|
||||||
name="pricing_plan"
|
|
||||||
type="radio"
|
|
||||||
className="h-4 w-4 text-orange-500 cursor-pointer focus:ring-gray-900 border-gray-300"
|
|
||||||
aria-describedby="plan-option-pricing-2 plan-option-limit-2"
|
|
||||||
/>
|
|
||||||
<span className="ml-3 font-medium text-gray-900">Skynet Extreme</span>
|
|
||||||
</label>
|
|
||||||
<p id="plan-option-pricing-2" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-center">
|
|
||||||
{/* On: "text-orange-900", Off: "text-gray-900" */}
|
|
||||||
<span className="font-medium">$80 / mo</span>
|
|
||||||
{/* On: "text-orange-700", Off: "text-gray-500" */} <span>($800 / yr)</span>
|
|
||||||
</p>
|
|
||||||
{/* On: "text-orange-700", Off: "text-gray-500" */}
|
|
||||||
<p id="plan-option-limit-2" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-right">
|
|
||||||
20 TB premium bandwidth with full speed
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</fieldset>
|
</fieldset>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
{/* Enabled: "bg-orange-500", Not Enabled: "bg-gray-200" */}
|
<span className="text-sm font-medium text-gray-900">Currently active plan:</span>
|
||||||
<button
|
<span className="text-sm ml-3">Free</span>
|
||||||
type="button"
|
<span className="text-sm text-gray-500 ml-3">
|
||||||
className="bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-colors ease-in-out duration-200"
|
(next payment $5 on 10/10/2020 -{" "}
|
||||||
aria-pressed="true"
|
<a
|
||||||
aria-labelledby="annual-billing-label"
|
href="/api/square/subscriptions/cancel"
|
||||||
>
|
className="text-sm text-green-600 hover:text-green-900"
|
||||||
<span className="sr-only">Use setting</span>
|
>
|
||||||
{/* Enabled: "translate-x-5", Not Enabled: "translate-x-0" */}
|
cancel
|
||||||
<span
|
</a>
|
||||||
aria-hidden="true"
|
)
|
||||||
className="translate-x-0 inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
<span className="ml-3" id="annual-billing-label">
|
|
||||||
<span className="text-sm font-medium text-gray-900">Annual billing </span>
|
|
||||||
<span className="text-sm text-gray-500">(Save 10%)</span>
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -307,7 +109,7 @@ export default function Payments() {
|
||||||
type="submit"
|
type="submit"
|
||||||
className="bg-gray-800 border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
|
className="bg-gray-800 border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
|
||||||
>
|
>
|
||||||
Save
|
Subscribe to selected plan
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -334,6 +136,12 @@ export default function Payments() {
|
||||||
>
|
>
|
||||||
Date
|
Date
|
||||||
</th>
|
</th>
|
||||||
|
<th
|
||||||
|
scope="col"
|
||||||
|
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||||
|
>
|
||||||
|
Invoice
|
||||||
|
</th>
|
||||||
<th
|
<th
|
||||||
scope="col"
|
scope="col"
|
||||||
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||||
|
|
@ -344,7 +152,7 @@ export default function Payments() {
|
||||||
scope="col"
|
scope="col"
|
||||||
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
|
||||||
>
|
>
|
||||||
Amount
|
Status
|
||||||
</th>
|
</th>
|
||||||
{/*
|
{/*
|
||||||
`relative` is added here due to a weird bug in Safari that causes `sr-only` headings to introduce overflow on the body on mobile.
|
`relative` is added here due to a weird bug in Safari that causes `sr-only` headings to introduce overflow on the body on mobile.
|
||||||
|
|
@ -358,19 +166,29 @@ export default function Payments() {
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody className="bg-white divide-y divide-gray-200">
|
<tbody className="bg-white divide-y divide-gray-200">
|
||||||
<tr>
|
{invoices &&
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">1/1/2020</td>
|
invoices.map((invoice) => (
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
<tr key={invoice.id}>
|
||||||
Business Plan - Annual Billing
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
|
||||||
</td>
|
{dayjs(invoice.createdAt).format("DD/MM/YYYY")}
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">CA$109.00</td>
|
</td>
|
||||||
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||||
<a href="#" className="text-orange-600 hover:text-orange-900">
|
{invoice.invoiceNumber}
|
||||||
View receipt
|
</td>
|
||||||
</a>
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{invoice.title}</td>
|
||||||
</td>
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{invoice.status}</td>
|
||||||
</tr>
|
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||||
{/* More items... */}
|
<a
|
||||||
|
href={invoice.publicUrl}
|
||||||
|
className="text-green-600 hover:text-green-900"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
>
|
||||||
|
View invoice
|
||||||
|
</a>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Reference in New Issue