Skip to content

Reduce duplicate code for modal content #1059

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Arnei merged 15 commits into from
Mar 20, 2025
Merged

Reduce duplicate code for modal content #1059

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
47d0018
Reduce duplicate code for modal content
Arnei Jan 14, 2025
287c1a2
Merge branch 'main' into reduce-duplicate-code-modalcontent
Arnei Jan 23, 2025
86c2d8b
Merge branch 'main' into reduce-duplicate-code-modalcontent
Arnei Jan 29, 2025
8dcaa49
Merge branch 'main' into reduce-duplicate-code-modalcontent
Arnei Jan 31, 2025
54d0be3
Merge branch 'main' into reduce-duplicate-code-modalcontent
Arnei Jan 31, 2025
f0493f9
Merge branch 'main' into reduce-duplicate-code-modalcontent
Arnei Jan 31, 2025
8019a35
Merge branch 'main' into reduce-duplicate-code-modalcontent
Arnei Feb 4, 2025
378baec
Merge branch 'main' into reduce-duplicate-code-modalcontent
Arnei Feb 4, 2025
922fea3
Merge branch 'main' into reduce-duplicate-code-modalcontent
Arnei Feb 5, 2025
42d1604
Merge branch 'main' into reduce-duplicate-code-modalcontent
Arnei Feb 11, 2025
a092a0c
Merge branch 'main' into reduce-duplicate-code-modalcontent
Arnei Feb 26, 2025
e3b45f3
Merge branch 'main' into reduce-duplicate-code-modalcontent
Arnei Feb 27, 2025
28dd6da
Merge branch 'main' into reduce-duplicate-code-modalcontent
Arnei Mar 10, 2025
312cf25
Merge branch 'main' into reduce-duplicate-code-modalcontent
Arnei Mar 19, 2025
bf7523e
Merge branch 'main' into reduce-duplicate-code-modalcontent
Arnei Mar 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 62 additions & 65 deletions src/components/configuration/partials/wizard/BumperPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import FileUpload from "../../../shared/wizard/FileUpload";
import { FormikProps } from "formik";
import { Field } from "../../../shared/Field";
import Notifications from "../../../shared/Notifications";
import ModalContentTable from "../../../shared/modals/ModalContentTable";

/**
* This component renders the bumper/trailer (depending on isTrailer flag) page for new themes in the new themes wizard
Expand Down Expand Up @@ -33,79 +34,75 @@ const BumperPage = <T extends RequiredFormProps>({

return (
<>
<div className="modal-content">
<div className="modal-body">
<div className="full-col">
<p className="tab-description">
{t(
!isTrailer
? "CONFIGURATION.THEMES.DETAILS.BUMPER.DESCRIPTION"
: "CONFIGURATION.THEMES.DETAILS.TRAILER.DESCRIPTION"
)}
</p>
{/* notifications */}
<Notifications context="not_corner" />
<div className="obj">
<header>
{t(
!isTrailer
? "CONFIGURATION.THEMES.DETAILS.BUMPER.ACTIVE"
: "CONFIGURATION.THEMES.DETAILS.TRAILER.ACTIVE"
)}
</header>
<div className="obj-container content-list padded">
<div className="list-row">
<div className="header-column">
<label className="large">
{t(
!isTrailer
? "CONFIGURATION.THEMES.DETAILS.BUMPER.ENABLE"
: "CONFIGURATION.THEMES.DETAILS.TRAILER.ENABLE"
)}
</label>
</div>
{/* Checkbox for activating bumper/trailer */}
<div className="content-column">
<div className="content-container">
<Field
id="bumper-toggle"
type="checkbox"
name={!isTrailer ? "bumperActive" : "trailerActive"}
/>
</div>
</div>
</div>
</div>
</div>

