From e6c256fc492704224e82cf19a866937eb96a498e Mon Sep 17 00:00:00 2001 From: wilfordgrimley <2397930+WilfordGrimley@users.noreply.github.com> Date: Sat, 11 Jul 2026 03:47:54 +0000 Subject: [PATCH] Promote PringlePrints to a full ordering tab on the Print page Gives PringlePrints the same structure and visual weight as the MakePlayingCards and NotMPC tabs (3-step numbered instructions), replacing the earlier single-line footer mention. Steps are based on pringleprints.ca's site copy and flagged with a TODO for manual verification. Co-Authored-By: Claude Sonnet 5 --- frontend/src/common/constants.ts | 2 +- frontend/src/components/PringlePrintsLink.tsx | 7 + .../src/features/export/FinishedMyProject.tsx | 135 +++++++++++------- 3 files changed, 91 insertions(+), 53 deletions(-) create mode 100644 frontend/src/components/PringlePrintsLink.tsx diff --git a/frontend/src/common/constants.ts b/frontend/src/common/constants.ts index 474d78f74..c18d9810f 100644 --- a/frontend/src/common/constants.ts +++ b/frontend/src/common/constants.ts @@ -12,6 +12,7 @@ export const MakePlayingCards = "MakePlayingCards.com"; export const MakePlayingCardsURL = "https://www.makeplayingcards.com"; export const NotMPC = "NotMPC.com"; export const NotMPCURL = "https://www.notmpc.com"; +export const PringlePrints = "PringlePrints"; export const PringlePrintsURL = "https://pringleprints.ca"; export const Card: CardType = CardTypeSchema.Card; @@ -48,7 +49,6 @@ export const NavbarLogoHeight = 40; // pixels export const ContentMaxWidth = 1200; // pixels - aligns with bootstrap's large breakpoint export const ModalHeaderHeight = 68.7; export const ModalFooterHeight = 71; -export const OtherPrintShopsHeight = 32; // pixels export const MinimumDPI = 0; export const MaximumDPI = 1500; diff --git a/frontend/src/components/PringlePrintsLink.tsx b/frontend/src/components/PringlePrintsLink.tsx new file mode 100644 index 000000000..04860a94b --- /dev/null +++ b/frontend/src/components/PringlePrintsLink.tsx @@ -0,0 +1,7 @@ +import { PringlePrints, PringlePrintsURL } from "@/common/constants"; + +export const PringlePrintsLink = () => ( + + {PringlePrints} + +); diff --git a/frontend/src/features/export/FinishedMyProject.tsx b/frontend/src/features/export/FinishedMyProject.tsx index fcd370644..f0863e11b 100644 --- a/frontend/src/features/export/FinishedMyProject.tsx +++ b/frontend/src/features/export/FinishedMyProject.tsx @@ -13,8 +13,6 @@ import { NavbarHeight, NavPillButtonHeight, NavUnderlineButtonHeight, - OtherPrintShopsHeight, - PringlePrintsURL, } from "@/common/constants"; import { useAppDispatch, useAppSelector } from "@/common/types"; import { Coffee } from "@/components/Coffee"; @@ -23,6 +21,7 @@ import { MakePlayingCardsLink } from "@/components/MakePlayingCardsLink"; import { NavBanner, NavBannerItem } from "@/components/NavBanner"; import { NotMPCLink } from "@/components/NotMPCLink"; import { OverflowCol } from "@/components/OverflowCol"; +import { PringlePrintsLink } from "@/components/PringlePrintsLink"; import { useClientSearchContext } from "@/features/clientSearch/clientSearchContext"; import { useLocalFilesDirectoryHandle } from "@/features/clientSearch/clientSearchHooks"; import { useDownloadDesktopTool } from "@/features/download/downloadDesktopTool"; @@ -345,66 +344,98 @@ const NotMPCInstructions = () => { ); }; -const OtherPrintShops = () => ( - - Other Print Shops:{" "} - - PringlePrints - {" "} - — small print shop, Canada only - -); +// TODO: verify this PringlePrints ordering flow is accurate and up to date — +// steps below (and the batch size / finish options) were derived from a +// one-time read of pringleprints.ca's site copy, not a manual walkthrough of +// their order process. Pricing and service area in particular may have +// changed since. +const PringlePrintsInstructions = () => { + return ( + +
+ Nice work! There are three simple steps for turning your project into an + order with . +
+ + +

Prepare Your Print File

+

+ Head to the PDF tab and generate a print-ready PDF or PNG of + your project at 300 DPI or higher. +

+ + +

Choose Your Finish & Batch Size

+

+ Head over to and pick a cardstock finish and a + batch size for your order. +

+ + +

Email Your Order

+

+ Send your file — or a shared link if it's large — + along with your finish and batch size, using their order form or + email. They'll confirm receipt and share a timeline and payment + details. +

+ + +
+
+ And that's all there is to it!{" "} + +
+ + ); +}; -type FinishedMyProjectExportType = "mpc" | "notmpc" | "pdf"; +type FinishedMyProjectExportType = "mpc" | "notmpc" | "pringleprints" | "pdf"; export function FinishedMyProject() { const [key, setKey] = useState("mpc"); const navBannerItems: Array> = [ { key: "mpc", label: "MakePlayingCards", bootstrapIconName: "bag-check" }, { key: "notmpc", label: "NotMPC", bootstrapIconName: "box-seam" }, + { + key: "pringleprints", + label: "PringlePrints", + bootstrapIconName: "geo-alt", + }, { key: "pdf", label: "PDF", bootstrapIconName: "file-pdf" }, ]; return ( - <> - { - if (k) setKey(k as FinishedMyProjectExportType); - }} + { + if (k) setKey(k as FinishedMyProjectExportType); + }} + > + + - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + ); }