Feature: Add support for pausing/resuming subscriptions

includes/gateways/stripe/includes/admin/class-give-stripe-admin-settings.php

@@ -200,6 +200,17 @@ public function register_settings( $settings ) {
 						'type' => 'checkbox',
 					];
 
+                    $settings['general'][] = [
+                        'name' => esc_html__( 'Stripe Receipt Emails', 'give' ),
+                        'desc' => sprintf(
+                        /* translators: 1. GiveWP Support URL */
+                            __( 'Check this option if you would like donors to receive receipt emails directly from Stripe. By default, donors will receive GiveWP generated <a href="%1$s" target="_blank">receipt emails</a>. Checking this option does not disable GiveWP emails.', 'give' ),
+                            admin_url( '/edit.php?post_type=give_forms&page=give-settings&tab=emails' )
+                        ),
+                        'id'   => 'stripe_receipt_emails',
+                        'type' => 'checkbox',
+                    ];
+
 					/**
 					 * This filter hook is used to add fields after Stripe General fields.
 					 *
@@ -209,17 +220,6 @@ public function register_settings( $settings ) {
 					 */
 					$settings = apply_filters( 'give_stripe_add_after_general_fields', $settings );
 
-					$settings['general'][] = [
-						'name' => esc_html__( 'Stripe Receipt Emails', 'give' ),
-						'desc' => sprintf(
-							/* translators: 1. GiveWP Support URL */
-							__( 'Check this option if you would like donors to receive receipt emails directly from Stripe. By default, donors will receive GiveWP generated <a href="%1$s" target="_blank">receipt emails</a>. Checking this option does not disable GiveWP emails.', 'give' ),
-							admin_url( '/edit.php?post_type=give_forms&page=give-settings&tab=emails' )
-						),
-						'id'   => 'stripe_receipt_emails',
-						'type' => 'checkbox',
-					];
-
 					$settings['general'][] = [
 						'name'  => esc_html__( 'Stripe Gateway Documentation', 'give' ),
 						'id'    => 'display_settings_general_docs_link',

src/DonorDashboards/resources/js/app/components/button/index.js → src/DonorDashboards/resources/js/app/components/button/index.tsx

@@ -1,7 +1,20 @@
 import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
+import cx from 'classnames';
+
 import './style.scss';
 
-const Button = ({icon, children, onClick, href, type, ...rest}) => {
+type ButtonProps = {
+    classnames?: string;
+    icon?: any;
+    children: React.ReactNode;
+    onClick?: () => void;
+    href?: string;
+    type?: 'button' | 'submit' | 'reset';
+    variant?: boolean;
+    disabled?: boolean;
+};
+
+const Button = ({icon, children, onClick, href, type, variant,classnames, ...rest}: ButtonProps) => {
     const handleHrefClick = (e) => {
         e.preventDefault();
         window.parent.location = href;
@@ -22,12 +35,15 @@ const Button = ({icon, children, onClick, href, type, ...rest}) => {
     }
     return (
         <button
-            className="give-donor-dashboard-button give-donor-dashboard-button--primary"
+            className={cx('give-donor-dashboard-button', classnames, {
+                ['give-donor-dashboard-button--primary']: !variant,
+                ['give-donor-dashboard-button--variant']: variant,
+            })}
             onClick={onClick ? () => onClick() : null}
             type={type}
             {...rest}
         >
-            {children}
+            <span>{children}</span>
             {icon && <FontAwesomeIcon icon={icon} />}
         </button>
     );

src/DonorDashboards/resources/js/app/components/button/style.scss

@@ -9,6 +9,7 @@
     border: 1px solid var(--give-donor-dashboard-accent-color);
     border-radius: 3px;
     display: inline-flex;
+    width: fit-content;
     align-items: center;
     box-shadow: 0 0 0 0 #7ec980, 0 0 0 0 #4fa651;
     transition: box-shadow 0.1s ease, background-color ease-in 0.3s;
@@ -29,6 +30,52 @@
 
     &.give-donor-dashboard-button--primary {
         color: #fff !important;
-        background: var(--give-donor-dashboard-accent-color);
+        position: relative;
+        background: none;
+        box-shadow: none;
+        justify-content: center;
+        overflow: hidden;
+
+        &:before {
+            content: '';
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            background: var(--give-donor-dashboard-accent-color);
+            z-index: 0;
+            transition: filter 0.3s ease;
+        }
+
+        &:hover:before {
+            filter: brightness(90%); // Darkens the background on hover
+        }
+
+        &.disabled:before {
+            display: none;
+        }
+
+        span {
+            position: relative;
+            z-index: 1;
+        }
+    }
+
+    &.give-donor-dashboard-button--variant {
+        color: var(--give-donor-dashboard-accent-color) !important;
+        background: var(--givewp-shades-white);
+        box-shadow: none;
+        border: 1px solid var(--give-donor-dashboard-accent-color);
+        margin: 0;
+        justify-content: center;
+
+        &:hover {
+            filter: brightness(90%);
+        }
+
+        span {
+            color: inherit;
+        }
     }
 }

src/DonorDashboards/resources/js/app/components/dashboard-content/index.js

@@ -2,6 +2,7 @@ import {useState, useEffect} from 'react';
 import {useSelector} from 'react-redux';
 
 import './style.scss';
+import '../subscription-manager/style.scss';
 
 const DashboardContent = () => {
     const tabsSelector = useSelector((state) => state.tabs);

src/DonorDashboards/resources/js/app/components/dashboard-loading-spinner/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import "./style.scss";
+
+/**
+ * @unreleased reference givewp/src/DonorDashboards/resources/views/donordashboardloader.php
+ */
+export default function DashboardLoadingSpinner() {
+
+
+    return (
+        <div className={"givewp-donordashboard-loader"}>
+            <div className={"givewp-donordashboard-loader_wrapper"}>
+                <svg
+                    className="givewp-donordashboard-loader_spinner"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 349 348"
+                >
+                    <style type="text/css">
+                        {`.st0 { fill: var(--give-donor-dashboard-accent-color); }`}
+                    </style>
+                    <path className="st0" d="M25.1,204.57c-13.38,0-24.47-10.6-24.97-24.08C0.04,178.09,0,175.97,0,174C0,77.78,78.28-0.5,174.5-0.5c13.81,0,25,11.19,25,25s-11.19,25-25,25C105.85,49.5,50,105.35,50,174c0,1.37,0.03,2.85,0.1,4.65c0.51,13.8-10.27,25.39-24.07,25.9C25.72,204.56,25.41,204.57,25.1,204.57z" />
+                    <path className="st0" d="M174.5,348.5c-13.81,0-25-11.19-25-25c0-13.81,11.19-25,25-25c68.65,0,124.5-55.85,124.5-124.5c0-1.38-0.03-2.85-0.1-4.65c-0.51-13.8,10.26-25.4,24.06-25.91c13.83-0.53,25.4,10.26,25.91,24.06c0.09,2.39,0.13,4.51,0.13,6.49C349,270.22,270.72,348.5,174.5,348.5z" />
+                </svg>
+            </div>
+        </div>
+    );
+};
+

src/DonorDashboards/resources/js/app/components/dashboard-loading-spinner/style.scss

@@ -0,0 +1,38 @@
+.givewp-donordashboard-loader {
+    width: 100%;
+    height: 100%;
+    min-height: 790px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    pointer-events: none;
+}
+
+.givewp-donordashboard-loader_wrapper {
+    width: calc(90% - 12px);
+    height: 100%;
+    max-width: 920px;
+    margin: 8px auto;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+
+.givewp-donordashboard-loader_spinner {
+    width: 90px;
+    height: 90px;
+    animation: spin 0.6s linear infinite;
+    .st0 {
+        fill: var(--give-donor-dashboard-accent-color);
+    }
+}
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

src/DonorDashboards/resources/js/app/components/error-message/index.tsx

@@ -0,0 +1,33 @@
+import {__} from '@wordpress/i18n';
+import ModalDialog from '@givewp/components/AdminUI/ModalDialog';
+import {store} from '../../tabs/recurring-donations/store';
+import {setError} from '../../tabs/recurring-donations/store/actions';
+
+import './style.scss';
+
+type ErrorMessageProps = {
+    error: string;
+};
+
+export default function ErrorMessage({error}: ErrorMessageProps) {
+    const {dispatch} = store;
+
+    const toggleModal = () => {
+        dispatch(setError(null));
+    };
+
+    return (
+        <ModalDialog
+            wrapperClassName={'give-donor-dashboard__error-modal'}
+            title={__('Error', 'give')}
+            showHeader={true}
+            isOpen={!!error}
+            handleClose={toggleModal}
+        >
+            <p className={'give-donor-dashboard__error-message'}>{error}</p>
+            <button className={'give-donor-dashboard__error-close'} onClick={toggleModal}>
+                {__('Okay', 'give')}
+            </button>
+        </ModalDialog>
+    );
+}

src/DonorDashboards/resources/js/app/components/error-message/style.scss

@@ -0,0 +1,42 @@
+.givewp-modal-wrapper.give-donor-dashboard__error-modal {
+    -webkit-backdrop-filter: blur(4px);
+    backdrop-filter: blur(4px);
+    background-color: rgba(0, 0, 0, 0.5) !important;
+
+    .givewp-modal-dialog {
+        border-radius: 8px;
+
+        .givewp-modal-header {
+            border-radius: 8px 8px 0 0;
+            background-color: #fafafa;
+            padding: 1rem 1.5rem;
+        }
+
+        .givewp-modal-close {
+            right: 1rem;
+        }
+
+        .givewp-modal-content {
+            padding: 1.5rem 1.5rem 2rem 1.5rem;
+
+            .give-donor-dashboard__error-close {
+                flex-grow: 1;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                align-self: stretch;
+                width: 100%;
+                margin-top: 3rem;
+                padding: 1rem 2rem;
+                border-radius: 4px;
+                background: #0073aa;
+                color: #fff;
+                font-size: 1rem;
+                font-weight: 500;
+                border: none;
+                outline: none;
+                cursor: pointer;
+            }
+        }
+    }
+}

src/DonorDashboards/resources/js/app/components/heading/style.scss

@@ -5,7 +5,7 @@
     font-size: 16px;
     margin: 20px 0 10px 0;
     display: flex;
-    align-items: center;
+    align-items: flex-end;
 
     svg {
         margin-right: 8px;

src/DonorDashboards/resources/js/app/components/logout-modal/index.js

@@ -11,22 +11,15 @@ const LogoutModal = ({onRequestClose}) => {
     };
 
     return (
-        <div className="give-donor-dashboard-logout-modal">
-            <div className="give-donor-dashboard-logout-modal__frame">
-                <div className="give-donor-dashboard-logout-modal__header">
-                    {__('Are you sure you want to logout?', 'give')}
-                </div>
-                <div className="give-donor-dashboard-logout-modal__body">
-                    <div className="give-donor-dashboard-logout-modal__buttons">
-                        <Button onClick={() => handleLogout()}>{__('Yes, logout', 'give')}</Button>
-                        <a className="give-donor-dashboard-logout-modal__cancel" onClick={() => onRequestClose()}>
-                            {__('Nevermind', 'give')}
-                        </a>
-                    </div>
-                </div>
+        <>
+            <div className="give-donor-dashboard-logout-modal__buttons">
+                <Button onClick={() => handleLogout()}>{__('Yes, logout', 'give')}</Button>
+                <a className="give-donor-dashboard-logout-modal__cancel" onClick={() => onRequestClose()}>
+                    {__('Nevermind', 'give')}
+                </a>
             </div>
             <div className="give-donor-dashboard-logout-modal__bg" onClick={() => onRequestClose()} />
-        </div>
+        </>
     );
 };