@capillarytech/creatives-library 8.0.125 → 8.0.127-alpha.0

package/v2Components/CustomerSearchSection/_customerSearch.scss

@@ -0,0 +1,309 @@
+@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.customer-search-section {
+  margin-top: $CAP_SPACE_08;
+  display: flex;
+  flex-direction: column;
+  gap: $CAP_SPACE_04;
+  padding: 0;
+  position: relative;
+
+  .customer-search-label {
+    font-weight: bold;
+    margin-bottom: $CAP_SPACE_04;
+    font-size: $CAP_SPACE_16;
+  }
+
+  .search-container {
+    position: relative;
+  }
+
+  .search-dropdown-container {
+    position: absolute;
+    width: 100%;
+    z-index: 1000;
+  }
+
+  .search-result-card {
+    width: 100%;
+    margin: 0;
+    box-shadow: 0 $CAP_SPACE_04 $CAP_SPACE_12 rgba(0, 0, 0, 0.15);
+    border-radius: $CAP_SPACE_08;
+    border: 1px solid #d9d9d9;
+
+    .ant-card-body {
+      padding: $CAP_SPACE_08;
+    }
+  }
+
+  .link-result {
+    .ant-row.ant-row-flex {
+      padding: $CAP_SPACE_08 $CAP_SPACE_12;
+      border-radius: $CAP_SPACE_06;
+
+      &:hover {
+        background-color: #f0f0f0;
+      }
+    }
+  }
+
+  .customer-common-profile {
+    width: $CAP_SPACE_40;
+    height: $CAP_SPACE_40;
+    border-radius: 50%;
+    background-color: #E7D0FB;
+    color: $CAP_PURPLE;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    font-size: $CAP_SPACE_16;
+  }
+
+  .search-text {
+    &.ant-typography {
+      font-weight: bold;
+      color: #262626;
+      margin-bottom: 0;
+    }
+  }
+
+
+  .identifiers-text {
+    margin-top: -0.6rem;
+    color: #8c8c8c;
+    .highlight-background-color {
+      background-color: transparent;
+      font-weight: bold;
+    }
+  }
+  .identifier-desc {
+    margin-top: 0.6rem;
+  }
+
+  .link-result-divider {
+    margin: 0 $CAP_SPACE_12;
+  }
+  
+  .selected-customer-view {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: $CAP_SPACE_04 $CAP_SPACE_12;
+    border: 1px solid #d9d9d9;
+    border-radius: $CAP_SPACE_06;
+    background-color: $CAP_WHITE;
+    height: $CAP_SPACE_40;
+    cursor: default;
+
+    .customer-common-profile {
+      width: $CAP_SPACE_24;
+      height: $CAP_SPACE_24;
+      font-size: $CAP_SPACE_12;
+    }
+
+    .search-text, .identifiers-text {
+      margin-bottom: 0;
+    }
+    .multiple-identifiers {
+      margin: 0.25rem 0;
+    }
+
+    .clear-icon {
+      cursor: pointer;
+      color: #8c8c8c;
+    }
+  }
+
+  .search-input-container {
+    position: relative;
+    .search-error {
+      margin-top: $CAP_SPACE_08;
+    }
+  }
+
+  .validation-card {
+    min-width: 100%;
+    max-width: 100%;
+    margin: 0;
+    box-shadow: 0 $CAP_SPACE_04 $CAP_SPACE_08 -2px rgba(9, 30, 66, 0.25),
+      0 0 1px 0 rgba(9, 30, 66, 0.31);
+    border-top-left-radius: unset;
+    border-top-right-radius: unset;
+    border-top-color: transparent;
+    .ant-card-body {
+      padding: $CAP_SPACE_12 $CAP_SPACE_20;
+    }
+  }
+
+  .search-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: #fff;
+    border: 1px solid #d9d9d9;
+    border-top: none;
+    border-radius: 0 0 $CAP_SPACE_06 $CAP_SPACE_06;
+    box-shadow: 0 $CAP_SPACE_02 $CAP_SPACE_08 rgba(0, 0, 0, 0.1);
+    max-height: 200px;
+    overflow-y: auto;
+    z-index: 1050;
+
+    &.no-results {
+      .no-results-message {
+        display: flex;
+        align-items: center;
+        gap: $CAP_SPACE_08;
+        padding: $CAP_SPACE_16;
+        color: #8c8c8c;
+        font-size: 1rem;
+        
+        .cap-icon {
+          color: #d9d9d9;
+        }
+      }
+    }
+  }
+
+  .customer-result-item {
+    display: flex;
+    align-items: center;
+    gap: $CAP_SPACE_12;
+    padding: $CAP_SPACE_12 $CAP_SPACE_16;
+    cursor: pointer;
+    border-bottom: 1px solid #f0f0f0;
+    transition: background-color 0.2s ease;
+
+    &:hover {
+      background-color: #f5f5f5;
+    }
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .customer-avatar {
+      flex-shrink: 0;
+    }
+
+    .customer-details {
+      flex: 1;
+      min-width: 0;
+
+      .customer-name {
+        font-weight: 500;
+        font-size: 1rem;
+        color: #262626;
+        margin-bottom: 2px;
+      }
+
+      .customer-email {
+        font-size: $CAP_SPACE_12;
+        color: #8c8c8c;
+        margin-bottom: 2px;
+      }
+
+      .customer-phone {
+        font-size: $CAP_SPACE_12;
+        color: #8c8c8c;
+      }
+    }
+
+    .customer-id {
+      flex-shrink: 0;
+      font-size: $CAP_SPACE_12;
+      color: #8c8c8c;
+      font-weight: 500;
+    }
+  }
+
+  .selected-customer {
+    display: flex;
+    flex-direction: column;
+    gap: $CAP_SPACE_16;
+    padding: $CAP_SPACE_16;
+    background: #f8f9fa;
+    border: 1px solid #e8e8e8;
+    border-radius: $CAP_SPACE_06;
+
+    .selected-customer-info {
+      display: flex;
+      align-items: center;
+      gap: $CAP_SPACE_12;
+
+      .customer-details {
+        flex: 1;
+
+        .customer-name {
+          font-weight: 500;
+          font-size: 1rem;
+          color: #262626;
+          margin-bottom: $CAP_SPACE_04;
+        }
+
+        .customer-email {
+          font-size: $CAP_SPACE_12;
+          color: #8c8c8c;
+          margin-bottom: $CAP_SPACE_04;
+        }
+
+        .customer-id {
+          font-size: $CAP_SPACE_12;
+          color: #8c8c8c;
+          font-weight: 500;
+        }
+      }
+    }
+
+    .selected-customer-actions {
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+    }
+
+    .tag-extraction-success {
+      .extraction-summary {
+        display: flex;
+        align-items: center;
+        gap: $CAP_SPACE_08;
+        margin-bottom: $CAP_SPACE_12;
+        font-size: 1rem;
+        font-weight: 500;
+        color: #52c41a;
+      }
+
+      .required-tags,
+      .optional-tags {
+        margin-bottom: $CAP_SPACE_12;
+
+        .tag-category {
+          display: flex;
+          align-items: center;
+          gap: $CAP_SPACE_08;
+          margin-bottom: $CAP_SPACE_08;
+          font-size: 13px;
+          font-weight: 500;
+        }
+
+        .tag-list {
+          display: flex;
+          flex-wrap: wrap;
+          gap: $CAP_SPACE_06;
+        }
+      }
+
+      .required-tags .tag-category {
+        color: #fa8c16;
+      }
+
+      .optional-tags .tag-category {
+        color: #52c41a;
+      }
+
+      .api-warnings {
+        margin-top: $CAP_SPACE_08;
+      }
+    }
+  }
+}

