REPLIT TASK — Remove “Unlock (no attribution) – $4.99” from Icons
Goal

Delete the “Unlock (no attribution) – $4.99” CTA from the Icons UI (cards and any modals).

Keep: Free download + Attribution box for non-Pro users; “No attribution required” note for Pro users.

Do NOT alter Stripe/cart for other features; this change is UI-only for icons.

1) Files to edit (frontend)

client/src/pages/**/Icons.tsx (or IconsPage.tsx / icons/index.tsx – whichever renders the library grid)

If there’s a separate icon modal component, edit that too:

client/src/components/icons/IconCard.tsx (or similar)

client/src/components/icons/IconModal.tsx (if present)

If unsure, search repo for these strings to find the button:

Unlock (no attribution)

unlock

no attribution

icon_pack

unlockButton

2) Replace the action block on each icon card
Before (the problematic part)

There will be something like:

<button className="...">
  Unlock (no attribution) – $4.99
</button>

After (keep only copy/download + attribution)

Make the actions for each icon look like this. (This assumes we already have useIconEntitlement, AttributionNotice, and buildAttribution available.)

import { useIconEntitlement } from "@/hooks/useIconEntitlement";
import AttributionNotice from "@/components/AttributionNotice";
import { buildAttribution } from "@/utils/iconAttribution";

// inside the map(icon => ...) render:
const ent = useIconEntitlement(icon.id);

<div className="mt-2 grid grid-cols-2 gap-2">
  <button
    className="inline-flex items-center justify-center gap-2 px-3 py-2 text-sm rounded-lg border border-border hover:bg-muted"
    onClick={() => {
      try {
        const safeColored = sanitizeSvgClient(applySvgColor(icon.svg || "", color));
        copyToClipboard(safeColored);
      } catch (e) {
        console.error("SVG sanitization failed:", e);
      }
    }}
  >
    <Copy className="w-4 h-4" /> Copy SVG
  </button>

  <button
    className="inline-flex items-center justify-center gap-2 px-3 py-2 text-sm rounded-lg border border-border hover:bg-muted"
    onClick={() => {
      try {
        const safeColored = sanitizeSvgClient(applySvgColor(icon.svg || "", color));
        downloadTextFile(`${icon.name}.svg`, safeColored);
      } catch (e) {
        console.error("SVG sanitization failed:", e);
      }
    }}
  >
    <Download className="w-4 h-4" /> Download
  </button>
</div>

{/* Attribution box for non-Pro users */}
{!ent.loading && !ent.licensed && (
  <div className="mt-2">
    <AttributionNotice {...buildAttribution(icon.name)} />
  </div>
)}

{/* Optional note for Pro users */}
{!ent.loading && ent.licensed && (
  <div className="mt-2 text-xs text-emerald-600">No attribution required</div>
)}


Important: Remove any button or component that says Unlock / no attribution / $4.99. Do not show any purchase UI for icons.

3) If there’s a modal for icon details

Apply the same rule inside the modal’s action area:

Keep Copy SVG and Download buttons.

Show AttributionNotice when !ent.licensed.

Do not render an unlock/purchase button.

4) Remove any add-to-cart/Stripe hooks for icons (UI only)

Search and delete any icon-specific cart code such as:

addItem({ kind: "price", lookupKey: "icon_pack_*", ... })
addItem({ kind: "icon_pack", ... })


Icons remain free with attribution; Pro removes attribution via entitlement check. Other products (photos, mockups, subscriptions) stay untouched.

5) Acceptance criteria

No element with text “Unlock (no attribution)” appears on any Icons UI.

Non-Pro:

Sees Copy SVG + Download.

Sees AttributionNotice with the copy-attribution button.

Pro:

Sees Copy SVG + Download.

Sees “No attribution required” note (or nothing extra).

Stock Photos/Mockups checkout/cart remain unchanged.