@alphasquad/saleor-template-advance 0.1.0

package/src/app/utils/ipDetection.ts

@@ -0,0 +1,270 @@
+/**
+ * Utility function to get the user's IP address
+ * This will try multiple methods to detect the user's IP
+ */
+export async function getUserIP(): Promise<string> {
+  try {
+    // Try ipify service first (most reliable)
+    const response = await fetch('https://api.ipify.org?format=json');
+    if (response.ok) {
+      const data = await response.json();
+      if (data.ip) return data.ip;
+    }
+  } catch (error) {
+    console.warn('Failed to get IP from ipify:', error);
+  }
+
+  try {
+    // Fallback to ipinfo.io
+    const response = await fetch('https://ipinfo.io/json');
+    if (response.ok) {
+      const data = await response.json();
+      if (data.ip) return data.ip;
+    }
+  } catch (error) {
+    console.warn('Failed to get IP from ipinfo.io:', error);
+  }
+
+  // Final fallback - return a default IP
+  return '127.0.0.1';
+}
+
+/**
+ * Generate a random transaction ID for Kount
+ */
+export function generateTransactionId(): string {
+  return Array.from(crypto.getRandomValues(new Uint8Array(16)))
+    .map(b => b.toString(16).padStart(2, '0'))
+    .join('');
+}
+
+/**
+ * Generate a valid device session ID for Kount
+ * Must be <= 36 characters and contain only alphanumeric, hyphen, and underscore
+ */
+export function generateDeviceSessionId(userId?: string, checkoutId?: string): string {
+  // Create a base from user ID or checkout ID if available
+  let base = '';
+  if (userId) {
+    base = userId.replace(/[^a-zA-Z0-9\-_]/g, '').substring(0, 16);
+  } else if (checkoutId) {
+    base = checkoutId.replace(/[^a-zA-Z0-9\-_]/g, '').substring(0, 16);
+  }
+  
+  // Generate random suffix to make it unique
+  const randomBytes = crypto.getRandomValues(new Uint8Array(8));
+  const randomSuffix = Array.from(randomBytes)
+    .map(b => b.toString(16).padStart(2, '0'))
+    .join('');
+  
+  // Combine base with random suffix, ensuring total length <= 36
+  const deviceSessionId = base ? `${base}-${randomSuffix}` : `device-${randomSuffix}`;
+  
+  // Ensure it's not longer than 36 characters
+  return deviceSessionId.substring(0, 36);
+}
+
+/**
+ * Format date to RFC3339 format for Kount API
+ */
+export function formatRFC3339Date(date: Date): string {
+  return date.toISOString();
+}
+
+/**
+ * Payment type constants as defined by Kount API
+ */
+export const PAYMENT_TYPES = {
+  AFFIRM: 'AFFIRM',
+  AFTERPAY: 'AFTRPAY',
+  ALIPAY: 'ALIPAY',
+  AMAZON_PAY: 'AMZN',
+  APPLE_PAY: 'APAY',
+  BILL_ME_LATER: 'BLML',
+  BPAY: 'BPAY',
+  CARTE_BLEUE: 'CARTE_BLEUE',
+  CHECK: 'CHEK',
+  CREDIT_CARD: 'CREDIT_CARD',
+  CRYPTO: 'CRYPTO',
+  DEBIT_CARD: 'DEBIT_CARD',
+  ELV: 'ELV',
+  FACEBOOK_PAY: 'FBPAY',
+  GREEN_DOT_MONEY_PACK: 'GDMP',
+  GIFT_CARD: 'GIFT',
+  GIROPAY: 'GIROPAY',
+  GOOGLE_CHECKOUT: 'GOOG',
+  INTERAC: 'INTERAC',
+  KLARNA: 'KLARNA',
+  PAYPAL: 'PYPL',
+  MERCADE_PAGO: 'MERCADE_PAGO',
+  NETELLER: 'NETELLER',
+  NONE: 'NONE',
+  POLI: 'POLI',
+  SAMSUNG_PAY: 'SAMPAY',
+  SEPA: 'SEPA',
+  SKRILL: 'SKRILL',
+  SOFORT: 'SOFORT',
+  SPLITIT: 'SPLIT',
+  TOKEN: 'TOKEN',
+  WECHAT_PAY: 'WCPAY'
+} as const;
+
+/**
+ * Detect payment type based on card number patterns
+ * @param cardNumber - The card number (with or without spaces/dashes)
+ * @param paymentMethod - Optional payment method identifier
+ * @returns Payment type constant
+ */
+export function detectPaymentType(cardNumber: string, paymentMethod?: string): string {
+  // Handle non-card payment methods first
+  if (paymentMethod) {
+    const method = paymentMethod.toLowerCase();
+    
+    if (method.includes('paypal')) return PAYMENT_TYPES.PAYPAL;
+    if (method.includes('apple') || method.includes('applepay')) return PAYMENT_TYPES.APPLE_PAY;
+    if (method.includes('google') || method.includes('googlepay')) return PAYMENT_TYPES.GOOGLE_CHECKOUT;
+    if (method.includes('samsung') || method.includes('samsungpay')) return PAYMENT_TYPES.SAMSUNG_PAY;
+    if (method.includes('amazon')) return PAYMENT_TYPES.AMAZON_PAY;
+    if (method.includes('affirm')) return PAYMENT_TYPES.AFFIRM;
+    if (method.includes('afterpay')) return PAYMENT_TYPES.AFTERPAY;
+    if (method.includes('klarna')) return PAYMENT_TYPES.KLARNA;
+    if (method.includes('alipay')) return PAYMENT_TYPES.ALIPAY;
+    if (method.includes('wechat')) return PAYMENT_TYPES.WECHAT_PAY;
+    if (method.includes('facebook')) return PAYMENT_TYPES.FACEBOOK_PAY;
+    if (method.includes('sofort')) return PAYMENT_TYPES.SOFORT;
+    if (method.includes('giropay')) return PAYMENT_TYPES.GIROPAY;
+    if (method.includes('sepa')) return PAYMENT_TYPES.SEPA;
+    if (method.includes('interac')) return PAYMENT_TYPES.INTERAC;
+    if (method.includes('splitit')) return PAYMENT_TYPES.SPLITIT;
+    if (method.includes('crypto') || method.includes('bitcoin') || method.includes('ethereum')) return PAYMENT_TYPES.CRYPTO;
+  }
+
+  // Clean the card number - remove spaces, dashes, and any non-digit characters
+  const cleanCardNumber = cardNumber.replace(/\D/g, '');
+  
+  // Return early if no valid card number
+  if (!cleanCardNumber || cleanCardNumber.length < 4) {
+    return PAYMENT_TYPES.CREDIT_CARD; // Default fallback
+  }
+
+  // Get first few digits for pattern matching
+  const firstDigit = cleanCardNumber.charAt(0);
+  const firstTwoDigits = cleanCardNumber.substring(0, 2);
+  const firstThreeDigits = cleanCardNumber.substring(0, 3);
+  const firstFourDigits = cleanCardNumber.substring(0, 4);
+
+  // Visa: starts with 4
+  if (firstDigit === '4') {
+    return PAYMENT_TYPES.CREDIT_CARD;
+  }
+
+  // Mastercard: starts with 5 (51-55) or 2 (2221-2720)
+  if (firstDigit === '5') {
+    const secondDigit = parseInt(cleanCardNumber.charAt(1));
+    if (secondDigit >= 1 && secondDigit <= 5) {
+      return PAYMENT_TYPES.CREDIT_CARD;
+    }
+  }
+  if (firstDigit === '2') {
+    const first4 = parseInt(firstFourDigits);
+    if (first4 >= 2221 && first4 <= 2720) {
+      return PAYMENT_TYPES.CREDIT_CARD;
+    }
+  }
+
+  // American Express: starts with 34 or 37
+  if (firstTwoDigits === '34' || firstTwoDigits === '37') {
+    return PAYMENT_TYPES.CREDIT_CARD;
+  }
+
+  // Discover: starts with 6011, 622126-622925, 644-649, or 65
+  if (firstFourDigits === '6011' || firstTwoDigits === '65') {
+    return PAYMENT_TYPES.CREDIT_CARD;
+  }
+  if (firstTwoDigits === '64') {
+    const thirdDigit = parseInt(cleanCardNumber.charAt(2));
+    if (thirdDigit >= 4 && thirdDigit <= 9) {
+      return PAYMENT_TYPES.CREDIT_CARD;
+    }
+  }
+  if (firstThreeDigits === '622') {
+    const next3 = parseInt(cleanCardNumber.substring(3, 6));
+    if (next3 >= 126 && next3 <= 925) {
+      return PAYMENT_TYPES.CREDIT_CARD;
+    }
+  }
+
+  // Diners Club: starts with 300-305, 36, 38, or 54-55
+  if (firstThreeDigits >= '300' && firstThreeDigits <= '305') {
+    return PAYMENT_TYPES.CREDIT_CARD;
+  }
+  if (firstTwoDigits === '36' || firstTwoDigits === '38') {
+    return PAYMENT_TYPES.CREDIT_CARD;
+  }
+
+  // JCB: starts with 35 or 2131/1800
+  if (firstTwoDigits === '35') {
+    return PAYMENT_TYPES.CREDIT_CARD;
+  }
+  if (firstFourDigits === '2131' || firstFourDigits === '1800') {
+    return PAYMENT_TYPES.CREDIT_CARD;
+  }
+
+  // UnionPay: starts with 62
+  if (firstTwoDigits === '62') {
+    return PAYMENT_TYPES.CREDIT_CARD;
+  }
+
+  // Maestro: starts with 5018, 5020, 5038, 5893, 6304, 6759, 6761, 6762, 6763
+  const maestroPrefixes = ['5018', '5020', '5038', '5893', '6304', '6759', '6761', '6762', '6763'];
+  if (maestroPrefixes.includes(firstFourDigits)) {
+    return PAYMENT_TYPES.DEBIT_CARD;
+  }
+
+  // If we can't determine the specific type, default to credit card
+  return PAYMENT_TYPES.CREDIT_CARD;
+}
+
+/**
+ * Get a user-friendly name for the payment type
+ * @param paymentType - Payment type constant
+ * @returns Human-readable payment type name
+ */
+export function getPaymentTypeName(paymentType: string): string {
+  const names: Record<string, string> = {
+    [PAYMENT_TYPES.AFFIRM]: 'Affirm',
+    [PAYMENT_TYPES.AFTERPAY]: 'Afterpay',
+    [PAYMENT_TYPES.ALIPAY]: 'AliPay',
+    [PAYMENT_TYPES.AMAZON_PAY]: 'Amazon Pay',
+    [PAYMENT_TYPES.APPLE_PAY]: 'Apple Pay',
+    [PAYMENT_TYPES.BILL_ME_LATER]: 'Bill Me Later',
+    [PAYMENT_TYPES.BPAY]: 'BPAY',
+    [PAYMENT_TYPES.CARTE_BLEUE]: 'Carte Bleue',
+    [PAYMENT_TYPES.CHECK]: 'Check',
+    [PAYMENT_TYPES.CREDIT_CARD]: 'Credit Card',
+    [PAYMENT_TYPES.CRYPTO]: 'Crypto Payments',
+    [PAYMENT_TYPES.DEBIT_CARD]: 'Debit Card',
+    [PAYMENT_TYPES.ELV]: 'ELV',
+    [PAYMENT_TYPES.FACEBOOK_PAY]: 'Facebook Pay',
+    [PAYMENT_TYPES.GREEN_DOT_MONEY_PACK]: 'Green Dot Money Pack',
+    [PAYMENT_TYPES.GIFT_CARD]: 'Gift Card',
+    [PAYMENT_TYPES.GIROPAY]: 'GiroPay',
+    [PAYMENT_TYPES.GOOGLE_CHECKOUT]: 'Google Checkout',
+    [PAYMENT_TYPES.INTERAC]: 'Interac',
+    [PAYMENT_TYPES.KLARNA]: 'Klarna',
+    [PAYMENT_TYPES.PAYPAL]: 'PayPal',
+    [PAYMENT_TYPES.MERCADE_PAGO]: 'Mercade Pago',
+    [PAYMENT_TYPES.NETELLER]: 'Neteller',
+    [PAYMENT_TYPES.NONE]: 'None',
+    [PAYMENT_TYPES.POLI]: 'POLi',
+    [PAYMENT_TYPES.SAMSUNG_PAY]: 'Samsung Pay',
+    [PAYMENT_TYPES.SEPA]: 'Single Euro Payments Area',
+    [PAYMENT_TYPES.SKRILL]: 'Skrill/Moneybookers',
+    [PAYMENT_TYPES.SOFORT]: 'Sofort',
+    [PAYMENT_TYPES.SPLITIT]: 'Splitit',
+    [PAYMENT_TYPES.TOKEN]: 'Token provided from payment processor',
+    [PAYMENT_TYPES.WECHAT_PAY]: 'WeChat Pay'
+  };
+
+  return names[paymentType] || 'Unknown Payment Type';
+}

