Skip to content

Commit

Permalink
pop up changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@ramyakrishnai
ramyakrishnai committed Feb 22, 2024
1 parent 2c3b5b3 commit 21dfb6b
Show file tree
Hide file tree
Showing 2 changed files with 120 additions and 117 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', 'wp-api-fetch', 'wp-data', 'wp-date', 'wp-dom-ready', 'wp-element', 'wp-i18n', 'wp-url'), 'version' => 'c3f16f7961a01916c59e');
<?php return array('dependencies' => array('lodash', 'moment', 'react', 'wp-api-fetch', 'wp-data', 'wp-date', 'wp-dom-ready', 'wp-element', 'wp-i18n', 'wp-url'), 'version' => '64d8ebf708a365ec7d39');
235 changes: 119 additions & 116 deletions src/components/Paypal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,10 @@ const Paypal = ({ notify }) => {
ref.parentNode.insertBefore( js, ref );
}
}( document, "script", "paypal-js" ));
window?.PAYPAL?.apps?.Signup?.loadScripts( document, "script" );
window?.PAYPAL?.apps?.Signup?.render();
}

return ()=>{
const panel = document.querySelector( '#payment-details' );
if( !panel && ppButton ){
Expand All @@ -36,126 +39,126 @@ const Paypal = ({ notify }) => {
};
});
return (
<ThirdPartyIntegration
id="paypal"
title={__("Paypal", "wp-module-ecommerce")}
description={__(
"Online payments built for success. We help you do business in 200+ markets and 100+ currencies—even if your customers don't have PayPal.",
"wp-module-ecommerce"
)}
notify={notify}
>
{({ integrationStatus, onConnect, isInstalling }) => {
const isSetupComplete = integrationStatus?.complete;
const environment = integrationStatus?.details?.environment;
return (
<div className="nfd-border nfd-rounded-md nfd-p-6">
<div
className={classNames(
"max-[359px]:nfd-flex-col",
"min-[360px]:nfd-flex nfd-justify-between nfd-items-center min-[360px]:nfd-mb-8"
)}
>
<PaypalBrand />
{isInstalling ? (
<Button
variant="secondary"
isLoading
className={classNames(
"max-[359px]:nfd-my-2",
"min-[360px]:nfd-m-0"
)}
>
{__("Installing...", "wp-module-ecommerce")}
</Button>
) : isSetupComplete ? (
<Button
variant="secondary"
as="a"
href={integrationStatus?.integration?.plugin?.url}
className={classNames(
"max-[359px]:nfd-my-2",
"min-[360px]:nfd-m-0"
)}
>
{__("Manage", "wp-module-ecommerce")}
</Button>
) : typeof yith_ppwc_login !== "undefined" &&
!parseInt(yith_ppwc_login?.liveConnected) ? (
<Link
href={yith_ppwc_login.loginURL}
variant="primary"
className="nfd-button nfd-button--primary yith-btn-paypal nfd-text-white"
target="_blank"
data-paypal-onboard-complete="onboardedCallback"
data-paypal-button="PPLtBlue"
>
{__("Connect", "wp-module-ecommerce")}
</Link>
) : (
<Button
onClick={onConnect}
className={classNames(
"max-[359px]:nfd-my-2",
"min-[360px]:nfd-m-0"
)}
>
{__("Connect", "wp-module-ecommerce")}
</Button>
)}
</div>
{isSetupComplete && environment && (
<div className="nfd-flex nfd-gap-4 nfd-mt-4">
<span>{__("Environment:", "wp-module-ecommerce")}</span>
<Badge
size="large"
variant={environment === "sandbox" ? "upsell" : "plain"}
className={classNames(
"nfd-text-sm nfd-capitalize",
environment === "live" && "nfd-bg-[#178113] nfd-text-white"
)}
>
{environment}
</Badge>
</div>
)}
{!isSetupComplete && (
<div className="nfd-space-y-4 nfd-text-[#5B5B5B]">
<Title size="3">
{__("Provides flexible checkout options", "wp-module-ecommerce")}
</Title>
<ul className="nfd-pl-5 nfd-list-disc">
<li>{__("PayPal Buy Now Pay Later", "wp-module-ecommerce")}</li>
<li>{__("White-Labeling", "wp-module-ecommerce")}</li>
<li>
{__(
"Country-specific payment methods",
"wp-module-ecommerce"
<ThirdPartyIntegration
id="paypal"
title={__("Paypal", "wp-module-ecommerce")}
description={__(
"Online payments built for success. We help you do business in 200+ markets and 100+ currencies—even if your customers don't have PayPal.",
"wp-module-ecommerce"
)}
notify={notify}
>
{({ integrationStatus, onConnect, isInstalling }) => {
const isSetupComplete = integrationStatus?.complete;
const environment = integrationStatus?.details?.environment;
return (
<div className="nfd-border nfd-rounded-md nfd-p-6">
<div
className={classNames(
"max-[359px]:nfd-flex-col",
"min-[360px]:nfd-flex nfd-justify-between nfd-items-center min-[360px]:nfd-mb-8"
)}
</li>
</ul>
<Title size="3">
{__(
" Supports many popular payment methods",
"wp-module-ecommerce"
>
<PaypalBrand />
{isInstalling ? (
<Button
variant="secondary"
isLoading
className={classNames(
"max-[359px]:nfd-my-2",
"min-[360px]:nfd-m-0"
)}
>
{__("Installing...", "wp-module-ecommerce")}
</Button>
) : isSetupComplete ? (
<Button
variant="secondary"
as="a"
href={integrationStatus?.integration?.plugin?.url}
className={classNames(
"max-[359px]:nfd-my-2",
"min-[360px]:nfd-m-0"
)}
>
{__("Manage", "wp-module-ecommerce")}
</Button>
) : typeof yith_ppwc_login !== "undefined" &&
!parseInt(yith_ppwc_login?.liveConnected) ? (
<Link
href={yith_ppwc_login.loginURL}
variant="primary"
className="nfd-button nfd-button--primary yith-btn-paypal nfd-text-white"
target="_blank"
data-paypal-onboard-complete="onboardedCallback"
data-paypal-button="PPLtBlue"
>
{__("Connect", "wp-module-ecommerce")}
</Link>
) : (
<Button
onClick={onConnect}
className={classNames(
"max-[359px]:nfd-my-2",
"min-[360px]:nfd-m-0"
)}
>
{__("Connect", "wp-module-ecommerce")}
</Button>
)}
</Title>
<div className="nfd-flex nfd-items-end nfd-gap-2 nfd-flex-wrap">
<VisaBrand />
<MasterCardBrand />
<AmexBrand />
<DiscoverBrand />
<VenmoBrand />
<IdealBrand />
<GiroPayBrand />
<SofortBrand />
</div>
{isSetupComplete && environment && (
<div className="nfd-flex nfd-gap-4 nfd-mt-4">
<span>{__("Environment:", "wp-module-ecommerce")}</span>
<Badge
size="large"
variant={environment === "sandbox" ? "upsell" : "plain"}
className={classNames(
"nfd-text-sm nfd-capitalize",
environment === "live" && "nfd-bg-[#178113] nfd-text-white"
)}
>
{environment}
</Badge>
</div>
)}
{!isSetupComplete && (
<div className="nfd-space-y-4 nfd-text-[#5B5B5B]">
<Title size="3">
{__("Provides flexible checkout options", "wp-module-ecommerce")}
</Title>
<ul className="nfd-pl-5 nfd-list-disc">
<li>{__("PayPal Buy Now Pay Later", "wp-module-ecommerce")}</li>
<li>{__("White-Labeling", "wp-module-ecommerce")}</li>
<li>
{__(
"Country-specific payment methods",
"wp-module-ecommerce"
)}
</li>
</ul>
<Title size="3">
{__(
" Supports many popular payment methods",
"wp-module-ecommerce"
)}
</Title>
<div className="nfd-flex nfd-items-end nfd-gap-2 nfd-flex-wrap">
<VisaBrand />
<MasterCardBrand />
<AmexBrand />
<DiscoverBrand />
<VenmoBrand />
<IdealBrand />
<GiroPayBrand />
<SofortBrand />
</div>
</div>
)}
</div>
)}
</div>
);
}}
</ThirdPartyIntegration>
);
}}
</ThirdPartyIntegration>
);
};
export default Paypal;

0 comments on commit 21dfb6b

Please sign in to comment.