update plan features

src/components/PlanCard.tsx

@@ -2,13 +2,14 @@ import { CheckCircle, Timer, ProfileCircle } from "iconoir-react"
 import "./PlanCard.css"
 import PlanIcon from "./PlanIcon"
 import { marked } from "marked"
-import { RequirementToU, Features } from "../constants"
+import { RequirementToU, Features, PlanIcons } from "../constants"
 import Requirement from "./Requirement"
 
-type PlanFeature = {
+export type PlanFeature = {
   title: string
   status: string
   iconColor: string
+  icon?: (typeof PlanIcons)[number]
   ref?: (typeof Features)[number]
 }
 

src/components/PlanFeatureCard.tsx

@@ -0,0 +1,46 @@
+import { CheckCircleSolid, EyeSolid, UserBadgeCheck } from "iconoir-react"
+import { OverlayTrigger, Tooltip } from "react-bootstrap"
+import {
+  PlanIconColors,
+  PlanIconLabels,
+  PlanIconPublicDomainAccessNoDownload,
+  PlanIconRestrictedAccessDownload,
+  PlanIconRestrictedAccessNoDownload,
+} from "../constants"
+import type { PlanFeature } from "./PlanCard"
+const IconsByIconName: { [key: string]: React.ComponentType } = {
+  [PlanIconRestrictedAccessNoDownload]: UserBadgeCheck,
+  [PlanIconRestrictedAccessDownload]: UserBadgeCheck,
+  [PlanIconPublicDomainAccessNoDownload]: EyeSolid,
+}
+
+const PlanFeatureCard: React.FC<{ feature: PlanFeature }> = ({ feature }) => {
+  const Component = feature.icon
+    ? IconsByIconName[feature.icon]
+    : CheckCircleSolid
+  const color = feature.icon ? PlanIconColors[feature.icon] : "purple"
+
+  if (feature.icon) {
+    return (
+      <div className="PlanFeatureCard">
+        <OverlayTrigger
+          overlay={
+            <Tooltip id="button-tooltip-2">
+              <span
+                dangerouslySetInnerHTML={{
+                  __html: PlanIconLabels[feature.icon],
+                }}
+              />
+            </Tooltip>
+          }
+        >
+          <Component color={color} />
+        </OverlayTrigger>
+      </div>
+    )
+  }
+
+  return <Component color={color} />
+}
+
+export default PlanFeatureCard

src/components/PlansModal.tsx

@@ -18,8 +18,10 @@ import {
   Minus,
   WarningCircle,
   Xmark,
+  UserBadgeCheck,
 } from "iconoir-react"
 import "./PlansModal.css"
+import PlanFeature from "./PlanFeatureCard"
 
 const BootstrapColumnLayoutForLabels = {
   lg: 2,
@@ -170,27 +172,7 @@ const PlansModal: React.FC<PlansModalProps> = ({ plans = [] }) => {
                     className="d-flex justify-content-center align-items-center "
                     key={plan.id}
                   >
-                    {feature ? (
-                      <OverlayTrigger
-                        overlay={
-                          <Tooltip id="button-tooltip-2">
-                            <span
-                              dangerouslySetInnerHTML={{
-                                __html:
-                                  feature.title ??
-                                  "Access & download available",
-                              }}
-                            />
-                          </Tooltip>
-                        }
-                      >
-                        <CheckCircleSolid
-                          color={feature.iconColor ?? "purple"}
-                        />
-                      </OverlayTrigger>
-                    ) : (
-                      <Xmark />
-                    )}
+                    {feature ? <PlanFeature feature={feature} /> : <Xmark />}
                   </Col>
                 )
               })}

src/constants.ts

@@ -63,18 +63,18 @@ export const DataFeatureSemanticEnrichmentsPublicDomain =
   "semantic-enrichments-public-domain"
 
 export const DataFeatures: string[] = [
-  DataFeatureMetadata,
   DataFeatureMetadataPublicDomain,
-  DataFeatureFacsimiles,
+  DataFeatureMetadata,
   DataFeatureFacsimilesPublicDomain,
-  DataFeatureAudio,
+  DataFeatureFacsimiles,
   DataFeatureAudioPublicDomain,
-  DataFeatureTranscripts,
+  DataFeatureAudio,
   DataFeatureTranscriptsPublicDomain,
-  DataFeatureImages,
+  DataFeatureTranscripts,
   DataFeatureImagesPublicDomain,
-  DataFeatureSemanticEnrichments,
+  DataFeatureImages,
   DataFeatureSemanticEnrichmentsPublicDomain,
+  DataFeatureSemanticEnrichments,
 ]
 
 export const DataFeatureLabels: Record<string, string> = {
@@ -118,6 +118,32 @@ export const PlanLabels: Record<string, string> = {
   [PlanAcademicUserPlus]: "Academic User Plus",
 }
 
+export const PlanIconRestrictedAccessNoDownload =
+  "restricted-only-access-no-download"
+export const PlanIconRestrictedAccessDownload =
+  "restricted-only-access-download"
+export const PlanIconPublicDomainAccessNoDownload =
+  "public-domain-only-access-no-download"
+export const PlanIcons: string[] = [
+  PlanIconRestrictedAccessNoDownload,
+  PlanIconRestrictedAccessDownload,
+  PlanIconPublicDomainAccessNoDownload,
+]
+export const PlanIconLabels: Record<string, string> = {
+  [PlanIconRestrictedAccessNoDownload]:
+    "Access to protected data determined only by Impresso partners. <b>No download possible<b>",
+  [PlanIconRestrictedAccessDownload]:
+    "Access and download to protected data determined only by Impresso partners.",
+  [PlanIconPublicDomainAccessNoDownload]:
+    "Access Granted, <b>Download Not Available<b>",
+}
+
+export const PlanIconColors: Record<string, string> = {
+  [PlanIconRestrictedAccessNoDownload]: "orange",
+  [PlanIconRestrictedAccessDownload]: "purple",
+  [PlanIconPublicDomainAccessNoDownload]: "purple",
+}
+
 export const BrowserViewLogin = "login"
 export const BrowserViewRegister = "signup"
 export const BrowserViewConfirmRegistration = "confirm-registration"

src/content/config.ts

@@ -4,6 +4,7 @@ import {
   Features,
   SeriesCategories,
   SeriesPositions,
+  PlanIcons,
 } from "../constants"
 
 const notebooks = defineCollection({
@@ -40,7 +41,8 @@ const plans = defineCollection({
           title: z.string().optional(),
           status: z.string().optional(),
           iconColor: z.string().optional(),
-        })
+          icon: z.enum(PlanIcons as any).optional(),
+        }),
       )
       .optional(),
     requirements: z.array(z.enum(Requirements as any)),

