From 77bd6fddbb45afd60d0fe1db3296f83a116757d5 Mon Sep 17 00:00:00 2001
From: Ante Laca <ante.laca@gmail.com>
Date: Fri, 22 Sep 2023 22:13:01 +0200
Subject: [PATCH] Feature: Show "Transfer" menu item to user when transfer bar
 is dismissed (#6954)

Co-authored-by: Ante Laca
Co-authored-by: Kyle B. Johnson
---
 .../resources/js/form-builder/src/App.tsx     |  1 +
 .../onboarding/transfer/TransferNotice.tsx    | 66 ++------------
 .../src/containers/HeaderContainer.tsx        | 64 +++++++++-----
 .../js/form-builder/src/styles/_transfer.scss | 85 +++++++++++++++++++
 .../form-builder/src/types/transferState.ts   |  1 +
 5 files changed, 137 insertions(+), 80 deletions(-)

diff --git a/src/FormBuilder/resources/js/form-builder/src/App.tsx b/src/FormBuilder/resources/js/form-builder/src/App.tsx
index b76df0c94e..3ea0ef2e64 100644
--- a/src/FormBuilder/resources/js/form-builder/src/App.tsx
+++ b/src/FormBuilder/resources/js/form-builder/src/App.tsx
@@ -20,6 +20,7 @@ const initialState = {
         showNotice: Boolean(window.migrationOnboardingData.transferShowNotice),
         showUpgradeModal: Boolean(window.migrationOnboardingData.showUpgradeDialog),
         showTransferModal: false,
+        showTooltip: false,
     }
 };
 
diff --git a/src/FormBuilder/resources/js/form-builder/src/components/onboarding/transfer/TransferNotice.tsx b/src/FormBuilder/resources/js/form-builder/src/components/onboarding/transfer/TransferNotice.tsx
index de1c5bddec..c2d0cf20fb 100644
--- a/src/FormBuilder/resources/js/form-builder/src/components/onboarding/transfer/TransferNotice.tsx
+++ b/src/FormBuilder/resources/js/form-builder/src/components/onboarding/transfer/TransferNotice.tsx
@@ -1,58 +1,6 @@
-import {CSSProperties} from 'react';
 import {__} from '@wordpress/i18n';
 import {ExitIcon} from '@givewp/components/AdminUI/Icons'
