Feature: Two Panel (steps) form layout (#7180)

Co-authored-by: Jon Waldstein <[email protected]> Co-authored-by: Paulo Iankoski <[email protected]> Co-authored-by: Jon Waldstein <[email protected]> Co-authored-by: Joshua Dinh <[email protected]> Co-authored-by: Joshua Dinh <[email protected]> Co-authored-by: Jon Waldstein <[email protected]>
impress-org · Mar 6, 2024 · e56cd37 · e56cd37
1 parent 829ffa8
commit e56cd37
Show file tree

Hide file tree

Showing 25 changed files with 234 additions and 34 deletions.
diff --git a/globals.d.ts b/globals.d.ts
@@ -1,5 +1,6 @@
 declare module '*.svg';
 declare module '*.module.css';
 declare module '*.module.scss';
+declare module '*.png';
 // this makes the wp or window.wp global variable available in the eyes of TypeScript
 declare var wp;
diff --git a/src/DonationForms/FormDesigns/MultiStepFormDesign/MultiStepFormDesign.php b/src/DonationForms/FormDesigns/MultiStepFormDesign/MultiStepFormDesign.php
@@ -9,8 +9,16 @@
  */
 class MultiStepFormDesign extends FormDesign
 {
+    /**
+     * @since 3.0.0
+     */
     protected $isMultiStep = true;
 
+    /**
+     * @unreleased
+     */
+    protected $includeHeaderInMultiStep = true;
+
     /**
      * @since 3.0.0
      */

diff --git a/src/DonationForms/FormDesigns/TwoPanelStepsFormLayout/TwoPanelStepsFormLayout.php b/src/DonationForms/FormDesigns/TwoPanelStepsFormLayout/TwoPanelStepsFormLayout.php
@@ -0,0 +1,37 @@
+<?php
+
+namespace Give\DonationForms\FormDesigns\TwoPanelStepsFormLayout;
+
+use Give\Framework\FormDesigns\FormDesign;
+
+/**
+ * @unreleased
+ */
+class TwoPanelStepsFormLayout extends FormDesign
+{
+    protected $isMultiStep = true;
+
+    /**
+     * @unreleased
+     */
+    public static function id(): string
+    {
+        return 'two-panel-steps';
+    }
+
+    /**
+     * @unreleased
+     */
+    public static function name(): string
+    {
+        return __('Two Panel (Steps)', 'give');
+    }
+
+    /**
+     * @unreleased
+     */
+    public function css(): string
+    {
+        return GIVE_PLUGIN_URL . 'build/twoPanelStepsFormLayoutCss.css';
+    }
+}
diff --git a/src/DonationForms/FormDesigns/TwoPanelStepsFormLayout/css/_container.scss b/src/DonationForms/FormDesigns/TwoPanelStepsFormLayout/css/_container.scss
@@ -0,0 +1,26 @@
+.givewp-donation-form {
+    --two-panel-header-width: 42.5rem;
+
+    align-items: flex-start;
+    gap: var(--givewp-spacing-2);
+    display: flex;
+    flex-direction: row;
+    margin: auto;
+    max-width: calc(var(--two-panel-header-width) + 35.5rem);
+    padding: 0;
+    width: 100%;
+
+    @media screen and (max-width: 71.5rem) {
+        border: solid 1px var(--givewp-grey-25);
+        border-radius: var(--givewp-rounded-8);
+        box-shadow: var(--givewp-shadow-sm);
+        flex-direction: column;
+        gap: 0;
+        max-width: 35rem;
+    }
+
+    @media screen and (max-width: 36rem) {
+        margin: 0.5rem;
+        max-width: calc(100% - 1rem);
+    }
+}
diff --git a/src/DonationForms/FormDesigns/TwoPanelStepsFormLayout/css/_header.scss b/src/DonationForms/FormDesigns/TwoPanelStepsFormLayout/css/_header.scss
@@ -0,0 +1,45 @@
+.givewp-layouts {
+    &-header {
+        max-width: var(--two-panel-header-width);
+        text-align: center;
+        width: 100%;
+
+        @media screen and (min-width: 71.5rem) {
+            border: solid 1px var(--givewp-grey-25);
+            border-radius: var(--givewp-rounded-8);
+            box-shadow: var(--givewp-shadow-sm);
+        }
+    }
+
+    &-headerTitle {
+        margin-bottom: var(--givewp-spacing-3);
+    }
+
+    &-headerDescription {
+        margin-bottom: var(--givewp-spacing-10);
+    }
+
+    .givewp-layouts-header__templates-ms {
+        padding-bottom: 2rem;
+
+        &--background {
+            .givewp-layouts-header__content {
+                position: static;
+                margin-bottom: 0;
+            }
+
+            .givewp-layouts-headerImage {
+
+                img {
+                    position: absolute;
+                    left: 0;
+                    bottom: 0;
+                    height: 100%;
+                    min-height: 100%;
+                    border-radius: var(--givewp-rounded-8);
+                }
+            }
+        }
+    }
+}
+
diff --git a/src/DonationForms/FormDesigns/TwoPanelStepsFormLayout/css/_sections.scss b/src/DonationForms/FormDesigns/TwoPanelStepsFormLayout/css/_sections.scss
@@ -0,0 +1,17 @@
+.givewp-donation-form__steps {
+    @media screen and (max-width: 71.5rem) {
+        border-radius: 0;
+        box-shadow: none;
+    }
+}
+
+.givewp-layouts-section {
+    margin-bottom: 0;
+
+    &__fieldset {
+        display: flex;
+        flex-direction: column;
+        gap: var(--givewp-spacing-6);
+    }
+}
+
diff --git a/src/DonationForms/FormDesigns/TwoPanelStepsFormLayout/css/main.scss b/src/DonationForms/FormDesigns/TwoPanelStepsFormLayout/css/main.scss
@@ -0,0 +1,5 @@
+@layer form-design {
+    @import 'container';
+    @import 'sections';
+    @import 'header';
+}
diff --git a/src/DonationForms/ServiceProvider.php b/src/DonationForms/ServiceProvider.php
@@ -14,6 +14,7 @@
 use Give\DonationForms\DataTransferObjects\DonationFormPreviewRouteData;
 use Give\DonationForms\DataTransferObjects\DonationFormViewRouteData;
 use Give\DonationForms\FormDesigns\ClassicFormDesign\ClassicFormDesign;
+use Give\DonationForms\FormDesigns\TwoPanelStepsFormLayout\TwoPanelStepsFormLayout;
 use Give\DonationForms\FormDesigns\MultiStepFormDesign\MultiStepFormDesign;
 use Give\DonationForms\FormPage\TemplateHandler;
 use Give\DonationForms\Migrations\CleanMultipleSlashesOnDB;
@@ -161,6 +162,7 @@ private function registerFormDesigns()
             try {
                 $formDesignRegistrar->registerDesign(ClassicFormDesign::class);
                 $formDesignRegistrar->registerDesign(MultiStepFormDesign::class);
+                $formDesignRegistrar->registerDesign(TwoPanelStepsFormLayout::class);
             } catch (Exception $e) {
                 Log::error('Error registering form designs', [
                     'message' => $e->getMessage(),

diff --git a/src/DonationForms/ViewModels/DonationFormViewModel.php b/src/DonationForms/ViewModels/DonationFormViewModel.php
@@ -193,6 +193,7 @@ private function formStatsData(): array
     }
 
     /**
+     * @unreleased added includeHeaderInMultiStep to form design export
      * @since 3.0.0
      */
     public function exports(): array
@@ -227,6 +228,7 @@ public function exports(): array
                     'id' => $formDesign::id(),
                     'name' => $formDesign::name(),
                     'isMultiStep' => $formDesign->isMultiStep(),
+                    'includeHeaderInMultiStep' => $formDesign->shouldIncludeHeaderInMultiStep(),
                 ] : null,
             ]),
             'previewMode' => $this->previewMode,

diff --git a/src/DonationForms/resources/app/DonationFormApp.tsx b/src/DonationForms/resources/app/DonationFormApp.tsx
@@ -58,6 +58,7 @@ function App({form}: { form: DonationForm }) {
         return (
             <DonationFormSettingsProvider value={{...form.settings, ...donationFormNodeSettings}}>
                 <DonationFormStateProvider initialState={initialState}>
+                    {!form.design?.includeHeaderInMultiStep && form.settings.showHeader && <Header form={form} />}
                     <MultiStepForm form={form} />
                 </DonationFormStateProvider>
             </DonationFormSettingsProvider>

diff --git a/src/DonationForms/resources/app/form/Header.tsx b/src/DonationForms/resources/app/form/Header.tsx
@@ -3,6 +3,7 @@ import {withTemplateWrapper} from '../templates';
 import type {GoalType} from '@givewp/forms/propTypes';
 import amountFormatter from '@givewp/forms/app/utilities/amountFormatter';
 import DonationFormErrorBoundary from '@givewp/forms/app/errors/boundaries/DonationFormErrorBoundary';
+import type {Form as DonationForm} from '@givewp/forms/types';
 
 const formTemplates = window.givewp.form.templates;
 
@@ -16,7 +17,7 @@ const HeaderImageTemplate = withTemplateWrapper(formTemplates.layouts.headerImag
 /**
  * @since 3.0.0
  */
-export default function Header({form}) {
+export default function Header({form}: {form: DonationForm}) {
     const formatGoalAmount = useCallback((amount: number) => {
         return amountFormatter(form.currency, {
             maximumFractionDigits: 0,
@@ -26,6 +27,7 @@ export default function Header({form}) {
     return (
         <DonationFormErrorBoundary>
             <HeaderTemplate
+                isMultiStep={form.design.isMultiStep}
                 HeaderImage={() =>
                     form.settings?.designSettingsImageUrl && (
                         <HeaderImageTemplate

diff --git a/src/DonationForms/resources/app/form/MultiStepForm/index.tsx b/src/DonationForms/resources/app/form/MultiStepForm/index.tsx
@@ -54,12 +54,14 @@ const convertSectionsToSteps = (sections: Section[], hasFirstStep: boolean) => {
 };
 
 /**
+ * @unreleased updated to use includeHeaderInMultiStep
  * @since 3.0.0
  */
 export default function MultiStepForm({form}: {form: Form}) {
-    const steps = convertSectionsToSteps(form.nodes, form.settings?.showHeader);
+    const shouldIncludeHeaderInSteps = form.design?.includeHeaderInMultiStep && form.settings?.showHeader;
+    const steps = convertSectionsToSteps(form.nodes, shouldIncludeHeaderInSteps);
 
-    if (form.settings?.showHeader) {
+    if (shouldIncludeHeaderInSteps) {
         steps.unshift({
             id: 0,
             title: null,

diff --git a/src/DonationForms/resources/app/store/form-settings/index.tsx b/src/DonationForms/resources/app/store/form-settings/index.tsx
@@ -12,6 +12,7 @@ type PropTypes = {
         donateButtonCaption: string;
         multiStepNextButtonText: string;
         multiStepFirstButtonText: string;
+        showHeader: boolean;
     };
     children: ReactNode;
 };

diff --git a/src/DonationForms/resources/propTypes.ts b/src/DonationForms/resources/propTypes.ts
@@ -179,6 +179,7 @@ export interface HeaderProps {
     Title: FC<HeaderTitleProps | {}>;
     Description: FC<HeaderDescriptionProps | {}>;
     Goal: FC<GoalProps | {}>;
+    isMultiStep: boolean
 }
 
 export interface HeaderImageProps {

diff --git a/src/DonationForms/resources/registrars/templates/layouts/Header.tsx b/src/DonationForms/resources/registrars/templates/layouts/Header.tsx
@@ -1,15 +1,21 @@
 import type {HeaderProps} from '@givewp/forms/propTypes';
+import cx from 'classnames';
 
 /**
  * @since 3.5.0 add HeaderImage
  * @since 3.0.0
  */
-export default function Header({HeaderImage, Title, Description, Goal}: HeaderProps) {
-    const {designSettingsImageStyle, designSettingsImageUrl} = window.givewp.form.hooks.useDonationFormSettings();
+export default function Header({ HeaderImage, Title, Description, Goal, isMultiStep }: HeaderProps) {
+    const { designSettingsImageStyle, designSettingsImageUrl } = window.givewp.form.hooks.useDonationFormSettings();
 
     if (!designSettingsImageUrl) {
         return (
-            <div className={`givewp-layouts-header__templates-ms`}>
+            <div className={
+                cx({
+                        'givewp-layouts-header__templates': !isMultiStep,
+                        'givewp-layouts-header__templates-ms': isMultiStep
+                    }
+                )}>
                 <Title />
                 <Description />
                 <Goal />
@@ -19,7 +25,12 @@ export default function Header({HeaderImage, Title, Description, Goal}: HeaderPr
 
     return (
         <div
-            className={`givewp-layouts-header__templates-ms givewp-layouts-header__templates-ms--${designSettingsImageStyle}`}
+            className={cx({
+                'givewp-layouts-header__templates': !isMultiStep,
+                [`givewp-layouts-header__templates--${designSettingsImageStyle}`]: !isMultiStep,
+                'givewp-layouts-header__templates-ms': isMultiStep,
+                [`givewp-layouts-header__templates-ms--${designSettingsImageStyle}`]: isMultiStep
+            })}
         >
             <HeaderImageTemplates
                 imagePosition={designSettingsImageStyle}
@@ -32,7 +43,7 @@ export default function Header({HeaderImage, Title, Description, Goal}: HeaderPr
     );
 }
 
-function HeaderImageTemplates({imagePosition, HeaderImage, Title, Description, Goal}) {
+function HeaderImageTemplates({ imagePosition, HeaderImage, Title, Description, Goal }) {
     switch (imagePosition) {
         case 'background':
             return (

diff --git a/src/DonationForms/resources/styles/design-settings/image.scss b/src/DonationForms/resources/styles/design-settings/image.scss
@@ -25,8 +25,8 @@
                     img {
                         object-fit: cover;
                         min-width: 100%;
-                        border-top-left-radius: 0.5rem;
-                        border-top-right-radius: 0.5rem;
+                        border-top-left-radius: var(--givewp-rounded-8);
+                        border-top-right-radius: var(--givewp-rounded-8);
                     }
                 }
             }
@@ -98,7 +98,7 @@
                     }
 
                     .givewp-layouts-goal {
-                        margin-top: -1.35rem;
+                        margin-top: -1.25rem;
                     }
                 }
             }
@@ -107,8 +107,9 @@
 }
 
 /* Multi Step */
-.givewp-donation-form__steps-body {
+.givewp-donation-form__steps-body, .givewp-donation-form > .givewp-layouts-header {
     padding: 0;
+    background: #fff;
 
     .givewp-layouts-multiStepForm, .givewp-layouts-header__templates-ms {
         padding: 2rem 2rem 0 2rem;
@@ -125,13 +126,6 @@
         }
     }
 
-    .givewp-layouts-headerTitle {
-        color: var(--givewp-grey-900);
-    }
-
-    .givewp-layouts-headerDescription {
-        color: var(--givewp-grey-700);
-    }
 
     .givewp-layouts-header__templates-ms {
         .givewp-layouts-headerImage {
@@ -140,11 +134,19 @@
             img {
                 object-fit: cover;
                 min-width: 100%;
-                border-top-left-radius: 0.5rem;
-                border-top-right-radius: 0.5rem;
+                border-top-left-radius: var(--givewp-rounded-8);
+                border-top-right-radius: var(--givewp-rounded-8);
             }
         }
 
+        .givewp-layouts-headerTitle {
+            color: var(--givewp-grey-900);
+        }
+
+        .givewp-layouts-headerDescription {
+            color: var(--givewp-grey-700);
+        }
+
 
         &--background {
             padding: 0;
@@ -167,7 +169,7 @@
             }
 
 
-            div:not(.givewp-layouts-headerImage), aside {
+            div:not(.givewp-layouts-headerImage, .givewp-layouts-header__content), aside {
                 position: relative;
                 z-index: 999;
             }
@@ -205,7 +207,7 @@
             .givewp-layouts-headerImage {
                 img {
                     border-radius: var(--givewp-rounded-4);
-
+                    max-height: 320px;
                 }
             }
 

diff --git a/src/DonationForms/resources/types.ts b/src/DonationForms/resources/types.ts
@@ -231,6 +231,7 @@ export interface Form extends Group {
         id: string;
         name: string;
         isMultiStep: boolean;
+        includeHeaderInMultiStep: boolean;
     };
     nodes: Section[];
     currencySwitcherSettings?: CurrencySwitcherSetting[];

diff --git a/...mponents/onboarding/DesignSelector/images/two-panel-steps-design-screenshot.png b/...mponents/onboarding/DesignSelector/images/two-panel-steps-design-screenshot.png