@jarwizz/create-jarshop 0.1.1 → 0.1.2

package/dist/template/storefront/app/[locale]/account/password-reset/callback/route.ts

@@ -0,0 +1,33 @@
+import { NextRequest, NextResponse } from "next/server";
+
+import {
+  PASSWORD_RESET_TOKEN_COOKIE,
+  passwordResetTokenCookieOptions,
+} from "../../../../../lib/password-reset-token";
+import { parseLocale } from "../../../../../lib/i18n";
+
+interface PasswordResetCallbackContext {
+  params: Promise<{ locale: string }>;
+}
+
+export async function GET(
+  request: NextRequest,
+  context: PasswordResetCallbackContext,
+): Promise<NextResponse> {
+  const locale = parseLocale((await context.params).locale);
+  const resetUrl = new URL(
+    `/${locale}/account/password-reset/complete`,
+    request.url,
+  );
+  const requestUrl = new URL(`/${locale}/account/password-reset`, request.url);
+  const token = request.nextUrl.searchParams.get("token")?.trim();
+  if (!token) return NextResponse.redirect(requestUrl);
+
+  const response = NextResponse.redirect(resetUrl);
+  response.cookies.set(
+    PASSWORD_RESET_TOKEN_COOKIE,
+    token,
+    passwordResetTokenCookieOptions,
+  );
+  return response;
+}

package/dist/template/storefront/app/[locale]/account/password-reset/complete/page.tsx

@@ -0,0 +1,27 @@
+import { resetPassword } from "../../../../../lib/account";
+import { createTranslator, parseLocale } from "../../../../../lib/i18n";
+import { ResetPasswordForm } from "../password-reset-forms";
+
+interface CompletePasswordResetPageProps {
+  params: Promise<{ locale: string }>;
+}
+
+export default async function CompletePasswordResetPage({
+  params,
+}: CompletePasswordResetPageProps) {
+  const language = parseLocale((await params).locale);
+  const t = createTranslator(language);
+
+  return (
+    <main className="page" lang={language}>
+      <div className="page-heading">
+        <p className="eyebrow">JarShop starter</p>
+        <h1>{t("account.resetPassword")}</h1>
+      </div>
+      <ResetPasswordForm
+        locale={language}
+        resetAction={resetPassword.bind(null, language)}
+      />
+    </main>
+  );
+}

package/dist/template/storefront/app/[locale]/account/password-reset/page.tsx

@@ -0,0 +1,37 @@
+import { requestPasswordReset } from "../../../../lib/account";
+import { createTranslator, parseLocale } from "../../../../lib/i18n";
+import { PasswordResetRequestForm } from "./password-reset-forms";
+import { redirect } from "next/navigation";
+
+interface PasswordResetPageProps {
+  params: Promise<{ locale: string }>;
+  searchParams: Promise<{ token?: string | string[] }>;
+}
+
+export default async function PasswordResetPage({
+  params,
+  searchParams,
+}: PasswordResetPageProps) {
+  const { locale } = await params;
+  const { token } = await searchParams;
+  const language = parseLocale(locale);
+  if (typeof token === "string" && token.trim()) {
+    redirect(
+      `/${language}/account/password-reset/callback?token=${encodeURIComponent(token)}`,
+    );
+  }
+  const t = createTranslator(language);
+
+  return (
+    <main className="page" lang={language}>
+      <div className="page-heading">
+        <p className="eyebrow">JarShop starter</p>
+        <h1>{t("account.resetPassword")}</h1>
+      </div>
+      <PasswordResetRequestForm
+        locale={language}
+        requestAction={requestPasswordReset.bind(null, language)}
+      />
+    </main>
+  );
+}