-
-import {useFormState, useFormStateDispatch, setTransferState} from '@givewp/form-builder/stores/form-state';
-
-const containerStyles = {
-    zIndex: 99999999,
-    position: 'fixed',
-    bottom: 0,
-    left: '10%',
-    right: '10%',
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: 'var(--givewp-blue-600)',
-    color: '#fff',
-    padding: '15px',
-    fontWeight: 500,
-    fontSize: '0.875rem',
-    gap: '10px'
-} as CSSProperties;
-
-const nextStepStyles = {
-    flexGrow: 0,
-    fontSize: '0.75rem',
-    fontWeight: 'bold',
-    lineHeight: '1.33',
-    letterSpacing: '0.06px',
-    color: 'var(--givewp-blue-600)',
-    backgroundColor: '#fff',
-    borderRadius: '4px',
-    padding: '0.25rem 0.5rem'
-} as CSSProperties;
-
-const buttonStyles = {
-    all: 'unset',
-    fontWeight: 'bold',
-    color: '#fff',
-    cursor: 'pointer'
-} as CSSProperties;
-
-const closeIconContainerStyles = {
-    position: 'absolute',
-    right: 15
-} as CSSProperties;
-
-const closeIconStyles = {
-    fill: '#fff',
-    width: '18px',
-    height: '18px',
-    cursor: 'pointer'
-} as CSSProperties;
-
+import {setTransferState, useFormState, useFormStateDispatch} from '@givewp/form-builder/stores/form-state';
 
 export default function TransferNotice() {
     const {transfer} = useFormState();
@@ -65,9 +13,9 @@ export default function TransferNotice() {
     }
 
     return (
-        <div style={containerStyles}>
+        <div className="givewp-transfer-notice-container">
             <div>
-                <div style={nextStepStyles}>
+                <div className="givewp-transfer-next-step">
                     {__('Next step', 'give')}
                 </div>
             </div>
@@ -76,18 +24,18 @@ export default function TransferNotice() {
             </div>
             <div>
                 <button
-                    style={buttonStyles}
+                    className="givewp-transfer-button"
                     onClick={() => dispatch(setTransferState({showTransferModal: true}))}
                 >
                     {__('Transfer data', 'give')}
                 </button>
             </div>
-            <div style={closeIconContainerStyles}>
+            <div className="givewp-transfer-close-icon-container">
                 <ExitIcon
-                    style={closeIconStyles}
                     onClick={() => {
-                        dispatch(setTransferState({showNotice: false}))
+                        dispatch(setTransferState({showNotice: false, showTooltip: true}))
                         fetch(transferActionUrl + `&formId=${formId}`, {method: 'POST'})
+                        document.getElementById('FormBuilderSidebarToggle')?.click();
                     }}
                 />
             </div>
diff --git a/src/FormBuilder/resources/js/form-builder/src/containers/HeaderContainer.tsx b/src/FormBuilder/resources/js/form-builder/src/containers/HeaderContainer.tsx
index d69fecb052..6aaf69b069 100644
--- a/src/FormBuilder/resources/js/form-builder/src/containers/HeaderContainer.tsx
+++ b/src/FormBuilder/resources/js/form-builder/src/containers/HeaderContainer.tsx
@@ -34,20 +34,20 @@ const Logo = () => (
 );
 
 const HeaderContainer = ({
-    selectedSecondarySidebar,
-    toggleSelectedSecondarySidebar,
-    showSidebar,
-    toggleShowSidebar,
-    onSaveNotice,
-}) => {
+                             selectedSecondarySidebar,
+                             toggleSelectedSecondarySidebar,
+                             showSidebar,
+                             toggleShowSidebar,
+                             onSaveNotice,
+                         }) => {
     const {blocks, settings: formSettings, isDirty, transfer} = useFormState();
 
     const {formTitle} = formSettings;
     const dispatch = useFormStateDispatch();
     const [isSaving, setSaving] = useState(null);
 
-    const isDraftDisabled = ( isSaving || !isDirty ) && 'draft' === formSettings.formStatus;
-    const isPublishDisabled = ( isSaving || !isDirty ) && 'publish' === formSettings.formStatus;
+    const isDraftDisabled = (isSaving || !isDirty) && 'draft' === formSettings.formStatus;
+    const isPublishDisabled = (isSaving || !isDirty) && 'publish' === formSettings.formStatus;
     const {isMigratedForm, isTransferredForm} = window.migrationOnboardingData;
 
     const onSave = (formStatus: FormStatus) => {
@@ -120,8 +120,8 @@ const HeaderContainer = ({
                         {isSaving && 'draft' === isSaving
                             ? __('Saving...', 'give')
                             : 'draft' === formSettings.formStatus
-                            ? __('Save as Draft', 'give')
-                            : __('Switch to Draft', 'give')}
+                                ? __('Save as Draft', 'give')
+                                : __('Switch to Draft', 'give')}
                     </Button>
                     <Button
                         onClick={() => onSave('publish')}
@@ -132,15 +132,28 @@ const HeaderContainer = ({
                         {isSaving && 'publish' === isSaving
                             ? __('Updating...', 'give')
                             : 'publish' === formSettings.formStatus
-                            ? __('Update', 'give')
-                            : __('Publish', 'give')}
+                                ? __('Update', 'give')
+                                : __('Publish', 'give')}
                     </Button>
                     <Button onClick={toggleShowSidebar} isPressed={showSidebar} icon={drawerRight} />
                     <Dropdown
                         popoverProps={{placement: 'bottom-start'}}
                         // @ts-ignore
                         focusOnMount={'container'}
-                        renderToggle={({isOpen, onToggle}) => <Button onClick={onToggle} icon={moreVertical} />}
+                        renderToggle={({isOpen, onToggle}) => {
+                            return (
+                                <Button
+                                    id="FormBuilderSidebarToggle"
+                                    icon={moreVertical}
+                                    onClick={() => {
+                                        if (transfer.showTooltip) {
+                                            dispatch(setTransferState({showTooltip: false}))
+                                        }
+                                        onToggle();
+                                    }}
+                                />
+                            )
+                        }}
                         renderContent={({onClose}) => (
                             <div style={{minWidth: '280px', maxWidth: '400px'}}>
                                 <MenuGroup label={__('Tools', 'give')}>
@@ -157,14 +170,23 @@ const HeaderContainer = ({
                                         {__('Show Guided Tour', 'give')}
                                     </MenuItem>
                                     {isMigratedForm && !isTransferredForm && !transfer.showNotice && (
-                                        <MenuItem
-                                            onClick={() => {
-                                                dispatch(setTransferState({showTransferModal: true}));
-                                                onClose();
-                                            }}
-                                        >
-                                            {__('Transfer Donation Data', 'give')}
-                                        </MenuItem>
+                                        <>
+                                            <MenuItem
+                                                className={transfer.showTooltip && 'givewp-transfer-selected-menuitem'}
+                                                onClick={() => {
+                                                    dispatch(setTransferState({showTransferModal: true}));
+                                                    onClose();
+                                                }}
+                                            >
+                                                {__('Transfer Donation Data', 'give')}
+                                            </MenuItem>
+
+                                            {transfer.showTooltip && (
+                                                <div className="givewp-transfer-tooltip">
+                                                    {__('Want to transfer donation data later? Access this option in the three dots menu above at any time.', 'give')}
+                                                </div>
+                                            )}
+                                        </>
                                     )}
                                 </MenuGroup>
                             </div>
diff --git a/src/FormBuilder/resources/js/form-builder/src/styles/_transfer.scss b/src/FormBuilder/resources/js/form-builder/src/styles/_transfer.scss
index 6242e33e8b..99f1a7febc 100644
--- a/src/FormBuilder/resources/js/form-builder/src/styles/_transfer.scss
+++ b/src/FormBuilder/resources/js/form-builder/src/styles/_transfer.scss
@@ -55,3 +55,88 @@
         height: auto;
     }
 }
+
+/**
+ + Transfer notice
+ */
+
+.givewp-transfer-notice-container {
+    z-index: 99999999;
+    position: fixed;
+    bottom: 0;
+    left: 10%;
+    right: 10%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--givewp-blue-600);
+    color: #fff;
+    padding: 15px;
+    font-weight: 500;
+    font-size: 0.875rem;
+    gap: 10px;
+
+    .givewp-transfer-next-step {
+        flex-grow: 0;
+        font-size: 0.75rem;
+        font-weight: bold;
+        line-height: 1.33;
+        letter-spacing: 0.06px;
+        color: var(--givewp-blue-600);
+        background-color: #fff;
+        border-radius: 4px;
+        padding: 0.25rem 0.5rem;
+    }
+
+    .givewp-transfer-button {
+        all: unset;
+        font-weight: bold;
+        color: #fff;
+        cursor: pointer;
+    }
+
+    .givewp-transfer-close-icon-container {
+        position: absolute;
+        right: 15px;
+
+        svg {
+            fill: #fff;
+            width: 18px;
+            height: 18px;
+            cursor: pointer;
+        }
+    }
+}
+
+/**
+ * Tooltip
+ */
+
+.givewp-transfer-tooltip {
+    position: absolute;
+    bottom: -90px;
+    left: 0;
+    background-color: #19661c;
+    color: #fff;
+    padding: 1rem;
+    border-radius: 4px;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05);
+}
+
+.givewp-transfer-tooltip::after {
+    content: " ";
+    position: absolute;
+    top: -15px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 8px;
+    border-style: solid;
+    border-color:  transparent transparent #19661c transparent;
+}
+
+.givewp-transfer-selected-menuitem {
+    border: 2px solid #19661c !important;
+    border-radius: 4px;
+}
+
diff --git a/src/FormBuilder/resources/js/form-builder/src/types/transferState.ts b/src/FormBuilder/resources/js/form-builder/src/types/transferState.ts
index d22cbc9471..ee247560b3 100644
--- a/src/FormBuilder/resources/js/form-builder/src/types/transferState.ts
+++ b/src/FormBuilder/resources/js/form-builder/src/types/transferState.ts
@@ -2,4 +2,5 @@ export type TransferState = {
     showNotice: boolean;
     showTransferModal: boolean;
     showUpgradeModal: boolean;
+    showTooltip: boolean;
 };