* feat(SFT-1555): add the possibility to add separators for object pr…

…operties (#1624) * feat(SFT-1555): translations for object property separators in builder * feat(SFT-1555): added object separators for various CRM integrations in builder --------- Co-authored-by: kjmartens <[email protected]>
solspace · Nov 12, 2024 · 80dae07 · 80dae07
1 parent cadc777
commit 80dae07
Show file tree

Hide file tree

Showing 20 changed files with 149 additions and 2 deletions.
diff --git a/packages/client/src/app/components/form-controls/delimiter.tsx b/packages/client/src/app/components/form-controls/delimiter.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import type { Delimiter } from '@ff-client/types/properties';
+
+type Props = {
+  delimiter?: Delimiter;
+};
+
+import { labelText } from '@ff-client/styles/mixins';
+import { shadows } from '@ff-client/styles/variables';
+import styled from 'styled-components';
+
+const DelimiterWrapper = styled.div`
+  position: relative;
+  min-height: 10px;
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 9px;
+    left: 0;
+    right: 0;
+    z-index: 1;
+
+    height: 1px;
+    margin: 0 var(--margins);
+
+    box-shadow: ${shadows.bottom};
+  }
+
+  div {
+    position: absolute;
+    left: -5px;
+    top: 0;
+    z-index: 2;
+
+    background: var(--background-color);
+    padding: 0 5px;
+
+    ${labelText};
+    font-size: 11px;
+
+    &:empty {
+      display: none;
+    }
+  }
+`;
+
+export const DelimiterElement: React.FC<Props> = ({ delimiter }) => {
+  if (!delimiter) {
+    return null;
+  }
+
+  return (
+    <DelimiterWrapper>
+      <div>{delimiter.name}</div>
+    </DelimiterWrapper>
+  );
+};
diff --git a/packages/client/src/app/components/form-controls/index.tsx b/packages/client/src/app/components/form-controls/index.tsx
@@ -10,6 +10,7 @@ import type {
 
 import { ErrorBoundary } from './boundaries/ErrorBoundary';
 import { useVisibility } from './hooks/use-visibility';
+import { DelimiterElement } from './delimiter';
 
 export type UpdateValue<T> = (value: T) => void;
 
@@ -55,6 +56,8 @@ export const FormComponent: React.FC<Props> = ({
   return (
     <ErrorBoundary message={`...${handle} <${type}>`}>
       <Suspense>
+        <DelimiterElement delimiter={property.delimiter} />
+
         <FormControl
           value={value as GenericValue}
           property={property}

diff --git a/packages/client/src/app/components/layout/sidebar/sidebar.tsx b/packages/client/src/app/components/layout/sidebar/sidebar.tsx
@@ -21,4 +21,7 @@ export const Sidebar = styled.div<WrapperProps>`
   background: ${colors.gray050};
 
   overflow-y: auto;
+
+  --background-color: ${colors.gray050};
+  --margins: -18px;
 `;
diff --git a/.../app/pages/forms/edit/builder/tabs/integrations/property-editor/property-editor.styles.ts b/.../app/pages/forms/edit/builder/tabs/integrations/property-editor/property-editor.styles.ts
@@ -9,13 +9,16 @@ export const PropertyEditorWrapper = styled.div`
   flex-direction: column;
   gap: ${spacings.xl};
 
-  background: ${colors.white};
   padding: ${spacings.xl};
 
+  background: ${colors.white};
   overflow-y: auto;
 
   ${scrollBar};
 
+  --background-color: ${colors.white};
+  --margins: -24px;
+
   h1 {
     padding: 0;
     margin-top: -11px;

diff --git a/packages/client/src/types/properties.ts b/packages/client/src/types/properties.ts
@@ -62,6 +62,11 @@ export type OptionGroup = {
 
 export type OptionCollection = Array<Option | OptionGroup>;
 
+export type Delimiter = {
+  name?: string;
+  icon?: string;
+};
+
 type BaseProperty<T, PT extends PropertyType> = {
   type: PT;
   handle: string;
@@ -78,6 +83,7 @@ type BaseProperty<T, PT extends PropertyType> = {
   messages?: Message[];
   visible?: boolean;
   visibilityFilters?: VisibilityFilter[];
+  delimiter?: Delimiter;
   middleware?: Middleware[];
   category?: string;
   section?: string;

diff --git a/packages/plugin/src/Attributes/Property/Delimiter.php b/packages/plugin/src/Attributes/Property/Delimiter.php
@@ -0,0 +1,22 @@
+<?php
+
+namespace Solspace\Freeform\Attributes\Property;
+
+use Solspace\Freeform\Library\Serialization\Normalizers\CustomNormalizerInterface;
+
+#[\Attribute(\Attribute::TARGET_PROPERTY)]
+class Delimiter implements CustomNormalizerInterface
+{
+    public function __construct(
+        public ?string $name = null,
+        public ?string $icon = null,
+    ) {}
+
+    public function normalize(): array
+    {
+        return [
+            'name' => $this->name,
+            'icon' => $this->icon,
+        ];
+    }
+}
diff --git a/packages/plugin/src/Attributes/Property/Property.php b/packages/plugin/src/Attributes/Property/Property.php
@@ -21,6 +21,7 @@ abstract class Property
 
     /** @var VisibilityFilter[] */
     public array $visibilityFilters = [];
+    public ?Delimiter $delimiter = null;
 
     public bool $visible = true;
     public bool $translatable = false;

diff --git a/packages/plugin/src/Bundles/Attributes/Property/PropertyProvider.php b/packages/plugin/src/Bundles/Attributes/Property/PropertyProvider.php
@@ -4,6 +4,7 @@
 
 use Carbon\Carbon;
 use Solspace\Freeform\Attributes\Property\DefaultValue;
+use Solspace\Freeform\Attributes\Property\Delimiter;
 use Solspace\Freeform\Attributes\Property\Edition;
 use Solspace\Freeform\Attributes\Property\Flag;
 use Solspace\Freeform\Attributes\Property\Implementations\Options\OptionCollection;
@@ -135,6 +136,7 @@ public function getEditableProperties(object|string $object): PropertyCollection
             $this->processValidators($property, $attribute);
             $this->processMiddleware($property, $attribute);
             $this->processVisibilityFilters($property, $attribute);
+            $this->processDelimiters($property, $attribute);
             $this->processDateProperties($attribute);
             $this->processLimitations($property, $attribute);
             $this->processMessages($property, $attribute);
@@ -369,6 +371,11 @@ private function processVisibilityFilters(\ReflectionProperty $property, Propert
         $attribute->visibilityFilters = AttributeHelper::findAttributes($property, VisibilityFilter::class);
     }
 
+    private function processDelimiters(\ReflectionProperty $property, Property $attribute): void
+    {
+        $attribute->delimiter = AttributeHelper::findAttribute($property, Delimiter::class);
+    }
+
     private function processDateProperties(Property $attribute): void
     {
         if (!$attribute instanceof DatePicker) {

diff --git a/packages/plugin/src/Integrations/CRM/ActiveCampaign/Versions/ActiveCampaignV3.php b/packages/plugin/src/Integrations/CRM/ActiveCampaign/Versions/ActiveCampaignV3.php
@@ -14,6 +14,7 @@
 
 use GuzzleHttp\Client;
 use Solspace\Freeform\Attributes\Integration\Type;
+use Solspace\Freeform\Attributes\Property\Delimiter;
 use Solspace\Freeform\Attributes\Property\Flag;
 use Solspace\Freeform\Attributes\Property\Implementations\FieldMapping\FieldMapping;
 use Solspace\Freeform\Attributes\Property\Input;
@@ -40,6 +41,7 @@ class ActiveCampaignV3 extends BaseActiveCampaignIntegration
 
     #[Flag(self::FLAG_INSTANCE_ONLY)]
     #[VisibilityFilter('Boolean(enabled)')]
+    #[Delimiter('Contacts')]
     #[Input\Boolean(
         label: 'Map to Contact',
         instructions: 'Should map to the Contact endpoint.',
@@ -65,6 +67,7 @@ class ActiveCampaignV3 extends BaseActiveCampaignIntegration
 
     #[Flag(self::FLAG_INSTANCE_ONLY)]
     #[VisibilityFilter('Boolean(enabled)')]
+    #[Delimiter('Deals')]
     #[Input\Boolean(
         label: 'Map to Deal',
         instructions: 'Should map to the Deal endpoint.',
@@ -90,6 +93,7 @@ class ActiveCampaignV3 extends BaseActiveCampaignIntegration
 
     #[Flag(self::FLAG_INSTANCE_ONLY)]
     #[VisibilityFilter('Boolean(enabled)')]
+    #[Delimiter('Accounts')]
     #[Input\Boolean(
         label: 'Map to Account',
         instructions: 'Should map to the Account endpoint.',

diff --git a/packages/plugin/src/Integrations/CRM/HubSpot/Versions/HubSpotV3.php b/packages/plugin/src/Integrations/CRM/HubSpot/Versions/HubSpotV3.php
@@ -14,6 +14,7 @@
 
 use GuzzleHttp\Client;
 use Solspace\Freeform\Attributes\Integration\Type;
+use Solspace\Freeform\Attributes\Property\Delimiter;
 use Solspace\Freeform\Attributes\Property\Flag;
 use Solspace\Freeform\Attributes\Property\Implementations\FieldMapping\FieldMapItem;
 use Solspace\Freeform\Attributes\Property\Implementations\FieldMapping\FieldMapping;
@@ -41,6 +42,7 @@ class HubSpotV3 extends BaseHubSpotIntegration
 
     #[Flag(self::FLAG_INSTANCE_ONLY)]
     #[VisibilityFilter('Boolean(enabled)')]
+    #[Delimiter('Deals')]
     #[Input\Boolean(
         label: 'Map to Deals',
         instructions: 'Should map to the Deals endpoint.',
@@ -66,6 +68,7 @@ class HubSpotV3 extends BaseHubSpotIntegration
 
     #[Flag(self::FLAG_INSTANCE_ONLY)]
     #[VisibilityFilter('Boolean(enabled)')]
+    #[Delimiter('Contacts')]
     #[Input\Boolean(
         label: 'Map to Contacts',
         instructions: 'Should map to the Contacts endpoint.',
@@ -91,6 +94,7 @@ class HubSpotV3 extends BaseHubSpotIntegration
 
     #[Flag(self::FLAG_INSTANCE_ONLY)]
     #[VisibilityFilter('Boolean(enabled)')]
+    #[Delimiter('Companies')]
     #[Input\Boolean(
         label: 'Map to Companies',
         instructions: 'Should map to the Companies endpoint.',

diff --git a/packages/plugin/src/Integrations/CRM/Insightly/Versions/InsightlyV31.php b/packages/plugin/src/Integrations/CRM/Insightly/Versions/InsightlyV31.php
@@ -4,6 +4,7 @@
 
 use GuzzleHttp\Client;
 use Solspace\Freeform\Attributes\Integration\Type;
+use Solspace\Freeform\Attributes\Property\Delimiter;
 use Solspace\Freeform\Attributes\Property\Flag;
 use Solspace\Freeform\Attributes\Property\Implementations\FieldMapping\FieldMapping;
 use Solspace\Freeform\Attributes\Property\Input;
@@ -30,6 +31,7 @@ class InsightlyV31 extends BaseInsightlyIntegration
 
     #[Flag(self::FLAG_INSTANCE_ONLY)]
     #[VisibilityFilter('Boolean(enabled)')]
+    #[Delimiter('Leads')]
     #[Input\Boolean(
         label: 'Map to Leads',
         instructions: 'Should map to the Leads endpoint.',

diff --git a/packages/plugin/src/Integrations/CRM/Keap/Versions/KeapV2.php b/packages/plugin/src/Integrations/CRM/Keap/Versions/KeapV2.php
@@ -14,6 +14,7 @@
 
 use GuzzleHttp\Client;
 use Solspace\Freeform\Attributes\Integration\Type;
+use Solspace\Freeform\Attributes\Property\Delimiter;
 use Solspace\Freeform\Attributes\Property\Flag;
 use Solspace\Freeform\Attributes\Property\Implementations\FieldMapping\FieldMapping;
 use Solspace\Freeform\Attributes\Property\Input;
@@ -40,6 +41,7 @@ class KeapV2 extends BaseKeapIntegration
 
     #[Flag(self::FLAG_INSTANCE_ONLY)]
     #[VisibilityFilter('Boolean(enabled)')]
+    #[Delimiter('Contacts')]
     #[Input\Boolean(
         label: 'Map to Contacts',
         instructions: 'Should map to the Contacts endpoint.',
@@ -61,6 +63,7 @@ class KeapV2 extends BaseKeapIntegration
 
     #[Flag(self::FLAG_INSTANCE_ONLY)]
     #[VisibilityFilter('Boolean(enabled)')]
+    #[Delimiter('Tags')]
     #[Input\Boolean(
         label: 'Map to Tags',
         instructions: 'Should map to the Tags endpoint.',

diff --git a/packages/plugin/src/Integrations/CRM/Pipedrive/Versions/PipedriveV1.php b/packages/plugin/src/Integrations/CRM/Pipedrive/Versions/PipedriveV1.php
@@ -14,6 +14,7 @@
 
 use GuzzleHttp\Client;
 use Solspace\Freeform\Attributes\Integration\Type;
+use Solspace\Freeform\Attributes\Property\Delimiter;
 use Solspace\Freeform\Attributes\Property\Flag;
 use Solspace\Freeform\Attributes\Property\Implementations\FieldMapping\FieldMapping;
 use Solspace\Freeform\Attributes\Property\Input;
@@ -40,6 +41,7 @@ class PipedriveV1 extends BasePipedriveIntegration
 
     #[Flag(self::FLAG_INSTANCE_ONLY)]
     #[VisibilityFilter('Boolean(enabled)')]
+    #[Delimiter('Leads')]
     #[Input\Boolean(
         label: 'Map to Leads',
         instructions: 'Should map to the Leads endpoint.',
@@ -64,6 +66,7 @@ class PipedriveV1 extends BasePipedriveIntegration
 
     #[Flag(self::FLAG_INSTANCE_ONLY)]
     #[VisibilityFilter('Boolean(enabled)')]
+    #[Delimiter('Deals')]
     #[Input\Boolean(
         label: 'Map to Deals',
         instructions: 'Should map to the Deals endpoint.',
@@ -103,6 +106,7 @@ class PipedriveV1 extends BasePipedriveIntegration
 
     #[Flag(self::FLAG_INSTANCE_ONLY)]
     #[VisibilityFilter('Boolean(enabled)')]
+    #[Delimiter('Organizations')]
     #[Input\Boolean(
         label: 'Map to Organization',
         instructions: 'Should map to the Organization endpoint.',
@@ -128,6 +132,7 @@ class PipedriveV1 extends BasePipedriveIntegration
 
     #[Flag(self::FLAG_INSTANCE_ONLY)]
     #[VisibilityFilter('Boolean(enabled)')]
+    #[Delimiter('Persons')]
     #[Input\Boolean(
         label: 'Map to Person',
         instructions: 'Should map to the Person endpoint.',

diff --git a/packages/plugin/src/Integrations/CRM/Salesforce/Versions/SalesforceV58.php b/packages/plugin/src/Integrations/CRM/Salesforce/Versions/SalesforceV58.php
@@ -16,6 +16,7 @@
 use craft\elements\Asset;
 use GuzzleHttp\Client;
 use Solspace\Freeform\Attributes\Integration\Type;
+use Solspace\Freeform\Attributes\Property\Delimiter;
 use Solspace\Freeform\Attributes\Property\Flag;
 use Solspace\Freeform\Attributes\Property\Implementations\FieldMapping\FieldMapItem;
 use Solspace\Freeform\Attributes\Property\Implementations\FieldMapping\FieldMapping;
@@ -47,6 +48,7 @@ class SalesforceV58 extends BaseSalesforceIntegration implements SalesforceInteg
 
     #[Flag(self::FLAG_INSTANCE_ONLY)]
     #[VisibilityFilter('Boolean(enabled)')]
+    #[Delimiter('Leads')]
     #[Input\Boolean(
         label: 'Map to Leads',
         instructions: 'Map submission data to create Leads in Salesforce.',
@@ -132,6 +134,7 @@ class SalesforceV58 extends BaseSalesforceIntegration implements SalesforceInteg
 
     #[Flag(self::FLAG_INSTANCE_ONLY)]
     #[VisibilityFilter('Boolean(enabled)')]
+    #[Delimiter('Opportunities')]
     #[Input\Boolean(
         label: 'Map to Opportunities',
         instructions: 'Map submission data to create Opportunities in Salesforce.',
@@ -188,6 +191,7 @@ class SalesforceV58 extends BaseSalesforceIntegration implements SalesforceInteg
 
     #[Flag(self::FLAG_INSTANCE_ONLY)]
     #[VisibilityFilter('Boolean(enabled)')]
+    #[Delimiter('Accounts')]
     #[Input\Boolean(
         label: 'Map to Accounts',
         instructions: 'Map submission data to create Accounts in Salesforce.',
@@ -233,6 +237,7 @@ class SalesforceV58 extends BaseSalesforceIntegration implements SalesforceInteg
 
     #[Flag(self::FLAG_INSTANCE_ONLY)]
     #[VisibilityFilter('Boolean(enabled)')]
+    #[Delimiter('Contacts')]
     #[Input\Boolean(
         label: 'Map to Contacts',
         instructions: 'Map submission data to create Contacts in Salesforce.',