feat(woo): add WOOSaleBadge and WOOOutOfStockBadge editor components

public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/defaultValue.json

@@ -0,0 +1,71 @@
+{
+  "style": {
+    "families": {
+      "fontFamily": "lato",
+      "tabletFontFamily": null,
+      "mobileFontFamily": null
+    },
+
+    "customCSS": "",
+
+    "fontStyle": "paragraph",
+    "fontFamilyType": "google",
+    "fontSize": 12,
+    "fontSizeSuffix": "px",
+    "fontWeight": 700,
+    "lineHeight": 1.8,
+    "letterSpacing": 2,
+    "variableFontWeight": 700,
+    "fontWidth": 100,
+    "fontSoftness": 0,
+    "bold": false,
+    "italic": false,
+    "underline": false,
+    "strike": false,
+    "uppercase": true,
+    "lowercase": false,
+
+    "colorHex": "#ffffff",
+    "colorOpacity": 1,
+    "colorPalette": "",
+
+    "tempColorOpacity": 1,
+    "tempColorPalette": "",
+
+    "tabletFontStyle": "",
+    "tabletFontFamilyType": null,
+    "tabletFontSize": 11,
+    "tabletFontSizeSuffix": "px",
+    "tabletFontWeight": 700,
+    "tabletLineHeight": 1.8,
+    "tabletLetterSpacing": 1,
+
+    "mobileFontStyle": "",
+    "mobileFontFamilyType": null,
+    "mobileFontSize": 11,
+    "mobileFontSizeSuffix": "px",
+    "mobileFontWeight": 700,
+    "mobileLineHeight": 1.8,
+    "mobileLetterSpacing": 1,
+
+    "bgColorType": "solid",
+    "bgColorHex": "#95a5a6",
+    "bgColorOpacity": 1,
+    "bgColorPalette": "",
+
+    "tempBgColorOpacity": 1,
+    "tempBgColorPalette": "",
+
+    "borderRadiusType": "grouped",
+    "borderRadius": 3,
+    "borderTopLeftRadius": 3,
+    "borderTopRightRadius": 3,
+    "borderBottomRightRadius": 3,
+    "borderBottomLeftRadius": 3,
+    "borderRadiusSuffix": "px",
+    "borderTopLeftRadiusSuffix": "px",
+    "borderTopRightRadiusSuffix": "px",
+    "borderBottomRightRadiusSuffix": "px",
+    "borderBottomLeftRadiusSuffix": "px"
+  }
+}

public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/index.jsx

@@ -0,0 +1,108 @@
+import classnames from "classnames";
+import React from "react";
+import CustomCSS from "visual/component/CustomCSS";
+import Toolbar from "visual/component/Toolbar";
+import EditorComponent from "visual/editorComponents/EditorComponent";
+import { DynamicContentHelper } from "visual/editorComponents/WordPress/common/DynamicContentHelper";
+import { makePlaceholder } from "visual/utils/dynamicContent";
+import { attachRefs } from "visual/utils/react";
+import { Wrapper } from "../../tools/Wrapper";
+import defaultValue from "./defaultValue.json";
+import * as sidebarConfig from "./sidebar";
+import { style } from "./styles";
+import * as toolbarConfig from "./toolbar";
+
+export default class WOOOutOfStockBadge extends EditorComponent {
+  static defaultValue = defaultValue;
+
+  static get componentId() {
+    return "WOOOutOfStockBadge";
+  }
+
+  renderForEdit(v, vs, vd) {
+    const className = classnames(
+      "brz-woo-out-of-stock-badge",
+      v.className,
+      this.css(
+        this.getComponentId(),
+        this.getId(),
+        style({
+          v,
+          vs,
+          vd,
+          store: this.getReduxStore(),
+          contexts: this.getContexts()
+        })
+      )
+    );
+
+    const placeholder = makePlaceholder({
+      content: "{{editor_product_archive_out_of_stock_badge}}"
+    });
+
+    return (
+      <Toolbar
+        {...this.makeToolbarPropsFromConfig2(toolbarConfig, sidebarConfig)}
+      >
+        {({ ref: toolbarRef }) => (
+          <CustomCSS selectorName={this.getId()} css={v.customCSS}>
+            {({ ref: cssRef }) => (
+              <Wrapper
+                {...this.makeWrapperProps({
+                  className,
+                  ref: (el) => attachRefs(el, [toolbarRef, cssRef])
+                })}
+              >
+                <div className="brz-woo-out-of-stock-badge__container">
+                  <DynamicContentHelper
+                    placeholder={placeholder}
+                    placeholderIcon="woo-out-of-stock-badge"
+                    tagName="span"
+                    props={{ className: "brz-woo-out-of-stock-badge__label" }}
+                  />
+                </div>
+              </Wrapper>
+            )}
+          </CustomCSS>
+        )}
+      </Toolbar>
+    );
+  }
+
+  renderForView(v, vs, vd) {
+    const className = classnames(
+      "brz-woo-out-of-stock-badge",
+      v.className,
+      this.css(
+        this.getComponentId(),
+        this.getId(),
+        style({
+          v,
+          vs,
+          vd,
+          store: this.getReduxStore(),
+          contexts: this.getContexts()
+        })
+      )
+    );
+
+    const placeholder = makePlaceholder({
+      content: "{{editor_product_archive_out_of_stock_badge}}"
+    });
+
+    return (
+      <CustomCSS selectorName={this.getId()} css={v.customCSS}>
+        <Wrapper {...this.makeWrapperProps({ className })}>
+          <div className="brz-woo-out-of-stock-badge__container">
+            <DynamicContentHelper
+              placeholder={placeholder}
+              placeholderIcon="woo-out-of-stock-badge"
+              tagName="span"
+              props={{ className: "brz-woo-out-of-stock-badge__label" }}
+            />
+          </div>
+        </Wrapper>
+      </CustomCSS>
+    );
+  }
+}