{/* if checkbox is checked, then render object for uploading files */}
{((!isTrailer && formik.values.bumperActive) ||
(isTrailer && formik.values.trailerActive)) && (
<div className="obj">
<header>
<ModalContentTable>
<p className="tab-description">
{t(
!isTrailer
? "CONFIGURATION.THEMES.DETAILS.BUMPER.DESCRIPTION"
: "CONFIGURATION.THEMES.DETAILS.TRAILER.DESCRIPTION"
)}
</p>
{/* notifications */}
<Notifications context="not_corner" />
<div className="obj">
<header>
{t(
!isTrailer
? "CONFIGURATION.THEMES.DETAILS.BUMPER.ACTIVE"
: "CONFIGURATION.THEMES.DETAILS.TRAILER.ACTIVE"
)}
</header>
<div className="obj-container content-list padded">
<div className="list-row">
<div className="header-column">
<label className="large">
{t(
!isTrailer
? "CONFIGURATION.THEMES.DETAILS.BUMPER.SELECT"
: "CONFIGURATION.THEMES.DETAILS.TRAILER.SELECT"
? "CONFIGURATION.THEMES.DETAILS.BUMPER.ENABLE"
: "CONFIGURATION.THEMES.DETAILS.TRAILER.ENABLE"
)}
</header>
<div className="obj-container padded">
{/* Upload file for bumper/trailer */}
<FileUpload
acceptableTypes="video/*"
fileId={!isTrailer ? "bumperFile" : "trailerFile"}
fileName={!isTrailer ? "bumperFileName" : "trailerFileName"}
formik={formik}
buttonKey="CONFIGURATION.THEMES.DETAILS.BUMPER.UPLOAD_BUTTON"
labelKey="CONFIGURATION.THEMES.DETAILS.BUMPER.UPLOAD_LABEL"
isEdit={isEdit}
</label>
</div>
{/* Checkbox for activating bumper/trailer */}
<div className="content-column">
<div className="content-container">
<Field
id="bumper-toggle"
type="checkbox"
name={!isTrailer ? "bumperActive" : "trailerActive"}
/>
</div>
</div>
)}
</div>
</div>
</div>
</div>

{/* if checkbox is checked, then render object for uploading files */}
{((!isTrailer && formik.values.bumperActive) ||
(isTrailer && formik.values.trailerActive)) && (
<div className="obj">
<header>
{t(
!isTrailer
? "CONFIGURATION.THEMES.DETAILS.BUMPER.SELECT"
: "CONFIGURATION.THEMES.DETAILS.TRAILER.SELECT"
)}
</header>
<div className="obj-container padded">
{/* Upload file for bumper/trailer */}
<FileUpload
acceptableTypes="video/*"
fileId={!isTrailer ? "bumperFile" : "trailerFile"}
fileName={!isTrailer ? "bumperFileName" : "trailerFileName"}
formik={formik}
buttonKey="CONFIGURATION.THEMES.DETAILS.BUMPER.UPLOAD_BUTTON"
labelKey="CONFIGURATION.THEMES.DETAILS.BUMPER.UPLOAD_LABEL"
isEdit={isEdit}
/>
</div>
</div>
)}
</ModalContentTable>

