Skip to content

Commit

Permalink
Fix/plans (#56)
Browse files Browse the repository at this point in the history
* 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 <[email protected]>
  • Loading branch information
danieleguido and danieleguido authored Nov 22, 2024
1 parent 0509d29 commit d9f690f
Show file tree
Hide file tree
Showing 16 changed files with 353 additions and 108 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,4 @@ static/data/
src/styles/fonts.css
impresso-datalab.code-workspace
.env.development
.env.local
4 changes: 0 additions & 4 deletions Makefile
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
9 changes: 6 additions & 3 deletions astro.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"

Expand Down
4 changes: 2 additions & 2 deletions src/components/Page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
>
Expand Down
219 changes: 160 additions & 59 deletions src/components/PlansModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand All @@ -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,
Expand All @@ -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={{
Expand All @@ -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}
Expand All @@ -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>
Expand Down Expand Up @@ -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>
)
Expand Down
62 changes: 62 additions & 0 deletions src/components/PlansModalFeatureRow.tsx
Original file line number Diff line number Diff line change
@@ -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
Loading

0 comments on commit d9f690f

Please sign in to comment.