public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/sidebar.js

@@ -0,0 +1,60 @@
+import { t } from "visual/utils/i18n";
+
+export const title = () => t("Out of Stock Badge");
+
+const getHtml = () => {
+  return `
+<p class="brz-p">${t(
+    "You can use the following selectors to create targeted CSS."
+  )}</p>
+<p class="brz-p">
+  <span class="brz-span brz-ed-tooltip__overlay-code">element</span> {...}
+  <br class="brz-br">
+  <span class="brz-span brz-ed-tooltip__overlay-code">element .child-element</span> {...}
+</p>`;
+};
+
+export function getItems() {
+  return [
+    {
+      id: "sidebarTabs",
+      type: "sidebarTabs",
+      tabs: [
+        {
+          id: "styles",
+          title: t("Styling"),
+          label: t("Styling"),
+          options: [
+            {
+              id: "settingsTabs",
+              type: "tabs",
+              config: {
+                align: "start"
+              },
+              devices: "desktop",
+              tabs: [
+                {
+                  id: "moreSettingsAdvanced",
+                  label: t("Advanced"),
+                  icon: "nc-cog",
+                  options: [
+                    {
+                      id: "customCSS",
+                      label: t("Custom CSS"),
+                      type: "codeMirror",
+                      position: 45,
+                      display: "block",
+                      devices: "desktop",
+                      helper: { content: getHtml() },
+                      placeholder: `element { ${t("CSS goes here")} }`
+                    }
+                  ]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ];
+}

public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/styles.ts

@@ -0,0 +1,30 @@
+import { ElementModel } from "visual/component/Elements/Types";
+import { DynamicStylesProps } from "visual/types";
+import { renderStyles } from "visual/utils/cssStyle";
+
+export function style(data: DynamicStylesProps<ElementModel>) {
+  const styles = {
+    ".brz && .brz-woo-out-of-stock-badge__container": {
+      standart: ["cssStyleBorderRadius"]
+    },
+    ".brz &&:hover .brz-woo-out-of-stock-badge__container": {
+      standart: ["cssStyleBgColor", "cssStyleBgGradient"]
+    },
+    ".brz && .brz-woo-out-of-stock-badge__label": {
+      standart: [
+        "cssStyleTypography2FontFamily",
+        "cssStyleTypography2FontSize",
+        "cssStyleTypography2LineHeight",
+        "cssStyleTypography2FontWeight",
+        "cssStyleTypography2LetterSpacing",
+        "cssStyleTypography2FontVariation",
+        "cssStyleTextTransforms"
+      ]
+    },
+    ".brz &&:hover .brz-woo-out-of-stock-badge__label": {
+      standart: ["cssStyleColor"]
+    }
+  };
+
+  return renderStyles({ ...data, styles });
+}

public/editor-src/editor/js/editorComponents/WordPress/WOOOutOfStockBadge/toolbar.js

@@ -0,0 +1,91 @@
+import { getColorToolbar } from "visual/utils/color";
+import { t } from "visual/utils/i18n";
+import { defaultValueValue } from "visual/utils/onChange";
+import { HOVER, NORMAL } from "visual/utils/stateMode";
+
+export function getItems({ v, device, state }) {
+  const dvv = (key) => defaultValueValue({ v, key, device, state });
+
+  const bgColor = getColorToolbar(
+    dvv("bgColorPalette"),
+    dvv("bgColorHex"),
+    dvv("bgColorOpacity")
+  );
+
+  return [
+    {
+      id: "toolbarTypography",
+      type: "popover",
+      config: {
+        icon: "nc-font",
+        size: device === "desktop" ? "large" : "auto",
+        title: t("Typography")
+      },
+      roles: ["admin"],
+      position: 70,
+      options: [
+        {
+          id: "",
+          type: "typography",
+          config: {
+            fontFamily: device === "desktop"
+          }
+        }
+      ]
+    },
+    {
+      id: "toolbarColor",
+      type: "popover",
+      config: {
+        size: "medium",
+        title: t("Colors"),
+        icon: {
+          style: {
+            backgroundColor: bgColor
+          }
+        }
+      },
+      roles: ["admin"],
+      devices: "desktop",
+      position: 80,
+      options: [
+        {
+          id: "tabsColor",
+          type: "tabs",
+          tabs: [
+            {
+              id: "tabBg",
+              label: t("Bg"),
+              options: [
+                {
+                  id: "",
+                  type: "backgroundColor",
+                  devices: "desktop",
+                  states: [NORMAL, HOVER]
+                }
+              ]
+            },
+            {
+              id: "tabText",
+              label: t("Text"),
+              options: [
+                {
+                  id: "color",
+                  type: "colorPicker",
+                  devices: "desktop",
+                  states: [NORMAL, HOVER]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      id: "advancedSettings",
+      type: "advancedSettings",
+      devices: "desktop",
+      position: 110
+    }
+  ];
+}