{/* Show navigation buttons only if page is used for a new theme*/}
{!isEdit && (
Expand Down
63 changes: 30 additions & 33 deletions src/components/configuration/partials/wizard/GeneralPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import Notifications from "../../../shared/Notifications";
import { FormikProps } from "formik";
import { Field } from "../../../shared/Field";
import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
import ModalContentTable from "../../../shared/modals/ModalContentTable";

/**
* This component renders the general page for new themes in the new themes wizard
Expand All @@ -30,41 +31,37 @@ const GeneralPage = <T,>({
return (
<>
{/* Fields for name and description */}
<div className="modal-content">
<div className="modal-body">
<div className="full-col">
<div className="form-container">
<div className="row">
<Notifications context={"other"}/>
<label className="required" style={isEdit ? editStyle: undefined}>
{t("CONFIGURATION.THEMES.DETAILS.GENERAL.NAME")}
</label>
<Field
name="name"
type="text"
autoFocus={!isEdit}
placeholder={
t("CONFIGURATION.THEMES.DETAILS.GENERAL.NAME") + "..."
}
/>
</div>
<div className="row">
<label style={isEdit ? editStyle: undefined}>
{t("CONFIGURATION.THEMES.DETAILS.GENERAL.DESCRIPTION")}
</label>
<Field
name="description"
as="textarea"
placeholder={
t("CONFIGURATION.THEMES.DETAILS.GENERAL.DESCRIPTION") +
"..."
}
/>
</div>
</div>
<ModalContentTable>
<div className="form-container">
<div className="row">
<Notifications context={"other"}/>
<label className="required" style={isEdit ? editStyle: undefined}>
{t("CONFIGURATION.THEMES.DETAILS.GENERAL.NAME")}
</label>
<Field
name="name"
type="text"
autoFocus={!isEdit}
placeholder={
t("CONFIGURATION.THEMES.DETAILS.GENERAL.NAME") + "..."
}
/>
</div>
<div className="row">
<label style={isEdit ? editStyle: undefined}>
{t("CONFIGURATION.THEMES.DETAILS.GENERAL.DESCRIPTION")}
</label>
<Field
name="description"
as="textarea"
placeholder={
t("CONFIGURATION.THEMES.DETAILS.GENERAL.DESCRIPTION") +
"..."
}
/>
</div>
</div>
</div>
</ModalContentTable>

{/* Show navigation buttons only if page is used for a new theme*/}
{!isEdit && (
Expand Down
147 changes: 72 additions & 75 deletions src/components/configuration/partials/wizard/ThemeSummaryPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from "react";
import { useTranslation } from "react-i18next";
import WizardNavigationButtons from "../../../shared/wizard/WizardNavigationButtons";
import { FormikProps } from "formik";
import ModalContentTable from "../../../shared/modals/ModalContentTable";

/**
* This component renders the summary page for new themes in the new theme wizard.
Expand Down Expand Up @@ -29,83 +30,79 @@ const ThemeSummaryPage = <T extends RequiredFormProps>({

return (
<>
<div className="modal-content">
<div className="modal-body">
<div className="full-col">
<div className="obj">
<header>
{t("CONFIGURATION.THEMES.DETAILS.SUMMARY.CAPTION")}
</header>
<div className="obj-container summary-list padded">
<ul>
{/* show only when file is uploaded for a list item */}
{formik.values.bumperFile && (
<li>
<h4>
{t("CONFIGURATION.THEMES.DETAILS.BUMPER.CAPTION")}
</h4>
<p>
<span>
{t(
"CONFIGURATION.THEMES.DETAILS.BUMPER.FILE_UPLOADED"
)}
</span>
{formik.values.bumperFileName}
</p>
</li>
)}
{formik.values.trailerFile && (
<li>
<h4>
{t("CONFIGURATION.THEMES.DETAILS.TRAILER.CAPTION")}
</h4>
<p>
<span>
{t(
"CONFIGURATION.THEMES.DETAILS.TRAILER.FILE_UPLOADED"
)}
</span>
{formik.values.trailerFileName}
</p>
</li>
)}
{formik.values.titleSlideMode === "upload" &&
formik.values.titleSlideBackground && (
<li>
<h4>
{t("CONFIGURATION.THEMES.DETAILS.TITLE.CAPTION")}
</h4>
<p>
<span>
{t(
"CONFIGURATION.THEMES.DETAILS.TITLE.FILE_UPLOADED"
)}
</span>
{formik.values.titleSlideBackgroundName}
</p>
</li>
)}
{formik.values.watermarkFile && (
<li>
<h4>
{t("CONFIGURATION.THEMES.DETAILS.WATERMARK.CAPTION")}
</h4>
<p>
<span>
{t(
"CONFIGURATION.THEMES.DETAILS.WATERMARK.FILE_UPLOADED"
)}
</span>
{formik.values.watermarkFileName}
</p>
</li>
)}
</ul>
</div>
</div>
<ModalContentTable>
<div className="obj">
<header>
{t("CONFIGURATION.THEMES.DETAILS.SUMMARY.CAPTION")}
</header>
<div className="obj-container summary-list padded">
<ul>
{/* show only when file is uploaded for a list item */}
{formik.values.bumperFile && (
<li>
<h4>
{t("CONFIGURATION.THEMES.DETAILS.BUMPER.CAPTION")}
</h4>
<p>
<span>
{t(
"CONFIGURATION.THEMES.DETAILS.BUMPER.FILE_UPLOADED"
)}
</span>
{formik.values.bumperFileName}
</p>
</li>
)}
{formik.values.trailerFile && (
<li>
<h4>
{t("CONFIGURATION.THEMES.DETAILS.TRAILER.CAPTION")}
</h4>
<p>
<span>
{t(
"CONFIGURATION.THEMES.DETAILS.TRAILER.FILE_UPLOADED"
)}
</span>
{formik.values.trailerFileName}
</p>
</li>
)}
{formik.values.titleSlideMode === "upload" &&
formik.values.titleSlideBackground && (
<li>
<h4>
{t("CONFIGURATION.THEMES.DETAILS.TITLE.CAPTION")}
</h4>
<p>
<span>
{t(
"CONFIGURATION.THEMES.DETAILS.TITLE.FILE_UPLOADED"
)}
</span>
{formik.values.titleSlideBackgroundName}
</p>
</li>
)}
{formik.values.watermarkFile && (
<li>
<h4>
{t("CONFIGURATION.THEMES.DETAILS.WATERMARK.CAPTION")}
</h4>
<p>
<span>
{t(
"CONFIGURATION.THEMES.DETAILS.WATERMARK.FILE_UPLOADED"
)}
</span>
{formik.values.watermarkFileName}
</p>
</li>
)}
</ul>
</div>
</div>
</div>
</ModalContentTable>

{/* Button for navigation to next page */}
<WizardNavigationButtons
Expand Down
Loading
Loading