@levi-gemcommerce/analytics 3.0.1-dev.2 → 3.0.1-dev.3

package/dist/umd/types.js

@@ -1 +1 @@
-!function(_,T){"object"==typeof exports&&"undefined"!=typeof module?T(exports):"function"==typeof define&&define.amd?define(["exports"],T):T((_="undefined"!=typeof globalThis?globalThis:_||self).GemAnalytics={})}(this,function(_){"use strict";var T,e,E,A,i,I,P,t;_.EMetricKey=void 0,(T=_.EMetricKey||(_.EMetricKey={})).SESSION="sessions",T.ORDERS="orders",T.PAGE_VIEWS="pageviews",T.VISITORS="visitors",T.BOUNCE_RATE="bounce_rate",T.CTR="ctr",T.CONVERSION_RATE="conversion_rate",T.AVG_TIME_ON_PAGE="average_time_on_page",T.ADDED_TO_CART="added_to_cart",T.ADD_TO_CART_RATE="added_to_cart_rate",T.REACHED_CHECKOUT="sessions_that_reached_checkout",T.COMPLETE_CHECKOUT="sessions_that_completed_checkout",T.CART_ADDITION="sessions_with_cart_additions",T.AOV="aov",T.REVENUE="revenue",T.RPV="revenue_per_visitor",T.VISITOR_ITEMS="visitor_items",T.DEVICE_ITEMS="device_items",T.TRAFFIC_SOURCE_ITEMS="traffic_source_items",T.PAGE_PATH_ANALYSIS="PAGE_PATH_ANALYSIS",_.EAnalyticMode=void 0,(e=_.EAnalyticMode||(_.EAnalyticMode={})).ALL_SESSION="ALL_SESSION",e.FIRST_SESSION="FIRST_SESSION",e.PAGE_ONLY="PAGE_ONLY",_.EVisitorType=void 0,(E=_.EVisitorType||(_.EVisitorType={})).NEW="new",E.RETURNING="returning",_.EDeviceType=void 0,(A=_.EDeviceType||(_.EDeviceType={})).DESKTOP="desktop",A.MOBILE="mobile",A.TABLET="tablet",_.ETrafficSourceType=void 0,(i=_.ETrafficSourceType||(_.ETrafficSourceType={})).DIRECT="direct",i.EMAIL="email",i.REFERRAL="referral",i.ORGANIC_SOCIAL="organic-social",i.ORGANIC_SEARCH="organic-search",i.PAID_SOCIAL="paid-social",i.PAID_SEARCH="paid-search",i.SMS="sms",_.IPlanKey=void 0,(I=_.IPlanKey||(_.IPlanKey={})).CONTENT_TESTING="content-testing",I.PAGE_OPT="page-optimize",I.FUNNEL_OPT="funnel-optimize",I.PROFIT_OPT="profit-optimize",I.TRIAL_PAGE_OPT="trial-page-optimize",I.TRIAL_FUNNEL_OPT="trial-funnel-optimize",I.TRIAL_PROFIT_OPT="trial-profit-optimize",_.IShopPlanState=void 0,(P=_.IShopPlanState||(_.IShopPlanState={})).TRIAL_PAGE_OPT="TRIAL_PAGE_OPT",P.TRIAL_FUNNEL_OPT="TRIAL_FUNNEL_OPT",P.TRIAL_PROFIT_OPT="TRIAL_PROFIT_OPT",P.ACTIVE_PAGE_OPT="ACTIVE_PAGE_OPT",P.ACTIVE_FUNNEL_OPT="ACTIVE_FUNNEL_OPT",P.ACTIVE_PROFIT_OPT="ACTIVE_PROFIT_OPT",P.LOADING_PLAN="LOADING_PLAN",P.TRIAL_EXPIRED="TRIAL_EXPIRED",P.ACTIVE_PAGE_OPT_AND_TRIAL_PAGE_OPT="ACTIVE_PAGE_OPT_AND_TRIAL_PAGE_OPT",P.ACTIVE_PAGE_OPT_AND_TRIAL_FUNNEL_OPT="ACTIVE_PAGE_OPT_AND_TRIAL_FUNNEL_OPT",P.ACTIVE_FUNNEL_OPT_AND_TRIAL_FUNNEL_OPT="ACTIVE_FUNNEL_OPT_AND_TRIAL_FUNNEL_OPT",_.ICampaignType=void 0,(t=_.ICampaignType||(_.ICampaignType={})).PRICE="PRICE",t.TEMPLATE="TEMPLATE",t.TEMPLATE_BUNDLE="TEMPLATE_BUNDLE"});
+!function(_,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((_="undefined"!=typeof globalThis?globalThis:_||self).GemAnalytics={})}(this,function(_){"use strict";var e,T,E,A,i,I,t,o,P,O;_.EAnalyticMode=void 0,(e=_.EAnalyticMode||(_.EAnalyticMode={})).ALL_SESSION="ALL_SESSION",e.FIRST_SESSION="FIRST_SESSION",e.PAGE_ONLY="PAGE_ONLY",_.EVisitorType=void 0,(T=_.EVisitorType||(_.EVisitorType={})).NEW="new",T.RETURNING="returning",_.EDeviceType=void 0,(E=_.EDeviceType||(_.EDeviceType={})).DESKTOP="desktop",E.MOBILE="mobile",E.TABLET="tablet",_.ETrafficSourceType=void 0,(A=_.ETrafficSourceType||(_.ETrafficSourceType={})).DIRECT="direct",A.EMAIL="email",A.REFERRAL="referral",A.ORGANIC_SOCIAL="organic-social",A.ORGANIC_SEARCH="organic-search",A.PAID_SOCIAL="paid-social",A.PAID_SEARCH="paid-search",A.SMS="sms",_.ICampaignType=void 0,(i=_.ICampaignType||(_.ICampaignType={})).PRICE="PRICE",i.TEMPLATE="TEMPLATE",i.TEMPLATE_BUNDLE="TEMPLATE_BUNDLE",i.URL="URL",_.IVariantType=void 0,(I=_.IVariantType||(_.IVariantType={})).VARIANT_A="A",I.VARIANT_B="B",_.EMetricKey=void 0,(t=_.EMetricKey||(_.EMetricKey={})).SESSION="sessions",t.ORDERS="orders",t.PAGE_VIEWS="pageviews",t.VISITORS="visitors",t.BOUNCE_RATE="bounce_rate",t.CTR="ctr",t.CONVERSION_RATE="conversion_rate",t.AVG_TIME_ON_PAGE="average_time_on_page",t.ADDED_TO_CART="added_to_cart",t.ADD_TO_CART_RATE="added_to_cart_rate",t.REACHED_CHECKOUT="sessions_that_reached_checkout",t.COMPLETE_CHECKOUT="sessions_that_completed_checkout",t.CART_ADDITION="sessions_with_cart_additions",t.AOV="aov",t.REVENUE="revenue",t.RPV="revenue_per_visitor",t.VISITOR_ITEMS="visitor_items",t.DEVICE_ITEMS="device_items",t.TRAFFIC_SOURCE_ITEMS="traffic_source_items",t.PAGE_PATH_ANALYSIS="PAGE_PATH_ANALYSIS",_.IPlanKey=void 0,(o=_.IPlanKey||(_.IPlanKey={})).CONTENT_TESTING="content-testing",o.PAGE_OPT="page-optimize",o.FUNNEL_OPT="funnel-optimize",o.PROFIT_OPT="profit-optimize",o.TRIAL_PAGE_OPT="trial-page-optimize",o.TRIAL_FUNNEL_OPT="trial-funnel-optimize",o.TRIAL_PROFIT_OPT="trial-profit-optimize",_.IShopPlanState=void 0,(P=_.IShopPlanState||(_.IShopPlanState={})).TRIAL_PAGE_OPT="TRIAL_PAGE_OPT",P.TRIAL_FUNNEL_OPT="TRIAL_FUNNEL_OPT",P.TRIAL_PROFIT_OPT="TRIAL_PROFIT_OPT",P.ACTIVE_PAGE_OPT="ACTIVE_PAGE_OPT",P.ACTIVE_FUNNEL_OPT="ACTIVE_FUNNEL_OPT",P.ACTIVE_PROFIT_OPT="ACTIVE_PROFIT_OPT",P.LOADING_PLAN="LOADING_PLAN",P.TRIAL_EXPIRED="TRIAL_EXPIRED",P.ACTIVE_PAGE_OPT_AND_TRIAL_PAGE_OPT="ACTIVE_PAGE_OPT_AND_TRIAL_PAGE_OPT",P.ACTIVE_PAGE_OPT_AND_TRIAL_FUNNEL_OPT="ACTIVE_PAGE_OPT_AND_TRIAL_FUNNEL_OPT",P.ACTIVE_FUNNEL_OPT_AND_TRIAL_FUNNEL_OPT="ACTIVE_FUNNEL_OPT_AND_TRIAL_FUNNEL_OPT",_.EReportColumnKey=void 0,(O=_.EReportColumnKey||(_.EReportColumnKey={})).ORDER_ID="order_id",O.GEMX_ID="gx_id",O.ORDER_DATE="order_date",O.TOTAL="total_price",O.CAMPAIGNS="experiments",O.TRAFFIC_SOURCE="traffic_source",O.ITEMS="items",O.DEVICE="device",O.VISITOR="visitor_type"});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@levi-gemcommerce/analytics",
-  "version": "3.0.1-dev.2",
+  "version": "3.0.1-dev.3",
   "license": "MIT",
   "author": "gemx-dev",
   "sideEffects": [
@@ -9,47 +9,23 @@
   "exports": {
     "./package.json": "./package.json",
     "./style.css": "./dist/style.css",
-    "./types": {
-      "types": "./dist/esm/types/index.d.ts",
-      "node": {
-        "types": "./dist/esm/types/index.d.ts",
-        "module": "./dist/esm/types.js",
-        "require": "./dist/umd/types.js",
-        "import": "./dist/esm/types.mjs"
-      },
-      "browser": {
-        "import": "./dist/esm/types.js",
-        "require": "./dist/umd/types.js"
-      },
-      "default": "./dist/esm/types.js"
-    },
+    "./types": "./src/types/index.ts",
     "./gemxql": {
-      "types": "./dist/esm/core/gemxql/index.d.ts",
       "node": {
-        "types": "./dist/esm/core/gemxql/index.d.ts",
-        "module": "./dist/esm/gemxql.js",
-        "require": "./dist/umd/gemxql.js",
-        "import": "./dist/esm/gemxql.mjs"
+        "module": "./src/core/gemxql/index.ts",
+        "require": "./src/core/gemxql/index.ts",
+        "import": "./src/core/gemxql/index.ts"
       },
-      "browser": {
-        "import": "./dist/esm/gemxql.js",
-        "require": "./dist/umd/gemxql.js"
-      },
-      "default": "./dist/esm/gemxql.js"
+      "default": "./src/core/gemxql/index.ts"
     },
     ".": {
-      "types": "./dist/esm/index.d.ts",
       "node": {
-        "types": "./dist/esm/index.d.ts",
-        "module": "./dist/esm/index.js",
-        "require": "./dist/umd/index.js",
-        "import": "./dist/esm/index.mjs"
-      },
-      "browser": {
-        "import": "./dist/esm/index.js",
-        "require": "./dist/umd/index.js"
+        "types": "./src/global.d.ts",
+        "module": "./src/index.ts",
+        "require": "./src/index.ts",
+        "import": "./src/index.ts"
       },
-      "default": "./dist/esm/index.js"
+      "default": "./src/index.ts"
     }
   },
   "main": "dist/umd/index.js",
@@ -57,7 +33,8 @@
   "source": "src/index.ts",
   "types": "dist/esm/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "scripts": {
     "build": "rollup --config rollup.config.mjs --environment NODE_ENV:production && yarn css",
@@ -68,16 +45,24 @@
     "format": "prettier --write \"src/**/*.{ts,tsx,json,css}\"",
     "format:check": "prettier --check \"src/**/*.{ts,tsx,json,css}\"",
     "lint": "eslint \"src/**/*.{ts,tsx}\"",
-    "lint:all": "yarn lint && yarn lint:tsc",
+    "lint:all": "yarn lint && yarn type-check",
     "lint:fix": "eslint \"src/**/*.{ts,tsx}\" --fix",
-    "lint:tsc": "tsc --noEmit",
+    "type-check": "tsc --noEmit",
     "post:publish": "node ./scripts/convert-publish.js",
     "pre:publish": "node ./scripts/convert-publish.js -p"
   },