package/dist/template/storefront/app/[locale]/account/password-reset/password-reset-forms.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import { useActionState } from "react";
+
+import type { AccountActionState } from "../../../../lib/account";
+import type { CommerceLocale } from "../../../../lib/commerce";
+import { createTranslator } from "../../../../lib/i18n";
+
+interface PasswordResetRequestFormProps {
+  locale: CommerceLocale;
+  requestAction: (
+    previousState: AccountActionState,
+    formData: FormData,
+  ) => Promise<AccountActionState>;
+}
+
+interface ResetPasswordFormProps {
+  locale: CommerceLocale;
+  resetAction: (
+    previousState: AccountActionState,
+    formData: FormData,
+  ) => Promise<AccountActionState>;
+}
+
+export function PasswordResetRequestForm({
+  locale,
+  requestAction,
+}: PasswordResetRequestFormProps) {
+  const [requestState, requestFormAction, requestPending] = useActionState(
+    requestAction,
+    { status: "idle" },
+  );
+  const t = createTranslator(locale);
+
+  return (
+    <form action={requestFormAction} className="checkout-form">
+      <label>
+        {t("account.email")}
+        <input autoComplete="email" name="emailAddress" required type="email" />
+      </label>
+      {requestState.status === "success" ? (
+        <p role="status">{t("account.resetSent")}</p>
+      ) : null}
+      {requestState.status === "error" ? (
+        <p role="alert">{t("account.signInFailed")}</p>
+      ) : null}
+      <button disabled={requestPending} type="submit">
+        {t("account.requestPasswordReset")}
+      </button>
+    </form>
+  );
+}
+
+export function ResetPasswordForm({
+  locale,
+  resetAction,
+}: ResetPasswordFormProps) {
+  const [state, formAction, pending] = useActionState(resetAction, {
+    status: "idle",
+  });
+  const t = createTranslator(locale);
+
+  return (
+    <form action={formAction} className="checkout-form">
+      <label>
+        {t("account.newPassword")}
+        <input
+          autoComplete="new-password"
+          name="password"
+          required
+          type="password"
+        />
+      </label>
+      <label>
+        {t("account.confirmNewPassword")}
+        <input
+          autoComplete="new-password"
+          name="confirmPassword"
+          required
+          type="password"
+        />
+      </label>
+      {state.status === "error" ? (
+        <p role="alert">
+          {t(
+            state.reason === "passwordMismatch"
+              ? "account.passwordMismatch"
+              : state.reason === "passwordInvalid"
+                ? "account.passwordInvalid"
+                : "account.invalidToken",
+          )}
+        </p>
+      ) : null}
+      <button disabled={pending} type="submit">
+        {t("account.resetPassword")}
+      </button>
+    </form>
+  );
+}

package/dist/template/storefront/app/[locale]/account/register/page.tsx

@@ -0,0 +1,23 @@
+import { register } from "../../../../lib/account";
+import { createTranslator, parseLocale } from "../../../../lib/i18n";
+import { RegisterForm } from "./register-form";
+
+interface RegisterPageProps {
+  params: Promise<{ locale: string }>;
+}
+
+export default async function RegisterPage({ params }: RegisterPageProps) {
+  const { locale } = await params;
+  const language = parseLocale(locale);
+  const t = createTranslator(language);
+
+  return (
+    <main className="page" lang={language}>
+      <div className="page-heading">
+        <p className="eyebrow">JarShop starter</p>
+        <h1>{t("account.register")}</h1>
+      </div>
+      <RegisterForm locale={language} action={register.bind(null, language)} />
+    </main>
+  );
+}

package/dist/template/storefront/app/[locale]/account/register/register-form.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { useActionState } from "react";
+
+import type { AccountActionState } from "../../../../lib/account";
+import type { CommerceLocale } from "../../../../lib/commerce";
+import { createTranslator } from "../../../../lib/i18n";
+
+interface RegisterFormProps {
+  locale: CommerceLocale;
+  action: (
+    previousState: AccountActionState,
+    formData: FormData,
+  ) => Promise<AccountActionState>;
+}
+
+export function RegisterForm({ locale, action }: RegisterFormProps) {
+  const [state, formAction, pending] = useActionState(action, {
+    status: "idle",
+  });
+  const t = createTranslator(locale);
+
+  return (
+    <form action={formAction} className="checkout-form">
+      <label>
+        {t("account.email")}
+        <input autoComplete="email" name="emailAddress" required type="email" />
+      </label>
+      <label>
+        {t("checkout.firstName")}
+        <input autoComplete="given-name" name="firstName" required />
+      </label>
+      <label>
+        {t("checkout.lastName")}
+        <input autoComplete="family-name" name="lastName" required />
+      </label>
+      <label>
+        {t("account.phone")}
+        <input autoComplete="tel" name="phoneNumber" type="tel" />
+      </label>
+      <label>
+        {t("account.password")}
+        <input
+          autoComplete="new-password"
+          name="password"
+          required
+          type="password"
+        />
+      </label>
+      {state.status === "success" ? (
+        <p role="status">{t("account.registrationSent")}</p>
+      ) : null}
+      {state.status === "error" ? (
+        <p role="alert">
+          {t(
+            state.reason === "passwordInvalid"
+              ? "account.passwordInvalid"
+              : "account.signInFailed",
+          )}
+        </p>
+      ) : null}
+      <button disabled={pending} type="submit">
+        {t("account.register")}
+      </button>
+    </form>
+  );
+}