package/v2Components/CustomerSearchSection/constants.js

@@ -0,0 +1,5 @@
+export const FIRSTNAME = 'firstname';
+export const LASTNAME = 'lastname';
+export const INSTORE = 'instore';
+export const NA = 'N/A';
+export const MINIMUM_IDENTIFIER_LENGTH = 1;

package/v2Components/CustomerSearchSection/index.js

@@ -0,0 +1,367 @@
+/**
+ *
+ * CustomerSearchSection
+ *
+ */
+import React, {
+  useState, useCallback, useRef, useEffect,
+} from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl } from 'react-intl';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+import CapAlert from '@capillarytech/cap-ui-library/CapAlert';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapCard from '@capillarytech/cap-ui-library/CapCard';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapLink from '@capillarytech/cap-ui-library/CapLink';
+import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+import { debounce } from 'lodash';
+import './_customerSearch.scss';
+import {
+  FIRSTNAME,
+  LASTNAME,
+  INSTORE,
+  NA,
+  MINIMUM_IDENTIFIER_LENGTH,
+} from './constants';
+import {
+  checkForData,
+  removeExtraIdentifiers,
+  identifiersHighlight,
+  getNamingIcon,
+} from './utils';
+import messages from './messages';
+
+
+const CustomerSearchSection = ({
+  intl: { formatMessage },
+  onCustomerSelect,
+  onSearch,
+  onClearSearch,
+  onClearSelection,
+  customers,
+  isSearchingCustomer,
+  searchError,
+  selectedCustomer,
+  hasSearched,
+  disabled,
+}) => {
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [customerSearchValue, setCustomerSearchValue] = useState('');
+  const [processedSearchData, setProcessedSearchData] = useState([]);
+
+  const searchContainerRef = useRef(null);
+
+  const debouncedSearch = useCallback(
+    debounce((query) => {
+      onSearch(query);
+    }, 300),
+    [onSearch],
+  );
+
+  const handleSearchChange = useCallback(
+    (e) => {
+      const { value } = e.target;
+      setCustomerSearchValue(value);
+      if (value?.trim()) {
+        debouncedSearch(value.trim());
+      } else {
+        onClearSearch();
+        setShowDropdown(false);
+      }
+    },
+    [debouncedSearch, onClearSearch],
+  );
+
+  const handleCustomerSelectItem = useCallback(
+    (customer) => {
+      setShowDropdown(false);
+      onCustomerSelect(customer);
+    },
+    [onCustomerSelect],
+  );
+
+  const handleClickOutside = useCallback((event) => {
+    if (
+      searchContainerRef.current
+      && !searchContainerRef.current.contains(event.target)
+    ) {
+      setShowDropdown(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [handleClickOutside]);
+
+  useEffect(
+    () => () => {
+      debouncedSearch.cancel();
+    },
+    [debouncedSearch],
+  );
+
+  useEffect(() => {
+    if (customerSearchValue.trim() === '') {
+      setShowDropdown(false);
+    } else if (isSearchingCustomer || hasSearched) {
+      setShowDropdown(true);
+    }
+  }, [customerSearchValue, isSearchingCustomer, hasSearched]);
+
+  // Compute search data when dependencies change
+  useEffect(() => {
+    const computedData = searchData();
+    setProcessedSearchData(computedData);
+  }, [isSearchingCustomer, customers, customerSearchValue]);
+
+  const getCompleteName = (data) => {
+    const { firstName = '', lastName = '' } = data?.[0] || {};
+    return `${firstName} ${lastName}`.trim() || NA;
+  };
+
+  const searchData = () => {
+    let finalSearchData;
+    if (!isSearchingCustomer && customers?.length > 0) {
+      finalSearchData = customers?.map((dataToFetch) => {
+        const checkForInstoreData = checkForData(dataToFetch?.profiles, INSTORE);
+        const identifiers = removeExtraIdentifiers(
+          dataToFetch?.matchedIdentifiers,
+          FIRSTNAME,
+          LASTNAME,
+        );
+        const fullName = getCompleteName( checkForInstoreData?.length ? checkForInstoreData : dataToFetch?.profiles);
+        return {
+          customerId: dataToFetch?.userId,
+          name: fullName,
+          identifiers: identifiersHighlight(customerSearchValue, identifiers),
+        };
+      });
+    }
+    return finalSearchData || [];
+  };
+
+  const showIdentifiers = (data) => {
+    if (!Array.isArray(data) || data.length === 0) return null;
+
+    const renderLabel = (item, index, isLast) => (
+      <CapLabel
+        type="label1"
+        key={`${item?.firstString || ''}-${item?.secondString || ''}-${item?.thirdString || ''}-${index}`}
+        className={`identifiers-text ${data.length > MINIMUM_IDENTIFIER_LENGTH ? 'multiple-identifiers' : ''}`}
+      >
+        {item?.firstString}
+        <span className="highlight-background-color">{item?.secondString}</span>
+        {item?.thirdString}
+        {!isLast && (
+          <>
+            ,
+            <span className="comma-separated-align"> </span>
+          </>
+        )}
+      </CapLabel>
+    );
+
+    if (data.length > MINIMUM_IDENTIFIER_LENGTH) {
+      return data.map((item, index) => renderLabel(item, index, index === data.length - 1));
+    }
+
+    return renderLabel(data[0], 0, true);
+  };
+
+  const onClear = () => {
+    setCustomerSearchValue('');
+    onClearSelection();
+  };
+
+  return (
+    <CapRow className="customer-search-section">
+      <CapRow className="search-container" ref={searchContainerRef}>
+        {selectedCustomer ? (
+          <SelectedCustomerView
+            customer={selectedCustomer}
+            onClear={onClear}
+            showIdentifiers={showIdentifiers}
+          />
+        ) : (
+          <SearchInput
+            value={customerSearchValue}
+            onChange={handleSearchChange}
+            isLoading={isSearchingCustomer}
+            error={searchError}
+            disabled={disabled}
+            placeholder={formatMessage(messages.searchPlaceholder)}
+          />
+        )}
+        {showDropdown && !selectedCustomer && (
+          <CapRow className="search-dropdown-container">
+            <CapRow type="flex" justify="center" align="middle">
+              {(processedSearchData?.length === 0 && customerSearchValue != null && !isSearchingCustomer) && (
+                <CapCard className="validation-card">
+                  <CapHeading type="h6">
+                    {formatMessage(messages.noCustomersFound)}
+                  </CapHeading>
+                </CapCard>
+              )}
+              {(isSearchingCustomer) && (
+                <CapCard className="validation-card">
+                  <CapRow className="spin-card-align">
+                    <CapSpin />
+                  </CapRow>
+                </CapCard>
+              )}
+            </CapRow>
+            <CapRow type="flex" justify="center" align="middle">
+              {processedSearchData?.length > 0 && (
+                <CapCard className="search-result-card scroll-bar">
+                  {
+                    <CapRow className="identifier-row">
+                      {processedSearchData?.map((d) => (
+                        <>
+                          <CapLink
+                            key={d?.customerId}
+                            className="search-results-height link-result"
+                            title={(
+                              <>
+                                <CapRow type="flex" align="middle" gutter={16}>
+                                  <CapColumn data-testid="namingIcon">
+                                    <CapRow className="customer-common-profile">{getNamingIcon(d?.name)}</CapRow>
+                                  </CapColumn>
+                                  <CapColumn>
+                                    <CapRow type="flex" gutter={12}>
+                                      <CapColumn data-testid="searchResultName">
+                                        <CapHeading className="search-text" type="h4">
+                                          {d?.name}
+                                        </CapHeading>
+                                      </CapColumn>
+                                    </CapRow>
+                                    {(
+                                      <CapRow type="flex">
+                                        {showIdentifiers(d?.identifiers)}
+                                      </CapRow>
+                                    )}
+                                  </CapColumn>
+                                </CapRow>
+                              </>
+                            )}
+                            onClick={() => handleCustomerSelectItem(d)}
+                          />
+                        </>
+                      ))}
+                    </CapRow>
+                  }
+                </CapCard>
+              )}
+            </CapRow>
+          </CapRow>
+        )}
+      </CapRow>
+    </CapRow>
+  );
+};
+
+// Search Input Component
+const SearchInput = ({
+  value,
+  onChange,
+  isLoading,
+  error,
+  disabled,
+  placeholder,
+}) => (
+  <CapRow className="search-input-container">
+    <CapInput
+      value={value}
+      onChange={onChange}
+      placeholder={placeholder}
+      disabled={disabled || isLoading}
+      status={error ? 'error' : undefined}
+      allowClear
+      autoComplete="off"
+    />
+    {error && (
+      <CapRow className="search-error">
+        <CapAlert
+          message={error}
+          type="error"
+          size="small"
+          showIcon
+        />
+      </CapRow>
+    )}
+  </CapRow>
+);
+
+const SelectedCustomerView = ({ customer, onClear, showIdentifiers }) => (
+  <div className="selected-customer-view">
+    <CapRow type="flex" align="middle" gutter={8}>
+      <CapColumn>
+        <CapRow className="customer-common-profile">{getNamingIcon(customer?.name)}</CapRow>
+      </CapColumn>
+      <CapColumn>
+        <CapHeading className="search-text" type="h4">
+          {customer.name}
+        </CapHeading>
+      </CapColumn>
+      <CapColumn>
+        <CapLabel type="label1" className="identifier-desc">
+          {showIdentifiers(customer?.identifiers)}
+        </CapLabel>
+      </CapColumn>
+    </CapRow>
+    <CapIcon size="s" type="close" className="clear-icon" onClick={onClear} />
+  </div>
+);
+
+SelectedCustomerView.propTypes = {
+  customer: PropTypes.object.isRequired,
+  onClear: PropTypes.func.isRequired,
+  showIdentifiers: PropTypes.func.isRequired,
+};
+
+SearchInput.propTypes = {
+  value: PropTypes.string,
+  onChange: PropTypes.func,
+  isLoading: PropTypes.bool,
+  error: PropTypes.string,
+  disabled: PropTypes.bool,
+  placeholder: PropTypes.string.isRequired,
+};
+SearchInput.defaultProps = {
+  value: '',
+  onChange: () => {},
+  isLoading: false,
+  error: null,
+  disabled: false,
+};
+
+CustomerSearchSection.propTypes = {
+  onCustomerSelect: PropTypes.func.isRequired,
+  onSearch: PropTypes.func.isRequired,
+  onClearSearch: PropTypes.func.isRequired,
+  onClearSelection: PropTypes.func.isRequired,
+  customers: PropTypes.array,
+  isSearchingCustomer: PropTypes.bool,
+  searchError: PropTypes.string,
+  selectedCustomer: PropTypes.object,
+  hasSearched: PropTypes.bool,
+  disabled: PropTypes.bool,
+  intl: PropTypes.object.isRequired,
+};
+
+CustomerSearchSection.defaultProps = {
+  customers: [],
+  isSearchingCustomer: false,
+  searchError: null,
+  selectedCustomer: null,
+  hasSearched: false,
+  disabled: false,
+};
+
+export default injectIntl(CustomerSearchSection);

package/v2Components/CustomerSearchSection/messages.js

@@ -0,0 +1,20 @@
+/*
+ * CustomerSearchSection Messages
+ *
+ * This contains all the text for the CustomerSearchSection component.
+ */
+
+import { defineMessages } from 'react-intl';
+
+export const scope = 'app.v2Components.CustomerSearchSection';
+
+export default defineMessages({
+  searchPlaceholder: {
+    id: `${scope}.searchPlaceholder`,
+    defaultMessage: 'Search customers by their identifiers',
+  },
+  noCustomersFound: {
+    id: `${scope}.noCustomersFound`,
+    defaultMessage: 'No customers found',
+  },
+});