+  "dependencies": {
+    "@juggle/resize-observer": "^3.4.0",
+    "d3-array": "^3.2.0",
+    "d3-scale": "^4.0.2",
+    "d3-shape": "^3.1.0",
+    "style-inject": "^0.3.0"
+  },
   "devDependencies": {
     "@gem-sdk/eslint-config": "workspace:*",
     "@gem-sdk/rollup-config": "workspace:*",
     "@gem-sdk/tsconfig": "workspace:*",
+    "@react-spring/web": "^9.7.5",
     "@remix-run/react": "^2.15.2",
     "@shopify/polaris": "13.9.5",
     "@shopify/polaris-icons": "9.3.1",
@@ -105,9 +90,12 @@
     "zustand": "^4.4.7"
   },
   "peerDependencies": {
+    "@react-spring/web": ">=9.4.5",
     "@remix-run/react": ">=2",
     "@shopify/polaris": ">=12",
+    "@shopify/polaris-icons": ">=9",
     "@shopify/polaris-viz": ">=10",
+    "@shopify/polaris-viz-core": ">=16",
     "@tanstack/react-query": ">=4",
     "dayjs": ">=1.11",
     "i18next": ">=23",
@@ -133,6 +121,11 @@
   },
   "rollup": {
     "name": "GemAnalytics",
+    "preserveModules": true,
+    "entries": [
+      "src/types/index.ts",
+      "src/core/gemxql/index.ts"
+    ],
     "globals": {
       "@shopify/polaris": "Polaris",
       "@shopify/polaris-icons": "PolarisIcons"

package/src/api/graphql/fragments/pathAnalytic.generated.ts

@@ -0,0 +1,26 @@
+export type PathAnalyticMetricSelectFragment = {
+  totalPageViewed?: number | null;
+  totalVisitors?: number | null;
+  totalClicked?: number | null;
+  totalAddedToCart?: number | null;
+  totalReachedCheckout?: number | null;
+  totalOrders?: number | null;
+  totalSessions?: number | null;
+  totalSessionsThatCompletedCheckout?: number | null;
+  totalSessionsThatReachedCheckout?: number | null;
+  totalSessionsWithCartAdditions?: number | null;
+  totalClickedHasHref?: number | null;
+  totalSessionsWithoutAction?: number | null;
+  totalContinuationSession?: number | null;
+};
+
+export type PathAnalyticPageSelectFragment = {
+  level?: number | null;
+  locationPath?: string | null;
+  id: string;
+  parentID: string;
+  pageType?: string | null;
+  shopifyPageID?: string | null;
+  pageTitle?: string | null;
+  metric?: PathAnalyticMetricSelectFragment | null;
+};

package/src/assets/svg/gemx-skeleton.svg

@@ -0,0 +1,12 @@
+<svg width="38" height="42" viewBox="0 0 38 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_38343_30127)">
+<path d="M22.7778 1.89867L19.559 7.77206C19.5324 7.82462 19.5324 7.89032 19.559 7.94288L26.4622 20.5437C26.5287 20.6686 26.7083 20.6686 26.7748 20.5437L37.8877 0.262792C37.9542 0.144535 37.8678 0 37.7281 0H26.0033C24.6533 0 23.4163 0.729247 22.7778 1.89867Z" fill="#CCCCCC"/>
+<path d="M12.3829 0H0.451995C0.112821 0 -0.106645 0.361338 0.0596168 0.656979L11.0994 20.8131L0.0529663 40.9824C-0.106645 41.278 0.10617 41.6393 0.451995 41.6393H12.3563C12.6224 41.6393 12.8751 41.4948 13.0014 41.2583L24.0412 21.1022C24.1476 20.9116 24.1476 20.6751 24.0412 20.4846L13.028 0.381048C12.9017 0.144535 12.6556 0 12.3829 0Z" fill="#CCCCCC"/>
+<path d="M22.7778 39.7997L19.559 33.9263C19.5324 33.8738 19.5324 33.8081 19.559 33.7555L26.4622 21.1547C26.5287 21.0298 26.7083 21.0298 26.7748 21.1547L37.8811 41.4356C37.9476 41.5539 37.8611 41.6984 37.7215 41.6984H25.9967C24.6466 41.6984 23.4096 40.9691 22.7712 39.7997H22.7778Z" fill="#CCCCCC"/>
+</g>
+<defs>
+<clipPath id="clip0_38343_30127">
+<rect width="37.9077" height="41.6985" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/assets/svg/product.svg

@@ -0,0 +1,18 @@
+<svg
+  width="90"
+  height="72"
+  viewBox="0 0 90 72"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M48.75 34.5C49.9926 34.5 51 33.4926 51 32.25C51 31.0074 49.9926 30 48.75 30C47.5074 30 46.5 31.0074 46.5 32.25C46.5 33.4926 47.5074 34.5 48.75 34.5Z"
+    fill="#616161"
+  />
+  <path
+    fillRule="evenodd"
+    clipRule="evenodd"
+    d="M43.5268 26.25H46.4732C47.6924 26.25 48.6758 26.25 49.4722 26.315C50.2922 26.382 51.0124 26.5236 51.6787 26.8631C52.7371 27.4024 53.5976 28.2629 54.1369 29.3213C54.4764 29.9876 54.618 30.7078 54.685 31.5278C54.75 32.3242 54.75 33.3076 54.75 34.5268V37.4732C54.75 38.6924 54.75 39.6758 54.685 40.4722C54.618 41.2922 54.4764 42.0124 54.1369 42.6787C53.5976 43.7371 52.7371 44.5976 51.6787 45.1369C51.0124 45.4764 50.2922 45.618 49.4722 45.685C48.6758 45.75 47.6924 45.75 46.4732 45.75H43.5268C42.3076 45.75 41.3242 45.75 40.5278 45.685C39.7078 45.618 38.9876 45.4764 38.3213 45.1369C37.2629 44.5976 36.4024 43.7371 35.8631 42.6787C35.5236 42.0124 35.382 41.2922 35.315 40.4722C35.25 39.6758 35.25 38.6924 35.25 37.4732V34.5268C35.25 33.3076 35.25 32.3242 35.315 31.5278C35.382 30.7078 35.5236 29.9876 35.8631 29.3213C36.4024 28.2629 37.2629 27.4024 38.3213 26.8631C38.9876 26.5236 39.7078 26.382 40.5278 26.315C41.3242 26.25 42.3076 26.25 43.5268 26.25ZM40.711 28.5576C40.0302 28.6132 39.6391 28.7169 39.3428 28.8679C38.7077 29.1914 38.1914 29.7077 37.8679 30.3428C37.7169 30.6391 37.6132 31.0302 37.5576 31.711C37.5009 32.405 37.5 33.2963 37.5 34.575V36.7177L38.5842 35.4167C39.5724 34.2309 41.3655 34.1496 42.4569 35.241L46.5 39.2841L48.2694 37.5146C49.3757 36.4083 51.198 36.5093 52.1754 37.7309L52.4995 38.1361C52.5 37.9131 52.5 37.6765 52.5 37.425V34.575C52.5 33.2963 52.4991 32.405 52.4424 31.711C52.3868 31.0302 52.2831 30.6391 52.1321 30.3428C51.8086 29.7077 51.2923 29.1914 50.6572 28.8679C50.3609 28.7169 49.9698 28.6132 49.289 28.5576C48.595 28.5009 47.7037 28.5 46.425 28.5H43.575C42.2963 28.5 41.405 28.5009 40.711 28.5576ZM37.5576 40.289C37.5543 40.2492 37.5513 40.2088 37.5484 40.1678C37.5711 40.1448 37.5931 40.1206 37.6142 40.0953L40.3127 36.8571C40.4539 36.6877 40.71 36.6761 40.8659 36.832L45.7045 41.6706C46.1438 42.1099 46.8561 42.1099 47.2955 41.6706L49.8604 39.1056C50.0185 38.9476 50.2788 38.962 50.4184 39.1365L52.2377 41.4107C52.2056 41.501 52.1704 41.5822 52.1321 41.6572C51.8086 42.2923 51.2923 42.8086 50.6572 43.1321C50.3609 43.2831 49.9698 43.3868 49.289 43.4424C48.595 43.4991 47.7037 43.5 46.425 43.5H43.575C42.2963 43.5 41.405 43.4991 40.711 43.4424C40.0302 43.3868 39.6391 43.2831 39.3428 43.1321C38.7077 42.8086 38.1914 42.2923 37.8679 41.6572C37.7169 41.3609 37.6132 40.9698 37.5576 40.289Z"
+    fill="#616161"
+  />
+</svg>

package/src/components/AnalyticMode/AnalyticModeSelector.tsx

@@ -0,0 +1,50 @@
+import { GViewBySelector } from '@/shared';
+import { useMemo } from 'react';
+import IMAGE_FIRST_SESSION from '@/assets/img/first-session.png';
+import IMAGE_ALL_SESSION from '@/assets/img/all-sessions.png';
+import { EAnalyticMode } from '@/types';
+
+export interface AnalyticModeSelectorProps {
+  activatorText?: string;
+  value?: EAnalyticMode;
+  onChange: (value: EAnalyticMode) => void;
+}
+
+export const VIEW_BY_OPTIONS = [
+  {
+    id: EAnalyticMode.ALL_SESSION,
+    content: 'All sessions',
+    helpText:
+      'Count metrics for all sessions where this page shows up anywhere in the journey: before, during, or after other pages.',
+    icon: IMAGE_ALL_SESSION,
+  },
+  {
+    id: EAnalyticMode.FIRST_SESSION,
+    content: 'Entry session only',
+    helpText:
+      'Count metrics for sessions only where this page was the very first page visited, then track how they moved through the funnel.',
+    icon: IMAGE_FIRST_SESSION,
+  },
+];
+
+export const AnalyticModeSelector = ({ activatorText = 'View by', value, onChange }: AnalyticModeSelectorProps) => {
+  const options = useMemo(() => {
+    return VIEW_BY_OPTIONS.map((option) => ({
+      ...option,
+    }));
+  }, []);
+
+  const onSelectMode = (value: string) => {
+    onChange(value as EAnalyticMode);
+  };
+
+  return (
+    <GViewBySelector
+      activatorText={activatorText}
+      options={options}
+      selected={value}
+      onSelect={onSelectMode}
+      maxWidth="650px"
+    />
+  );
+};

package/src/components/CardPathAnalysis/CardJourneyAnalysis.tsx

@@ -0,0 +1,33 @@
+import type { CardPathAnalysisProps } from './components';
+import type { IPathAnalysisConfig } from './contexts/PathAnalysisConfigProvider';
+
+import { ANALYTICS_METRIC_TOOLTIP } from '@/constants';
+import { GTooltipCard } from '@/shared';
+import { EAnalyticMode, EMetricKey } from '@/types';
+import { InlineStack, Text } from '@shopify/polaris';
+import { useTranslation } from 'react-i18next';
+import { CardPathAnalysis } from './components';
+import { PathAnalysisConfigProvider } from './contexts/PathAnalysisConfigProvider';
+
+interface IProps extends CardPathAnalysisProps {
+  analyticMode: EAnalyticMode;
+  config: IPathAnalysisConfig;
+}
+
+export const CardJourneyAnalysis = ({ analyticMode, config, ...props }: IProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <PathAnalysisConfigProvider {...config}>
+      <CardPathAnalysis analyticMode={analyticMode || EAnalyticMode.ALL_SESSION} {...props}>
+        <InlineStack gap="200">
+          <GTooltipCard tooltip={ANALYTICS_METRIC_TOOLTIP[EMetricKey.PAGE_PATH_ANALYSIS]}>
+            <Text as="h3" variant="headingMd">
+              {t('Journey analysis')}
+            </Text>
+          </GTooltipCard>
+        </InlineStack>
+      </CardPathAnalysis>
+    </PathAnalysisConfigProvider>
+  );
+};

package/src/components/CardPathAnalysis/assets/styles/PathAnalysis.scss

@@ -0,0 +1,60 @@
+.GPathSelectionItem {
+  padding: 8px 12px 12px 12px;
+  transition: background-color 0.2s ease;
+  cursor: pointer;
+
+  &--selected {
+    background-color: #f7f7f7;
+  }
+
+  .GPathSelectionItem__view-icon {
+    display: none;
+    background-color: #ebebeb;
+    padding: 4px;
+    border-radius: 8px;
+    margin-left: 8px;
+  }
+
+  &:hover {
+    background-color: #f7f7f7;
+    .GPathSelectionItem__percentage {
+      display: none;
+    }
+    .GPathSelectionItem__view-icon {
+      display: block;
+    }
+  }
+}
+
+.GAnalytic-Badge-Logo {
+  position: relative;
+  &::before {
+    content: ' ';
+    position: absolute;
+    top: 50%;
+    right: 8px;
+    left: auto;
+    transform: translateY(-50%);
+    width: 18px;
+    height: 84px;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAACoCAYAAACIckw7AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAirSURBVHgB7VxrV1NHFB1NGiAYBI0mgiiIjdJlV39S/1p/T9fqB9tabRSVZ4nyiLyhsOjsmwycTO7cOfMIUtfda7UoXJKdmXP2ec14Q0icn5//Ir/8LK4BboprhpyQDTkhG3JCNuSEbMgJ2ZATsiEnZENOyIackA1WQscnJyImdnb3xNLyqvAm9PKP12L1n5YIxenZmVhaWRNvmgvi4PDQ+FxRMLC6ti42NrbE82dzYqhUEq7Aqnz4uMxabRYhAC+G1arevSOmJmssYvidpeU1sd3+IriwEioNlcTJ8eUn29jcErvyE4MUyJmw/mlDrMmVxVZRjJRHxOSDuvH3buB/tkIRW5ZmR2mrhVXB9mCbKArFgpiq10S9dk9kgUVIvdHbhY/i4KDXIAuFQvImtftV0ZKrAvI6xiqjYnbmEWub2YQUsGUrcrXoNpqA7X7yeFoSuiW4YBu1ArapIt8g8bzNbeNzWLGpybooyhV0gZdSY+kfTU8ZP/n4+G3xWP7clYw3Ibjx71ICdMNVaMufQyKwva5w2rIsDxq7NSqJ7vQ8+z55dp+tW06E4Pat1uc+XaEehJDQlJ7oo1sKVi/rBMO1vviDVYEHTUh76SNv0C2QtoUfK6Fff3vZ9z2OB2HLFmVUb5NtVHg0PSnq99MF0smooSvPG3MsD8IqNOZmxZOZ6eT3KNoZsY1tQ1MPaqImFdnVlbm6xSYEo4XmlEdGhC+wWk+k4SPEwOitgA2dXyG2ttvGn32VnDrNMxXyqsMG52ivA8KJkHGmKXgWyiPDxkTNm5AprnEAz41KCGRe/dXsi2sx4EXozd8LfWQQ24oFnknezBBXZ0IIsrS+8klTs+BMaGdnr4fMfMOveDQhyO3hLTHJAM6EisXL/ffJmW1wJkRlfzsl1wmFM6GkMJQJGgAxRDb5VQkByBZV0rX+6XM3mXcXyDQ4V64KcP0/pTjqIWNoyG7kFVmhID9Kg3foQPaXFr+OGSX2UOk748+8tmzd0FSIAa8VQn1GgbAxcXuMrUlZ2+pMCBUDDR0oiVCFxILzlh0d98axmGSECAwdqOdjw5lQuXxZDg0iH3ImhDSj0I1hu7KzEbux7qnUteQrdAh9x5ikvNwejYKz07Okw4EmKDJIlMsT42MXq5f5pvIZuvXBhFoyfh0cHl38HSt0LPtA3I4ZkvznjaciCqFOmyVuhKf4/xeK2H/0iILeNGbVAaONVWGk4dur7RVojX8iDb96dyLpnsEJXCqTYEJooiOv1sWx0o1zGPwhmUOjM6svpBC0ZRhZcpRaTZI4o1JvQnjxdS1RK1nyaWSZKAqiE4Ii0xQWU0JIAWp8HRUSjDukWplZgl9O3dq4+LOq701SgO/PE92C0espcBAh2AMdM+DNbCU1Ain63AooEqIROiQjTrwR16UrZAWxSqZyyZnQPiFUyqivdIxq6YapJxnk9iHdj9NYhGhNhRSWi31tmm1K0ILaMTBwbpOBDl5AxrS6Xu0Y6uKcMx3wKppNqnZOGrxi2aR0YbUyIIOcWiX+FHgGK0PJQLcqGemLdzvGNMa04cUPjcxRl3e0R9MqIcYkpWa0trlbUPoBUlj+pZVVWQ4dGZ9DboRnOSIanA/BwF/MP0vqs929vaQZAdGD8UMMccrBRa+iZYxwZZO2uCCIENRWfXp4G3pHJbkt2Bpfcs6EQKLV1RXavESwpAUkSMG+XI5ZOBNC2vH23WXKWsnoD9HyGgZN048ssJUaZCCAPp0OaBbG45x+EouQUmP6gsmJGIPiQo3RCaGAfb1jzOxZhHQyyKFfzDeMp12GZZ70/dys+OnH+Z7EH6EkOMmHDdBtAhnujAzP4FlKKjjJ189rNOZmnIQuOWZBqpGgJB+/TPMdhACfgR1sjdrb7t6+HyE9y+OckDKBSgQ+pFcKe6K5eEho0McJ6FE6E9JLlZCkvqRttUnPMpVa76jS2KVjtFtOJy/K7MQ6ExrWlhkphkkMbZ01/QytqTGRuWUjms3sBowx218uB8beVQdcnH5qVA8+8w14FZUPzPtNsAojdVfoEiceUahTNBQqH/cihGM1ejxqMucbKijTZ23ias2HYKyQftw2UEDkRhcEyReSMP0NVAN0U8ZBusX4YFmrwyIEwI5mZ6Z7ll4dvk1eRJIudI9gQPDS7Ix7cIWdMd6TYQNvvCgbnfppcxDIMnZ4K4Jy9DIIjQa4LPfUJlatfq9q3SZvQoA6tYnTn7AlBOBD0uKDzSFMgLzPCMK7DML2IfpX74qoyA9W2nA9CeFUeOxxtw/AITHq5sJ76T1D7IP8saHKc8hJkbKD8qJMuSpiigi9DdHn9pTYYznjGmfMuHxguu5l1CEQQ1TvXKuZjHZe0XYbzyqMUGP853LzzkRkTfYjbX1ttlJvdFsrrsTQNcEIlNtgdw4d6mpNtXons+eDLYEdul5Y8j5PrW526h6Z5jkDJ0SJKY/E1Pn45N9Uz3FBlNBRqYxeHNcpl4dFCJIVGh+7Ldo77gdt9cuQnXMhT53uMaYSmpl5KJrvPvRVl1lEcFdVJWBK5JBNIvfu5El3nInBSXqGL7YX0I+7m0ROlwa08UDa9Lr0A6ZOg/QX0C/NckWOEgNpeCUd1qSd5zeOp/ACcF3kyOoal6vIKSDJVwWikgxMhdLudrDmZafdg9w+tzIVQIaTRWTqUKjIUXDTm+KgiWQRg0fqpVIfoc5Bk9bAU9qkESH7BXp6c0GI6zmxoac3CaFXr5t9LeCrhkpvkli2f3AgQlEoxrl0EjziVA0FaBU6bNxGxEAI6TeC8RWNCHzvw8el5OL2lRCy/ZMHyZ1oz6jvREiP8jb4RH1mS8+NiImYLepbCSEaP3wQr4rFwXA0svSobyVEPSf2HbJOkK0nVUuaRxavikgaMeWRlNgFIZcDI4MgBrN4v7jsf35oUMhbejbkhGzICdmQE7IhJ2RDTsiGnJANOSEbckI2XDtC/wHGB439CmwAAQAAAABJRU5ErkJggg==');
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+    z-index: 1;
+  }
+  &.GAnalytic-Badge-Logo--in-group {
+    &::before {
+      content: ' ';
+      position: absolute;
+      top: 48px;
+      transform: translateY(0);
+    }
+  }
+}
+
+.GPath-Badge-Logo {
+  &::before {
+    right: -11px;
+  }
+}

package/src/components/CardPathAnalysis/components/CardPathAnalysis/CardAnalyticEmpty.tsx

@@ -0,0 +1,45 @@
+import type { BoxProps } from '@shopify/polaris';
+
+import IMAGE_ANALYTIC_EMPTY from '@/assets/img/analytic-empty.png';
+import { BlockStack, Box, Text } from '@shopify/polaris';
+import { useTranslation } from 'react-i18next';
+import { GBlockCenter, GThumbnail } from '@/shared';
+
+export interface CardAnalyticEmptyProps {
+  boxProps?: BoxProps;
+  minHeight?: string;
+  description?: string;
+  title?: string;
+}
+export const CardAnalyticEmpty: React.FC<CardAnalyticEmptyProps> = ({ boxProps, minHeight, description, title }) => {
+  const { t } = useTranslation();
+  const descriptionText = description || t('Data needs time to gather');
+
+  return (
+    <Box minWidth="100%" {...boxProps}>
+      <GBlockCenter minHeight={minHeight}>
+        <Box padding={'400'}>
+          <BlockStack gap="400" align="center" inlineAlign="center">
+            <div className="h-[80px] w-[80px]">
+              <GThumbnail
+                source={IMAGE_ANALYTIC_EMPTY}
+                width="80px"
+                height="80px"
+                alt={t('No data yet')}
+                classRemoved
+              />
+            </div>
+            <BlockStack gap="200" align="center" inlineAlign="center">
+              <Text as="h4" variant="headingSm" fontWeight="semibold">
+                {title || t('No data yet')}
+              </Text>
+              <Text as="h4" variant="bodyMd" tone="subdued">
+                {descriptionText}
+              </Text>
+            </BlockStack>
+          </BlockStack>
+        </Box>
+      </GBlockCenter>
+    </Box>
+  );
+};

package/src/components/CardPathAnalysis/components/CardPathAnalysis/CardPathAnalysis.tsx

@@ -0,0 +1,53 @@
+import type { IFunnelChartColors } from '@/shared/charts';
+import type { EAnalyticMode } from '@/types';
+import type { IAnalyticsData, ICampaignPathsData } from '../../contexts';
+
+import { Box } from '@shopify/polaris';
+import { usePathAnalysisConfig } from '../../contexts/PathAnalysisConfigProvider';
+import { CardPathAnalysisContent } from './CardPathAnalysisContent';
+import { CardPathAnalysisWrapper } from './CardPathAnalysisWrapper';
+
+export interface CardPathAnalysisProps {
+  analyticMode: EAnalyticMode;
+  funnelColors?: IFunnelChartColors;
+  children?: React.ReactNode;
+  campaignID?: string;
+  campaignGroupID?: string;
+  campaignVariantID?: string;
+  campaignVersionID?: string;
+  campaignPathsData?: ICampaignPathsData;
+  analyticsData?: IAnalyticsData;
+}
+
+export const CardPathAnalysis: React.FC<CardPathAnalysisProps> = (props) => {
+  const {
+    campaignID,
+    campaignGroupID,
+    campaignVariantID,
+    analyticMode,
+    children,
+    campaignPathsData,
+    campaignVersionID,
+    analyticsData,
+  } = props;
+
+  const { pricing } = usePathAnalysisConfig();
+  if (pricing.isLoading) return null;
+
+  return (
+    <CardPathAnalysisWrapper
+      campaignID={campaignID}
+      campaignGroupID={campaignGroupID}
+      campaignVariantID={campaignVariantID}
+      analyticMode={analyticMode}
+      campaignPathsData={campaignPathsData}
+      campaignVersionID={campaignVersionID}
+      analyticsData={analyticsData}
+    >
+      {/* Header */}
+      <Box>{children}</Box>
+
+      <CardPathAnalysisContent {...props} />
+    </CardPathAnalysisWrapper>
+  );
+};

package/src/components/CardPathAnalysis/components/CardPathAnalysis/CardPathAnalysisContent.tsx

@@ -0,0 +1,65 @@
+import type { IFunnelChartColors } from '@/shared/charts';
+
+import { GFeatureLocked, IGFeatureLocked } from '@/shared';
+import { cls } from '@/utils';
+import { t } from 'i18next';
+import { usePathAnalysisContext } from '../../contexts';
+import { usePathAnalysisConfig } from '../../contexts/PathAnalysisConfigProvider';
+import { PathAnalysisChart } from '../PathAnalysisChart';
+import { CardPathAnalysisEmpty } from './CardPathAnalysisEmpty';
+import { CardPathAnalysisSkeleton } from './CardPathAnalysisSkeleton';
+
+export interface PathAnalysisContentProps {
+  funnelColors?: IFunnelChartColors;
+  showBadge?: boolean;
+}
+
+export const CardPathAnalysisContent: React.FC<PathAnalysisContentProps> = ({ showBadge = true, funnelColors }) => {
+  const { pathAnalytics, isLoadingMetric } = usePathAnalysisContext();
+  const { pricing } = usePathAnalysisConfig();
+
+  if (!pricing.isPathAnalysisEnabled) return <CardPathAnalysisLocked funnelColors={funnelColors} />;
+  if (isLoadingMetric || !pathAnalytics) return <CardPathAnalysisSkeleton />;
+  if (!pathAnalytics.length) return <CardPathAnalysisEmpty funnelColors={funnelColors} />;
+
+  return (
+    <div className={cls('relative pr-1', { 'GAnalytic-Badge-Logo GPath-Badge-Logo': showBadge })}>
+      <PathAnalysisChart funnelColors={funnelColors} isEnabled={pricing.isPathAnalysisEnabled} />
+    </div>
+  );
+};
+
+const CardPathAnalysisLocked = ({ funnelColors }: { funnelColors?: IFunnelChartColors }) => {
+  const { pricing } = usePathAnalysisConfig();
+
+  return (
+    <div className={cls('relative pr-1')}>
+      <div className="absolute z-[1000] h-full w-full">
+        <GFeatureLocked
+          title={t('See your customer journey and where they leave')}
+          description={t('Upgrade to {{planName}} to focus on key steps in the journey', {
+            planName: 'Funnel Optimize',
+          })}
+          inlineAlign="end"
+          type={IGFeatureLocked.PathAnalysis}
+          boxProps={{
+            minHeight: '100%',
+            ariaHeight: 'height-full',
+          }}
+          boxContentProps={{
+            padding: {
+              md: '400',
+              xs: '200',
+            },
+            width: '635px',
+            maxWidth: '100%',
+          }}
+          buttonProps={{
+            onClick: pricing.onOpenModalPricing,
+          }}
+        />
+      </div>
+      <PathAnalysisChart funnelColors={funnelColors} isEnabled={false} />
+    </div>
+  );
+};

package/src/components/CardPathAnalysis/components/CardPathAnalysis/CardPathAnalysisEmpty.tsx

@@ -0,0 +1,29 @@
+import type { IFunnelChartColors } from '@/shared/charts';
+
+import { useTranslation } from 'react-i18next';
+import { CardAnalyticEmpty } from './CardAnalyticEmpty';
+import { cls } from '@/utils';
+import { PathAnalysisChart } from '../PathAnalysisChart';
+
+export interface CardPathAnalysisEmptyProps {
+  funnelColors?: IFunnelChartColors;
+}
+export const CardPathAnalysisEmpty: React.FC<CardPathAnalysisEmptyProps> = ({ funnelColors }) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={cls('relative h-full')}>
+      <div
+        className="absolute z-[1000] flex h-full w-full items-center justify-center"
+        style={{
+          backgroundColor: 'rgba(255, 255, 255, 0.8)',
+          backdropFilter: 'blur(3px)',
+          backgroundImage: 'radial-gradient(50% 50% at 50% 50%, #FFFFFF 2.77%, rgba(255, 255, 255, 0) 100%)',
+        }}
+      >
+        <CardAnalyticEmpty description={t('GemX is collecting data and will display it as soon as possible')} />
+      </div>
+      <PathAnalysisChart funnelColors={funnelColors} isEnabled={false} />
+    </div>
+  );
+};

