@jarwizz/create-jarshop 0.1.1 → 0.1.3

package/dist/template/src/vendure-config.ts

@@ -3,7 +3,6 @@ import {
   DefaultSchedulerPlugin,
   DefaultSearchPlugin,
   VendureConfig,
-  dummyPaymentHandler,
 } from "@vendure/core";
 import { AssetServerPlugin } from "@vendure/asset-server-plugin";
 import { DashboardPlugin } from "@vendure/dashboard/plugin";
@@ -13,10 +12,31 @@ import {
   defaultEmailHandlers,
 } from "@vendure/email-plugin";
 import { GraphiqlPlugin } from "@vendure/graphiql-plugin";
+import {
+  JarShopCheckoutPlugin,
+  jarShopCodPaymentHandler,
+} from "./plugins/jarshop-checkout/index.js";
 import "dotenv/config";
 import path from "node:path";
 
 const isDev = process.env.APP_ENV === "dev";
+const storefrontUrl = new URL(
+  process.env.JARSHOP_STOREFRONT_URL ?? "http://localhost:3001",
+);
+
+function requiredEnvironment(name: string): string {
+  const value = process.env[name]?.trim();
+  if (!value) throw new Error(`${name} is required outside development`);
+  return value;
+}
+
+function storefrontAccountUrl(locale: string, path: string): string {
+  const supportedLocale = locale === "en" ? "en" : "sk";
+  return new URL(
+    `/${supportedLocale}/account/${path}`,
+    storefrontUrl,
+  ).toString();
+}
 
 export const config: VendureConfig = {
   apiOptions: {
@@ -28,11 +48,23 @@ export const config: VendureConfig = {
   },
   authOptions: {
     tokenMethod: ["bearer", "cookie"],
+    requireVerification: true,
+    sessionDuration: "30d",
     superadminCredentials: {
       identifier: process.env.SUPERADMIN_USERNAME ?? "",
       password: process.env.SUPERADMIN_PASSWORD ?? "",
     },
-    cookieOptions: { secret: process.env.COOKIE_SECRET ?? "" },
+    cookieOptions: {
+      name: {
+        admin: "jarshop-admin-session",
+        shop: "jarshop-shop-session",
+      },
+      secret: process.env.COOKIE_SECRET ?? "",
+      httpOnly: true,
+      path: "/",
+      sameSite: "lax",
+      secure: !isDev,
+    },
   },
   dbConnectionOptions: {
     type: "postgres",
@@ -46,8 +78,9 @@ export const config: VendureConfig = {
     username: process.env.DB_USERNAME,
     password: process.env.DB_PASSWORD,
   },
-  paymentOptions: { paymentMethodHandlers: [dummyPaymentHandler] },
+  paymentOptions: { paymentMethodHandlers: [jarShopCodPaymentHandler] },
   plugins: [
+    JarShopCheckoutPlugin,
     GraphiqlPlugin.init(),
     AssetServerPlugin.init({
       route: "assets",
@@ -57,13 +90,45 @@ export const config: VendureConfig = {
     DefaultJobQueuePlugin.init({ useDatabaseForBuffer: true }),
     DefaultSearchPlugin.init({ bufferUpdates: false, indexStockStatus: true }),
     EmailPlugin.init({
-      devMode: true,
-      outputPath: path.join(__dirname, "../static/email/test-emails"),
-      route: "mailbox",
-      handlers: defaultEmailHandlers,
+      globalTemplateVars: (ctx) => ({
+        fromAddress:
+          process.env.JARSHOP_EMAIL_SMTP_FROM ?? "JarShop <noreply@localhost>",
+        verifyEmailAddressUrl: storefrontAccountUrl(
+          ctx.languageCode,
+          "verify/complete",
+        ),
+        passwordResetUrl: storefrontAccountUrl(
+          ctx.languageCode,
+          "password-reset/callback",
+        ),
+      }),
+      // JarShop owns confirmation delivery through its durable outbox. Retain
+      // Vendure's account and password handlers but prevent a second receipt.
+      handlers: defaultEmailHandlers.filter(
+        (handler) => handler.type !== "order-confirmation",
+      ),
       templateLoader: new FileBasedTemplateLoader(
         path.join(__dirname, "../static/email/templates"),
       ),
+      ...(isDev
+        ? {
+            devMode: true as const,
+            outputPath: path.join(__dirname, "../static/email/test-emails"),
+            route: "mailbox",
+          }
+        : {
+            transport: () => ({
+              type: "smtp" as const,
+              host: requiredEnvironment("JARSHOP_EMAIL_SMTP_HOST"),
+              port: Number(requiredEnvironment("JARSHOP_EMAIL_SMTP_PORT")),
+              secure:
+                requiredEnvironment("JARSHOP_EMAIL_SMTP_SECURE") === "true",
+              auth: {
+                user: requiredEnvironment("JARSHOP_EMAIL_SMTP_USERNAME"),
+                pass: requiredEnvironment("JARSHOP_EMAIL_SMTP_PASSWORD"),
+              },
+            }),
+          }),
     }),
     DashboardPlugin.init({
       route: "dashboard",

package/dist/template/static/email/templates/email-verification/body.hbs

@@ -1,17 +1,17 @@
-{{> header title="Verify Your Email Address" }}
+{{> header title="Complete Your JarShop Account" }}
 
 <mj-section background-color="#fafafa">
     <mj-column>
         <mj-text color="#525252">
-            Thank you for creating an account. Click the button below to verify this email address and
-            complete the registration process:
+            Click the button below to complete your account. If you have previously shopped with this
+            email address, this activates your sign-in; otherwise it verifies your new account:
         </mj-text>
 
         <mj-button font-family="Helvetica"
                    background-color="#f45e43"
                    color="white"
                    href="{{ verifyEmailAddressUrl }}?token={{ verificationToken }}">
-            Verify Me!
+            Complete account
         </mj-button>
     </mj-column>
 </mj-section>

package/dist/template/storefront/app/[locale]/[slug]/add-to-cart-form.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import Link from "next/link";
+import { useActionState } from "react";
+
+import type { CommerceLocale } from "../../../lib/commerce";
+import type { AddToCartState } from "../../../lib/cart";
+import { createTranslator } from "../../../lib/i18n";
+
+interface AddToCartFormProps {
+  readonly locale: CommerceLocale;
+  readonly action: (
+    previousState: AddToCartState,
+    formData: FormData,
+  ) => Promise<AddToCartState>;
+}
+
+const initialState: AddToCartState = { status: "idle" };
+
+export function AddToCartForm({ locale, action }: AddToCartFormProps) {
+  const [state, formAction, pending] = useActionState(action, initialState);
+  const t = createTranslator(locale);
+
+  return (
+    <div className="add-to-cart">
+      <form action={formAction}>
+        <button type="submit" disabled={pending}>
+          {pending ? "…" : t("product.addToCart")}
+        </button>
+      </form>
+      {state.status === "added" ? (
+        <div className="cart-toast" role="status">
+          <span>{t("product.addedToCart")}</span>
+          <Link href={`/${locale}/cart`}>{t("product.viewCart")}</Link>
+        </div>
+      ) : null}
+      {state.status === "error" ? (
+        <p className="form-error" role="alert">
+          {state.message}
+        </p>
+      ) : null}
+    </div>
+  );
+}

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

@@ -1,49 +1,58 @@
 import { getProduct } from "../../../lib/commerce";
+import { addToCart } from "../../../lib/cart";
+import { createTranslator, parseLocale } from "../../../lib/i18n";
+import { AddToCartForm } from "./add-to-cart-form";
 
 interface ProductPageProps {
   params: Promise<{ locale: string; slug: string }>;
 }
 
-const labels = {
-  sk: {
-    back: "Späť",
-    notFound: "Produkt sa nenašiel.",
-    inStock: "Skladom",
-    outOfStock: "Vypredané",
-  },
-  en: {
-    back: "Back",
-    notFound: "Product not found.",
-    inStock: "In stock",
-    outOfStock: "Out of stock",
-  },
-} as const;
-
 export default async function ProductPage({ params }: ProductPageProps) {
   const { locale, slug } = await params;
-  const language = locale === "en" ? "en" : "sk";
+  const language = parseLocale(locale);
   const result = await getProduct(slug, language);
-  const copy = labels[language];
+  const t = createTranslator(language);
 
   if (!result.ok || !result.data) {
     return (
       <main lang={language}>
-        <p>{copy.notFound}</p>
+        <p>{t("product.notFound")}</p>
       </main>
     );
   }
 
   return (
-    <main lang={language}>
-      <a href={`/${language}`}>← {copy.back}</a>
-      <h1>{result.data.name}</h1>
-      <p>{result.data.description}</p>
-      <ul>
+    <main className="page product-page" lang={language}>
+      <a className="back-link" href={`/${language}`}>
+        ← {t("product.back")}
+      </a>
+      <div className="product-page__intro">
+        <h1>{result.data.name}</h1>
+        <p>{result.data.description}</p>
+      </div>
+      <ul className="variant-list">
         {result.data.variants.map((variant) => (
           <li key={variant.id}>
-            {variant.name}: {(variant.price.amount / 100).toFixed(2)}{" "}
-            {variant.price.currencyCode} —{" "}
-            {variant.inStock ? copy.inStock : copy.outOfStock}
+            <div>
+              <strong>{variant.name}</strong>
+              <span className="price">
+                {(variant.price.amount / 100).toFixed(2)}{" "}
+                {variant.price.currencyCode}
+              </span>
+            </div>
+            <span
+              className={
+                variant.inStock ? "stock stock--in" : "stock stock--out"
+              }
+            >
+              {variant.inStock ? t("product.inStock") : t("product.outOfStock")}
+            </span>
+            {variant.inStock ? (
+              <AddToCartForm
+                action={addToCart.bind(null, language, variant.id)}
+                locale={language}
+              />
+            ) : null}
           </li>
         ))}
       </ul>

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

@@ -0,0 +1,44 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { useActionState } from "react";
+
+import type { AccountActionState } from "../../../lib/account";
+
+interface AccountMutationFormProps {
+  action: (
+    previousState: AccountActionState,
+    formData: FormData,
+  ) => Promise<AccountActionState>;
+  children?: ReactNode;
+  className?: string;
+  errorMessage: string;
+  submitLabel: string;
+  successMessage: string;
+}
+
+export function AccountMutationForm({
+  action,
+  children,
+  className,
+  errorMessage,
+  submitLabel,
+  successMessage,
+}: AccountMutationFormProps) {
+  const [state, formAction, pending] = useActionState(action, {
+    status: "idle",
+  });
+
+  return (
+    <form action={formAction} className={className}>
+      {children}
+      {state.status === "success" ? (
+        <p role="status">{successMessage}</p>
+      ) : null}
+      {state.status === "error" ? <p role="alert">{errorMessage}</p> : null}
+      <button disabled={pending} type="submit">
+        {submitLabel}
+      </button>
+    </form>
+  );
+}

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

@@ -0,0 +1,65 @@
+"use client";
+
+import { useActionState } from "react";
+
+import type { AccountActionState } from "../../../lib/account";
+import type { CommerceLocale } from "../../../lib/commerce";
+import { createTranslator } from "../../../lib/i18n";
+
+interface ChangePasswordFormProps {
+  locale: CommerceLocale;
+  action: (
+    previousState: AccountActionState,
+    formData: FormData,
+  ) => Promise<AccountActionState>;
+}
+
+export function ChangePasswordForm({
+  locale,
+  action,
+}: ChangePasswordFormProps) {
+  const [state, formAction, pending] = useActionState(action, {
+    status: "idle",
+  });
+  const t = createTranslator(locale);
+
+  return (
+    <form action={formAction} className="checkout-form">
+      <label>
+        {t("account.currentPassword")}
+        <input
+          autoComplete="current-password"
+          name="currentPassword"
+          required
+          type="password"
+        />
+      </label>
+      <label>
+        {t("account.newPassword")}
+        <input
+          autoComplete="new-password"
+          name="newPassword"
+          required
+          type="password"
+        />
+      </label>
+      {state.status === "success" ? (
+        <p role="status">{t("account.passwordChanged")}</p>
+      ) : null}
+      {state.status === "error" ? (
+        <p role="alert">
+          {t(
+            state.reason === "passwordInvalid"
+              ? "account.passwordInvalid"
+              : state.reason === "invalidCredentials"
+                ? "account.invalidCredentials"
+                : "account.signInFailed",
+          )}
+        </p>
+      ) : null}
+      <button disabled={pending} type="submit">
+        {t("account.saveProfile")}
+      </button>
+    </form>
+  );
+}

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

@@ -0,0 +1,60 @@
+"use client";
+
+import { useActionState } from "react";
+
+import type { LoginActionState } from "../../../../lib/account";
+import type { CommerceLocale } from "../../../../lib/commerce";
+import { createTranslator } from "../../../../lib/i18n";
+
+interface LoginFormProps {
+  locale: CommerceLocale;
+  action: (
+    previousState: LoginActionState,
+    formData: FormData,
+  ) => Promise<LoginActionState>;
+}
+
+export function LoginForm({ locale, action }: LoginFormProps) {
+  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("account.password")}
+        <input
+          autoComplete="current-password"
+          name="password"
+          required
+          type="password"
+        />
+      </label>
+      {state.status === "error" ? (
+        <p role="alert">
+          {t(
+            state.reason === "invalidCredentials"
+              ? "account.invalidCredentials"
+              : "account.signInFailed",
+          )}
+        </p>
+      ) : null}
+      <button disabled={pending} type="submit">
+        {t("account.signIn")}
+      </button>
+      <p>
+        <a href={`/${locale}/account/register`}>{t("account.register")}</a>
+      </p>
+      <p>
+        <a href={`/${locale}/account/password-reset`}>
+          {t("account.requestPasswordReset")}
+        </a>
+      </p>
+    </form>
+  );
+}

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

@@ -0,0 +1,23 @@
+import { login } from "../../../../lib/account";
+import { createTranslator, parseLocale } from "../../../../lib/i18n";
+import { LoginForm } from "./login-form";
+
+interface LoginPageProps {
+  params: Promise<{ locale: string }>;
+}
+
+export default async function LoginPage({ params }: LoginPageProps) {
+  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.signIn")}</h1>
+      </div>
+      <LoginForm locale={language} action={login.bind(null, language)} />
+    </main>
+  );
+}

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

@@ -0,0 +1,215 @@
+import { redirect } from "next/navigation";
+import Link from "next/link";
+
+import {
+  addAddress,
+  changePassword,
+  getSignedInAccountProfile,
+  logout,
+  removeAddress,
+  updateAddress,
+  updateProfile,
+} from "../../../lib/account";
+import { createTranslator, parseLocale } from "../../../lib/i18n";
+import { ChangePasswordForm } from "./change-password-form";
+import { AccountMutationForm } from "./account-mutation-form";
+
+interface AccountPageProps {
+  params: Promise<{ locale: string }>;
+  searchParams: Promise<{ orders?: string | string[] }>;
+}
+
+export default async function AccountPage({
+  params,
+  searchParams,
+}: AccountPageProps) {
+  const { locale } = await params;
+  const query = await searchParams;
+  const language = parseLocale(locale);
+  const requestedOrders =
+    typeof query.orders === "string" ? Number(query.orders) : 10;
+  const orderTake =
+    Number.isInteger(requestedOrders) && requestedOrders > 0
+      ? Math.min(requestedOrders, 1000)
+      : 10;
+  const account = await getSignedInAccountProfile(language, orderTake);
+  if (!account) redirect(`/${language}/account/login`);
+  const t = createTranslator(language);
+
+  return (
+    <main className="page" lang={language}>
+      <div className="page-heading">
+        <p className="eyebrow">JarShop starter</p>
+        <h1>{t("account.title")}</h1>
+      </div>
+      <section className="cart-summary">
+        <h2>{t("account.profile")}</h2>
+        <AccountMutationForm
+          action={updateProfile.bind(null, language)}
+          className="checkout-form"
+          errorMessage={t("account.saveFailed")}
+          submitLabel={t("account.saveProfile")}
+          successMessage={t("account.saved")}
+        >
+          <label>
+            {t("checkout.firstName")}
+            <input defaultValue={account.firstName} name="firstName" required />
+          </label>
+          <label>
+            {t("checkout.lastName")}
+            <input defaultValue={account.lastName} name="lastName" required />
+          </label>
+          <label>
+            {t("account.phone")}
+            <input
+              defaultValue={account.phoneNumber}
+              name="phoneNumber"
+              type="tel"
+            />
+          </label>
+          <p>
+            {t("account.email")}: {account.emailAddress}
+          </p>
+        </AccountMutationForm>
+        <form action={logout.bind(null, language)}>
+          <button type="submit">{t("account.signOut")}</button>
+        </form>
+      </section>
+      <section className="cart-summary">
+        <h2>{t("account.password")}</h2>
+        <ChangePasswordForm
+          locale={language}
+          action={changePassword.bind(null, language)}
+        />
+      </section>
+      <section className="cart-summary">
+        <h2>{t("account.addresses")}</h2>
+        {account.addresses.map((address) => (
+          <article key={address.id}>
+            <AccountMutationForm
+              action={updateAddress.bind(null, language, address.id)}
+              className="checkout-form"
+              errorMessage={t("account.saveFailed")}
+              submitLabel={t("account.saveProfile")}
+              successMessage={t("account.saved")}
+            >
+              <label>
+                {t("account.fullName")}
+                <input defaultValue={address.fullName} name="fullName" />
+              </label>
+              <label>
+                {t("account.street")}
+                <input defaultValue={address.streetLine1} name="streetLine1" />
+              </label>
+              <label>
+                {t("account.city")}
+                <input defaultValue={address.city} name="city" />
+              </label>
+              <label>
+                {t("account.postalCode")}
+                <input defaultValue={address.postalCode} name="postalCode" />
+              </label>
+              <label>
+                {t("account.country")}
+                <input defaultValue={address.countryCode} name="countryCode" />
+              </label>
+              <label>
+                {t("account.phone")}
+                <input
+                  defaultValue={address.phoneNumber}
+                  name="phoneNumber"
+                  type="tel"
+                />
+              </label>
+              <label>
+                <input
+                  defaultChecked={address.defaultShippingAddress}
+                  name="defaultShippingAddress"
+                  type="checkbox"
+                />{" "}
+                {t("account.defaultShippingAddress")}
+              </label>
+              <label>
+                <input
+                  defaultChecked={address.defaultBillingAddress}
+                  name="defaultBillingAddress"
+                  type="checkbox"
+                />{" "}
+                {t("account.defaultBillingAddress")}
+              </label>
+            </AccountMutationForm>
+            <AccountMutationForm
+              action={removeAddress.bind(null, language, address.id)}
+              errorMessage={t("account.saveFailed")}
+              submitLabel={t("account.removeAddress")}
+              successMessage={t("account.addressRemoved")}
+            />
+          </article>
+        ))}
+        <AccountMutationForm
+          action={addAddress.bind(null, language)}
+          className="checkout-form"
+          errorMessage={t("account.saveFailed")}
+          submitLabel={t("account.addAddress")}
+          successMessage={t("account.addressAdded")}
+        >
+          <label>
+            {t("account.fullName")}
+            <input name="fullName" />
+          </label>
+          <label>
+            {t("account.street")}
+            <input name="streetLine1" required />
+          </label>
+          <label>
+            {t("account.city")}
+            <input name="city" />
+          </label>
+          <label>
+            {t("account.postalCode")}
+            <input name="postalCode" />
+          </label>
+          <label>
+            {t("account.country")}
+            <input defaultValue="SK" name="countryCode" required />
+          </label>
+          <label>
+            {t("account.phone")}
+            <input name="phoneNumber" type="tel" />
+          </label>
+          <label>
+            <input name="defaultShippingAddress" type="checkbox" />{" "}
+            {t("account.defaultShippingAddress")}
+          </label>
+          <label>
+            <input name="defaultBillingAddress" type="checkbox" />{" "}
+            {t("account.defaultBillingAddress")}
+          </label>
+        </AccountMutationForm>
+      </section>
+      <section className="cart-summary">
+        <h2>{t("account.orders")}</h2>
+        {account.orders.length === 0 ? (
+          <p>{t("account.noOrders")}</p>
+        ) : (
+          <ul>
+            {account.orders.map((order) => (
+              <li key={order.id}>
+                {order.code} — {order.state} —{" "}
+                {new Intl.NumberFormat(language === "sk" ? "sk-SK" : "en-GB", {
+                  style: "currency",
+                  currency: order.total.currencyCode,
+                }).format(order.total.amount / 100)}
+              </li>
+            ))}
+          </ul>
+        )}
+        {account.orders.length < account.orderTotalItems ? (
+          <Link href={`/${language}/account?orders=${orderTake + 10}`}>
+            {t("account.loadMoreOrders")}
+          </Link>
+        ) : null}
+      </section>
+    </main>
+  );
+}