@newskit-render/core 1.6.0 → 1.13.2

package/next.config.js

@@ -5,38 +5,43 @@ const withTM = require('next-transpile-modules')([
   '@newskit-render/my-account',
   '@newskit-render/validation',
 ])
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+})
 
-module.exports = withTM({
-  webpack: (config, options) => {
-    if (options.isServer) {
-      config.externals = ['react', ...config.externals]
-    }
+module.exports = withBundleAnalyzer(
+  withTM({
+    webpack: (config, options) => {
+      if (options.isServer) {
+        config.externals = ['react', ...config.externals]
+      }
 
-    config.resolve.alias.newskit = path.resolve(
-      __dirname,
-      '.',
-      'node_modules',
-      'newskit'
-    )
-    config.resolve.alias.react = path.resolve(
-      __dirname,
-      '.',
-      'node_modules',
-      'react'
-    )
+      config.resolve.alias.newskit = path.resolve(
+        __dirname,
+        '.',
+        'node_modules',
+        'newskit'
+      )
+      config.resolve.alias.react = path.resolve(
+        __dirname,
+        '.',
+        'node_modules',
+        'react'
+      )
 
-    return config
-  },
-  async rewrites() {
-    return [
-      {
-        source: '/sitemap.xml',
-        destination: '/api/sitemap',
-      },
-      {
-        source: '/news-sitemap.xml',
-        destination: '/api/news-sitemap',
-      },
-    ]
-  },
-})
+      return config
+    },
+    async rewrites() {
+      return [
+        {
+          source: '/sitemap.xml',
+          destination: '/api/sitemap',
+        },
+        {
+          source: '/news-sitemap.xml',
+          destination: '/api/news-sitemap',
+        },
+      ]
+    },
+  })
+)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "1.6.0",
+  "version": "1.13.2",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -24,21 +24,24 @@
     "pact:test": "NEWSKIT_API_ENV_URL='http://localhost:4343' jest --config=jest.config.pact.js",
     "pact:publish": "pact-broker publish ./__pacts__/pacts --consumer-app-version=$(git describe --match '*core*' --abbrev=0) --tag='dev' --broker-base-url=$PACT_BROKER_URL --broker-token=$PACT_BROKER_TOKEN",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx . --color && prettier --check './**/*.{js,jsx,ts,tsx,json}'",
-    "lint:fix": "eslint --ext .js,.jsx,.ts,.tsx . --color --fix && prettier --write './**/*.{js,jsx,ts,tsx,json}'"
+    "lint:fix": "eslint --ext .js,.jsx,.ts,.tsx . --color --fix && prettier --write './**/*.{js,jsx,ts,tsx,json}'",
+    "precommit:lint": "eslint",
+    "precommit": "lint-staged",
+    "analyze": "ANALYZE=true next build"
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
-    "@newskit-render/api": "^0.4.2",
-    "@newskit-render/auth": "^0.22.2",
-    "@newskit-render/checkout": "^0.7.0",
-    "@newskit-render/my-account": "^0.114.2",
-    "@newskit-render/shared-components": "^0.18.0",
-    "@newskit-render/sitemap": "^0.25.2",
-    "@newskit-render/validation": "^0.26.2",
+    "@newskit-render/api": "^0.8.0",
+    "@newskit-render/auth": "^0.25.0",
+    "@newskit-render/checkout": "^0.15.0",
+    "@newskit-render/my-account": "^0.122.0",
+    "@newskit-render/shared-components": "^0.25.0",
+    "@newskit-render/sitemap": "^0.28.0",
+    "@newskit-render/validation": "^0.30.0",
     "cross-fetch": "^3.1.4",
     "graphql": "^15.6.0",
     "newrelic": "^7.1.0",
-    "newskit": "4.0.1",
+    "newskit": "4.3.1",
     "next": "^12.0.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.2",
@@ -48,6 +51,7 @@
   "devDependencies": {
     "@apollo/react-testing": "^4.0.0",
     "@emotion/jest": "^11.3.0",
+    "@next/bundle-analyzer": "^12.0.8",
     "@pact-foundation/pact": "^9.12.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.0.2",
@@ -75,6 +79,7 @@
     "jest": "^27.2.4",
     "jest-junit": "^12.0.0",
     "jest-watch-typeahead": "^0.6.3",
+    "lint-staged": "^12.1.7",
     "next-transpile-modules": "^8.0.0",
     "prettier": "^2.0.5",
     "prettier-eslint": "^11.0.0",
@@ -83,6 +88,14 @@
     "typescript": "^4.4.3",
     "wait-on": "^5.3.0"
   },
