Merge github.com:impress-org/give into epic/events-GIVE-265

give.php

@@ -6,7 +6,7 @@
  * Description: The most robust, flexible, and intuitive way to accept donations on WordPress.
  * Author: GiveWP
  * Author URI: https://givewp.com/
- * Version: 3.5.0
+ * Version: 3.5.1
  * Requires at least: 6.0
  * Requires PHP: 7.2
  * Text Domain: give
@@ -404,7 +404,7 @@ private function setup_constants()
     {
         // Plugin version.
         if (!defined('GIVE_VERSION')) {
-            define('GIVE_VERSION', '3.5.0');
+            define('GIVE_VERSION', '3.5.1');
         }
 
         // Plugin Root File.

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;

readme.txt

@@ -5,7 +5,7 @@ Tags: donation, donate, recurring donations, fundraising, crowdfunding
 Requires at least: 6.0
 Tested up to: 6.4
 Requires PHP: 7.2
-Stable tag: 3.5.0
+Stable tag: 3.5.1
 License: GPLv3
 License URI: http://www.gnu.org/licenses/gpl-3.0.html
 
@@ -262,6 +262,9 @@ The 2% fee on Stripe donations only applies to donations taken via our free Stri
 10. Use almost any payment gateway integration with GiveWP through our add-ons or by creating your own add-on.
 
 == Changelog ==
+= 3.5.1: March 6th, 2024 =
+* Fix: Resolved an issue with PayPal that was preventing the ability to connect a PayPal account to GiveWP.
+
 = 3.5.0: February 29th, 2024 =
 * Security: Resolved a couple potential security vulnerabilities
 * New: Added the ability to add a header image to forms in the Visual Form Builder

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
      */

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';
+    }
+}

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);
+    }
+}

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);
+                }
+            }
+        }
+    }
+}
+

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);
+    }
+}
+

src/DonationForms/FormDesigns/TwoPanelStepsFormLayout/css/main.scss

@@ -0,0 +1,5 @@
+@layer form-design {
+    @import 'container';
+    @import 'sections';
+    @import 'header';
+}

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(),

src/DonationForms/V2/DonationFormsAdminPage.php

@@ -337,7 +337,7 @@ public function getSupportedAddons(): array
             'MailChimp' => class_exists('Give_MailChimp'),
             //            'Manual Donations' => class_exists('Give_Manual_Donations'),
             'Funds' => defined('GIVE_FUNDS_ADDON_NAME'),
-            //            'Peer-to-Peer' => defined('GIVE_P2P_NAME'),
+            'Peer-to-Peer' => defined('GIVE_P2P_NAME'),
             'Gift Aid' => class_exists('Give_Gift_Aid'),
             //            'MailChimp' => class_exists('Give_MailChimp'),
             //            'Text-to-Give' => defined('GIVE_TEXT_TO_GIVE_ADDON_NAME'),

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,

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>

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

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,

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;
 };

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 {

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 (