package/dist/template/storefront/app/[locale]/account/verify/complete/route.ts

@@ -0,0 +1,33 @@
+import { NextRequest, NextResponse } from "next/server";
+
+import { completeAccountVerification } from "../../../../../lib/account";
+import { createCommerceSessionStore } from "../../../../../lib/commerce-session";
+import { parseLocale } from "../../../../../lib/i18n";
+
+interface VerifyAccountCallbackContext {
+  params: Promise<{ locale: string }>;
+}
+
+export async function GET(
+  request: NextRequest,
+  context: VerifyAccountCallbackContext,
+): Promise<NextResponse> {
+  const locale = parseLocale((await context.params).locale);
+  const accountUrl = new URL(`/${locale}/account`, request.url);
+  const invalidUrl = new URL(`/${locale}/account/verify`, request.url);
+  const response = NextResponse.redirect(accountUrl);
+  const session = createCommerceSessionStore({
+    get: (name) => request.cookies.get(name),
+    set: (name, value, options) => response.cookies.set(name, value, options),
+    delete: (name) => response.cookies.delete(name),
+  });
+  const token = request.nextUrl.searchParams.get("token")?.trim() ?? "";
+  const verified = await completeAccountVerification(
+    locale,
+    session,
+    token,
+    request.headers,
+  );
+
+  return verified ? response : NextResponse.redirect(invalidUrl);
+}

package/dist/template/storefront/app/[locale]/account/verify/page.tsx

@@ -0,0 +1,41 @@
+import { createTranslator, parseLocale } from "../../../../lib/i18n";
+import { redirect } from "next/navigation";
+import { refreshVerification } from "../../../../lib/account";
+import { RefreshVerificationForm } from "./refresh-form";
+
+interface VerifyPageProps {
+  params: Promise<{ locale: string }>;
+  searchParams: Promise<{ token?: string | string[] }>;
+}
+
+export default async function VerifyPage({
+  params,
+  searchParams,
+}: VerifyPageProps) {
+  const { locale } = await params;
+  const { token } = await searchParams;
+  const language = parseLocale(locale);
+  const t = createTranslator(language);
+
+  if (typeof token === "string" && token) {
+    redirect(
+      `/${language}/account/verify/complete?token=${encodeURIComponent(token)}`,
+    );
+  }
+
+  return (
+    <main className="page" lang={language}>
+      <div className="page-heading">
+        <p className="eyebrow">JarShop starter</p>
+        <h1>{t("account.verify")}</h1>
+      </div>
+      <p role="alert">{t("account.invalidToken")}</p>
+      <RefreshVerificationForm
+        action={refreshVerification.bind(null, language)}
+        emailLabel={t("account.email")}
+        sentMessage={t("account.verificationSent")}
+        submitLabel={t("account.resendVerification")}
+      />
+    </main>
+  );
+}

package/dist/template/storefront/app/[locale]/account/verify/refresh-form.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { useActionState } from "react";
+
+import type { AccountActionState } from "../../../../lib/account";
+
+interface RefreshVerificationFormProps {
+  action: (
+    previousState: AccountActionState,
+    formData: FormData,
+  ) => Promise<AccountActionState>;
+  emailLabel: string;
+  sentMessage: string;
+  submitLabel: string;
+}
+
+export function RefreshVerificationForm(props: RefreshVerificationFormProps) {
+  const [state, formAction, pending] = useActionState(props.action, {
+    status: "idle",
+  });
+  return (
+    <form action={formAction} className="checkout-form">
+      <label>
+        {props.emailLabel}
+        <input name="emailAddress" required type="email" />
+      </label>
+      {state.status === "success" ? (
+        <p role="status">{props.sentMessage}</p>
+      ) : null}
+      <button disabled={pending} type="submit">
+        {props.submitLabel}
+      </button>
+    </form>
+  );
+}

