diff --git a/frontend/src/common/constants.ts b/frontend/src/common/constants.ts index 9c10ce84c..474d78f74 100644 --- a/frontend/src/common/constants.ts +++ b/frontend/src/common/constants.ts @@ -10,6 +10,9 @@ export const CornerRadiusMM = 2.5; export const ProjectName = "ProxyPrints"; 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 PringlePrintsURL = "https://pringleprints.ca"; export const Card: CardType = CardTypeSchema.Card; export const Cardback: CardType = CardTypeSchema.Cardback; @@ -45,6 +48,7 @@ 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/NotMPCLink.tsx b/frontend/src/components/NotMPCLink.tsx new file mode 100644 index 000000000..2841676ac --- /dev/null +++ b/frontend/src/components/NotMPCLink.tsx @@ -0,0 +1,7 @@ +import { NotMPC, NotMPCURL } from "@/common/constants"; + +export const NotMPCLink = () => ( + + {NotMPC} + +); diff --git a/frontend/src/features/export/FinishedMyProject.tsx b/frontend/src/features/export/FinishedMyProject.tsx index 346131fed..fcd370644 100644 --- a/frontend/src/features/export/FinishedMyProject.tsx +++ b/frontend/src/features/export/FinishedMyProject.tsx @@ -13,12 +13,15 @@ import { NavbarHeight, NavPillButtonHeight, NavUnderlineButtonHeight, + OtherPrintShopsHeight, + PringlePrintsURL, } from "@/common/constants"; import { useAppDispatch, useAppSelector } from "@/common/types"; import { Coffee } from "@/components/Coffee"; import { RightPaddedIcon } from "@/components/icon"; import { MakePlayingCardsLink } from "@/components/MakePlayingCardsLink"; import { NavBanner, NavBannerItem } from "@/components/NavBanner"; +import { NotMPCLink } from "@/components/NotMPCLink"; import { OverflowCol } from "@/components/OverflowCol"; import { useClientSearchContext } from "@/features/clientSearch/clientSearchContext"; import { useLocalFilesDirectoryHandle } from "@/features/clientSearch/clientSearchHooks"; @@ -298,40 +301,110 @@ const MakePlayingCardsInstructions = () => { ); }; -type FinishedMyProjectExportType = "mpc" | "pdf"; +// TODO: verify this NotMPC ordering flow is accurate and up to date — steps +// below were derived from a one-time read of notmpc.com's site copy, not a +// manual walkthrough of their order process. +const NotMPCInstructions = () => { + return ( + +
+ Nice work! There are three simple steps for turning your project into an + order with . +
+ + +

Export Your Card Images

+

+ Head back to the Export menu and choose Card Images to + download all your card images to your computer. You'll upload + these to NotMPC in the next step. +

+
+ +

Set Up Your Order on NotMPC

+

+ Head over to and choose your card size, then select + your card stock, quantity and finishing options. +

+
+ +

Upload Your Images & Checkout

+

+ Open NotMPC's online card maker and drag-and-drop your + downloaded images onto the card fronts and backs. Preview your + design, then add it to your cart and check out. +

+
+
+
+
+ And that's all there is to it!{" "} + +
+
+ ); +}; + +const OtherPrintShops = () => ( + + Other Print Shops:{" "} + + PringlePrints + {" "} + — small print shop, Canada only + +); + +type FinishedMyProjectExportType = "mpc" | "notmpc" | "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: "pdf", label: "PDF", bootstrapIconName: "file-pdf" }, ]; return ( - { - if (k) setKey(k as FinishedMyProjectExportType); - }} - > - - + { + if (k) setKey(k as FinishedMyProjectExportType); + }} > - - - - - - - - - - + + + + + + + + + + + + + + + + + ); }