src/content/plans/02-impresso-user.mdx

@@ -6,17 +6,31 @@ features:
   - ref: explore-all-features
   - ref: create-store-export-collections
   - ref: generate-api-keys
+
+  - ref: metadata-public-domain
   - ref: metadata
+
+  - ref: facsimiles-public-domain
+    icon: public-domain-only-access-no-download
+
   - ref: facsimiles
-    iconColor: orange
-    title: "Access to protected data determined only by Impresso partners. <b>No download possible<b>"
+    icon: restricted-only-access-no-download
+
+  - ref: audio-public-domain
+    icon: public-domain-only-access-no-download
+
   - ref: audio
-    iconColor: orange
-    title: "<b>download<b>"
+    icon: restricted-only-access-no-download
+
+  - ref: transcripts-public-domain
   - ref: transcripts
+    icon: restricted-only-access-download
+
+  - ref: images-public-domain
   - ref: images
-    iconColor: orange
-    title: "<b>download<b>"
+    icon: restricted-only-access-download
+
+  - ref: semantic-enrichments-public-domain
   - ref: semantic-enrichments
 
 requirements:

src/content/plans/03-student-user.mdx

@@ -7,6 +7,32 @@ features:
   - ref: create-store-export-collections
   - ref: generate-api-keys
 
+  - ref: metadata-public-domain
+  - ref: metadata
+
+  - ref: facsimiles-public-domain
+    icon: public-domain-only-access-no-download
+
+  - ref: facsimiles
+    icon: restricted-only-access-no-download
+
+  - ref: audio-public-domain
+    icon: public-domain-only-access-no-download
+
+  - ref: audio
+    icon: restricted-only-access-no-download
+
+  - ref: transcripts-public-domain
+  - ref: transcripts
+    icon: restricted-only-access-download
+
+  - ref: images-public-domain
+  - ref: images
+    icon: restricted-only-access-download
+
+  - ref: semantic-enrichments-public-domain
+  - ref: semantic-enrichments
+
 requirements:
   - terms-of-use
   - impresso-account

src/content/plans/04-academic-user.mdx

@@ -6,8 +6,32 @@ features:
   - ref: explore-all-features
   - ref: create-store-export-collections
   - ref: generate-api-keys
+  - ref: metadata-public-domain
   - ref: metadata
+
+  - ref: facsimiles-public-domain
+    icon: public-domain-only-access-no-download
+
   - ref: facsimiles
+    icon: restricted-only-access-no-download
+
+  - ref: audio-public-domain
+    icon: public-domain-only-access-no-download
+
+  - ref: audio
+    icon: restricted-only-access-no-download
+
+  - ref: transcripts-public-domain
+  - ref: transcripts
+    icon: restricted-only-access-download
+
+  - ref: images-public-domain
+  - ref: images
+    icon: restricted-only-access-download
+
+  - ref: semantic-enrichments-public-domain
+  - ref: semantic-enrichments
+
 requirements:
   - terms-of-use
   - impresso-account

src/content/plans/05-academic-user-plus.mdx

@@ -6,8 +6,32 @@ features:
   - ref: explore-all-features
   - ref: create-store-export-collections
   - ref: generate-api-keys
+
+  - ref: metadata-public-domain
   - ref: metadata
+
+  - ref: facsimiles-public-domain
+    icon: public-domain-only-access-no-download
+
   - ref: facsimiles
+    icon: restricted-only-access-no-download
+
+  - ref: audio-public-domain
+    icon: public-domain-only-access-no-download
+
+  - ref: audio
+    icon: restricted-only-access-no-download
+
+  - ref: transcripts-public-domain
+  - ref: transcripts
+    icon: restricted-only-access-download
+
+  - ref: images-public-domain
+  - ref: images
+    icon: restricted-only-access-download
+
+  - ref: semantic-enrichments-public-domain
+  - ref: semantic-enrichments
 
 requirements:
   - terms-of-use