feat(direct-checkout): redirection layout updated

In this commit the layout design is updated and there is added some warning instruction is added if the Quick cart module is deactived. And also given instruction to activate it, resolves: Quick cart: quick cart redirection and layout design fix. #309
getdokan · Nov 13, 2023 · cfc47a8 · cfc47a8
1 parent 0cfc853
commit cfc47a8
Show file tree

Hide file tree

Showing 3 changed files with 90 additions and 29 deletions.
diff --git a/assets/src/admin.scss b/assets/src/admin.scss
@@ -2060,7 +2060,7 @@ End Settings Sidebar
             position: relative;
 
             .pro-content-overlay {
-              width: 120%;
+              width: 110%;
               height: 150%;
               overflow: hidden;
               border-radius: 5px;

diff --git a/assets/src/components/settings/Panels/PanelSettings/Fields/CheckboxGroup.js b/assets/src/components/settings/Panels/PanelSettings/Fields/CheckboxGroup.js
@@ -77,6 +77,7 @@ const CheckboxGroup = ({
   needUpgrade = false,
   showProIcon = true,
   showSingleCheckOverlay = true,
+  children,
 }) => {
   const handleChange = (option) => {
     if (isSingleMode) {
@@ -91,7 +92,10 @@ const CheckboxGroup = ({
 
   const noop = () => {};
   return (
-    <FieldWrapper colSpan={ colSpan } upgradeClass={ needUpgrade ? `upgrade-settings` : '' }>
+    <FieldWrapper
+      colSpan={colSpan}
+      upgradeClass={needUpgrade ? `upgrade-settings` : ""}
+    >
       <Col span={headColSpan}>
         <div className={`card-heading checkboxinput-heading`}>
           {/* Handle switcher title. */}
@@ -107,17 +111,19 @@ const CheckboxGroup = ({
       <Col span={checkboxColSpan}>
         <Space direction={displayDirection}>
           {options.map((checkbox) => (
-            <label className={ `${ checkbox.needUpgrade ? 'disabled-checkbox' : '' }` } key={checkbox.value} style={{ display: "flex", gap: "4px" }}>
+            <label
+              className={`${checkbox.needUpgrade ? "disabled-checkbox" : ""}`}
+              key={checkbox.value}
+              style={{ display: "flex", gap: "4px" }}
+            >
               <Checkbox
                 checked={selectedOptions.includes(checkbox.value)}
                 onChange={
                   checkbox.needUpgrade !== undefined && checkbox.needUpgrade
                     ? noop
                     : () => handleChange(checkbox.value)
                 }
-                disabled={
-                  checkbox.needUpgrade !== undefined && checkbox.needUpgrade
-                }
+                disabled={checkbox?.disabled || checkbox?.needUpgrade}
               >
                 <span style={{ display: "flex", gap: "8px" }}>
                   {checkbox.label}
@@ -128,13 +134,20 @@ const CheckboxGroup = ({
                   )}
                 </span>
               </Checkbox>
-              {(checkbox.needUpgrade && showProIcon) ? <UpgradeCrown proBadge={ false } /> : ""}
-              { checkbox.needUpgrade && showSingleCheckOverlay && <UpgradeOverlay /> }
+              {checkbox.needUpgrade && showProIcon ? (
+                <UpgradeCrown proBadge={false} />
+              ) : (
+                ""
+              )}
+              {checkbox.needUpgrade && showSingleCheckOverlay && (
+                <UpgradeOverlay />
+              )}
             </label>
           ))}
         </Space>
+        {children}
       </Col>
-      { needUpgrade && <UpgradeOverlay /> }
+      {needUpgrade && <UpgradeOverlay />}
     </FieldWrapper>
   );
 };

diff --git a/includes/modules/direct-checkout/assets/src/components/General.js b/includes/modules/direct-checkout/assets/src/components/General.js
@@ -9,6 +9,9 @@ import ActionsHandler from "sales-booster/src/components/settings/Panels/PanelSe
 import { createDirectCheckoutForm } from "../helper";
 
 function General({ onFormSave, upgradeTeaser }) {
+  const modulePageRedirect = () => {
+    window.location.href = "/wp-admin/admin.php?page=sgsb-modules";
+  };
   const { setCreateFromData } = useDispatch("sgsb_direct_checkout");
   const { createDirectCheckoutFormData, getButtonLoading } = useSelect(
     (select) => ({
@@ -32,7 +35,20 @@ function General({ onFormSave, upgradeTeaser }) {
 
   const noop = () => {};
 
-  const checkboxesOption = [
+  const fancyTextStyle = {
+    color: "#3498db",
+    fontWeight: "bold",
+    textAlign: "center",
+    padding: "10px",
+    border: "1px solid #bdc3c7",
+    borderRadius: "4px",
+  };
+
+  const redTextStyle = {
+    color: "red",
+  };
+
+  const buttonLayoutOptions = [
     {
       label: `"Add to cart" as "${createDirectCheckoutFormData.buy_now_button_label}"`,
       value: "cart-to-buy-now",
@@ -64,14 +80,22 @@ function General({ onFormSave, upgradeTeaser }) {
   ];
 
   // Define select options
-  const selectOptions = [
+  const checkoutPageOptions = [
     {
-      value: "legacy-checkout",
       label: __("Legacy Checkout", "storegrowth-sales-booster"),
+      value: "legacy-checkout",
+      tooltip: __(
+        "The Chekout will redirect to the default checkout page.",
+        "storegrowth-sales-booster"
+      ),
     },
     {
-      value: "quick-cart-checkout",
       label: __("Quick Cart Checkout", "storegrowth-sales-booster"),
+      value: "quick-cart-checkout",
+      tooltip: __(
+        "The checkout will redirect to Qucik Cart module cart chekout page.",
+        "storegrowth-sales-booster"
+      ),
       needUpgrade: upgradeTeaser,
       disabled: isQuickCartActive,
     },
@@ -95,31 +119,55 @@ function General({ onFormSave, upgradeTeaser }) {
         />
         <CheckboxGroup
           name={"buy_now_button_setting"}
-          options={checkboxesOption}
+          options={buttonLayoutOptions}
           selectedOptions={createDirectCheckoutFormData.buy_now_button_setting}
           handleCheckboxChange={onFieldChange}
           isSingleMode={true}
           title={__("Button Layout Setting", "storegrowth-sales-booster")}
           headColSpan={9}
           checkboxColSpan={15}
         />
-
-        <SelectBox
-          fieldWidth={upgradeTeaser ? 250 : 170}
+        <CheckboxGroup
           name={"checkout_redirect"}
-          fieldValue={
-            upgradeTeaser
-              ? "legacy-checkout"
-              : createDirectCheckoutFormData.checkout_redirect
-          }
-          changeHandler={upgradeTeaser ? noop : onFieldChange}
-          title={__("Checkout Redirect", "storegrowth-sales-boooster")}
-          tooltip={__(
-            "Select the type of checkout redirection",
-            "storegrowth-sales-booster"
+          options={checkoutPageOptions}
+          selectedOptions={createDirectCheckoutFormData.checkout_redirect}
+          handleCheckboxChange={onFieldChange}
+          isSingleMode={true}
+          title={__("Checkout Redirect", "storegrowth-sales-booster")}
+          headColSpan={9}
+          checkboxColSpan={15}
+        >
+          {isQuickCartActive && !upgradeTeaser && (
+            <div
+              style={{
+                marginTop: 10,
+                ...fancyTextStyle,
+              }}
+            >
+              <p>
+                Please Activate the{" "}
+                <span style={redTextStyle}>Quick Cart Module</span> to use the
+                <span style={redTextStyle}> Quick Cart Checkout</span>{" "}
+                Redirection.
+              </p>
+              <div>
+                <button
+                  style={{
+                    backgroundColor: "#1677ff",
+                    color: "#fff",
+                    padding: "10px 20px",
+                    border: "none",
+                    borderRadius: "5px",
+                    cursor: "pointer",
+                  }}
+                  onClick={modulePageRedirect}
+                >
+                  Modules Page
+                </button>
+              </div>
+            </div>
           )}
-          options={selectOptions}
-        />
+        </CheckboxGroup>
 
         <SingleCheckBox
           needUpgrade={upgradeTeaser}