Merge pull request #3 from Trunkrs/feature/FALCON-93

v1.2.0: Order rule engine, Delivery dates & WooCommerce extension support

.wp-env.json

@@ -1,12 +1,11 @@
 {
-  "core": "WordPress/WordPress",
   "themes": [
-    "https://downloads.wordpress.org/theme/storefront.3.8.1.zip"
+    "https://downloads.wordpress.org/theme/storefront.3.9.1.zip"
   ],
   "plugins": [
     ".",
-    "https://downloads.wordpress.org/plugin/woocommerce.5.6.0.zip",
-    "https://downloads.wordpress.org/plugin/woocommerce-gateway-stripe.5.4.0.zip",
-    "https://downloads.wordpress.org/plugin/email-log.2.4.5.zip"
+    "https://downloads.wordpress.org/plugin/woocommerce.6.1.0.zip",
+    "https://downloads.wordpress.org/plugin/woocommerce-gateway-stripe.6.0.0.zip",
+    "https://downloads.wordpress.org/plugin/email-log.2.4.8.zip"
   ]
 }

assets/admin.ts

@@ -3,7 +3,9 @@ import { render, createElement } from '@wordpress/element'
 import './admin.scss'
 import AdminApp from './admin/AdminApp'
 
-const element = document.getElementById('tr-wc-settings')
-if (element) {
-  render(createElement(AdminApp), element)
+// eslint-disable-next-line import/prefer-default-export
+export const appElement = document.getElementById('tr-wc-settings')
+
+if (appElement) {
+  render(createElement(AdminApp), appElement)
 }

assets/admin/components/AdvancedCheckout/AdvancedCheckout.scss

@@ -0,0 +1,10 @@
+.tr-wc-ruleBtn-group {
+  display: flex;
+  border-top: #e2e4e7 1px solid;
+  padding-top: 16px;
+  margin-top: 8px;
+
+  .tr-wc-ruleBtn {
+    margin-right: 16px;
+  }
+}

assets/admin/components/AdvancedCheckout/AuditLogModal/AuditLogModal.scss

@@ -0,0 +1,20 @@
+.tr-wc-auditLogModal-container {
+  width: 50vw;
+  max-width: 800px;
+  min-width: 700px;
+}
+
+.tr-wc-auditLogModal-contentPanel {
+  height: 400px;
+}
+
+.tr-wc-auditLogModal-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.tr-wc-auditLogModal-panel {
+  padding-top: 16px;
+}

assets/admin/components/AdvancedCheckout/AuditLogModal/LogEntry/LogEntry.scss

@@ -0,0 +1,19 @@
+.tr-wc-logEntry-table {
+  padding: 8px;
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 16px;
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  td {
+    border: 1px solid #ccc;
+  }
+}
+
+.tr-wc-auditLogModal-dataCell {
+  box-sizing: border-box;
+  padding: 0 4px;
+}

assets/admin/components/AdvancedCheckout/AuditLogModal/LogEntry/index.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+
+import { AuditLogEntry } from '../../../../providers/Config/helpers'
+
+import './LogEntry.scss'
+
+const opLabels = {
+  EQ: 'gelijk aan',
+  NQ: 'niet gelijk aan',
+  GT: 'groter dan',
+  LT: 'kleiner dan',
+  CO: 'bevat',
+  SW: 'begint met',
+  EW: 'eindigt met',
+}
+
+const LogEntry: React.FC<AuditLogEntry> = ({ orderId, timestamp, entries }) => (
+  <table className="tr-wc-logEntry-table">
+    <tbody>
+      {entries.map((entry, index) =>
+        entry.comparisons.map((comparison) => (
+          <tr
+            key={`${entry.fieldName}-${comparison.operator}-${comparison.compareValue}`}
+          >
+            {index === 0 && (
+              <td
+                rowSpan={entries.length}
+                width="25%"
+                className="tr-wc-auditLogModal-dataCell"
+              >
+                <a
+                  href={`/wp-admin/post.php?post=${orderId}&action=edit`}
+                >{`Bestelling #${orderId}`}</a>
+                <p>{`${timestamp} UTC`}</p>
+              </td>
+            )}
+
+            <td width="45%" className="tr-wc-auditLogModal-dataCell">
+              {`${entry.fieldName} ${
+                opLabels[comparison.operator as keyof typeof opLabels]
+              } ${comparison.compareValue}`}
+            </td>
+            <td width="40%" className="tr-wc-auditLogModal-dataCell">
+              <p>Waarde: {entry.fieldValue}</p>
+              <p>
+                Uitkomst:{' '}
+                <span style={{ color: comparison.result ? 'green' : 'red' }}>
+                  {String(comparison.result)}
+                </span>
+              </p>
+            </td>
+          </tr>
+        )),
+      )}
+    </tbody>
+  </table>
+)
+
+export default LogEntry

assets/admin/components/AdvancedCheckout/AuditLogModal/index.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+
+import { AuditLogEntry, findAuditLogs } from '../../../providers/Config/helpers'
+
+import CircularProgress from '../../CircularProgress'
+import Modal from '../../Modal'
+
+import LogEntry from './LogEntry'
+
+import './AuditLogModal.scss'
+
+interface AuditLogModalProps {
+  open: boolean
+  onClose: () => void
+}
+
+const AuditLogModal: React.FC<AuditLogModalProps> = ({ open, onClose }) => {
+  const [isLoading, setLoading] = React.useState(true)
+  const [logs, setLogs] = React.useState<AuditLogEntry[]>([])
+
+  React.useEffect(() => {
+    if (!open) return
+
+    setLoading(true)
+
+    findAuditLogs()
+      .then(setLogs)
+      .finally(() => setLoading(false))
+  }, [open])
+
+  return (
+    <Modal
+      open={open}
+      classes={{
+        container: 'tr-wc-auditLogModal-container',
+        contentPanel: 'tr-wc-auditLogModal-contentPanel',
+        content: 'tr-wc-auditLogModal-panel',
+      }}
+      title="Selectie logboek"
+      onClose={onClose}
+    >
+      {!isLoading ? (
+        logs.map((entry) => <LogEntry key={entry.timestamp} {...entry} />)
+      ) : (
+        <div className="tr-wc-auditLogModal-loading">
+          <CircularProgress size={48} thickness={4} />
+        </div>
+      )}
+    </Modal>
+  )
+}
+
+export default AuditLogModal

assets/admin/components/AdvancedCheckout/RulesModal/EmptyView/EmptyView.scss

@@ -0,0 +1,20 @@
+.tr-wc-rulesModal-emptyView-panel {
+  position: absolute;
+  bottom: 8px;
+  left: 88px;
+}
+
+.tr-wc-rulesModal-emptyView-line {
+  width: 230px;
+  color: #ccc;
+}
+
+.tr-wc-rulesModal-emptyView-text {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: -11px;
+  right: -180px;
+  width: 170px;
+  font-size: 16px;
+}

assets/admin/components/AdvancedCheckout/RulesModal/EmptyView/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import ConnectorLineDown from '../../../vectors/ConnectorLineDown'
+
+import './EmptyView.scss'
+import AddFilter from '../../../vectors/AddFilter'
+
+const EmptyView: React.FC = () => (
+  <div className="tr-wc-rulesModal-emptyView-panel">
+    <ConnectorLineDown className="tr-wc-rulesModal-emptyView-line" />
+    <p className="tr-wc-rulesModal-emptyView-text">
+      <AddFilter className="tr-wc-buttonVector" />
+      Voeg een regel toe
+    </p>
+  </div>
+)
+
+export default EmptyView

assets/admin/components/AdvancedCheckout/RulesModal/FieldInput/FieldInput.scss

@@ -0,0 +1,8 @@
+.tr-wc-fieldInput-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.tr-wc-fieldInput-input {
+  margin-top: 8px;
+}

assets/admin/components/AdvancedCheckout/RulesModal/FieldInput/index.tsx

@@ -0,0 +1,93 @@
+import React from 'react'
+import { useField } from 'formik'
+
+import './FieldInput.scss'
+
+interface FieldInputProps {
+  name: string
+}
+
+const preSelectable = {
+  method_id: 'Verzendoptie code',
+  method_title: 'Verzendoptie naam',
+  payment_method: 'Betaalmethode type',
+  payment_method_title: 'Betaalmethode naam',
+  total: 'Order totaal',
+  status: 'Order status',
+  created_via: 'Aangemaakt via',
+}
+const selectableKeys = Object.keys(preSelectable) as Array<
+  keyof typeof preSelectable
+>
+
+const FieldInput: React.FC<FieldInputProps> = ({ name }) => {
+  const [field, , helpers] = useField(name)
+  const [isEditable, setEditable] = React.useState(
+    field.value && !selectableKeys.includes(field.value),
+  )
+
+  const handleSelectChanged = React.useCallback(
+    (event: React.ChangeEvent<HTMLSelectElement>) => {
+      const {
+        target: { value },
+      } = event
+
+      const isNormalSelection = selectableKeys.includes(
+        value as keyof typeof preSelectable,
+      )
+      if (isNormalSelection) {
+        helpers.setValue(value)
+        if (isEditable) {
+          setEditable(false)
+        }
+      } else {
+        helpers.setValue('')
+        setEditable(true)
+      }
+    },
+    [helpers, isEditable],
+  )
+
+  return (
+    <div className="tr-wc-fieldInput-container">
+      <select
+        className="tr-wc-Rule-select"
+        value={field.value}
+        onBlur={field.onBlur}
+        onChange={handleSelectChanged}
+      >
+        <option value="" hidden>
+          Selecteer veld
+        </option>
+        {React.useMemo(
+          () =>
+            selectableKeys.map((key) => {
+              const { [key]: label } = preSelectable
+              return (
+                <option key={key} value={key}>
+                  {label}
+                </option>
+              )
+            }),
+          [],
+        )}
+        <option value="custom-field">Aangepaste waarde</option>
+      </select>
+
+      <input
+        disabled={!isEditable}
+        type="text"
+        className="tr-wc-Rule-input tr-wc-fieldInput-input"
+        placeholder={
+          isEditable ? 'Type de naam van het veld' : 'Selecteer een veld'
+        }
+        value={field.value}
+        name={field.name}
+        onBlur={field.onBlur}
+        onChange={field.onChange}
+      />
+    </div>
+  )
+}
+
+export default FieldInput

assets/admin/components/AdvancedCheckout/RulesModal/Rule/Rule.scss

@@ -0,0 +1,57 @@
+.tr-wc-Rule-container {
+  display: flex;
+  align-items: center;
+  margin-top: 8px;
+  box-sizing: border-box;
+
+  &:not(:last-child) {
+    padding-bottom: 8px;
+    border-bottom: 1px solid #e2e4e7;
+  }
+}
+
+.tr-wc-Rule-ruleContainer {
+  display: flex;
+  flex: 1 auto;
+  justify-content: space-evenly;
+  align-items: center;
+  margin-right: 16px;
+
+  & > * {
+    flex: 1;
+
+    &:not(:last-child) {
+      margin-right: 8px;
+    }
+  }
+}
+
+.tr-wc-Rule-select,
+.tr-wc-Rule-input {
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  color: #220C4A;
+  height: 32px;
+
+  &:disabled {
+    color: #B8B8B8;
+    background-color: #F5F5F5;
+    outline: none;
+  }
+
+  &:hover:not(:disabled) {
+    border-color: transparent !important;
+    outline: 2px #AE97FF solid;
+  }
+
+  &:active:not(:disabled), &:focus:not(:disabled) {
+    border-color: transparent !important;
+    outline: 2px #8000FF solid;
+  }
+}
+
+.tr-wc-Rule-input {
+  padding: 0 8px;
+}
+
+