Skip to content

Commit

Permalink
Install and activate Ecomdash plugin on Sales Channel page
Browse files Browse the repository at this point in the history
  • Loading branch information
@aratidgr8
aratidgr8 committed Jul 15, 2024
1 parent c77cd9b commit 5ccaef8
Show file tree
Hide file tree
Showing 5 changed files with 120 additions and 48 deletions.
2 changes: 1 addition & 1 deletion build/index.asset.php
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<?php return array('dependencies' => array('lodash', 'moment', 'react', 'react-dom', 'wp-api-fetch', 'wp-data', 'wp-date', 'wp-dom-ready', 'wp-element', 'wp-i18n', 'wp-url'), 'version' => '2efef9d141f6285fbfaa');
<?php return array('dependencies' => array('lodash', 'moment', 'react', 'react-dom', 'wp-api-fetch', 'wp-data', 'wp-date', 'wp-dom-ready', 'wp-element', 'wp-i18n', 'wp-url'), 'version' => '40b3f3a630c03b873aa1');
2 changes: 1 addition & 1 deletion src/components/LoadingPanel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export function LoadingPanel({ pluginName }) {
pluginName === 'ecomdash' ?
__("Activating ", "wp-module-ecommerce")+`${pluginName}`+__(" plugin...", "wp-module-ecommerce")
:
__("Activating the YITH ", "wp-module-ecommerce")+`${pluginName}`+__("plugin...", "wp-module-ecommerce")
__("Activating the YITH ", "wp-module-ecommerce")+`${pluginName}`+__(" plugin...", "wp-module-ecommerce")
}
</p>
<Spinner size="4" className="nfd-text-primary" />
Expand Down
116 changes: 70 additions & 46 deletions src/components/SalesChannel.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import { Button } from "@newfold/ui-component-library";
import { Button, Modal } from "@newfold/ui-component-library";
import { useEffect, useState } from "@wordpress/element";
import { __ } from "@wordpress/i18n";
import useSWR from "swr";
import { ecomdashPluginStatusParser } from "../configs/selectors";
import { ReactComponent as Accounting } from "../icons/sales-channel/accounting.svg";
import { ReactComponent as Amazon } from "../icons/sales-channel/amazon-icon.svg";
import { ReactComponent as Barcodes } from "../icons/sales-channel/barcodes.svg";
Expand All @@ -13,35 +16,47 @@ import { ReactComponent as OrdersTable } from "../icons/sales-channel/orders-tab
import { ReactComponent as PurchaseOrders } from "../icons/sales-channel/purchase-orders.svg";
import { ReactComponent as ShippingLabels } from "../icons/sales-channel/shipping-labels.svg";
import { ReactComponent as WarehouseFeeds } from "../icons/sales-channel/warehouse-feeds.svg";
import { Section } from "./Section";
import { useEffect, useState } from "@wordpress/element";
import apiFetch from "@wordpress/api-fetch";
import { NewfoldRuntime } from "../sdk/NewfoldRuntime";
import { PluginsSdk } from "../sdk/plugins";
import { LoadingPanel } from "./LoadingPanel";
import { Section } from "./Section";
import { useInstallEcomdash } from "./useInstallEcomdash";

let ecomdashParser = ecomdashPluginStatusParser("nfd_slug_ecomdash_wordpress_plugin");