package/dist/template/storefront/app/[locale]/cart/page.tsx

@@ -0,0 +1,78 @@
+import { getCart, removeCartLine, updateCartLine } from "../../../lib/cart";
+import { createTranslator, parseLocale } from "../../../lib/i18n";
+
+interface CartPageProps {
+  params: Promise<{ locale: string }>;
+}
+
+function formatMoney(amount: number, currencyCode: string): string {
+  return `${(amount / 100).toFixed(2)} ${currencyCode}`;
+}
+
+export default async function CartPage({ params }: CartPageProps) {
+  const { locale } = await params;
+  const language = parseLocale(locale);
+  const t = createTranslator(language);
+  const cart = await getCart(language);
+
+  return (
+    <main className="page" lang={language}>
+      <div className="page-heading">
+        <p className="eyebrow">JarShop starter</p>
+        <h1>{t("cart.title")}</h1>
+      </div>
+      {!cart || cart.lines.length === 0 ? (
+        <p>{t("cart.empty")}</p>
+      ) : (
+        <>
+          <div className="cart-layout">
+            <ul className="cart-lines">
+              {cart.lines.map((line) => (
+                <li key={line.id}>
+                  <a href={`/${language}/${line.productSlug}`}>
+                    {line.productName} — {line.variantName}
+                  </a>
+                  <p>{formatMoney(line.linePrice, line.currencyCode)}</p>
+                  <form action={updateCartLine.bind(null, language, line.id)}>
+                    <label>
+                      {t("cart.quantity")}
+                      <input
+                        name="quantity"
+                        type="number"
+                        min="0"
+                        defaultValue={line.quantity}
+                      />
+                    </label>
+                    <button type="submit">{t("cart.update")}</button>
+                  </form>
+                  <form action={removeCartLine.bind(null, language, line.id)}>
+                    <button type="submit">{t("cart.remove")}</button>
+                  </form>
+                </li>
+              ))}
+            </ul>
+            <aside className="cart-summary">
+              <dl>
+                <div>
+                  <dt>{t("cart.subtotal")}</dt>
+                  <dd>{formatMoney(cart.subtotal, cart.currencyCode)}</dd>
+                </div>
+                <div>
+                  <dt>{t("cart.shipping")}</dt>
+                  <dd>{formatMoney(cart.shipping, cart.currencyCode)}</dd>
+                </div>
+                <div>
+                  <dt>{t("cart.total")}</dt>
+                  <dd>{formatMoney(cart.total, cart.currencyCode)}</dd>
+                </div>
+              </dl>
+              <a className="button-link" href={`/${language}/checkout`}>
+                {t("cart.checkout")}
+              </a>
+            </aside>
+          </div>
+        </>
+      )}
+    </main>
+  );
+}

