Template
Rami BitarandClaude Opus 5
64af00e702
The assistant only ever renders prose, links and the odd list, but Streamdown's plugin set dragged in shiki, mermaid and katex — and streamdown core declares mermaid as a hard dependency, so dropping the plugins alone would have left it installed. Rendering now runs on the same unified pipeline Streamdown used internally, minus the plugin surface: remark-parse -> remark-gfm -> remark-rehype -> rehype-sanitize -> hast-util-to-jsx-runtime. GFM, streaming repair and the link-safety hook all survive; fenced code renders as plain <pre>. Net -264/+101 packages. remend now runs only while a part is still streaming. On settled text it reads `*$89*` as an unclosed italic — the `$` throws off its closing-delimiter scan — and appends a stray `*` that parses as an empty bullet. Italic prices are ordinary storefront copy, so that would have shown up in production. Route-relative links go through next/link in the same tab; sending a shopper to a product page in a new tab would strand the conversation behind it. Only external destinations get the confirmation dialog. code-block.tsx and tool.tsx were the sole users of shiki and had no importers, so both are gone. Also folded in two unrelated changes that were already in the tree: the loader move out of app/components/ui, and dropping the fade on the command palette so it opens instantly. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01KuySwKLSF4uEPpZjHkdHBP
101 lines
2.9 KiB
TypeScript
101 lines
2.9 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { SHOPIFY_STORE_DOMAIN } from '@/services/shopify/client';
|
|
import ShopPayLogo from '@/components/shopify/shop-pay-logo';
|
|
import { Loader } from '@/components/ui/loader';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
export interface ShopPayVariant {
|
|
id: string;
|
|
quantity?: number;
|
|
}
|
|
|
|
interface ShopPayButtonProps {
|
|
variants: ShopPayVariant[];
|
|
disabled?: boolean;
|
|
loading?: boolean;
|
|
className?: string;
|
|
/** Used when no permalink can be built (missing domain or unusable IDs). */
|
|
onFallbackClick?: () => void;
|
|
}
|
|
|
|
// Cart permalinks need the bare numeric ID; the Storefront API returns GIDs.
|
|
function toNumericVariantId(id: string): string | null {
|
|
const trimmed = id.trim();
|
|
const gid = trimmed.match(/^gid:\/\/shopify\/ProductVariant\/(\d+)/);
|
|
if (gid) return gid[1];
|
|
return /^\d+$/.test(trimmed) ? trimmed : null;
|
|
}
|
|
|
|
function toStoreUrl(domain?: string): string | null {
|
|
if (!domain) return null;
|
|
try {
|
|
return new URL(domain.startsWith('http') ? domain : `https://${domain}`)
|
|
.origin;
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
// https://{shop}/cart/{variantId}:{qty},{variantId}:{qty}?payment=shop_pay
|
|
// Loads the cart and drops the buyer straight into the Shop Pay checkout.
|
|
export function buildShopPayUrl(variants: ShopPayVariant[]): string | null {
|
|
const storeUrl = toStoreUrl(SHOPIFY_STORE_DOMAIN);
|
|
if (!storeUrl || variants.length === 0) return null;
|
|
|
|
const lines: string[] = [];
|
|
for (const { id, quantity = 1 } of variants) {
|
|
const numericId = toNumericVariantId(id);
|
|
if (!numericId || !Number.isInteger(quantity) || quantity < 1) return null;
|
|
lines.push(`${numericId}:${quantity}`);
|
|
}
|
|
|
|
return `${storeUrl}/cart/${lines.join(',')}?payment=shop_pay`;
|
|
}
|
|
|
|
const BUTTON_CLASSES =
|
|
'flex h-11 w-full cursor-pointer items-center justify-center rounded-md bg-shop px-4 text-white transition-colors hover:bg-shop/85 disabled:cursor-not-allowed disabled:opacity-50';
|
|
|
|
const ShopPayButton: React.FC<ShopPayButtonProps> = ({
|
|
variants,
|
|
disabled = false,
|
|
loading = false,
|
|
className = '',
|
|
onFallbackClick,
|
|
}) => {
|
|
const shopPayUrl = buildShopPayUrl(variants);
|
|
const contents = (
|
|
<>
|
|
<span className="sr-only">Buy with</span>
|
|
{loading ? <Loader size={16} /> : <ShopPayLogo />}
|
|
</>
|
|
);
|
|
|
|
// An anchor keeps the checkout URL visible, openable in a new tab, and
|
|
// navigable without JS; the button only stands in when there's no URL.
|
|
if (shopPayUrl && !disabled) {
|
|
return (
|
|
<a
|
|
href={shopPayUrl}
|
|
className={`${BUTTON_CLASSES} ${className}`.trim()}
|
|
>
|
|
{contents}
|
|
</a>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Button
|
|
type="button"
|
|
onClick={onFallbackClick}
|
|
disabled={disabled || (!shopPayUrl && !onFallbackClick)}
|
|
className={`${BUTTON_CLASSES} ${className}`.trim()}
|
|
>
|
|
{contents}
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
export default ShopPayButton;
|