Improve plans, add supports for upcomings purchasable plans and add a direct link to UserPilot (skipping Segment)

.github/workflows/e2e.yml

@@ -16,10 +16,10 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        # run 6 copies of the job in parallel
-        shard: [1, 2, 3, 4, 5, 6]
+        # run 8 copies of the job in parallel
+        shard: [1, 2, 3, 4, 5, 6, 7, 8]
 
-    name: "Playwright Tests - pwc"
+    name: 'Playwright Tests - pwc'
     timeout-minutes: 20
     runs-on: ubuntu-22.04
     container: mcr.microsoft.com/playwright:v1.39.0-jammy
@@ -43,7 +43,16 @@ jobs:
 
       - uses: actions/setup-node@v3
         with:
-          node-version: "18.x"
+          node-version: '18.x'
+
+      - name: Cache node_modules
+        uses: actions/cache@v3
+        with:
+          path: |
+            node_modules
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
 
       - name: Install dependencies
         run: |

.github/workflows/push.yml

@@ -13,6 +13,16 @@ jobs:
       - uses: actions/checkout@v2
         with:
           fetch-depth: 0
+
+      - name: Cache node_modules
+        uses: actions/cache@v3
+        with:
+          path: |
+            node_modules
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
       - name: Use Node.js 18.x
         uses: actions/setup-node@v2
         with:

package.json

