ProductDetails.jsx

1import { HELP, LIVE_DAYS } from "../config/shop.ts";2import { buyHref, cdnUrl, money, primaryName } from "../lib/shop.ts";3import { AddToBag } from "./AddToBag.jsx";4import { Downloads } from "./Downloads.jsx";5import { Icon } from "./Icon.jsx";6import { Life } from "./Life.jsx";7import { PrimaryPills } from "./PrimaryPills.jsx";8import { Reviews } from "./Reviews.jsx";9import { VariantPills } from "./VariantPills.jsx";1011function Drop({ name, children }) {12  return (13    <details className="drop">14      <summary>15        <span>{name}</span>16        <Icon name="expand_more" extra="small" />17      </summary>18      <div className="inside">{children}</div>19    </details>20  );21}2223export function ProductDetails({ product, one, primary, onPrimary, variant, size, onSize, image, buyPrefix, printful, shop, tiles, now, review, preview = false, dead = false }) {24  const shut = preview || dead || !one.available;25  return (26    <div className="details">27      <h1>{product.title}</h1>28      <p className="fine">{`Design ${product.design}`}</p>29      <p className="price">{money(variant ? variant.price : one.price)}</p>30      <PrimaryPills picked={primary} onPick={onPrimary} />31      <VariantPills variants={one.variants} picked={size} onPick={onSize} />32      <div className="buy">33        <AddToBag34          disabled={shut}35          line={{36            id: variant ? variant.id : "",37            key: one.key,38            title: `${primaryName(primary)} ${product.title}`,39            size: variant ? variant.size : "",40            price: variant ? variant.price : one.price,41            image,42          }}43        />44        <a className="pill wide" href={shut ? undefined : buyHref(buyPrefix, variant ? variant.id : "")} aria-disabled={shut ? "true" : undefined} data-buy rel="noopener">45          Buy now46        </a>47      </div>48      {preview ? <p className="fine pending">{`In batch ${product.design}, not released. The whole batch goes on sale at once.`}</p> : <Life born={one.released} bar now={now} />}49      <p className="fine">50        <a href={shop}>{`More ${product.title}`}</a>51      </p>52      <Drop name="Size Guide">53        <p className="fine">54          Please use Printful's official size guide on their website. Tap <a href={printful} rel="noopener">View on Printful</a>.55        </p>56      </Drop>57      <Drop name="Shipping">58        <p className="fine">Manufacturing takes 2 to 5 working days. Shipping takes 5 to 10 working days. Bags always ship separately.</p>59        <p className="fine">60          Printful prints and ships every order. See their <a href={HELP.delivery} rel="noopener">delivery times</a>, <a href={HELP.shipping} rel="noopener">shipping rates</a>, the <a href={HELP.countries} rel="noopener">countries they do not ship to</a>, <a href={HELP.customs} rel="noopener">who pays customs</a> and <a href={HELP.updates} rel="noopener">current delays</a>.61        </p>62      </Drop>63      <Drop name="Disclaimers">64        <p className="fine">Printful cannot guarantee perfect placement of designs. The product you receive may look a little different from the mockups. Seams cut through the pattern and can show thin white lines.</p>65        <p className="fine">Designs are printed on white polyester by sublimation. The inside of a garment stays white. Colours on fabric differ slightly from colours on a screen.</p>66        <p className="fine">67          Read Printful's <a href={HELP.disclaimers} rel="noopener">printing disclaimers</a> and <a href={HELP.aop} rel="noopener">how all-over printing works</a>.68        </p>69      </Drop>70      <Reviews review={review} printful={printful} />71      <Downloads design={product.design} primary={primary} tiles={tiles} />72      {one.files.length ? (73        <Drop name="Printfiles">74          <p className="fine more">75            {one.files.map((name) => (76              <a key={name} href={cdnUrl(one.key, name)} download>77                {name}78              </a>79            ))}80          </p>81        </Drop>82      ) : null}83      <Drop name="Expiration">84        <p className="fine">85          {`Every product here lives one lunar month, ${LIVE_DAYS} days from the day its batch went live. When its moon has passed, the reaper deletes the whole batch: the products, their printfiles and the design's tiles, and nobody prints it again. The countdown above is the truth. Two days means two days.`}86        </p>87      </Drop>88      <a className="pill wide" href={printful} rel="noopener">89        <Icon name="open_in_new" />90        <span>View on Printful</span>91      </a>92    </div>93  );94}