Commit b77e0544 authored by Michael Iseard's avatar Michael Iseard
Browse files

Further improvements to intro guide

parent 51f65e04
import classnames from 'classnames';
import { useState } from '@wordpress/element';
import { Button } from "@wordpress/components"
import { __ } from "@wordpress/i18n"
import classnames from 'classnames'
import {useState} from '@wordpress/element'
import {useFocusOnMount, useMergeRefs, useConstrainedTabbing} from "@wordpress/compose"
import {LEFT, RIGHT, ESCAPE} from '@wordpress/keycodes'
import {Button} from "@wordpress/components"
import {__} from "@wordpress/i18n"
import {Btn} from "./Btn"
const Guide = ({pages = [], className, onFinish}) => {
const [ currentPage, setCurrentPage ] = useState( 0 );
const canGoBack = currentPage > 0;
const canGoForward = currentPage < pages.length - 1;
const [currentPage, setCurrentPage] = useState(0)
const canGoBack = currentPage > 0
const canGoForward = currentPage < pages.length - 1
const focusOnMountRef = useFocusOnMount(true)
const constrainedTabbingRef = useConstrainedTabbing()
const handleKeyPress = (event) => {
if (event.keyCode === LEFT) {
goBack()
}
if (event.keyCode === RIGHT) {
goForward()
}
if (event.keyCode === ESCAPE) {
onFinish()
}
}
const goBack = () => {
if ( canGoBack ) {
setCurrentPage( currentPage - 1 );
if (canGoBack) {
setCurrentPage(currentPage - 1)
}
};
}
const goForward = () => {
if ( canGoForward ) {
setCurrentPage( currentPage + 1 );
if (canGoForward) {
setCurrentPage(currentPage + 1)
}
};
}
const pageNav = pages.map((page, i) => {
const current = currentPage === i ? 'kd-bg-orange-500' : 'kd-bg-transparent'
return (
<li
className={"kd-border kd-cursor-pointer kd-border-solid kd-border-orange-500 kd-m-0 kd-mx-2 kd-rounded-full kd-w-2 kd-h-2 " + current}
key={i}
onClick={() => setCurrentPage(i)}
>
</li>
)
})
return (
<div className={ classnames("intro kd-fixed kd-top-0 kd-left-0 kd-bottom-0 kd-right-0 kd-z-[100000] kd-w-screen kd-min-h-screen kd-bg-gray-100", className)}>
<div className={"kd-h-full kd-flex kd-justify-center kd-items-center"}>
<div className={"intro-content kd-rounded kd-bg-white kd-my-5 kd-flex kd-flex-col kd-justify-center kd-items-center kd-h-full kd-w-[768px]"}>
<div className="intro-image kd-w-full kd-text-center">
<img alt="Page graphic" className={"kd-w-full"} src={pages[ currentPage ].imageSrc}/>
</div>
<div className="intro-content kd-p-5 kd-w-3/4">
{ pages[ currentPage ].content }
<div
ref={useMergeRefs([
focusOnMountRef, constrainedTabbingRef
])}
tabIndex="-1"
onKeyDown={(e) => handleKeyPress(e)}
className={classnames("intro kd-text-2xl kd-leading-6 kd-fixed kd-top-0 kd-left-0 kd-bottom-0 kd-right-0 kd-z-[100000] kd-w-screen kd-min-h-screen kd-bg-green-500", className)}>
<div className={"kd-h-full kd-flex kd-justify-center kd-items-center kd-overflow-auto"}>
<div
className={"intro-content kd-bg-gray-50 kd-flex kd-flex-col kd-justify-center kd-items-center kd-h-full kd-w-[768px]"}>
<small
className={"kd-ml-auto kd-mr-3 kd-mt-3 kd-cursor-pointer kd-text-gray-500 kd-underline"}
onClick={onFinish}
>
{__('skip', 'kudos-donations')}
</small>
<div className="intro-content kd-m-auto kd-w-3/4">
<div className="intro-image kd-w-full">
<img alt="Page graphic" className={"kd-w-full"} src={pages[currentPage].imageSrc}/>
</div>
<h1 className={"kd-leading-normal kd-text-center"}>{pages[currentPage].heading}</h1>
{pages[currentPage].content}
</div>
<div className="intro-nav kd-mt-auto kd-w-11/12 kd-mt-5 kd-mb-5 kd-flex kd-justify-between">
{ canGoBack && (
<Btn
isSecondary
onClick={ goBack }
>
{ __( 'Previous', 'kudos-donations' ) }
</Btn>
) }
{ canGoForward && (
<div
className="intro-nav kd-py-3 kd-border-0 kd-border-t kd-border-solid kd-border-gray-200 kd-flex kd-justify-between kd-items-center kd-w-11/12 kd-mt-5 kd-mb-5">
<Btn
className={canGoBack ? "kd-visible" : "kd-invisible"}
onClick={goBack}
>
{__('Previous', 'kudos-donations')}
</Btn>
<ul className={"kd-flex kd-justify-center kd-m-0"}>
{pageNav}
</ul>
{canGoForward && (
<Btn
isSecondary
className={"kd-ml-auto"}
disabled={(pages[currentPage].nextDisabled ?? false)}
onClick={ goForward }
onClick={goForward}
>
{ pages[ currentPage ].hasOwnProperty('nextLabel') ? pages[ currentPage ].nextLabel : __( 'Next', 'kudos-donations' ) }
{pages[currentPage].hasOwnProperty('nextLabel') ? pages[currentPage].nextLabel : __('Next', 'kudos-donations')}
</Btn>
) }
{ ! canGoForward && (
)}
{!canGoForward && (
<Button
onClick={ onFinish }
isPrimary
onClick={onFinish}
>
{ __( 'Finish', 'kudos-donations' ) }
{__('Finish', 'kudos-donations')}
</Button>
) }
)}
</div>
</div>
</div>
......
......@@ -4,7 +4,7 @@ import campaign from "../../../images/guide-campaign.png"
import button from "../../../images/guide-button.png"
import live from "../../../images/guide-test-live.png"
import {__} from "@wordpress/i18n"
import {ExternalLink, TextControl} from "@wordpress/components"
import {Dashicon, ExternalLink, TextControl} from "@wordpress/components"
import {useState} from '@wordpress/element'
import {Guide} from "./Guide"
import {Btn} from "./Btn"
......@@ -14,6 +14,7 @@ const IntroGuide = ({settings, updateSetting, isAPISaving, updateAll, handleInpu
const [apiMessage, setApiMessage] = useState(null)
const vendorMollie = settings._kudos_vendor_mollie
const isConnected = vendorMollie.connected ?? false
const isRecurringEnabled = vendorMollie.recurring ?? false
const closeModal = () => {
updateSetting('_kudos_show_intro', false)
......@@ -33,74 +34,90 @@ const IntroGuide = ({settings, updateSetting, isAPISaving, updateAll, handleInpu
pages={[
{
imageSrc: intro,
heading: __('Welcome to Kudos Donations', 'kudos-donations'),
content:
<div>
<h1 className="kd-leading-normal">{__('Welcome to Kudos Donations', 'kudos-donations')}</h1>
<p>{__('It is easy to get started with Kudos Donations.', 'kudos-donations')}</p>
<p>{__('Complete these simple steps to set up your first donation campaign.', 'kudos-donations')}</p>
<div className={"kd-text-center"}>
<p>{__('Complete these simple steps to set up your first donation campaign. Click the "next" button to get started', 'kudos-donations')}</p>
</div>
,
},
{
imageSrc: mollie,
nextDisabled: !vendorMollie.connected,
heading: __('Connect with Mollie', 'kudos-donations'),
content:
<div>
<h1 className="kd-leading-normal">{__('Connect with Mollie', 'kudos-donations')}</h1>
<p>
{__('Login to your Mollie account and grab your API keys. Make sure you get both your test and live API keys.', 'kudos-donations')}
{" "}
<ExternalLink
href="https://mollie.com/dashboard/developers/api-keys">{__('Mollie dashboard', 'kudos-donations')}
</ExternalLink>
</p>
{ ! isConnected
<div className={"kd-text-center"}>
{!isConnected
?
<>
<TextControl
key={"_kudos_mollie_live_api_key"}
type={'text'}
label={__('Live key', 'kudos-donations')}
value={vendorMollie['live_key'] || ''}
placeholder={__('Begins with "live_"', 'kudos-donations')}
onChange={(value) => handleInputChange('_kudos_vendor_mollie', {
...vendorMollie,
live_key: value
})}
/>
<TextControl
key={"_kudos_mollie_test_api_key"}
type={'text'}
label={__('Test key', 'kudos-donations')}
value={vendorMollie['test_key'] || ''}
placeholder={__('Begins with "test_"', 'kudos-donations')}
onChange={(value) => handleInputChange('_kudos_vendor_mollie', {
...vendorMollie,
test_key: value
})}
/>
<p>
{__('Login to your Mollie account and grab your API keys. Make sure you get both your test and live API keys.', 'kudos-donations')}
{" "}
<ExternalLink
href="https://mollie.com/dashboard/developers/api-keys">{__('Mollie dashboard', 'kudos-donations')}
</ExternalLink>
</p>
<div className={"kd-p-5 kd-bg-white kd-rounded-lg kd-shadow-md" + (isAPISaving ? " kd-opacity-50" : "")}>
<TextControl
key={"_kudos_mollie_live_api_key"}
className={"kd-text-left"}
disabled={isAPISaving}
label={__('Live key', 'kudos-donations')}
value={vendorMollie['live_key'] || ''}
placeholder={__('Begins with "live_"', 'kudos-donations')}
onChange={(value) => handleInputChange('_kudos_vendor_mollie', {
...vendorMollie,
live_key: value
})}
/>
<TextControl
key={"_kudos_mollie_test_api_key"}
className={"kd-text-left"}
disabled={isAPISaving}
label={__('Test key', 'kudos-donations')}
value={vendorMollie['test_key'] || ''}
placeholder={__('Begins with "test_"', 'kudos-donations')}
onChange={(value) => handleInputChange('_kudos_vendor_mollie', {
...vendorMollie,
test_key: value
})}
/>
</div>
<br/>
<Btn
isPrimary
// disabled={vendorMollie.connected}
isBusy={isAPISaving}
onClick={() => checkApi()}
>
{__('Connect with Mollie', 'kudos-donations')}
</Btn>
<span className="kd-ml-3" style={{
<div className="kd-mt-3 kd-text-base" style={{
color: 'red'
}}>
{apiMessage}
</span>
{apiMessage}
</div>
</>
:
<h2 style={{
color: 'green'
}}>
Mollie connected!
</h2>
<div className="kd-flex kd-flex-col kd-rounded-lg kd-p-5">
<div className={"kd-flex kd-flex-row kd-justify-center kd-mb-3 kd-items-center"}>
<Dashicon className={"kd-w-auto kd-h-auto kd-text-4xl kd-text-green-500"}
icon="yes"/>
<h2 className={"kd-m-0 kd-text-green-500"}>Connected {isRecurringEnabled ? '(recurring enabled)' : '(recurring not available)'}</h2>
</div>
{isRecurringEnabled
?
<strong>Congratulations, your account is configured to allow recurring payments. <ExternalLink
href={"https://help.mollie.com/hc/articles/214558045"}>
Learn more
</ExternalLink></strong>
:
<strong>You can still use Kudos, however you will not be able to use subscription
payments. <ExternalLink
href={"https://help.mollie.com/hc/articles/214558045"}>
Learn more
</ExternalLink></strong>
}
</div>
}
</div>
......@@ -108,9 +125,9 @@ const IntroGuide = ({settings, updateSetting, isAPISaving, updateAll, handleInpu
},
{
imageSrc: campaign,
heading: __('Set up a campaign', 'kudos-donations'),
content:
<div>
<h1 className="kd-leading-normal">{__('Set up a campaign', 'kudos-donations')}</h1>
<div className={"kd-text-center"}>
<p>{__('Visit the Campaigns tab and either create a new campaign or edit the default one.', 'kudos-donations')}</p>
<p>{__('If you need it, don\'t forget to click "Copy shortcode" at the bottom of your campaign.', 'kudos-donations')}</p>
</div>
......@@ -118,9 +135,9 @@ const IntroGuide = ({settings, updateSetting, isAPISaving, updateAll, handleInpu
},
{
imageSrc: button,
heading: __('Place a button', 'kudos-donations'),
content:
<div>
<h1 className="kd-leading-normal">{__('Place a button', 'kudos-donations')}</h1>
<div className={"kd-text-center"}>
<p>{__('Use the Kudos Button block or shortcode to place the button anywhere on your website.', 'kudos-donations')}</p>
<p>{__('If using the block, select the desired campaign in the block side bar.', 'kudos-donations')}</p>
</div>
......@@ -128,9 +145,9 @@ const IntroGuide = ({settings, updateSetting, isAPISaving, updateAll, handleInpu
},
{
imageSrc: live,
heading: __('Test and go Live', 'kudos-donations'),
content:
<div>
<h1 className="kd-leading-normal">{__('Test and go Live', 'kudos-donations')}</h1>
<div className={"kd-text-center"}>
<p>{__('With the API mode still on "Test" make a payment using your button. If it all looks good then you can switch to "Live".', 'kudos-donations')}</p>
<p>{__('Good luck with your campaign!', 'kudos-donations')}</p>
<p><ExternalLink
......
......@@ -7,6 +7,10 @@
--wp-admin-theme-color-darker-20: theme("colors.orange.700") ;
}
.intro p {
@apply kd-text-base !important;
}
.components-radio-control__input::before,
.components-circular-option-picker__option::after,
.components-modal__frame *,
......
src/images/guide-button.png

19.4 KB | W: | H:

src/images/guide-button.png

24.8 KB | W: | H:

src/images/guide-button.png
src/images/guide-button.png
src/images/guide-button.png
src/images/guide-button.png
  • 2-up
  • Swipe
  • Onion skin
src/images/guide-campaign.png

55.1 KB | W: | H:

src/images/guide-campaign.png

70 KB | W: | H:

src/images/guide-campaign.png
src/images/guide-campaign.png
src/images/guide-campaign.png
src/images/guide-campaign.png
  • 2-up
  • Swipe
  • Onion skin
src/images/guide-mollie-api.png

43.6 KB | W: | H:

src/images/guide-mollie-api.png

51.3 KB | W: | H:

src/images/guide-mollie-api.png
src/images/guide-mollie-api.png
src/images/guide-mollie-api.png
src/images/guide-mollie-api.png
  • 2-up
  • Swipe
  • Onion skin
src/images/guide-test-live.png

21.4 KB | W: | H:

src/images/guide-test-live.png

21 KB | W: | H:

src/images/guide-test-live.png
src/images/guide-test-live.png
src/images/guide-test-live.png
src/images/guide-test-live.png
  • 2-up
  • Swipe
  • Onion skin
src/images/guide-welcome.png

27.3 KB | W: | H:

src/images/guide-welcome.png

31.2 KB | W: | H:

src/images/guide-welcome.png
src/images/guide-welcome.png
src/images/guide-welcome.png
src/images/guide-welcome.png
  • 2-up
  • Swipe
  • Onion skin
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment