Merge pull request #213 from Invizo/feat/free-shipping-bar/issue#211

feat(free-shipping-bar): admin ui

.gitignore

@@ -3,3 +3,5 @@ node_modules
 vendor
 .idea
 lerna-debug.log
+assets/build/
+includes/modules/*/assets/build/

assets/src/admin.scss

@@ -2037,3 +2037,14 @@ End Settings Sidebar
     }
   }
 }
+
+.ant-select-selector {
+  width: 100%;
+  height: 40px !important;
+  padding: 5px 11px !important;
+  border-color: #DDE6F9 !important;
+}
+
+.trigger-radio-selected {
+  background-color: #F6F9FF;
+}

assets/src/components/settings/Layout.js

@@ -53,7 +53,8 @@ function AppLayout() {
     useParams,
     useSearchParams
   );
-
+    console.log("=========main route====");
+    console.log(routes);
   return (
     <Layout>
       {!routes.length ? <NoModuleActive /> : <ModuleSettings routes={routes} />}

assets/src/components/settings/Panels/PanelSettings/Fields/CheckboxGroup.js

@@ -67,8 +67,13 @@ const CheckboxGroup = ({
   options,
   selectedOptions,
   handleCheckboxChange,
+  displayDirection = "vertical",
   isSingleMode = false,
   colSpan = 24,
+  headColSpan = 15,
+  checkboxColSpan = 9,
+  tooltip,
+  needUpgrade = false,
 }) => {
   const handleChange = (option) => {
     if (isSingleMode) {
@@ -84,16 +89,20 @@ const CheckboxGroup = ({
   const noop = () => {};
   return (
     <FieldWrapper colSpan={colSpan}>
-      <Col span={9}>
+      <Col span={headColSpan}>
         <div className={`card-heading checkboxinput-heading`}>
           {/* Handle switcher title. */}
           <Title level={3} className={`settings-heading`}>
             {title}
           </Title>
+          {/* Handle switcher tooltip. */}
+          {tooltip && <SettingsTooltip content={tooltip} />}
+          {/* Handle switcher upgrade icon. */}
+          {needUpgrade && <UpgradeCrown />}
         </div>
       </Col>
-      <Col span={15}>
-        <Space direction="vertical">
+      <Col span={checkboxColSpan}>
+        <Space direction={displayDirection}>
           {options.map((checkbox) => (
             <label key={checkbox.value} style={{ display: "flex", gap: "4px" }}>
               <Checkbox
@@ -109,7 +118,7 @@ const CheckboxGroup = ({
               >
                 <span style={{ display: "flex", gap: "8px" }}>
                   {checkbox.label}
-                  {checkbox.tooltip === "" ? (
+                  {checkbox.tooltip === undefined || checkbox.tooltip === "" ? (
                     ""
                   ) : (
                     <SettingsTooltip content={checkbox.tooltip} />

assets/src/components/settings/Panels/PanelSettings/Fields/EmptyField.js

@@ -0,0 +1,41 @@
+import { Typography, Col } from "antd";
+import SettingsTooltip from "../SettingsTooltip";
+import UpgradeCrown from "../UpgradeCrown";
+import FieldWrapper from "./FieldWrapper";
+const noop = () => {};
+const { Title } = Typography;
+
+const EmptyField = ({
+  title,
+  tooltip,
+  colSpan = 24,
+  needUpgrade = false,
+  children,
+  leftCol=9,
+  rightCol =15
+}) => {
+  return (
+    // Make settings textarea component with card preview.
+    <FieldWrapper colSpan={colSpan}>
+      <Col span={leftCol}>
+        <div className={`card-heading textarea-heading`}>
+          {/* Handle switcher title. */}
+          <Title level={3} className={`settings-heading`}>
+            {title}
+          </Title>
+          {/* Handle switcher tooltip. */}
+          {tooltip && <SettingsTooltip content={tooltip} />}
+          {/* Handle switcher upgrade icon. */}
+          {needUpgrade && <UpgradeCrown />}
+        </div>
+      </Col>
+
+      <Col span={rightCol}>
+        {/* Handle settings textarea field by using dynamic props */}
+        {children}
+      </Col>
+    </FieldWrapper>
+  );
+};
+
+export default EmptyField;

assets/src/components/settings/Sidebar.js

@@ -10,6 +10,8 @@ import upArrowIocn from "../../../images/menu/up-arrow-icon.svg";
 import widgetIcon from "../../../images/widget-icon.svg";
 
 function Sidebar({ routes }) {
+  console.log("=======Routes======");
+  console.log(routes);
   // let sidebarItems = applyFilters("sidebar_menu_items", [], Link);
   let firstItem = routes[0] || false;
   const location = useLocation();

includes/modules/direct-checkout/assets/src/components/General.js

@@ -87,6 +87,8 @@ function General({ onFormSave, upgradeTeaser }) {
           handleCheckboxChange={onFieldChange}
           isSingleMode={true}
           title={__("Button Layout Setting", "storegrowth-sales-booster")}
+          headColSpan = {9}
+          checkboxColSpan = {15}
         />
 
         <SelectBox

includes/modules/floating-notification-bar/assets/css/floating-notification-bar.css

@@ -0,0 +1,70 @@
+body.show_floating_notification_bar .sgsb-floating-notification-bar-wrapper{
+    display: block;
+    transition: 0.5s;
+}
+
+body:not(.show_floating_notification_bar){
+    padding-top: 0;
+}
+
+.sgsb-floating-notification-bar-wrapper {
+    display: none;
+    position: fixed;
+    left: 0;
+    top: 0;
+    text-align: center;
+    width: 100%;
+    background-color: #008DFF;
+    color: #fff;
+    z-index: 999;
+    height: auto;
+    padding: 8px 0px;
+}
+.sgsb-floating-notification-bar {
+    display: flex;
+    justify-content: space-between;
+    width: 97%;
+    margin:auto;
+    height: 100%;
+    align-items: center;
+    padding: 0px 20px;
+}
+
+.sgsb-floating-notification-bar-wrapper .sgsb-floating-notification-bar-icon svg {
+    margin-top: 8px;
+    fill: #fff;
+    width: 25px;
+    height: 25px;
+}
+
+.sgsb-floating-notification-bar-text{
+    font-size: 20px;
+    font-weight: 400;
+}
+
+.sgsb-floating-notification-bar-remove {
+    cursor: pointer;
+}
+
+/* CSS for the button-like anchor */
+.fn-bar-action-button {
+    display: inline-block;
+    padding: 5px 20px;
+    background-color: #ffff;
+    color: #000;
+    text-decoration: none;
+    border-radius: 5px;
+    transition: background-color 0.3s ease;
+    font-weight: 600;
+}
+
+.fn-bar-action-button:hover {
+    background-color: #0056b3; /* Change the background color on hover */
+}
+
+body.admin-bar .sgsb-floating-notification-bar-wrapper {
+    top: 32px;
+}
+body {
+    padding-top: 70px;
+}