@newskit-render/core 1.5.2 → 1.11.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "1.5.2",
+  "version": "1.11.3",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -28,23 +28,22 @@
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
-    "@newskit-render/api": "^0.4.1",
-    "@newskit-render/auth": "^0.22.1",
-    "@newskit-render/checkout": "^0.6.2",
-    "@newskit-render/my-account": "^0.110.2",
-    "@newskit-render/shared-components": "^0.14.0",
-    "@newskit-render/sitemap": "^0.25.1",
-    "@newskit-render/validation": "^0.26.1",
+    "@newskit-render/api": "^0.6.0",
+    "@newskit-render/auth": "^0.23.0",
+    "@newskit-render/checkout": "^0.12.0",
+    "@newskit-render/my-account": "^0.119.0",
+    "@newskit-render/shared-components": "^0.22.0",
+    "@newskit-render/sitemap": "^0.26.0",
+    "@newskit-render/validation": "^0.28.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",
     "react-helmet": "^6.1.0",
-    "react-hook-form": "7.8.4",
-    "striptags": "^3.1.1"
+    "react-hook-form": "7.8.4"
   },
   "devDependencies": {
     "@apollo/react-testing": "^4.0.0",

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>

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

@@ -0,0 +1,90 @@
+<svg width="560" height="315" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect width="560" height="315" rx="4" fill="#F5F5F5"/>
+  <ellipse cx="282.623" cy="241.819" rx="137.962" ry="40.386" fill="#EEE"/>
+  <g opacity=".3">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M385.789 115.327l-1.949 2.096 2.86.262 1.403 2.488 1.135-2.621 2.816-.557-2.159-1.881.337-2.834-2.468 1.458-2.608-1.193.633 2.782z" fill="#01000D"/>
+    <path d="M361.923 92.014c-2.619-.697-5.306.848-6.006 3.443-.7 2.596.85 5.268 3.469 5.965 2.619.698 5.306-.847 6.006-3.442.7-2.596-.85-5.269-3.469-5.966zm9.657 18.14a1.661 1.661 0 00-2.034 1.165 1.647 1.647 0 001.176 2.019 1.66 1.66 0 002.034-1.164 1.649 1.649 0 00-1.176-2.02z" stroke="#01000D"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M382.223 85.906l-4.262.616 3.084 2.987-.728 4.217 3.812-1.991 3.812 1.991-.728-4.217 3.085-2.987-4.263-.616-1.906-3.837-1.906 3.837z" fill="#01000D"/>
+    <ellipse rx="4.298" ry="4.322" transform="matrix(.2604 -.9655 -.96635 -.25725 371.55 69.594)" fill="#01000D"/>
+  </g>
+  <g opacity=".3">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M153.891 187.154l.633-2.783-2.608 1.194-2.468-1.458.336 2.833-2.158 1.881 2.816.558 1.134 2.62 1.404-2.488 2.859-.262-1.948-2.095z" fill="#01000D"/>
+    <path d="M176.044 198.455a1.788 1.788 0 001.274-2.191 1.803 1.803 0 00-2.207-1.265 1.79 1.79 0 00-1.274 2.192 1.802 1.802 0 002.207 1.264zm-8.61-22.217a1.648 1.648 0 001.175-2.019 1.662 1.662 0 00-2.034-1.166 1.648 1.648 0 00-1.175 2.02 1.66 1.66 0 002.034 1.165z" stroke="#01000D"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M194.786 176.615l3.381-2.65-4.174-1.055-1.492-4.014-2.299 3.618-4.304.17 2.753 3.29-1.168 4.119 4.001-1.584 3.582 2.376-.28-4.27z" fill="#01000D"/>
+    <ellipse rx="4.304" ry="4.316" transform="matrix(.26003 .96413 .9677 -.25761 196.957 204.403)" fill="#01000D"/>
+  </g>
+  <g filter="url(#display-personalDetails-header__filter0_i)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M218.65 49c0-7.732 6.268-14 14-14h96.057c7.732 0 14 6.268 14 14v190.233c0 7.732-6.268 14-14 14H232.65c-7.732 0-14-6.268-14-14V49z" fill="#2B80AA"/>
+  </g>
+  <g filter="url(#display-personalDetails-header__filter1_i)">
+    <ellipse cx="289.786" cy="45.743" rx="1.707" ry="1.696" fill="#069"/>
+  </g>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M224.34 50.652c0-5.523 4.477-10 10-10h15.283a2 2 0 012 2v1.177a7 7 0 007 7h44.164a7 7 0 007-7v-1.177a2 2 0 012-2h15.228c5.523 0 10 4.477 10 10v186.926c0 5.523-4.477 10-10 10H234.34c-5.523 0-10-4.477-10-10V50.652z" fill="#EEE"/>
+  <g filter="url(#display-personalDetails-header__filter2_d)">
+    <rect x="228.895" y="61.01" width="103.57" height="166.219" rx="1" fill="#fff"/>
+  </g>
+  <g filter="url(#display-personalDetails-header__filter3_i)">
+    <rect x="269.865" y="44.047" width="15.934" height="3.392" rx="1.5" fill="#069"/>
+  </g>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M243.106 150.336a1.696 1.696 0 100 3.392h74a1.696 1.696 0 100-3.392h-74zm-.002 9.044a1.696 1.696 0 000 3.392h56.929a1.696 1.696 0 100-3.392h-56.929zm-1.696 10.741c0-.937.76-1.697 1.696-1.697h63.758a1.696 1.696 0 010 3.393h-63.758c-.936 0-1.696-.76-1.696-1.696zm1.696 7.352a1.696 1.696 0 000 3.392h56.929a1.696 1.696 0 100-3.392h-56.929z" fill="#E4E4E4"/>
+  <ellipse opacity=".5" cx="280.444" cy="106.692" rx="24.47" ry="24.311" fill="#EEE"/>
+  <mask id="a" maskUnits="userSpaceOnUse" x="256" y="82" width="50" height="50">
+    <ellipse cx="280.682" cy="106.801" rx="24.47" ry="24.311" fill="#EEE"/>
+  </mask>
+  <g mask="url(#a)">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M280.679 109.629c4.714 0 8.536-3.797 8.536-8.48 0-4.684-3.822-8.481-8.536-8.481-4.715 0-8.536 3.797-8.536 8.481 0 4.683 3.821 8.48 8.536 8.48zm.57 36.181c9.428 0 17.072-7.594 17.072-16.961 0-9.368-7.644-16.961-17.072-16.961-9.429 0-17.072 7.593-17.072 16.961 0 9.367 7.643 16.961 17.072 16.961z" fill="#01000D"/>
+  </g>
+  <g filter="url(#display-personalDetails-header__filter4_d)">
+    <circle cx="296.93" cy="124.979" r="8" fill="#fff"/>
+  </g>
+  <ellipse cx="334.716" cy="235.709" rx="31.299" ry="31.095" fill="#2B80AA"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M348.817 226.238c1.287 1.191 1.287 3.124 0 4.315l-15.318 14.18c-1.931 1.788-5.061 1.788-6.992 0l-5.899-5.46c-1.287-1.192-1.287-3.124 0-4.316 1.287-1.192 3.375-1.192 4.662 0l4.733 4.381 14.152-13.1c1.287-1.192 3.374-1.192 4.662 0z" fill="#fff"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M299.075 128.875h-4.043v-.092l1.128-.477v-5.866h-.009s-.333-.003-.639.068c-.147.045-.315.092-.545.28a87.607 87.607 0 00-1.431 1.293l-.13-.045.18-1.911h6.791l.225 1.911-.129.045s-1.202-1.104-1.431-1.293c-.23-.188-.398-.236-.545-.28-.306-.071-.571-.063-.571-.063l.001.004v5.857l1.145.47.003.099z" fill="#01000D"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M299.075 128.778h-4.043v-.091l1.128-.471v-5.794h-.009s-.333-.003-.639.068c-.147.044-.315.09-.545.277a84.863 84.863 0 00-1.431 1.276l-.13-.044.18-1.888h6.791l.225 1.888-.129.044s-1.202-1.09-1.431-1.277c-.23-.186-.398-.233-.545-.276-.306-.07-.571-.063-.571-.063l.001.004v5.785l1.145.464.003.098z" fill="#000"/>
+  <defs>
+    <filter id="display-personalDetails-header__filter0_i" x="218.65" y="35" width="124.057" height="218.233" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dx="3"/>
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+      <feColorMatrix values="0 0 0 0 0.854902 0 0 0 0 0.866667 0 0 0 0 0.890196 0 0 0 0.5 0"/>
+      <feBlend in2="shape" result="effect1_innerShadow"/>
+    </filter>
+    <filter id="display-personalDetails-header__filter1_i" x="288.079" y="44.047" width="3.414" height="3.392" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dx="1"/>
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+      <feColorMatrix values="0 0 0 0 0.827451 0 0 0 0 0.835294 0 0 0 0 0.858824 0 0 0 0.5 0"/>
+      <feBlend in2="shape" result="effect1_innerShadow"/>
+    </filter>
+    <filter id="display-personalDetails-header__filter2_d" x="228.895" y="61.01" width="105.57" height="169.219" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dx="2" dy="3"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+    <filter id="display-personalDetails-header__filter3_i" x="269.865" y="44.047" width="15.934" height="3.392" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dx="1"/>
+      <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
+      <feColorMatrix values="0 0 0 0 0.827451 0 0 0 0 0.835294 0 0 0 0 0.858824 0 0 0 0.5 0"/>
+      <feBlend in2="shape" result="effect1_innerShadow"/>
+    </filter>
+    <filter id="display-personalDetails-header__filter4_d" x="284.93" y="114.979" width="24" height="24" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
+      <feOffset dy="2"/>
+      <feGaussianBlur stdDeviation="2"/>
+      <feColorMatrix values="0 0 0 0 0.0392157 0 0 0 0 0.0392157 0 0 0 0 0.0392157 0 0 0 0.08 0"/>
+      <feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
+      <feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
+    </filter>
+  </defs>
+</svg>