Frontend Dev Guide

Subscription gating, legacy exemptions, and edit gates — for all three MarketPush apps.

What is isLegacy?

When we launched subscription plans on each app, many users already had data. It would be unfair to suddenly disable their existing recipes, cars, or maps just because they're now over the free-tier limit. So we introduced a cutoff date — anything created before that date is "legacy" and is permanently exempt from limit enforcement.

The flag is computed by the backend on every read by comparing the entity's createdAt (or updatedAt for Blog Recipes posts) against a hardcoded cutoff date. It is returned in API responses for the frontend to use — but it is never sent by the client and you cannot change it.

What legacy exemption means in practice

• Legacy entities are never deactivated or disabled by the backend during a plan downgrade.
• Legacy entities are not counted against the user's plan limit — e.g. a legacy car does not eat into the 5-vehicle free quota.
• Legacy entities can always be re-published / re-activated even if the limit is otherwise full.
• The frontend should show a visual indicator (e.g. a "Legacy" badge) so users understand why their old content behaves differently.

General Rule: When to Allow Edits

Across all three apps the logic follows the same pattern. Always check in this order:

🍽️

Blog Recipes

isLegacy on Posts

In Blog Recipes the relevant entity is the Post — which represents a recipe being attached to a blog post. A Post is legacy when its updatedAt is before 2026-05-09.

isLegacy is never stored in Firestore. The backend computes it on every read and injects it into the API response. Do not send it back when creating or updating a post.

{
  "postId": "abc-123",
  "recipeId": "rec-456",
  "active": true,
  "isLegacy": true,  // ← exempt from limits
  "createdAt": "2026-04-01T...",
  "updatedAt": "2026-05-01T..."
}

{
  "postId": "def-789",
  "recipeId": "rec-101",
  "active": true,
  // isLegacy absent → false
  "createdAt": "2026-06-01T...",
  "updatedAt": "2026-06-01T..."
}

What to show / hide based on isLegacy

Edit Gates — Decision Table

Code Examples

import { Post, Recipe, Subscription } from "./types";

// Returns true if the user can attach/reactivate this recipe on this post.
export function canAttachRecipe(
  subscription: Pick<Subscription, "reachedLimits">,
  existingPost?: Pick<Post, "isLegacy">,
): boolean {
  // Legacy posts are always exempt
  if (existingPost?.isLegacy) return true;

  // Otherwise check the plan limit
  return !subscription.reachedLimits["attached-recipes"];
}

function PostRow({ post, recipe, subscription }) {
  const allowed = canAttachRecipe(subscription, post);

  return (
    <tr>
      <td>{post.postId}</td>
      <td>
        {post.isLegacy && (
          <span className="badge legacy" title="Created before pricing — always exempt">
            Legacy
          </span>
        )}
      </td>
      <td>
        <button
          disabled={!allowed}
          title={!allowed ? "Upgrade your plan to attach more recipes" : ""}
          onClick={() => reactivatePost(post.postId)}
        >
          Reactivate
        </button>
        {!allowed && !post.isLegacy && (
          <a href="/upgrade">Upgrade plan</a>
        )}
      </td>
    </tr>
  );
}

🚗

Car Dealer

isLegacy on Vehicles & Sellers

Both ListedCar and SellerProfile can be legacy. The cutoff is 2026-03-26, based on createdAt. Like Blog Recipes, the flag is response-only and never stored in Firestore.

Car Dealer has four gated operations — each has its own limit and its own isLegacy bypass:

Plan tiers quick reference

Edit Gates — Decision Table

Code Examples

interface VehiclePermissions {
  canCreate: boolean;
  canPublish: (car: { isLegacy?: boolean }) => boolean;
  limitMessage: string;
  vehicleLimit: number;
  currentCount: number;
}

export function useVehiclePermissions(
  checkCreate: CanCreateVehicleResponse,
  checkPublish: CanPublishVehicleResponse,
): VehiclePermissions {
  return {
    canCreate: checkCreate.allowed,
    canPublish: (car) => car.isLegacy || checkPublish.allowed,
    limitMessage: checkPublish.message,
    vehicleLimit: checkPublish.vehicleLimit,
    currentCount: checkPublish.publishedCount,
  };
}

function CarCard({ car, permissions }) {
  const publishAllowed = permissions.canPublish(car);

  return (
    <div className="car-card">
      <h3>{car.carDetails.carModel}</h3>

      {car.isLegacy && (
        <span className="badge legacy">Legacy</span>
      )}

      <button
        disabled={!publishAllowed && car.carStatus !== "PUBLISHED"}
        onClick={() => publishCar(car.carId)}
      >
        Publish
      </button>

      {!publishAllowed && !car.isLegacy && (
        <p className="limit-warning">
          {permissions.currentCount} / {permissions.vehicleLimit} published.
          <a href="/upgrade"> Upgrade to publish more.</a>
        </p>
      )}
    </div>
  );
}

🗺️

World Map

isLegacy on Maps

World Map is the only app where isLegacy is persisted in Firestore. It is set to false on every new map and is never flipped back. The cutoff is 2026-03-30.

World Map also has a second dimension for limits: how many countries a single map contains. Both limits must be checked independently.

{
  "mapId": "map-001",
  "mapStatus": "PUBLISHED",
  "isLegacy": true,
  "numberOfHighlightedCountries": 45
}

{
  "mapId": "map-099",
  "mapStatus": "DISABLED",
  "isLegacy": false,
  "numberOfHighlightedCountries": 8
}

Plan tiers quick reference

Edit Gates — Decision Table

Code Examples

interface Subscription {
  reachedLimits: Record<string, boolean>;
  creditAvailabilities: Record<string, number>;
}

export function canPublishMap(
  map: { isLegacy: boolean },
  subscription: Subscription,
): boolean {
  if (map.isLegacy) return true;  // exempt — always publishable
  return !subscription.reachedLimits["maps"];
}

export function canAddCountry(
  currentCount: number,
  subscription: Subscription,
): boolean {
  const limit = subscription.creditAvailabilities["countries-per-map"];
  if (limit === Infinity || limit === -1) return true; // unlimited plan
  return currentCount < limit;
}

function MapEditor({ map, subscription }) {
  const countriesLimit = subscription.creditAvailabilities["countries-per-map"];
  const count = map.numberOfHighlightedCountries;
  const atCountryLimit = !canAddCountry(count, subscription);
  const publishAllowed = canPublishMap(map, subscription);

  return (
    <div>
      <h2>{map.mapName}</h2>

      {map.isLegacy && (
        <span className="badge legacy">Legacy</span>
      )}

      </* Live countries counter */>
      <p className={atCountryLimit ? "warn" : ""}>
        {count} / {countriesLimit === -1 ? "∞" : countriesLimit} countries
      </p>

      <button
        disabled={atCountryLimit}
        title={atCountryLimit ? "Upgrade to highlight more countries" : ""}
      >
        + Add Country
      </button>

      <button
        disabled={!publishAllowed}
        onClick={() => publishMap(map.mapId)}
      >
        Publish
      </button>

      {!publishAllowed && !map.isLegacy && (
        <a href="/upgrade">Upgrade to publish more maps</a>
      )}
    </div>
  );
}

MarketPush Apps · Internal dev guide · Generated 2026-05-11