+  "precommit": [
+    "precommit"
+  ],
+  "lint-staged": {
+    "**/*.(ts|tsx)": [
+      "yarn run precommit:lint"
+    ]
+  },
   "publishConfig": {
     "access": "public"
   },

package/pages/[section]/[articleId]/[articleSlug].tsx

@@ -1,17 +1,12 @@
 import React from 'react'
 import newrelic from 'newrelic'
-import {
-  createApolloClient,
-  sessionParser,
-  getMainSession,
-  ClientTypes,
-} from '@newskit-render/api'
+import { createApolloClient, ClientTypes } from '@newskit-render/api'
 import { GET_UNIVERSAL_ARTICLE } from '../../../queries'
 import ArticlePage, { UniversalArticle } from '../../../components/article'
 import { highlights, relatedArticles } from '../../../helpers/mocks/articleMock'
 import { UserData } from '../../../helpers/global-types'
-import { fetchUser } from '../../../helpers/getUser'
-import { ACCOUNT_QUERY_URL } from '../../../constants'
+// import { fetchUser } from '../../../helpers/getUser'
+// import { ACCOUNT_QUERY_URL } from '../../../constants'
 import { addCacheHeaders } from '../../../helpers/addCacheHeaders'
 
 export type ArticleSlug = {
@@ -46,8 +41,7 @@ const Article: React.FC<ArticleSlug> = ({
 
 export async function getServerSideProps(context) {
   const apolloClient = await createApolloClient(ClientTypes.nkapi)
-  const mainSession = getMainSession(context.req.headers.cookie)
-  const session = sessionParser(mainSession)
+  // const mainSession = getMainSession(context.req.headers.cookie)
 
   const {
     params: { articleId, section, articleSlug },
@@ -57,12 +51,15 @@ export async function getServerSideProps(context) {
     `Article: /${section}/${articleId}/${articleSlug}`
   )
 
-  const [{ data }, user] = await Promise.all([
+  const [
+    { data },
+    // user
+  ] = await Promise.all([
     apolloClient.query({
       query: GET_UNIVERSAL_ARTICLE,
       variables: { publisher: 'DEMO', id: articleId },
     }),
-    await fetchUser(session, ACCOUNT_QUERY_URL),
+    // await fetchUser(mainSession, ACCOUNT_QUERY_URL),
   ])
 
   addCacheHeaders(context.res)
@@ -73,7 +70,7 @@ export async function getServerSideProps(context) {
       twitterUsername: process.env.TWITTER_USERNAME || '',
       siteHost: process.env.SITE_HOST || '',
       gscId: process.env.GSC_ID || '',
-      user,
+      // user,
     },
   }
 }

package/pages/[section]/index.tsx

@@ -1,14 +1,13 @@
 import newrelic from 'newrelic'
 import {
   createApolloClient,
-  sessionParser,
-  getMainSession,
+  // getMainSession,
   ClientTypes,
 } from '@newskit-render/api'
 import { GET_PAGE } from '../../queries'
 import SectionPage from '../../components/section'
-import { fetchUser } from '../../helpers/getUser'
-import { ACCOUNT_QUERY_URL } from '../../constants'
+// import { fetchUser } from '../../helpers/getUser'
+// import { ACCOUNT_QUERY_URL } from '../../constants'
 import { addCacheHeaders } from '../../helpers/addCacheHeaders'
 
 export async function getServerSideProps(context) {
@@ -18,16 +17,20 @@ export async function getServerSideProps(context) {
     params: { section },
   } = context
 
-  const mainSession = getMainSession(context.req.headers.cookie)
-  const session = sessionParser(mainSession)
+  // const mainSession = getMainSession(context.req.headers.cookie)
 
   newrelic.setTransactionName(`Section: ${section}`)
-  const [{ data }, user] = await Promise.all([
+  const [
+    { data },
+    //  user
+  ] = await Promise.all([
     apolloClient.query({
       query: GET_PAGE,
       variables: { channel: section, publisher: 'DEMO' },
     }),
-    await fetchUser(session, ACCOUNT_QUERY_URL),
+
+    // TODO: Enable once Main add Subscriptions
+    // await fetchUser(mainSession, ACCOUNT_QUERY_URL),
   ])
 
   addCacheHeaders(context.res)
@@ -35,7 +38,7 @@ export async function getServerSideProps(context) {
     props: {
       page: data.page,
       isIndexPage: true,
-      user,
+      //  user,
     },
   }
 }

package/pages/_app.tsx

@@ -3,7 +3,7 @@ import { AppProps } from 'next/app'
 import Head from 'next/head'
 import { ThemeProvider, Global, css, styled } from 'newskit'
 import { SessionProvider } from '@newskit-render/auth'
-import { AppContextProvider, AppContext } from '../context/AppContext'
+import { AppContextProvider, AppContext } from '../app-context/AppContext'
 import { logger } from '../helpers/logger'
 
 if (!process.browser) {
@@ -13,6 +13,43 @@ if (!process.browser) {
 }
 
 const GlobalStyling = css`
+  @font-face {
+    font-family: GillSansMTStd-Medium;
+    src: url('/fonts/GillSansMTStd-Medium.otf');
+  }
+  @font-face {
+    font-family: TimesModern-Bold;
+    src: url('/fonts/TimesDigital-Bold.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: TimesModern-Regular;
+    src: url('/fonts/TimesDigital-Regular.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: TimesDigitalW04-Regular;
+    src: url('/fonts/TimesDigitalW04-Regular.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: Montserrat;
+    src: url('/fonts/Montserrat-Regular.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: TheSun-Bold;
+    src: url('/fonts/TheSun-Bold.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: TheSun-HeavyNarrow;
+    src: url('/fonts/TheSun-HeavyNarrow.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: TheSun-Regular;
+    src: url('/fonts/TheSun-Regular.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: TheSun-Medium;
+    src: url('/fonts/TheSun-Medium.ttf') format('truetype');
+  }
+
   html,
   body {
     padding: 0;

package/pages/account/cancellation/index.tsx

@@ -1,13 +1,14 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { Cancellation, getProviderProps } from '@newskit-render/my-account'
 import newrelic from 'newrelic'
-import validation from '../../../validation'
+import { AppContext } from '../../../app-context/AppContext'
 
-const CancellationPage = (props) => {
-  return <Cancellation {...props} validation={validation} />
+const AccountCancellation = (props) => {
+  const { theme, setTheme } = useContext(AppContext)
+  return <Cancellation {...props} customTheme={theme} setTheme={setTheme} />
 }
 
-export default CancellationPage
+export default AccountCancellation
 
 export const getServerSideProps = async (context) => {
   newrelic.setTransactionName('Account: Cancellation')

package/pages/account/edit/[field].tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import newrelic from 'newrelic'
 import {
   EditField,
@@ -7,12 +7,21 @@ import {
   componentMap,
 } from '@newskit-render/my-account'
 import validation from '../../../validation'
+import { AppContext } from '../../../app-context/AppContext'
 
 const AccountEditField = (props) => {
   const doesEditPageExist = Object.keys(componentMap).includes(props.data.type)
+  const { theme, setTheme } = useContext(AppContext)
 
   if (doesEditPageExist) {
-    return <EditField {...props} validation={validation} />
+    return (
+      <EditField
+        {...props}
+        validation={validation}
+        customTheme={theme}
+        setTheme={setTheme}
+      />
+    )
   }
   return <NotFound />
 }

package/pages/account/index.tsx

@@ -1,7 +1,14 @@
-import { PersonalDetails, getProviderProps } from '@newskit-render/my-account'
 import newrelic from 'newrelic'
+import { PersonalDetails, getProviderProps } from '@newskit-render/my-account'
+import React, { useContext } from 'react'
+import { AppContext } from '../../app-context/AppContext'
+
+const AccountPersonalDetails = (props) => {
+  const { theme, setTheme } = useContext(AppContext)
+  return <PersonalDetails {...props} customTheme={theme} setTheme={setTheme} />
+}
 
-export default PersonalDetails
+export default AccountPersonalDetails
 
 export const getServerSideProps = async (context) => {
   newrelic.setTransactionName('Account: Personal details')

package/pages/account/newsletters-and-alerts/index.tsx

@@ -3,8 +3,17 @@ import {
   getProviderProps,
 } from '@newskit-render/my-account'
 import newrelic from 'newrelic'
+import React, { useContext } from 'react'
+import { AppContext } from '../../../app-context/AppContext'
 
-export default NewslettersAndAlerts
+const AccountNewslettersAndAlerts = (props) => {
+  const { theme, setTheme } = useContext(AppContext)
+  return (
+    <NewslettersAndAlerts {...props} customTheme={theme} setTheme={setTheme} />
+  )
+}
+
+export default AccountNewslettersAndAlerts
 
 export const getServerSideProps = async (context) => {
   newrelic.setTransactionName('Account: Newsletters and Alerts')

package/pages/account/payment/index.tsx

@@ -4,8 +4,15 @@ import {
   getProviderProps,
   PaymentProvider,
 } from '@newskit-render/my-account'
+import React, { useContext } from 'react'
+import { AppContext } from '../../../app-context/AppContext'
 
-export default Payment
+const AccountCancellation = (props) => {
+  const { theme, setTheme } = useContext(AppContext)
+  return <Payment {...props} customTheme={theme} setTheme={setTheme} />
+}
+
+export default AccountCancellation
 
 export const getServerSideProps = async (context) => {
   newrelic.setTransactionName('Edit Payment method')

package/pages/account/subscription-and-billing/index.tsx

@@ -3,8 +3,21 @@ import {
   getProviderProps,
 } from '@newskit-render/my-account'
 import newrelic from 'newrelic'
+import React, { useContext } from 'react'
+import { AppContext } from '../../../app-context/AppContext'
 
-export default SubscriptionAndBilling
+const AccountSubscriptionAndBilling = (props) => {
+  const { theme, setTheme } = useContext(AppContext)
+  return (
+    <SubscriptionAndBilling
+      {...props}
+      customTheme={theme}
+      setTheme={setTheme}
+    />
+  )
+}
+
+export default AccountSubscriptionAndBilling
 
 export const getServerSideProps = async (context) => {
   newrelic.setTransactionName('Account: Subscription and Billing')

package/pages/checkout/account-creation/index.tsx

@@ -0,0 +1,14 @@
+import { AccountCreation, getProviderProps } from '@newskit-render/checkout'
+import React, { useContext } from 'react'
+import { AppContext } from '../../../app-context/AppContext'
+
+const AccountCreationPage = (props) => {
+  const { theme, setTheme } = useContext(AppContext)
+  return <AccountCreation {...props} customTheme={theme} setTheme={setTheme} />
+}
+
+export default AccountCreationPage
+
+export const getServerSideProps = async (context) => {
+  return getProviderProps({ ...context, provider: 'accountCreation' })
+}

package/pages/checkout/payment-details/index.tsx

@@ -0,0 +1,14 @@
+import { PaymentDetails, getProviderProps } from '@newskit-render/checkout'
+import React, { useContext } from 'react'
+import { AppContext } from '../../../app-context/AppContext'
+
+const PaymentDetailsPage = (props) => {
+  const { theme, setTheme } = useContext(AppContext)
+  return <PaymentDetails {...props} customTheme={theme} setTheme={setTheme} />
+}
+
+export default PaymentDetailsPage
+
+export const getServerSideProps = async (context) => {
+  return getProviderProps({ ...context, provider: 'paymentDetails' })
+}

package/pages/index.tsx

@@ -1,14 +1,13 @@
 import newrelic from 'newrelic'
 import {
   createApolloClient,
-  sessionParser,
-  getMainSession,
+  // getMainSession,
   ClientTypes,
 } from '@newskit-render/api'
 import { GET_PAGE } from '../queries'
 import SectionPage from '../components/section'
-import { fetchUser } from '../helpers/getUser'
-import { ACCOUNT_QUERY_URL } from '../constants'
+// import { fetchUser } from '../helpers/getUser'
+// import { ACCOUNT_QUERY_URL } from '../constants'
 import { addCacheHeaders } from '../helpers/addCacheHeaders'
 
 export async function getServerSideProps(context) {
@@ -17,15 +16,18 @@ export async function getServerSideProps(context) {
   console.warn(context.req && context.req.headers)
 
   const apolloClient = await createApolloClient(ClientTypes.nkapi)
-  const mainSession = getMainSession(context.req.headers.cookie)
-  const session = sessionParser(mainSession)
+  // const mainSession = getMainSession(context.req.headers.cookie)
 
-  const [{ data }, user] = await Promise.all([
+  const [
+    { data },
+    // user
+  ] = await Promise.all([
     apolloClient.query({
       query: GET_PAGE,
       variables: { channel: 'homepage', publisher: 'DEMO' },
     }),
-    await fetchUser(session, ACCOUNT_QUERY_URL),
+    // TODO: Enable once Main add Subscriptions
+    // await fetchUser(mainSession, ACCOUNT_QUERY_URL),
   ])
 
   addCacheHeaders(context.res)
@@ -33,7 +35,7 @@ export async function getServerSideProps(context) {
   return {
     props: {
       page,
-      user,
+      // user: (user || null),
     },
   }
 }

package/public/MyAccount/display-personalDetails-header-sun.svg

@@ -0,0 +1,55 @@
+<svg width="560" height="315" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="560" height="315" rx="4" fill="#FAFAFA"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M303.777 84.36H109.405c-5.288 0-9.797 4.339-9.797 9.714V221.92h213.966V94.074c0-5.375-4.492-9.715-9.797-9.715z" fill="#fff" stroke="#000" stroke-width=".417"/>
+  <path d="M206.983 93.373a1.568 1.568 0 10-.001-3.135 1.568 1.568 0 00.001 3.135z" stroke="#000" stroke-width=".417"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M322.12 234.06H91.099c-12.01 0-20.099-4.121-20.099-5.873v-5.327c0-.527.523-.952 1.174-.952h268.871c.651 0 1.175.425 1.175.952v5.537c-.003 1.385-6.267 5.663-20.1 5.663z" fill="#fff" stroke="#000" stroke-width=".417"/>
+  <path d="M71.197 227.588h270.295" stroke="#000" stroke-width=".208" stroke-linecap="square"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M235.979 222.301v1.21c0 .862-1.698 1.123-2.984 1.123H180.26c-1.352 0-3.063-.261-3.063-1.123v-1.21" fill="#fff"/>
+  <path d="M235.979 222.301v1.21c0 .862-1.698 1.123-2.984 1.123H180.26c-1.352 0-3.063-.261-3.063-1.123v-1.21" stroke="#000" stroke-width=".208"/>
+  <path d="M304.586 99.643H108.227v114.431h196.359V99.643z" fill="#EB1701" stroke="#000" stroke-width=".208"/>
+  <mask id="a" maskUnits="userSpaceOnUse" x="109" y="100" width="195" height="114">
+    <path d="M303.554 100.082H109.068v113.381h194.486V100.082z" fill="#0072EE"/>
+  </mask>
+  <g mask="url(#a)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M285.362 40.523c-64.413 0-116.691 52.278-116.691 116.692 0 64.413 52.278 116.691 116.691 116.691 64.414 0 116.692-52.278 116.692-116.691 0-64.414-52.278-116.692-116.692-116.692zm74.214 173.053c-16.686-20.304-57.178-27.189-74.215-27.189-17.037 0-57.529 6.885-74.216 27.189-11.902-15.637-19.137-35.124-19.137-56.362 0-51.461 41.892-93.353 93.353-93.353 51.461 0 93.353 41.892 93.353 93.353 0 21.238-7.235 40.725-19.138 56.362zm-115.055-85.53a40.737 40.737 0 0140.842-40.842 40.738 40.738 0 0140.842 40.842 40.738 40.738 0 01-40.842 40.842 40.737 40.737 0 01-40.842-40.842z" fill="#fff"/>
+  </g>
+  <path d="M108.447 213.468V99.476h195.919v113.992H108.447z" stroke="#000" stroke-width=".44"/>
+  <g clip-path="url(#display-personalDetails-header__clip0)" fill="#fff">
+    <path d="M136.298 112.022c-1.111-1.967-3.926-3.043-7.962-3.043-4.828 0-7.761 1.5-7.761 3.998 0 1.575 1.364 2.626 4.233 3.303l1.254.293 1.218.292 1.253.292c.055.018.146.032.225.075.449.164.713.399.713.659 0 .531-.847.898-2.105.898-2.022 0-3.042-.367-3.61-1.279l-5.451.677c1.391 2.277 4.351 3.41 8.951 3.41 4.892 0 8.266-1.746 8.266-4.276 0-1.397-1.534-2.719-3.863-3.232l-1.084-.235-1.084-.253-1.084-.236a16.018 16.018 0 01-.847-.221c-.623-.164-.911-.384-.911-.695 0-.498.713-.808 1.825-.808 1.506 0 2.59.424 2.925 1.19l4.899-.809zm13.78 1.153h-4.849l-1.064 4.088c-.362 1.372-1.092 2.063-2.183 2.063-.568 0-.883-.221-.883-.62 0-.132 0-.235.153-.809l1.246-4.725h-4.927l-1.328 5.164c-.154.62-.261 1.143-.261 1.411 0 1.069 1.506 1.91 3.43 1.91 1.951 0 3.141-.488 4.331-1.764l-.413 1.543h4.619l2.129-8.261zm1.049-.002l-2.156 8.268h4.745l1.301-4.961c.237-.873.859-1.322 1.813-1.322.777 0 1.191.221 1.191.652 0 .114-.056.385-.127.67l-1.273 4.961h4.856l1.455-5.649c.083-.303.126-.588.126-.841 0-1.208-1.482-2.031-3.654-2.031-1.994 0-3.449.556-4.178 1.593l.363-1.34h-4.462zm-8.538-3.084h.922l.154-.62h-3.007l-.162.62h.895l-.54 2.081h1.21l.528-2.081zm3.358 1.005l-.28 1.076h1.203l.693-2.683h-1.21l-.252.987h-1.084l.252-.987h-1.202l-.694 2.683h1.203l.28-1.076h1.091zm4.592.463h-1.86l.126-.474h1.498l.154-.588h-1.498l.106-.424h1.786l.153-.588h-2.979l-.694 2.683h3.047l.161-.609z"/>
+  </g>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M468.147 226.296c0 4.324-3.519 7.828-7.861 7.828h-47.903c-4.342 0-7.862-3.504-7.862-7.828V107.907c0-4.323 3.52-7.827 7.862-7.827h47.903c4.342 0 7.861 3.504 7.861 7.827v118.389z" fill="#fff" stroke="#000" stroke-width=".52"/>
+  <path d="M463.709 117.658h-54.782v97.438h54.782v-97.438z" fill="#EB1701" stroke="#000" stroke-width=".26"/>
+  <path clip-rule="evenodd" d="M442.208 112.642c0 .311-.215.562-.48.562h-9.838c-.265 0-.48-.251-.48-.562v-1.262c0-.311.215-.562.48-.562h9.838c.265 0 .48.251.48.562v1.262z" stroke="#000" stroke-width=".26"/>
+  <path d="M436.824 107.382a1.468 1.468 0 100-2.935 1.468 1.468 0 000 2.935zm-.469 121.871c2.714 0 4.914-2.192 4.914-4.895 0-2.704-2.2-4.895-4.914-4.895-2.714 0-4.914 2.191-4.914 4.895 0 2.703 2.2 4.895 4.914 4.895z" stroke="#000" stroke-width=".26"/>
+  <path d="M464.108 117.461h-55.449v96.829h55.449v-96.829z" fill="#EB1701" stroke="#000" stroke-width=".208"/>
+  <path d="M408.879 214.898v-97.217h55.009v97.217h-55.009z" stroke="#000" stroke-width=".44"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M406.156 237.16h-96.524a6.074 6.074 0 01-6.075-6.073V82.981a6.073 6.073 0 016.075-6.073h96.524a6.073 6.073 0 016.075 6.073v148.106a6.073 6.073 0 01-6.075 6.073z" fill="#fff" stroke="#000" stroke-width=".538"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M406.156 237.16h-96.524a6.074 6.074 0 01-6.075-6.073V82.981a6.073 6.073 0 016.075-6.073h96.524a6.073 6.073 0 016.075 6.073v148.106a6.073 6.073 0 01-6.075 6.073z" fill="#fff" stroke="#000" stroke-width=".538"/>
+  <path d="M404.14 93.05h-92.03v127.891h92.03V93.051z" fill="#EB1701" stroke="#000" stroke-width=".269"/>
+  <path d="M358.136 232.631a4.056 4.056 0 100-8.112 4.056 4.056 0 000 8.112zm-.523-145.66a1.512 1.512 0 100-3.024 1.512 1.512 0 000 3.024z" stroke="#000" stroke-width=".269"/>
+  <path d="M404.522 93.46h-92.691v126.623h92.691V93.461z" fill="#EB1701" stroke="#000" stroke-width=".208"/>
+  <mask id="b" maskUnits="userSpaceOnUse" x="311" y="93" width="94" height="128">
+    <path d="M404.522 93.46h-92.691v126.623h92.691V93.461z" fill="#0072EE"/>
+  </mask>
+  <g mask="url(#b)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M285.362 39.693c-64.413 0-116.691 52.278-116.691 116.692 0 64.413 52.278 116.691 116.691 116.691 64.414 0 116.692-52.278 116.692-116.691 0-64.414-52.278-116.692-116.692-116.692zm74.214 173.055c-16.686-20.304-57.178-27.189-74.215-27.189-17.037 0-57.529 6.885-74.216 27.189-11.902-15.636-19.137-35.124-19.137-56.362 0-51.46 41.892-93.353 93.353-93.353 51.461 0 93.353 41.893 93.353 93.353 0 21.238-7.235 40.726-19.138 56.362zm-115.055-85.534a40.737 40.737 0 0140.842-40.842 40.738 40.738 0 0140.842 40.842 40.738 40.738 0 01-40.842 40.842 40.737 40.737 0 01-40.842-40.842z" fill="#fff"/>
+  </g>
+  <path d="M312.051 220.691V93.681h92.251v127.01h-92.251z" stroke="#000" stroke-width=".44"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M329.918 230.548c0 4.097-3.335 7.418-7.45 7.418h-45.395c-4.115 0-7.45-3.321-7.45-7.418V118.357c0-4.097 3.335-7.418 7.45-7.418h45.395c4.115 0 7.45 3.321 7.45 7.418v112.191z" fill="#fff" stroke="#000" stroke-width=".493"/>
+  <path d="M325.71 127.602h-51.914v92.337h51.914v-92.337z" fill="#EB1701" stroke="#000" stroke-width=".247"/>
+  <path clip-rule="evenodd" d="M305.337 122.846c0 .294-.204.532-.454.532h-9.324c-.251 0-.455-.238-.455-.532v-1.197c0-.294.204-.532.455-.532h9.324c.25 0 .454.238.454.532v1.197z" stroke="#000" stroke-width=".247"/>
+  <path d="M300.235 117.861a1.392 1.392 0 10.001-2.783 1.392 1.392 0 00-.001 2.783zm-.447 115.488c2.571 0 4.656-2.076 4.656-4.638s-2.085-4.639-4.656-4.639c-2.572 0-4.657 2.077-4.657 4.639 0 2.562 2.085 4.638 4.657 4.638z" stroke="#000" stroke-width=".247"/>
+  <path d="M325.899 127.391h-52.138v92.691h52.138v-92.691z" fill="#EB1701" stroke="#000" stroke-width=".208"/>
+  <mask id="c" maskUnits="userSpaceOnUse" x="273" y="127" width="53" height="94">
+    <path d="M325.899 127.391h-52.138v92.691h52.138v-92.691z" fill="#0072EE"/>
+  </mask>
+  <g mask="url(#c)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M285.362 39.693c-64.413 0-116.691 52.278-116.691 116.692 0 64.413 52.278 116.691 116.691 116.691 64.414 0 116.692-52.278 116.692-116.691 0-64.414-52.278-116.692-116.692-116.692zm74.214 173.055c-16.686-20.304-57.178-27.189-74.215-27.189-17.037 0-57.529 6.885-74.216 27.189-11.902-15.636-19.137-35.124-19.137-56.362 0-51.46 41.892-93.353 93.353-93.353 51.461 0 93.353 41.893 93.353 93.353 0 21.238-7.235 40.726-19.138 56.362zm-115.055-85.534a40.737 40.737 0 0140.842-40.842 40.738 40.738 0 0140.842 40.842 40.738 40.738 0 01-40.842 40.842 40.737 40.737 0 01-40.842-40.842z" fill="#fff"/>
+  </g>
+  <path d="M273.981 220.689v-93.078h51.698v93.078h-51.698z" stroke="#000" stroke-width=".44"/>
+  <defs>
+    <clipPath id="display-personalDetails-header__clip0">
+      <path fill="#fff" transform="translate(118.022 108.781)" d="M0 0h45.142v13.166H0z"/>
+    </clipPath>
+  </defs>
+</svg>