package/src/app/utils/serverConfigurationService.ts

@@ -0,0 +1,209 @@
+import { AppConfigurationResponse } from './appConfiguration';
+import { fetchConfigurationDirect } from './configurationService';
+import { cache } from 'react';
+
+/**
+ * Cached server-side configuration fetcher
+ * This will only run once per server request/render cycle
+ */
+export const getServerConfiguration = cache(async (): Promise<AppConfigurationResponse> => {
+  try {
+    const configuration = await fetchConfigurationDirect();
+    return configuration;
+  } catch (error) {
+    console.error('Server-side configuration fetch failed:', error);
+    
+    // Return minimal fallback configuration
+    return {
+      internal: [
+        { app_name: 'tiered_pricing', is_active: false }
+      ],
+      external: [
+        {
+          app_name: 'dealer_locator',
+          configurations: { token: '' },
+          is_active: false
+        },
+        {
+          app_name: 'google_recaptcha',
+          configurations: { 
+            site_key: '',
+            locations: {
+              login: false,
+              signup: false,
+              checkout: false
+            }
+          },
+          is_active: false
+        },
+        {
+          app_name: 'google_tag_manager',
+          configurations: { container_id: '' },
+          is_active: false
+        },
+        {
+          app_name: 'google_maps',
+          configurations: { api_key: '' },
+          is_active: false
+        },
+        {
+          app_name: 'google_analytics',
+          configurations: { measurement_id: '' },
+          is_active: false
+        },
+        {
+          app_name: 'google_adsense',
+          configurations: { publisher_id: '' },
+          is_active: false
+        }
+      ]
+    };
+  }
+});
+
+/**
+ * Server-side helper functions that extract only necessary client-side data
+ * This ensures we only send minimal, non-sensitive data to the client
+ */
+
+export interface ClientSafeConfiguration {
+  features: {
+    dealer_locator: boolean;
+    tiered_pricing: boolean;
+    will_call: boolean;
+  };
+  dealer_locator: {
+    token: string | null;
+  };
+  google: {
+    recaptcha_site_key: string | null;
+    recaptcha_locations: {
+      login: boolean;
+      signup: boolean;
+      checkout: boolean;
+    };
+    tag_manager_container_id: string | null;
+    maps_api_key: string | null;
+    analytics_measurement_id: string | null;
+    adsense_publisher_id: string | null;
+    search_console_verification_content: string | null;
+  };
+}
+
+/**
+ * Extracts only client-safe configuration data
+ * This removes sensitive server-side configuration and only includes what the client needs
+ */
+export async function getClientSafeConfiguration(): Promise<ClientSafeConfiguration> {
+  const config = await getServerConfiguration();
+  // Helper function to find app configuration
+  const findInternalApp = (appName: string) => 
+    config.internal?.find(app => app.app_name === appName);
+    
+  const findExternalApp = (appName: string) => 
+    config.external?.find(app => app.app_name === appName);
+
+  // Extract only client-safe configuration
+  const clientConfig: ClientSafeConfiguration = {
+    features: {
+      dealer_locator: findExternalApp('dealer_locator')?.is_active ?? false,
+      tiered_pricing: findInternalApp('tiered_pricing')?.is_active ?? false,
+      will_call: findExternalApp('will-call')?.is_active ?? false,
+    },
+    dealer_locator: {
+      token: (() => {
+        const app = findExternalApp('dealer_locator');
+        if (app?.is_active && app.configurations) {
+          return (app.configurations as import('./appConfiguration').DealerLocatorConfig).token || null;
+        }
+        return null;
+      })(),
+    },
+    google: {
+      recaptcha_site_key: (() => {
+        const app = findExternalApp('google_recaptcha');
+        if (app?.is_active && app.configurations) {
+          return (app.configurations as { site_key: string }).site_key || null;
+        }
+        return null;
+      })(),
+      recaptcha_locations: (() => {
+        const app = findExternalApp('google_recaptcha');
+        if (app?.is_active && app.configurations) {
+          const config = app.configurations as { locations?: { login?: boolean; signup?: boolean; checkout?: boolean } };
+          return {
+            login: config.locations?.login ?? false,
+            signup: config.locations?.signup ?? false,
+            checkout: config.locations?.checkout ?? false,
+          };
+        }
+        return {
+          login: false,
+          signup: false,
+          checkout: false,
+        };
+      })(),
+      tag_manager_container_id: (() => {
+        const app = findExternalApp('google_tag_manager');
+        if (app?.is_active && app.configurations) {
+          return (app.configurations as { container_id: string }).container_id || null;
+        }
+        return null;
+      })(),
+      maps_api_key: (() => {
+        const app = findExternalApp('google_maps');
+        if (app?.is_active && app.configurations) {
+          return (app.configurations as { api_key: string }).api_key || null;
+        }
+        return null;
+      })(),
+      analytics_measurement_id: (() => {
+        const app = findExternalApp('google_analytics');
+        if (app?.is_active && app.configurations) {
+          return (app.configurations as { measurement_id: string }).measurement_id || null;
+        }
+        return null;
+      })(),
+      adsense_publisher_id: (() => {
+        const app = findExternalApp('google_adsense');
+        if (app?.is_active && app.configurations) {
+          return (app.configurations as { publisher_id: string }).publisher_id || null;
+        }
+        return null;
+      })(),
+      search_console_verification_content: (() => {
+        const app = findExternalApp('google_search_console');
+        if (app?.is_active && app.configurations) {
+          const metaTag = (app.configurations as import('./appConfiguration').GoogleSearchConsoleConfig).verification_meta_tag;
+          if (metaTag) {
+            // Extract content value from meta tag
+            const contentMatch = metaTag.match(/content="([^"]+)"/);
+            return contentMatch ? contentMatch[1] : null;
+          }
+        }
+        return null;
+      })(),
+    }
+  };
+
+  return clientConfig;
+}
+
+/**
+ * Server-side feature check (for server components and middleware)
+ */
+export async function isFeatureEnabledOnServer(featureName: string): Promise<boolean> {
+  const config = await getServerConfiguration();
+  
+  const internalApp = config.internal?.find(app => app.app_name === featureName);
+  if (internalApp) {
+    return internalApp.is_active;
+  }
+  
+  const externalApp = config.external?.find(app => app.app_name === featureName);
+  if (externalApp) {
+    return externalApp.is_active;
+  }
+  
+  return false;
+}