package/src/components/CardPathAnalysis/components/CardPathAnalysis/CardPathAnalysisSkeleton.tsx

@@ -0,0 +1,12 @@
+import { MetricInfoSkeleton } from '@/components/common/chart';
+import { GSkeletonDisplayText } from '@/shared';
+import { BlockStack } from '@shopify/polaris';
+
+export const CardPathAnalysisSkeleton: React.FC = () => {
+  return (
+    <BlockStack gap="200">
+      <MetricInfoSkeleton />
+      <GSkeletonDisplayText height="350px" />
+    </BlockStack>
+  );
+};

package/src/components/CardPathAnalysis/components/CardPathAnalysis/CardPathAnalysisWrapper.tsx

@@ -0,0 +1,43 @@
+import type { EAnalyticMode } from '@/types';
+import type { IAnalyticsData, ICampaignPathsData } from '../../contexts';
+
+import { BlockStack, Card } from '@shopify/polaris';
+import { PathAnalysisProvider } from '../../contexts';
+
+export interface CardPathAnalysisWrapperProps {
+  children: React.ReactNode;
+  campaignID?: string;
+  campaignGroupID?: string;
+  campaignVariantID?: string;
+  campaignVersionID?: string;
+  analyticMode: EAnalyticMode;
+  campaignPathsData?: ICampaignPathsData;
+  analyticsData?: IAnalyticsData;
+}
+
+export const CardPathAnalysisWrapper: React.FC<CardPathAnalysisWrapperProps> = ({
+  children,
+  campaignID,
+  campaignGroupID,
+  campaignVariantID,
+  campaignVersionID,
+  analyticMode,
+  campaignPathsData,
+  analyticsData,
+}) => {
+  return (
+    <PathAnalysisProvider
+      campaignID={campaignID}
+      campaignGroupID={campaignGroupID}
+      campaignVariantID={campaignVariantID}
+      campaignVersionID={campaignVersionID}
+      mode={analyticMode}
+      campaignPathsData={campaignPathsData}
+      analyticsData={analyticsData}
+    >
+      <Card>
+        <BlockStack gap="400">{children}</BlockStack>
+      </Card>
+    </PathAnalysisProvider>
+  );
+};