Table setup for mobile responsive pricing schema in sanity.io

plan.js

export default {
  name: "plan",
  type: "document",
  title: "Pricing Plan",
  fields: [
    {
      name: "title",
      title: "Title",
      type: "string",
    },
    {
      name: "cost",
      title: "Cost",
      type: "string",
    },
    {
      name: "costType",
      title: "Cost Type",
      type: "string",
    },
    {
      name: "description",
      title: "Description",
      type: "string",
    },
    {
      name: "featuresValues",
      title: "Features Values",
      type: "array",
      of: [{ type: "planFeatureValue" }],
    },
  ],
}

planFeature.js

export default {
  name: "planFeature",
  type: "document",
  title: "Plan Feature",
  fields: [
    {
      name: "title",
      title: "Title",
      type: "string",
    },
  ],
}

planFeatureCategory.js

export default {
  name: "planFeatureCategory",
  type: "document",
  title: "Plan Feature Category",
  fields: [
    {
      name: "title",
      title: "Title",
      type: "string",
    },

    {
      name: "features",
      title: "Features",
      type: "listOfFeatures",
    },
  ],
}

// This is lifted for GraphQL...
const listOfFeatures = {
  name: "listOfFeatures",
  title: "Features",
  type: "array",
  of: [
    {
      type: "featureRef",
    },
  ],
}

// This is lifted for GraphQL...
const featureRef = {
  title: "Feature Reference",
  name: "featureRef",
  type: "reference",
  weak: true,
  to: [{ type: "planFeature" }],
}

export { listOfFeatures, featureRef }

planFeatureValue.js

export default {
  name: "planFeatureValue",
  type: "document",
  title: "Plan Feature Value",
  fields: [
    {
      title: "Feature",
      name: "feature",
      type: "reference",
      weak: true,
      to: [{ type: "planFeature" }],
    },
    {
      name: "icon",
      title: "Icon",
      type: "string",
      options: {
        list: ["yes", "no", "dash"],
      },
    },
    {
      name: "value",
      title: "Text",
      type: "string",
    },
  ],
  preview: {
    select: {
      feature: "feature.title",
      value: "value",
      icon: "icon",
    },
    prepare(selection) {
      const { value, feature, icon } = selection
      console.log(feature)
      if (value && icon) {
        return {
          title: feature,
          subtitle: `Icon(${icon}) - ${value} `,
        }
      } else {
        return {
          title: feature,
          subtitle: value || (icon && `Icon(${icon})`) || "not set",
        }
      }
    },
  },
}