@@ -4,9 +4,8 @@
   "private": true,
   "dependencies": {
     "@analytics/google-tag-manager": "^0.6.0",
-    "@analytics/segment": "^2.1.0",
     "@appquality/languages": "1.4.3",
-    "@appquality/unguess-design-system": "4.0.48",
+    "@appquality/unguess-design-system": "4.0.49",
     "@atlaskit/pragmatic-drag-and-drop": "^1.7.4",
     "@atlaskit/pragmatic-drag-and-drop-flourish": "^2.0.3",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
@@ -35,6 +34,7 @@
     "ts-node": "^10.9.2",
     "typescript": "^4.6.2",
     "use-analytics": "^1.1.0",
+    "userpilot": "^1.4.1",
     "uuid": "^10.0.0",
     "web-vitals": "^2.1.4",
     "yup": "^0.32.11"

src/analytics.ts

@@ -1,24 +1,24 @@
-import Analytics from 'analytics';
 import googleTagManager from '@analytics/google-tag-manager';
-import segmentPlugin from '@analytics/segment';
+import Analytics from 'analytics';
+import userpilot from './common/analytics-plugins/userpilot';
 import { isDev } from './common/isDevEnvironment';
 
 const analytics = Analytics({
   app: 'unguess-react',
-  plugins: [
-    googleTagManager({
-      containerId: process.env.REACT_APP_GTM_ID || 'GTM-WVXPS94',
-      ...(isDev() && {
-        auth: 'HjeAxSQB9e685mi-_8YiDw',
-        preview: 'env-4',
+  ...(process.env.NODE_ENV !== 'test' && {
+    plugins: [
+      googleTagManager({
+        containerId: process.env.REACT_APP_GTM_ID || 'GTM-WVXPS94',
+        ...(isDev() && {
+          auth: 'HjeAxSQB9e685mi-_8YiDw',
+          preview: 'env-4',
+        }),
+      }),
+      userpilot({
+        token: isDev() ? 'STG-NX-54e88e10' : 'NX-54e88e10',
       }),
-    }),
-    segmentPlugin({
-      writeKey: isDev()
-        ? 'AxHbacd31w50NwjDM8tadsP82hSwTz4Z'
-        : 'oxd3W7coKxDdzq99F88doV5VvQrESbJh',
-    }),
-  ],
+    ],
+  }),
 });
 
 export default analytics;

src/common/Track.tsx

@@ -5,32 +5,38 @@ import { useGetUsersMeQuery } from 'src/features/api';
 import { useActiveWorkspace } from 'src/hooks/useActiveWorkspace';
 import { useAnalytics } from 'use-analytics';
 
-// const tagManagerArgs: TagManagerArgs = {
-//   gtmId: process.env.REACT_APP_GTM_ID || 'GTM-WVXPS94',
-//   ...(isDev() && {
-//     auth: 'HjeAxSQB9e685mi-_8YiDw',
-//     preview: 'env-4',
-//   }),
-//   events: {
-//     unguess_loaded: 'unguess_loaded',
-//     workspace_change: 'workspace_change',
-//     generic_error: 'generic_error',
-//   },
-// };
-// TagManager.initialize(tagManagerArgs);
-
 export const Track = ({
   title,
+  description,
+  metaTags,
   children,
 }: {
   title: string;
+  description?: string;
+  metaTags?: { name: string; content: string }[];
   children: React.ReactNode;
 }) => {
   const { data: userData, isLoading, isSuccess } = useGetUsersMeQuery();
   const { activeWorkspace } = useActiveWorkspace();
   const { track, identify, page } = useAnalytics();
   const location = useLocation();
 
+  const defaultMeta = [
+    { name: 'og:description', content: description ?? title },
+    { name: 'robots', content: 'noindex, nofollow' },
+  ];
+
+  // Merge metaTags over defaultMeta, overriding by name
+  const meta: { name: string; content: string }[] = [
+    ...defaultMeta.map((def) => {
+      const override = metaTags?.find((m) => m.name === def.name);
+      return override ?? def;
+    }),
+    ...(metaTags?.filter(
+      (m) => !defaultMeta.some((def) => def.name === m.name)
+    ) ?? []),
+  ];
+
   useEffect(() => {
     page();
   }, [location]);
@@ -39,7 +45,10 @@ export const Track = ({
     <Helmet>
       <title>{title} - UNGUESS</title>
       <meta property="og:title" content={title} />
-      <meta name="description" content={title} />
+      <meta name="description" content={description ?? title} />
+      {meta.map((m) => (
+        <meta key={m.name} name={m.name} content={m.content} />
+      ))}
     </Helmet>
   );
 
@@ -53,6 +62,7 @@ export const Track = ({
         name: userData.name,
         email: userData.email,
         company: activeWorkspace.company,
+        workspace: activeWorkspace,
       });
 
       track(
@@ -68,8 +78,8 @@ export const Track = ({
         },
         {
           plugins: {
-            // disable track event for segment
-            segment: false,
+            // disable userpilot for this event
+            userpilot: false,
           },
         }
       );

src/common/analytics-plugins/userpilot.ts

@@ -0,0 +1,61 @@
+import { User } from 'src/features/api';
+import { Userpilot } from 'userpilot';
+
+declare global {
+  interface Window {
+    userpilot?: {
+      initialized: number;
+    };
+  }
+}
+
+interface UserpilotConfig {
+  token: string;
+  name?: string;
+}
+
+interface IPayload {
+  type: string;
+  userId: string;
+}
+
+interface IIdentifyPayload extends IPayload {
+  traits: User & { workspace: { id: number; company: string } };
+}
+
+export default function userpilotPlugin(pluginSettings: UserpilotConfig) {
+  return {
+    name: 'userpilot',
+    config: { ...pluginSettings },
+    initialize: ({ config }: { config: UserpilotConfig }) => {
+      Userpilot.initialize(config.token);
+    },
+    identify: ({ payload }: { payload: IIdentifyPayload }) => {
+      const { userId, traits } = payload;
+      const { workspace, ...basicTraits } = traits;
+
+      Userpilot.identify(userId, {
+        ...basicTraits,
+        company: {
+          id: workspace.id,
+          name: workspace.company,
+        },
+      });
+    },
+
+    page: () => {
+      Userpilot.reload();
+    },
+
+    track: ({
+      payload,
+    }: {
+      payload: IPayload & { event: string; properties: Record<string, any> };
+    }) => {
+      const { event, properties, userId } = payload;
+      Userpilot.track(event, { ...properties, userId });
+    },
+
+    loaded: () => !!window.userpilot,
+  };
+}

src/common/components/PasswordRequirements.tsx

@@ -1,4 +1,4 @@
-import { MD, theme } from '@appquality/unguess-design-system';
+import { SM, theme } from '@appquality/unguess-design-system';
 import { ReactComponent as X } from 'src/assets/icons/password-check-x.svg';
 import { ReactComponent as Check } from 'src/assets/icons/password-check-v.svg';
 import { useTranslation } from 'react-i18next';
@@ -16,14 +16,14 @@ const PasswordRequirement = ({
     ) : (
       <X aria-hidden="true" fontSize={16} />
     )}
-    <MD
+    <SM
       isBold={!check()}
       style={{
         color: `${check() ? theme.palette.grey[500] : theme.palette.grey[700]}`,
       }}
     >
       {children}
-    </MD>
+    </SM>
   </li>
 );
 
@@ -32,7 +32,7 @@ const PasswordRequirements = ({ password }: { password: string }) => {
 
   return (
     <div data-qa="password-requirements" className="aq-mb-3">
-      <MD>{t('PASSWORD_VALIDATOR_PASSWORD_REQUIREMENTS')}</MD>
+      <SM>{t('PASSWORD_VALIDATOR_PASSWORD_REQUIREMENTS')}</SM>
       <ul>
         <PasswordRequirement check={() => password.length >= 6}>
           {t('PASSWORD_VALIDATOR_MINIMUM_OF_6_CHARACTERS')}

src/common/components/Table/index.tsx

@@ -37,11 +37,11 @@ type TableProps<T extends TableData, K extends keyof T> = {
   emptyState?: JSX.Element;
 };
 
-const TableWrapper = styled.div<{ maxHeight?: string }>`
+const TableWrapper = styled.div<{ $maxHeight?: string }>`
   width: 100%;
   padding-bottom: ${({ theme }) => theme.space.sm};
-  ${({ maxHeight }) =>
-    maxHeight && `max-height: ${maxHeight}; overflow-y: auto;`}
+  ${({ $maxHeight }) =>
+    $maxHeight && `max-height: ${$maxHeight}; overflow-y: auto;`}
 `;
 
 const StyledHead = styled(Head)<{ isSticky?: boolean }>`
@@ -65,7 +65,7 @@ const Table = <T extends TableData, K extends keyof T>({
     return emptyState || null;
   }
   return (
-    <TableWrapper maxHeight={maxHeight} style={style}>
+    <TableWrapper $maxHeight={maxHeight} style={style}>
       <ZendeskTable>
         <StyledHead isSticky={isSticky}>
           <HeaderRow>