Skip to content

Commit

Permalink
Merge pull request #251 from Codeinwp/fix/promos
Browse files Browse the repository at this point in the history 
- feat: enable delay per promotion instead of globally
- fix: remove delay on woo plugins promos [closes Codeinwp/themeisle#1655]
- fix: swap Neve FSE notice with Neve [closes Codeinwp/themeisle#1654]
- fix: rework optimole promo [closes Codeinwp/themeisle#1656]
  • Loading branch information
@abaicus
abaicus authored Aug 9, 2024
2 parents 0d36293 + c13ebf0 commit aa2dcda
Show file tree
Hide file tree
Showing 17 changed files with 496 additions and 864 deletions.
2 changes: 1 addition & 1 deletion assets/js/build/promos/index.asset.php
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-components', 'wp-compose', 'wp-data', 'wp-edit-post', 'wp-element', 'wp-hooks', 'wp-plugins'), 'version' => 'e6fc8535cbd330147dce');
<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-components', 'wp-compose', 'wp-data', 'wp-edit-post', 'wp-element', 'wp-hooks', 'wp-plugins'), 'version' => '2cd9ed3afc77de83f989');
2 changes: 1 addition & 1 deletion assets/js/build/promos/index.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion assets/js/build/promos/style-index.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

298 changes: 111 additions & 187 deletions assets/js/src/OptimoleNotice/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,195 +5,119 @@ import './style.scss';
import {activatePlugin, installPluginOrTheme} from "../common/utils";
import useSettings from "../common/useSettings";

export default function OptimoleNotice({stacked = false, noImage = false, type, onDismiss, onSuccess, initialStatus = null }) {
const {
assets,
title,
email: initialEmail,
option,
optionKey,
labels,
optimoleActivationUrl,
optimoleApi,
optimoleDash,
nonce,
} = window.themeisleSDKPromotions;
const [showForm, setShowForm] = useState(false);
const [email, setEmail] = useState(initialEmail || '');
const [dismissed, setDismissed] = useState(false);
const [progress, setProgress] = useState( initialStatus );
const [getOption, updateOption] = useSettings();

const dismissNotice = async () => {
setDismissed(true);
const newValue = {...option};
newValue[type] = new Date().getTime() / 1000 | 0;
window.themeisleSDKPromotions.option = newValue;
await updateOption(optionKey, JSON.stringify(newValue));

if (onDismiss) {
onDismiss();
}
};

const toggleForm = () => {
setShowForm(!showForm);
}
const updateEmail = (e) => {
setEmail(e.target.value);
}
const submitForm = async (e) => {
e.preventDefault();
setProgress('installing');
await installPluginOrTheme('optimole-wp');

setProgress('activating');
await activatePlugin(optimoleActivationUrl);

updateOption('themeisle_sdk_promotions_optimole_installed', !Boolean(getOption('themeisle_sdk_promotions_optimole_installed')));

setProgress('connecting');
try {
await fetch(optimoleApi, {
method: 'POST',
headers: {
'X-WP-Nonce': nonce,
'Content-Type': 'application/json'
},
body: JSON.stringify({
'email': email,
}),
});

if (onSuccess) {
onSuccess();
}

setProgress('done');
} catch (e) {
setProgress('done');
}

}

if (dismissed) {
return null;
export default function OptimoleNotice({stacked = false, type, onDismiss, onSuccess, initialStatus = null}) {
const {
title,
option,
optionKey,
labels,
optimoleActivationUrl,
optimoleDash,
} = window.themeisleSDKPromotions;
const [dismissed, setDismissed] = useState(false);
const [progress, setProgress] = useState(initialStatus);
const [getOption, updateOption] = useSettings();

const dismissNotice = async () => {
setDismissed(true);
const newValue = {...option};
newValue[type] = new Date().getTime() / 1000 | 0;
window.themeisleSDKPromotions.option = newValue;
await updateOption(optionKey, JSON.stringify(newValue));

if (onDismiss) {
onDismiss();
}

const form = () => {
if (progress === 'done') {
return (
<div className={"done"}>
<p> {labels.optimole.all_set}</p>
<Button icon={'external'} isPrimary href={optimoleDash} target="_blank">
{labels.optimole.gotodash}
</Button>
</div>
);
}

if (progress) {
return (
<p className="om-progress">
<span className="dashicons dashicons-update spin"/>
<span>
{progress === 'installing' && labels.optimole.installing}
{progress === 'activating' && labels.optimole.activating}
{progress === 'connecting' && labels.optimole.connecting}
&hellip;
</span>
</p>
);
}

return (
<>
<span>Enter your email address to create & connect your account</span>
<form onSubmit={submitForm}>
<input
defaultValue={email}
type="email"
onChange={updateEmail}
placeholder={labels.optimole.email_placeholder}
/>

<Button isPrimary type="submit">
{labels.optimole.start_cta}
</Button>
</form>
</>
);
};

const dismissButton = () => (
<Button disabled={progress && progress !== 'done'} onClick={dismissNotice} isLink
className="om-notice-dismiss">
<span className="dashicons-no-alt dashicons"/>
<span className="screen-reader-text">{labels.optimole.dismisscta}</span>
</Button>
};

const installAndActivate = async (e) => {
e.preventDefault();
setProgress('installing');
await installPluginOrTheme('optimole-wp');

setProgress('activating');
await activatePlugin(optimoleActivationUrl);

updateOption('themeisle_sdk_promotions_optimole_installed', true).then(() => {
setProgress('done');
});
}

if (dismissed) {
return null;
}

const renderProgress = () => {
return progress === 'done' ? (
<div className="done">
<p> {labels.all_set}</p>
<Button icon="external" isPrimary href={optimoleDash} target="_blank">
{labels.optimole.gotodash}
</Button>
</div>
) : (
<p className="om-progress">
<span className="dashicons dashicons-update spin"/>
<span>
{progress === 'installing' && labels.installing}
{progress === 'activating' && labels.activating}
&hellip;
</span>
</p>
);


if (stacked) {
return (
<div className="ti-om-stack-wrap">
<div className="om-stack-notice">
{dismissButton()}
<img src={assets + '/optimole-logo.svg'} alt="Optimole logo"/>

<h2>{labels.optimole.heading}</h2>

<p>
{(type === 'om-editor' || type === 'om-image-block') ?
labels.optimole.message1 :
labels.optimole.message2
}
</p>

{( !showForm && 'done' !== progress ) && (
<Button isPrimary onClick={toggleForm} className="cta">
{labels.optimole.gst}
</Button>
)}
{( showForm || 'done' === progress ) && form()}

<i>{title}</i>
};

const dismissButton = () => (
<Button disabled={progress && progress !== 'done'} onClick={dismissNotice} isLink
className="om-notice-dismiss">
<span className="dashicons-no-alt dashicons"/>
<span className="screen-reader-text">{labels.optimole.dismisscta}</span>
</Button>
);

const actionButtons = (stacked = false) => (
<>
<Button isPrimary onClick={installAndActivate} className={ stacked ? 'cta' : ''}>
{labels.optimole.installOptimole}
</Button>
<Button isLink target="_blank" href="https://wordpress.org/plugins/optimole-wp">
<span className="dashicons dashicons-external"/>
<span> {labels.learnmore}</span>
</Button>
</>
)

const stackedNotice = (
<div className="ti-om-stack-wrap ti-sdk-om-notice">
<div className="om-stack-notice">
{dismissButton()}
<i>{title}</i>
<p>
{['om-editor', 'om-image-block'].includes(type) ? labels.optimole.message1 : labels.optimole.message2}
</p>
{progress ? renderProgress() : actionButtons(true)}
</div>
</div>
);

const notice = (
<>
{dismissButton()}
<div className="content">
<div>
<p>{title}</p>
<p className="description">
{type === 'om-media' ? labels.optimole.message3 : labels.optimole.message4}
</p>
{progress ? renderProgress() : (
<div className="actions">
{actionButtons()}
</div>
</div>
);
}

return (
<>
{dismissButton()}
<div className="content">
{!noImage && <img src={assets + '/optimole-logo.svg'} alt="Optimole logo"/>}
)}
</div>
</div>
</>
);

<div>
<p>{title}</p>
<p className="description">{
type === 'om-media' ?
labels.optimole.message3 :
labels.optimole.message4
}</p>
{!showForm && (
<div className="actions">
<Button isPrimary onClick={toggleForm}>
{labels.optimole.gst}
</Button>
<Button isLink target="_blank" href="https://wordpress.org/plugins/optimole-wp">
<span className="dashicons dashicons-external"/>
<span> {labels.optimole.learnmore}</span>
</Button>
</div>
)}
{showForm && (
<div className="form-wrap">
{form()}
</div>
)}
</div>
</div>
</>
);
return stacked ? stackedNotice : notice;
}
Loading

0 comments on commit aa2dcda

Please sign in to comment.