export function SalesChannel(){

const [ecomdashStatus, setEcomdashStatus] = useState("");

const apiUrl = NewfoldRuntime.createApiUrl("/newfold-ecommerce/v1/plugins/status", {
plugins: "nfd_slug_ecomdash_wordpress_plugin",
})

useEffect(() => {
const fecthApi = async () => {
const data = await apiFetch({
url: apiUrl,
});
setEcomdashStatus(data?.details?.nfd_slug_ecomdash_wordpress_plugin?.status);
}
fecthApi()
}, []);

console.log("ecomDashStatus", ecomdashStatus)

let showInstallButton = ecomdashStatus === "need_to_install" ? true : false;
export function SalesChannel(props){

let ecomdashStatus = useSWR(
"nfd_slug_ecomdash_wordpress_plugin-status",
() =>
PluginsSdk.queries
.status("woocommerce", "nfd_slug_ecomdash_wordpress_plugin")
.then(ecomdashParser),
{ refreshInterval: 30 * 1000 }
);

const {wpModules} = props;
const [isOpen, setIsOpen] = useState(false);
const canAccessGlobalCTB = NewfoldRuntime.hasCapability("canAccessGlobalCTB");
const hasYithExtended = NewfoldRuntime.hasCapability("hasYithExtended");
const isEcommerce = NewfoldRuntime.hasCapability("isEcommerce");
const hasEcomdash = NewfoldRuntime.hasCapability("hasEcomdash")

let [installEcomdash, isInstalling] = useInstallEcomdash({ wpModules });
let showInProgress = isInstalling || ecomdashStatus.data?.isInstalling;

useEffect(() => {
(ecomdashStatus.data?.isInstalling && !ecomdashStatus.data.isInstalled) ? setIsOpen(true) : setIsOpen(false)
}, [ecomdashStatus.data?.isInstalling])

useEffect(() => {
isInstalling ? setIsOpen(true) : setIsOpen(false)
}, [isInstalling])

return(

hasYithExtended && canAccessGlobalCTB && hasEcomdash && (ecomdashStatus?.data?.isInstalled || ecomdashStatus?.data?.isNeedToInstall) ?
<>
<Section.Container>
<Section.Header title={__("Sales Channels", "wp-module-ecommerce")} subTitle={__("Sell your products everywhere, confidently, with Ecomdash.", "wp-module-ecommerce")} />
Expand All @@ -62,11 +77,22 @@ export function SalesChannel(){
{__("more saving you valuable time.", "wp-module-ecommerce")}​
</p>
<Button
id={showInstallButton ? "install-ecomdash" : "manage-ecomdash"}
variant="primary"
>
{showInstallButton ? __("Get Started Now", "wp-module-ecommerce") : __("Go to Ecomdash", "wp-module-ecommerce")}
</Button>
className="nfd-button nfd-button--primary"
variant="primary"
type="button"
as={canAccessGlobalCTB && !hasYithExtended && !hasEcomdash ? "a" : "button"}
data-ctb-id={
canAccessGlobalCTB && hasYithExtended && !hasEcomdash
? "3edcf593-dbbe-4994-b5c0-a6718bb819c4"
: null
}
href={ (canAccessGlobalCTB && !hasYithExtended && ecomdashStatus.data.isInstalled && ecomdashStatus.data.pluginUrl) || '' }
isLoading={showInProgress}
onClick={hasEcomdash && ecomdashStatus.data.isNeedToInstall ? installEcomdash : null}
id={ecomdashStatus.data.isInstalled ? "manage-ecomdash" : "install-ecomdash" }
>
{ecomdashStatus.data.isInstalled ? __("Go to Ecomdash", "wp-module-ecommerce") : __("Get Started Now", "wp-module-ecommerce") }
</Button>
</div>
<Ecomdash className="nfd-flex-none nfd-self-start" />
</div>
Expand Down Expand Up @@ -117,11 +143,6 @@ export function SalesChannel(){
<p className="nfd-flex-1 nfd-text-[#4A5567] nfd-leading-5 nfd-font-medium nfd-mb-7 nfd-mt-3.5">
{__("With Ecomdash you can sit back and relax, knowing that all aspects of order fulfillment are under control. Easily track your top selling items, cost of goods sold, stale inventory and more with Ecomdash's extensive reporting tools.", "wp-module-ecommerce")}
</p>
{/* <p className="nfd-flex-1 nfd-text-[#4A5567] nfd-leading-5 nfd-font-medium nfd-mb-7 nfd-mt-3.5">
{__("With Ecomdash you can sit back and relax, knowing that all aspects of order fulfillment are under control. Easily track your top selling", "wp-module-ecommerce")}
<br />
{__("items, cost of goods sold, stale inventory and more with Ecomdash's extensive reporting tools.", "wp-module-ecommerce")}
</p> */}
<OrdersTable className="nfd-mx-auto" />
</div>

Expand All @@ -133,13 +154,7 @@ export function SalesChannel(){
</h2>
<p className="nfd-text-[#4A5567] nfd-leading-5 nfd-font-medium">
{__("Ecomdash contains a variety of powerful add-ons that will help you handle everything from creating barcodes and inventory templates, to managing warehouse feeds, Fulfillment By Amazon and even accounting.", "wp-module-ecommerce")}
</p>
{/* <p className="nfd-text-[#4A5567] nfd-leading-5 nfd-font-medium">
{__("Ecomdash contains a variety of powerful add-ons that will help you handle everything from creating barcodes and inventory templates, to", "wp-module-ecommerce")}
<br />
{__("managing warehouse feeds, Fulfillment By Amazon and even accounting.", "wp-module-ecommerce")}
</p> */}

</p>
<div className="nfd-mx-auto nfd-bg-[#F8F8F8] nfd-rounded-lg nfd-mx-auto nfd-max-w-[650px] nfd-flex nfd-flex-row nfd-p-6 nfd-mt-4 nfd-mb-8">
<Amazon className="nfd-flex-none nfd-mr-6" />
<div className="nfd-flex-1">
Expand All @@ -155,7 +170,6 @@ export function SalesChannel(){
</div>

<div className="nfd-flex nfd-flex-wrap nfd-flex-row nfd-min-w-[315px] nfd-max-w-[646px] nfd-mx-auto">

<div className="nfd-flex-1 nfd-mr-14">
<div>
<div className="nfd-flex nfd-flex-row">
Expand Down Expand Up @@ -267,13 +281,23 @@ export function SalesChannel(){
</div>
</div>

</div>


</div>
</div>

</Section.Content>
<Modal
isOpen={isOpen}
onClose={() => setIsOpen(false)}
className="wppbh-app-sidenav-mobile nfd-z-40"
initialFocus
>
<Modal.Panel className="nfd-p-0 nfd-overflow-visible" hasCloseButton={false}>
<div className="wppbh-app-sidenav nfd-p-5 nfd-max-h-[70vh] nfd-overflow-y-auto">
<LoadingPanel pluginName="ecomdash" />
</div>
</Modal.Panel>
</Modal>
</Section.Container>
</>
: null
)
}
38 changes: 38 additions & 0 deletions src/components/useInstallEcomdash.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import { __ } from "@wordpress/i18n";
import useSWRMutation from "swr/mutation";
import { PluginsSdk } from "../sdk/plugins";
import { RuntimeSdk } from "../sdk/runtime";
import { sleep } from "../sdk/sleep";

/** @todo Can be made generic as useInstallPlugin */

export function useInstallEcomdash({ wpModules }) {
let { notify } = wpModules;
let installEcomdash = useSWRMutation("install-nfd_slug_ecomdash_wordpress_plugin", async () => {
let response = await PluginsSdk.actions.installSync("nfd_slug_ecomdash_wordpress_plugin");
if (response !== "failed") {
notify.push("nfd_slug_ecomdash_wordpress_plugin-install-status", {
title: "Installed successfully",
variant: "success",
});
await sleep(1000);
window.location.href = "admin.php?page=bluehost#/store/sales_channel"
window.location.reload();
} else {
notify.push("nfd_slug_ecomdash_wordpress_plugin-install-status", {
title: "Failed to install",
description: (
<span>
{__("Please try again, or ", "wp-module-ecommerce")}
<a href={RuntimeSdk.brandSettings.support} target="_blank">
{__("contact support", "wp-module-ecommerce")}
</a>
</span>
),
variant: "error",
});
}
});
let isInstalling = installEcomdash.isMutating;
return [installEcomdash.trigger, isInstalling];
}
10 changes: 10 additions & 0 deletions src/configs/selectors.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,16 @@ export const wcPluginStatusParser = (slug) => (data) => {
return { isInstalled, isInstalling, isQueueEmpty, isWCActive, pluginUrl };
};

export const ecomdashPluginStatusParser = (slug) => (data) => {
const isNeedToInstall = data?.details?.[slug].status === "need_to_install";
const isInstalled = data?.details?.[slug].status === "active";
const isQueueEmpty = data?.queue[0] ? data?.queue[0]?.length === 0 ? true : false : data?.queue?.length === 0;
const isInstalling = data?.queue?.includes(slug);
const isWCActive = data?.details?.woocommerce.status === "active";
const pluginUrl = data?.details?.[slug].url;
return { isNeedToInstall, isInstalled, isInstalling, isQueueEmpty, isWCActive, pluginUrl };
};

export const findUpsellWithName = (name) => (upsellOptions) => {
return upsellOptions?.find((option) => option.name === name);
};
Expand Down

0 comments on commit 5ccaef8

Please sign in to comment.