package/dist/template/storefront/app/[locale]/checkout/checkout-form.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import { useActionState, useState } from "react";
+
+import type { CommerceLocale } from "../../../lib/commerce";
+import type {
+  CheckoutActionState,
+  CheckoutShippingMethod,
+} from "../../../lib/checkout";
+import { createTranslator } from "../../../lib/i18n";
+
+interface CheckoutFormProps {
+  locale: CommerceLocale;
+  action: (
+    previousState: CheckoutActionState,
+    formData: FormData,
+  ) => Promise<CheckoutActionState>;
+}
+
+export function CheckoutForm({ locale, action }: CheckoutFormProps) {
+  const [state, formAction, pending] = useActionState(action, { ok: true });
+  const [shippingMethod, setShippingMethod] =
+    useState<CheckoutShippingMethod>("pickup");
+  const t = createTranslator(locale);
+  const courier = shippingMethod === "courier";
+
+  return (
+    <form action={formAction} className="checkout-form">
+      <label>
+        {t("checkout.email")}
+        <input name="emailAddress" type="email" required />
+      </label>
+      <label>
+        {t("checkout.firstName")}
+        <input name="firstName" required />
+      </label>
+      <label>
+        {t("checkout.lastName")}
+        <input name="lastName" required />
+      </label>
+      <label>
+        {t("checkout.phone")}
+        <input name="phoneNumber" type="tel" required />
+      </label>
+      <fieldset>
+        <legend>{t("checkout.shippingMethod")}</legend>
+        <label>
+          <input
+            name="shippingMethodCode"
+            type="radio"
+            value="pickup"
+            checked={shippingMethod === "pickup"}
+            onChange={() => setShippingMethod("pickup")}
+          />
+          {t("checkout.pickup")}
+        </label>
+        <label>
+          <input
+            name="shippingMethodCode"
+            type="radio"
+            value="courier"
+            checked={shippingMethod === "courier"}
+            onChange={() => setShippingMethod("courier")}
+          />
+          {t("checkout.courier")}
+        </label>
+      </fieldset>
+      {courier ? (
+        <fieldset>
+          <legend>{t("checkout.courier")}</legend>
+          <label>
+            {t("checkout.street")}
+            <input name="streetLine1" required />
+          </label>
+          <label>
+            {t("checkout.city")}
+            <input name="city" required />
+          </label>
+          <label>
+            {t("checkout.postalCode")}
+            <input name="postalCode" required />
+          </label>
+          <label>
+            {t("checkout.country")}
+            <select name="countryCode" defaultValue="SK" required>
+              <option value="SK">{t("checkout.slovakia")}</option>
+            </select>
+          </label>
+        </fieldset>
+      ) : null}
+      <p>
+        {courier ? t("checkout.courierSummary") : t("checkout.pickupSummary")}
+      </p>
+      {!state.ok ? (
+        <p role="alert">
+          {state.errorCode === "PRICE_CHANGED"
+            ? t("checkout.priceChanged")
+            : state.errorCode === "INSUFFICIENT_STOCK"
+              ? t("checkout.insufficientStock")
+              : state.message}
+        </p>
+      ) : null}
+      <label>
+        <input name="termsAccepted" type="checkbox" required />{" "}
+        {t("checkout.terms")}
+      </label>
+      <button type="submit" disabled={pending}>
+        {courier ? t("checkout.submitCourier") : t("checkout.submitPickup")}
+      </button>
+    </form>
+  );
+}

package/dist/template/storefront/app/[locale]/checkout/page.tsx

@@ -0,0 +1,44 @@
+import { placeOrder } from "../../../lib/checkout";
+import { getCart } from "../../../lib/cart";
+import { createTranslator, parseLocale } from "../../../lib/i18n";
+import { CheckoutForm } from "./checkout-form";
+
+interface CheckoutPageProps {
+  params: Promise<{ locale: string }>;
+}
+
+export default async function CheckoutPage({ params }: CheckoutPageProps) {
+  const { locale } = await params;
+  const language = parseLocale(locale);
+  const attemptId = crypto.randomUUID();
+  const cart = await getCart(language);
+  const t = createTranslator(language);
+
+  return (
+    <main className="page checkout-page" lang={language}>
+      <div className="page-heading">
+        <p className="eyebrow">JarShop starter</p>
+        <h1>{t("checkout.title")}</h1>
+      </div>
+      <CheckoutForm
+        locale={language}
+        action={placeOrder.bind(
+          null,
+          language,
+          attemptId,
+          cart
+            ? {
+                currencyCode: cart.currencyCode,
+                subtotalWithTax: cart.subtotal,
+                lines: cart.lines.map((line) => ({
+                  lineId: line.id,
+                  quantity: line.quantity,
+                  linePriceWithTax: line.linePrice,
+                })),
+              }
+            : null,
+        )}
+      />
+    </main>
+  );
+}

package/dist/template/storefront/app/[locale]/checkout/success/page.tsx

@@ -0,0 +1,23 @@
+import { createTranslator, parseLocale } from "../../../../lib/i18n";
+import { getOrderConfirmation } from "../../../../lib/confirmation";
+
+interface CheckoutSuccessProps {
+  params: Promise<{ locale: string }>;
+}
+
+export default async function CheckoutSuccess({
+  params,
+}: CheckoutSuccessProps) {
+  const { locale } = await params;
+  const language = parseLocale(locale);
+  const t = createTranslator(language);
+  const confirmation = await getOrderConfirmation(language);
+  return (
+    <main lang={language}>
+      <h1>{t("success.title")}</h1>
+      <p>
+        {t("success.orderCode")}: {confirmation?.orderCode ?? "—"}
+      </p>
+    </main>
+  );
+}