Press4-458 | Show an warning in stripe

build/index.asset.php

@@ -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' => '6131043b9611749a390c');
+<?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' => '159a2d5abe36aadd2e23');

src/components/Stripe.js

@@ -1,4 +1,4 @@
-import { Badge, Button, Title } from "@newfold/ui-component-library";
+import { Alert, Badge, Button, Title, Link } from "@newfold/ui-component-library";
 import { useEffect, useRef } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
 import classNames from "classnames";
@@ -11,20 +11,22 @@ import { ReactComponent as MasterCardBrand } from "../icons/brands/mastercard.sv
 import { ReactComponent as StripeBrand } from "../icons/brands/stripe.svg";
 import { ReactComponent as VisaBrand } from "../icons/brands/visa.svg";
 import { ThirdPartyIntegration } from "./ThirdPartyIntegration";
+import { RuntimeSdk } from "../sdk/runtime";
 
 const Stripe = ({ notify }) => {
   const buttonRef = useRef();
+  const isHttp = window.location.protocol === "http:";
 
   useEffect(() => {
-    let button = false;
-    if (window?.yithStripePayments?.connectOnboarding) {
-      button = window.yithStripePayments.connectOnboarding(buttonRef.current, {
-        reloadOnClose: false,
-      });
-    }
+    return () => window?.yithStripePayments?.onboardingButton?.destroy();
+  })
 
-    return () => button && button.destroy();
-  });
+  const handleClick = () => {
+    if (!window?.yithStripePayments?.onboardingButton?.$button?.is(buttonRef.current)) {
+      window.yithStripePayments.onboardingButton = window.yithStripePayments.connectOnboarding(buttonRef.current, { reloadOnClose: false });
+      window.yithStripePayments.onboardingButton.onClick();
+    }
+  }
 
   return (
     <ThirdPartyIntegration
@@ -40,18 +42,21 @@ const Stripe = ({ notify }) => {
         const isSetupComplete = integrationStatus?.complete;
         let environment = integrationStatus?.details?.environment;
 
-
-        if ( ! environment ) {
+        if (!environment) {
           environment = 'test' === window?.yithStripePayments?.env ? 'test' : 'live';
         }
-
+        const isLive = environment === "live";
         return (
           <div className="nfd-border nfd-rounded-md nfd-p-6">
+           {isHttp && isLive && <Alert variant="warning" className="nfd-mb-6">
+             {__("A secure connection is required when running Stripe Payments in Live mode; plugin is currently enabled, but no gateway will be available until you secure connection to your site through a valid SSL certificate.\
+             If you already have a valid SSL certificate, please change the url in", "wp-module-ecommerce")} <Link href={RuntimeSdk.adminUrl('options-general.php')}> {__("settings", "wp-module-ecommerce")}</Link> {__("page", "wp-module-ecommerce")}.
+            </Alert>}
             <div className="nfd-flex nfd-justify-between nfd-mb-8">
               <StripeBrand />
               {!isInstalling ? (
                 <>
-                  {isSetupComplete ? (
+                  {isSetupComplete && integrationStatus?.integration?.plugin?.status ? (
                     <Button
                       variant="secondary"
                       as="a"
@@ -62,11 +67,11 @@ const Stripe = ({ notify }) => {
                   ) : (
                     <>
                       {!integrationStatus?.integration?.plugin?.status ? (
-                        <Button onClick={onConnect}>
+                        <Button onClick={onConnect} >
                           {__("Install", "wp-module-ecommerce")}
                         </Button>
                       ) : (
-                        <Button ref={buttonRef}>
+                        <Button ref={buttonRef} disabled={isHttp && isLive} onClick={handleClick}>
                           {__("Connect", "wp-module-ecommerce")}
                         </Button>
                       )}