package/src/app/utils/svgs/GridIcon.tsx

@@ -0,0 +1,45 @@
+export const GridIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={20}
+    height={20}
+    viewBox="0 0 20 20"
+    fill="none"
+  >
+    <g clipPath="url(#clip0_960_52845)">
+      <path
+        d="M8.125 3.75H4.375C4.02982 3.75 3.75 4.02982 3.75 4.375V8.125C3.75 8.47018 4.02982 8.75 4.375 8.75H8.125C8.47018 8.75 8.75 8.47018 8.75 8.125V4.375C8.75 4.02982 8.47018 3.75 8.125 3.75Z"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M15.625 3.75H11.875C11.5298 3.75 11.25 4.02982 11.25 4.375V8.125C11.25 8.47018 11.5298 8.75 11.875 8.75H15.625C15.9702 8.75 16.25 8.47018 16.25 8.125V4.375C16.25 4.02982 15.9702 3.75 15.625 3.75Z"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M8.125 11.25H4.375C4.02982 11.25 3.75 11.5298 3.75 11.875V15.625C3.75 15.9702 4.02982 16.25 4.375 16.25H8.125C8.47018 16.25 8.75 15.9702 8.75 15.625V11.875C8.75 11.5298 8.47018 11.25 8.125 11.25Z"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M15.625 11.25H11.875C11.5298 11.25 11.25 11.5298 11.25 11.875V15.625C11.25 15.9702 11.5298 16.25 11.875 16.25H15.625C15.9702 16.25 16.25 15.9702 16.25 15.625V11.875C16.25 11.5298 15.9702 11.25 15.625 11.25Z"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_960_52845">
+        <rect width={20} height={20} fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);

