Fix/plans (#56)

* add .env.local and .env.<mode> to be read from Vite and Astro config Remove local env variables from Makefile * add xxl size for Modal * adapt text for different plans * Create plans.md * Update plans.astro to load content from content page * Update config.ts * Update PlansModal.tsx * Create PlansModalFeatureRow.tsx * Update constants.ts * refine plans * Update Page.tsx --------- Co-authored-by: Daniele Guido <1181642+danieleguido@users.noreply.github.com>
impresso · Nov 22, 2024 · d9f690f · d9f690f
1 parent 0509d29
commit d9f690f
Show file tree

Hide file tree

Showing 16 changed files with 353 additions and 108 deletions.
diff --git a/.gitignore b/.gitignore
@@ -33,3 +33,4 @@ static/data/
 src/styles/fonts.css
 impresso-datalab.code-workspace
 .env.development
+.env.local
diff --git a/Makefile b/Makefile
@@ -7,10 +7,6 @@ run-dev:
 	PUBLIC_GIT_BRANCH=$(shell git rev-parse --abbrev-ref HEAD) \
 	PUBLIC_BUILD_DATE=$(shell date -u +'%Y-%m-%dT%H:%M:%SZ') \
 	PUBLIC_GIT_REMOTE=$(shell git config --get remote.origin.url) \
-	PUBLIC_IMPRESSO_API_PATH="/public-api/v1" \
-	PUBLIC_IMPRESSO_WS_API_PATH="/api/socket.io" \
-	PUBLIC_IMPRESSO_DATALAB_BASE="/datalab" \
-	PUBLIC_IMPRESSO_DATALAB_SITE="https://impresso-project.ch" \
 	npm run dev
 
 build-dev:

diff --git a/astro.config.mjs b/astro.config.mjs
@@ -3,8 +3,10 @@ import react from "@astrojs/react"
 import mdx from "@astrojs/mdx"
 import dotenv from "dotenv"
 
-dotenv.config()
-
+// load .env.local file, .env.development file, and .env file
+dotenv.config({
+  path: [".env.local", `.env.${process.env.NODE_ENV}`, ".env"],
+})
 const WsApiTarget =
   process.env.PUBLIC_IMPRESSO_WS_API_HOST ?? "http://localhost"
 const WsApiPath = process.env.PUBLIC_IMPRESSO_WS_API_PATH ?? "/api/socket.io"
@@ -14,7 +16,8 @@ const PublicApiTarget =
 const PublicApiPath = process.env.PUBLIC_IMPRESSO_API_PATH ?? "/public-api/v1"
 
 // these values are relevant only when the proxy is used with different paths, e.g; for a local instance of impresso middle layer
-const ProxyPublicApiPath = process.env.PUBLIC_IMPRESSO_API_PATH ?? "/public-api/v1"
+const ProxyPublicApiPath =
+  process.env.PUBLIC_IMPRESSO_API_PATH ?? "/public-api/v1"
 const ProxyWsApiPath =
   process.env.PUBLIC_IMPRESSO_WS_API_PATH ?? "/api/socket.io"
 

diff --git a/src/components/Page.tsx b/src/components/Page.tsx
@@ -6,7 +6,7 @@ interface PageProps extends React.HTMLAttributes<HTMLDivElement> {
   title?: string
   fullscreen?: string | true | undefined
   subtitle?: string
-  size?: ModalProps["size"]
+  size?: ModalProps["size"] | "xxl"
   modalBodyClassName?: string
   modalFooterClassName?: string
   footer?: React.ReactNode
@@ -72,7 +72,7 @@ const Page: React.FC<PageProps> = ({
       show={show}
       onHide={handleClose}
       backdrop="static"
-      size={size}
+      size={size === "xxl" ? "xl" : size}
       keyboard={false}
       scrollable
     >

diff --git a/src/components/PlansModal.tsx b/src/components/PlansModal.tsx
@@ -11,6 +11,26 @@ import {
   RequirementsLabels,
   DataFeatureLabels,
   RequirementToU,
+  DataFeatureMetadata,
+  DataFeatureAudioPublicDomain,
+  DataFeatureFacsimilesPublicDomain,
+  DataFeatureTranscriptsPublicDomain,
+  DataFeatureImages,
+  DataFeatureImagesPublicDomain,
+  DataFeatureSemanticEnrichments,
+  DataFeatureFacsimiles,
+  DataFeatureAudio,
+  DataFeatureTranscripts,
+  ExportFeatureFacsimilesPublicDomain,
+  ExportFeatureAudioPublicDomain,
+  ExportFeatureTranscriptsPublicDomain,
+  ExportFeatureImagesPublicDomain,
+  ExportFeatureMetadata,
+  ExportFeatureFacsimiles,
+  ExportFeatureAudio,
+  ExportFeatureTranscripts,
+  ExportFeatureImages,
+  ExportFeatureSemanticEnrichments,
 } from "../constants"
 import {
   CheckCircleSolid,
@@ -22,6 +42,8 @@ import {
 } from "iconoir-react"
 import "./PlansModal.css"
 import PlanFeature from "./PlanFeatureCard"
+import MarkdownSnippet from "./MarkdownSnippet"
+import PlansModalFeatureRow from "./PlansModalFeatureRow"
 
 const BootstrapColumnLayoutForLabels = {
   lg: 2,
@@ -30,9 +52,19 @@ const BootstrapColumnLayoutForLabels = {
 
 export type PlansModalProps = {
   plans: Plan[]
+  title?: string
+  modalTitle?: string
+  content: string
+  displayFeatures?: boolean
 }
 
-const PlansModal: React.FC<PlansModalProps> = ({ plans = [] }) => {
+const PlansModal: React.FC<PlansModalProps> = ({
+  plans = [],
+  title = "Plans",
+  modalTitle = "Choose a plan",
+  content = "Choose the plan that best fits your needs.",
+  displayFeatures = false,
+}) => {
   const [user, acceptedTermsDate] = usePersistentStore((state) => [
     state.user,
     state.acceptTermsDate,
@@ -44,12 +76,18 @@ const PlansModal: React.FC<PlansModalProps> = ({ plans = [] }) => {
   }
   return (
     <Page
-      title="Plans for Impresso Datalab"
+      title={modalTitle}
       fullscreen="xl-down"
-      size="xl"
+      size="xxl"
       modalBodyClassName="pt-0 pe-4 ps-2 PlansModal mx-1"
     >
       <Container>
+        <Row className="my-3">
+          <Col sm={12}>
+            <h1>{title}</h1>
+            <MarkdownSnippet value={content} />
+          </Col>
+        </Row>
         <Row
           className="position-sticky top-0"
           style={{
@@ -65,7 +103,7 @@ const PlansModal: React.FC<PlansModalProps> = ({ plans = [] }) => {
               <h2 className="m-0 font-weight-bold text-center">
                 {plan.title}
                 {plan.id === useActivePlan ? (
-                  <div className="badge small-caps mt-2 shadow-sm bg-primary text-dark">
+                  <div className="badge d-block small-caps mt-2 shadow-sm bg-primary text-dark">
                     current plan
                   </div>
                 ) : null}
@@ -86,36 +124,39 @@ const PlansModal: React.FC<PlansModalProps> = ({ plans = [] }) => {
           ))}
         </Row>
 
-        {Object.keys(GenericFeatureLabels).map((i) => (
-          <Row className="PlansModal__hRow" key={i}>
-            <Col {...BootstrapColumnLayoutForLabels}>
-              {GenericFeatureLabels[i]}
-            </Col>
-            {plans.map((plan) => {
-              const feature = plan.features.find((d) => d.ref === i)
-              return (
-                <Col
-                  className="d-flex row justify-content-center align-items-center"
-                  key={plan.id}
-                >
-                  {feature ? (
-                    <>
-                      <CheckCircleSolid color={feature.iconColor ?? "purple"} />
-                      {feature.title ? (
-                        <p
-                          className="d-block mt-2 mb-0 very-small text-muted"
-                          dangerouslySetInnerHTML={{ __html: feature.title }}
-                        ></p>
-                      ) : null}
-                    </>
-                  ) : (
-                    <Xmark />
-                  )}
-                </Col>
-              )
-            })}
-          </Row>
-        ))}
+        {displayFeatures &&
+          Object.keys(GenericFeatureLabels).map((i) => (
+            <Row className="PlansModal__hRow" key={i}>
+              <Col {...BootstrapColumnLayoutForLabels}>
+                {GenericFeatureLabels[i]}
+              </Col>
+              {plans.map((plan) => {
+                const feature = plan.features.find((d) => d.ref === i)
+                return (
+                  <Col
+                    className="d-flex row justify-content-center align-items-center"
+                    key={plan.id}
+                  >
+                    {feature ? (
+                      <>
+                        <CheckCircleSolid
+                          color={feature.iconColor ?? "purple"}
+                        />
+                        {feature.title ? (
+                          <p
+                            className="d-block mt-2 mb-0 very-small text-muted"
+                            dangerouslySetInnerHTML={{ __html: feature.title }}
+                          ></p>
+                        ) : null}
+                      </>
+                    ) : (
+                      <Xmark />
+                    )}
+                  </Col>
+                )
+              })}
+            </Row>
+          ))}
         <Row className="my-1">
           <Col sm={12}>
             <div className="border-dark border-bottom h-1px"></div>
@@ -155,35 +196,95 @@ const PlansModal: React.FC<PlansModalProps> = ({ plans = [] }) => {
         </Row>
         <Row>
           <Col>
-            <h3 className="font-size-inherit mt-2">Data availability</h3>
+            <h3 className="font-size-inherit mt-2">Data accessibility</h3>
           </Col>
-        </Row>
-        {Object.keys(DataFeatureLabels).map((key, i) => (
-          <Fragment key={key}>
-            <Row className="PlansModal__hRow">
-              <Col
-                {...BootstrapColumnLayoutForLabels}
-                dangerouslySetInnerHTML={{ __html: DataFeatureLabels[key] }}
-              ></Col>
-              {plans.map((plan) => {
-                const feature = plan.features.find((d) => d.ref === key)
-                return (
-                  <Col
-                    className="d-flex justify-content-center align-items-center "
-                    key={plan.id}
-                  >
-                    {feature ? <PlanFeature feature={feature} /> : <Xmark />}
-                  </Col>
-                )
-              })}
-            </Row>
-            {i % 2 ? (
+          {plans.map((plan) => (
+            <Col key={plan.id}>
               <Row>
-                <Col className="pt-1 mb-1 border-bottom border-dark border-dotted" />
+                <Col>
+                  <h4 className="very-small mt-2 text-center">
+                    Access in Impresso App
+                  </h4>
+                </Col>
+                <Col>
+                  <h4 className="very-small mt-2 text-center">
+                    Export / Download Impresso App & Datalab
+                  </h4>
+                </Col>
               </Row>
-            ) : null}
-          </Fragment>
+            </Col>
+          ))}
+        </Row>
+        <Row>
+          <Col className="pt-1 mb-1 border-bottom border-dark border-dotted">
+            <h4 className="font-size-inherit mt-2">Metadata</h4>
+          </Col>
+        </Row>
+        {/* DataFeatureMetadata */}
+        <PlansModalFeatureRow
+          plans={plans}
+          label={DataFeatureLabels[DataFeatureMetadata]}
+          featureIds={[DataFeatureMetadata, ExportFeatureMetadata]}
+          className="PlansModal__hRow"
+        ></PlansModalFeatureRow>
+        <Row>
+          <Col className="pt-1 mb-1 border-bottom border-dark border-dotted">
+            <h4 className="font-size-inherit mt-2">Public Data Domain</h4>
+          </Col>
+        </Row>
+        {[
+          [
+            DataFeatureFacsimilesPublicDomain,
+            ExportFeatureFacsimilesPublicDomain,
+          ],
+          [DataFeatureAudioPublicDomain, ExportFeatureAudioPublicDomain],
+          [
+            DataFeatureTranscriptsPublicDomain,
+            ExportFeatureTranscriptsPublicDomain,
+          ],
+          [DataFeatureImagesPublicDomain, ExportFeatureImagesPublicDomain],
+        ].map(([keyData, keyExport]) => (
+          <PlansModalFeatureRow
+            key={keyData}
+            plans={plans}
+            label={DataFeatureLabels[keyData]}
+            featureIds={[keyData, keyExport]}
+            className="PlansModal__hRow"
+          />
+        ))}
+        <Row>
+          <Col className="pt-1 mb-1 border-bottom border-dark border-dotted">
+            <h4 className="font-size-inherit mt-2">Protected Data Domain</h4>
+          </Col>
+        </Row>
+        {[
+          [DataFeatureFacsimiles, ExportFeatureFacsimiles],
+          [DataFeatureAudio, ExportFeatureAudio],
+          [DataFeatureTranscripts, ExportFeatureTranscripts],
+          [DataFeatureImages, ExportFeatureImages],
+        ].map(([keyData, keyExport]) => (
+          <PlansModalFeatureRow
+            key={keyData}
+            plans={plans}
+            label={DataFeatureLabels[keyData]}
+            featureIds={[keyData, keyExport]}
+            className="PlansModal__hRow"
+          />
         ))}
+        <Row>
+          <Col className="pt-1 mb-1 border-bottom border-dark border-dotted">
+            <h4 className="font-size-inherit mt-2">Semantic Enrichments</h4>
+          </Col>
+        </Row>
+        <PlansModalFeatureRow
+          plans={plans}
+          label={DataFeatureLabels[DataFeatureSemanticEnrichments]}
+          featureIds={[
+            DataFeatureSemanticEnrichments,
+            ExportFeatureSemanticEnrichments,
+          ]}
+          className="PlansModal__hRow"
+        />
       </Container>
     </Page>
   )

diff --git a/src/components/PlansModalFeatureRow.tsx b/src/components/PlansModalFeatureRow.tsx
@@ -0,0 +1,62 @@
+import { Xmark } from "iconoir-react"
+import { Row, Col } from "react-bootstrap"
+import PlanFeatureCard from "./PlanFeatureCard"
+import type { Plan } from "./PlanCard"
+
+const BootstrapColumnLayoutForLabels = {
+  lg: 2,
+  className: "very-small",
+}
+
+export type PlansModalFeatureRowProps = {
+  plans: Plan[]
+  label: string
+  featureIds?: string[]
+  className?: string
+}
+
+const PlansModalFeatureRow: React.FC<PlansModalFeatureRowProps> = ({
+  label = "",
+  featureIds = [],
+  plans = [],
+  className = "",
+}) => {
+  return (
+    <Row className={`PlansModalFeatureRow ${className}`}>
+      <Col
+        {...BootstrapColumnLayoutForLabels}
+        dangerouslySetInnerHTML={{
+          __html: label,
+        }}
+      ></Col>
+      {plans.map((plan) => {
+        return (
+          <Col key={plan.id}>
+            <Row className="d-flex align-items-center h-100">
+              {featureIds.map((ref, i) => {
+                const feature = plan.features.find((f) => f.ref === ref)
+                const hasBorder =
+                  featureIds.length > 1 && i < featureIds.length - 1
+                return (
+                  <Col
+                    key={ref}
+                    className={`d-flex justify-content-center align-items-center ${
+                      hasBorder ? "border-end" : ""
+                    }`}
+                  >
+                    {feature ? (
+                      <PlanFeatureCard feature={feature} />
+                    ) : (
+                      <Xmark />
+                    )}
+                  </Col>
+                )
+              })}
+            </Row>
+          </Col>
+        )
+      })}
+    </Row>
+  )
+}
+export default PlansModalFeatureRow