package/src/app/utils/svgs/account/myAccount/listDotIcon.tsx

@@ -0,0 +1,3 @@
+export const DotListIcon = <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="6.00014" cy="5.99916" r="2.57143" fill="currentColor" />
+</svg>

package/src/app/utils/svgs/account/myAccount/tickIcon.tsx

@@ -0,0 +1,10 @@
+export const TickIcon = <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clipPath="url(#clip0_960_55629)">
+        <path d="M1.875 6.75L4.5 9.375L10.5 3.375" stroke="#15803D" strokeWidth="0.75" strokeLinecap="round" strokeLinejoin="round" />
+    </g>
+    <defs>
+        <clipPath id="clip0_960_55629">
+            <rect width="12" height="12" fill="currentColor" />
+        </clipPath>
+    </defs>
+</svg>

package/src/app/utils/svgs/account/orderHistory/InfoIcon.tsx

@@ -0,0 +1,49 @@
+export const InfoIcon = (
+  <svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g clipPath="url(#clip0_1456_102685)">
+      <path
+        opacity="0.2"
+        d="M33.75 10H13.75V30H33.75V10Z"
+        fill="currentColor"
+      />
+      <path
+        d="M13.75 10H33.75"
+        stroke="currentColor"
+        strokeWidth="2.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13.752 20H33.7504"
+        stroke="currentColor"
+        strokeWidth="2.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13.752 30H33.7504"
+        stroke="currentColor"
+        strokeWidth="2.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M6.875 11.875C7.91053 11.875 8.75 11.0355 8.75 10C8.75 8.96447 7.91053 8.125 6.875 8.125C5.83947 8.125 5 8.96447 5 10C5 11.0355 5.83947 11.875 6.875 11.875Z"
+        fill="currentColor"
+      />
+      <path
+        d="M6.875 21.875C7.91053 21.875 8.75 21.0355 8.75 20C8.75 18.9645 7.91053 18.125 6.875 18.125C5.83947 18.125 5 18.9645 5 20C5 21.0355 5.83947 21.875 6.875 21.875Z"
+        fill="currentColor"
+      />
+      <path
+        d="M6.875 31.875C7.91053 31.875 8.75 31.0355 8.75 30C8.75 28.9645 7.91053 28.125 6.875 28.125C5.83947 28.125 5 28.9645 5 30C5 31.0355 5.83947 31.875 6.875 31.875Z"
+        fill="currentColor"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_1456_102685">
+        <rect width="40" height="40" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);

package/src/app/utils/svgs/arrowDownIcon.tsx

@@ -0,0 +1,17 @@
+export const ArrowDownIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="12"
+    height="7"
+    viewBox="0 0 12 7"
+    fill="none"
+  >
+    <path
+      d="M11 1L6 6L1 1"
+      stroke="#E5E5E5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+

package/src/app/utils/svgs/arrowIcon.tsx

@@ -0,0 +1,25 @@
+export const ArrowIcon = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
+    <g clipPath="url(#clip0_673_17)">
+      <path
+        d="M3.125 10H16.875"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M11.25 4.375L16.875 10L11.25 15.625"
+        stroke="currentColor"
+        strokeWidth="1.25"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_673_17">
+        <rect width={20} height={20} fill="currentColor" />
+      </clipPath>
+    </defs>
+  </svg>
+);

package/src/app/utils/svgs/arrowUpIcon.tsx

@@ -0,0 +1,16 @@
+export const ArrowUpIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="12"
+    height="7"
+    viewBox="0 0 12 7"
+    fill="none"
+  >
+    <path
+      d="M11 6L6 1L1 6"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/src/app/utils/svgs/brandsSearchIcon.tsx

@@ -0,0 +1,25 @@
+export const brandSearchIcon = (
+  <svg
+    width={20}
+    height={20}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g id="SVGRepo_bgCarrier" strokeWidth={0} />
+    <g
+      id="SVGRepo_tracerCarrier"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <g id="SVGRepo_iconCarrier">
+      <path
+        d="M15.7955 15.8111L21 21M18 10.5C18 14.6421 14.6421 18 10.5 18C6.35786 18 3 14.6421 3 10.5C3 6.35786 6.35786 3 10.5 3C14.6421 3 18 6.35786 18 10.5Z"
+        stroke="#000000"
+        strokeWidth={2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+  </svg>
+);