@4alldigital/foundation-ui--core 3.0.0

package/src/templates/ChallengeLibraryScreen/ChallengeLibraryScreen.stories.tsx

@@ -0,0 +1,171 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import ChallengeLibraryScreen from '.';
+import { CardVariant } from '../../components/Card/Card.types';
+
+const meta: Meta<typeof ChallengeLibraryScreen> = {
+  title: 'TEMPLATES/ChallengeLibraryScreen',
+  component: ChallengeLibraryScreen,
+};
+
+type Story = StoryObj<typeof ChallengeLibraryScreen>;
+
+export const Default: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    testID: 'challenge-library',
+    title: 'Challenge Library',
+    image:
+      'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2023-10/leaner-waistline-day-cover-min_0.jpeg?itok=eipEq-20',
+    onPressCallback: (id: string) => console.log('ChallengeLibraryScreen Card clicked', id),
+    data: [
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: 'a927e183-aad0-4b41-b31b-qwer',
+          title: 'The Yinergy Challenge by Mariel Witmond',
+          image: {
+            src: 'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2023-08/main-min.png?itok=g21nbiph',
+            alt: 'The Yinergy Challenge by Mariel Witmond',
+          },
+          raised: true,
+        },
+      },
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: 'a927e183-aad0-4b41-b31b-wert',
+          title: '7 Days for a Leaner Waistline',
+          image: {
+            src: 'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2023-10/leaner-waistline-day-cover-min_0.jpeg?itok=eipEq-20',
+            alt: '7 Days for a Leaner Waistline',
+          },
+          raised: true,
+        },
+      },
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: 'a927e183-aad0-4b41-b31b-rtyu',
+          title: '12 Days of Fitness',
+          image: {
+            src: 'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2023-05/12-days-fitness-min.png?itok=apL_ikwS',
+            alt: '12 Days of Fitness',
+          },
+          raised: true,
+        },
+      },
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: 'a927e183-aad0-4b41-b31b-tyui',
+          title: 'Just Peachy Challenge',
+          image: {
+            src: 'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2023-05/just-peachy-challenge-min.png?itok=5iAVPtlr',
+            alt: 'Just Peachy Challenge',
+          },
+          raised: true,
+        },
+      },
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: 'a927e183-aad0-4b41-b31b-uiop',
+          title: 'Reset, Sweat, Reflect',
+          image: {
+            src: 'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2023-05/reset-sweat-reflect-min.png?itok=45-6K1DR',
+            alt: 'Reset, Sweat, Reflect',
+          },
+          raised: true,
+        },
+      },
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: 'a927e183-aad0-4b41-b31b-uiop',
+          title: '4.2 Blast Challenge',
+          image: {
+            src: 'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2023-05/4-2-challenge-min.png?itok=2cuj1nXR',
+            alt: '4.2 Blast Challenge',
+          },
+          raised: true,
+        },
+      },
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: 'a927e183-aad0-4b41-b31b-qwer',
+          title: 'The Yinergy Challenge by Mariel Witmond',
+          image: {
+            src: 'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2023-08/main-min.png?itok=g21nbiph',
+            alt: 'The Yinergy Challenge by Mariel Witmond',
+          },
+          raised: true,
+        },
+      },
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: 'a927e183-aad0-4b41-b31b-wert',
+          title: '7 Days for a Leaner Waistline',
+          image: {
+            src: 'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2023-10/leaner-waistline-day-cover-min_0.jpeg?itok=eipEq-20',
+            alt: '7 Days for a Leaner Waistline',
+          },
+          raised: true,
+        },
+      },
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: 'a927e183-aad0-4b41-b31b-rtyu',
+          title: '12 Days of Fitness',
+          image: {
+            src: 'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2023-05/12-days-fitness-min.png?itok=apL_ikwS',
+            alt: '12 Days of Fitness',
+          },
+          raised: true,
+        },
+      },
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: 'a927e183-aad0-4b41-b31b-tyui',
+          title: 'Just Peachy Challenge',
+          image: {
+            src: 'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2023-05/just-peachy-challenge-min.png?itok=5iAVPtlr',
+            alt: 'Just Peachy Challenge',
+          },
+          raised: true,
+        },
+      },
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: 'a927e183-aad0-4b41-b31b-uiop',
+          title: 'Reset, Sweat, Reflect',
+          image: {
+            src: 'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2023-05/reset-sweat-reflect-min.png?itok=45-6K1DR',
+            alt: 'Reset, Sweat, Reflect',
+          },
+          raised: true,
+        },
+      },
+      {
+        variant: CardVariant.MEDIA,
+        data: {
+          id: 'a927e183-aad0-4b41-b31b-uiop',
+          title: '4.2 Blast Challenge',
+          image: {
+            src: 'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2023-05/4-2-challenge-min.png?itok=2cuj1nXR',
+            alt: '4.2 Blast Challenge',
+          },
+          raised: true,
+        },
+      },
+    ],
+  },
+};
+
+export default meta;

package/src/templates/ChallengeLibraryScreen/ChallengeLibraryScreen.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import Screen from '../../components/Screen';
+import { Props } from './ChallengeLibraryScreen.types';
+import DisplayHeading from '../../components/DisplayHeading';
+import Loader from '../../components/Loader';
+import CardGrid from '../../components/CardGrid';
+
+const ChallengeLibraryScreen = ({
+  testID,
+  title,
+  image,
+  data,
+  isLoading,
+  onPressCallback,
+}: Props) => {
+  return (
+    <Screen data-testid={testID || 'ChallengeLibraryScreen'} image={image}>
+      {title && <DisplayHeading text={title} />}
+      {isLoading && (
+        <div className="flex flex-1 min-h-[125px] items-center justify-center">
+          <Loader />
+        </div>
+      )}
+      {data && (
+        <div>
+          <CardGrid data={data} onPressCallback={onPressCallback} />
+        </div>
+      )}
+    </Screen>
+  );
+};
+
+ChallengeLibraryScreen.displayName = 'ChallengeLibraryScreen';
+
+export default ChallengeLibraryScreen;
+export type { Props };

package/src/templates/ChallengeLibraryScreen/ChallengeLibraryScreen.types.ts

@@ -0,0 +1,9 @@
+import { Props as CardProps } from '../../components/Card/Card.types';
+export interface Props {
+  testID?: string;
+  title: string;
+  image?: string;
+  data?: CardProps[];
+  isLoading?: boolean;
+  onPressCallback: (id: string) => void;
+}

package/src/templates/ChallengeLibraryScreen/index.ts

@@ -0,0 +1 @@
+export { default } from './ChallengeLibraryScreen';

package/src/templates/ChallengeScreen/ChallengeScreen.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import ChallengeScreen from '.';
+
+const meta: Meta<typeof ChallengeScreen> = {
+  title: 'TEMPLATES/ChallengeScreen',
+  component: ChallengeScreen,
+};
+
+type Story = StoryObj<typeof ChallengeScreen>;
+
+export const Default: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    testID: 'challenge',
+    hasAccess: true, // false,
+    created: 1691671317,
+    image: 'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2023-08/main-min.png?itok=g21nbiph',
+    body: '<p>Mariel Witmond introduces her 7-day Yin Yoga challenge. In this challenge you will be exploring the chakras through Yin Yoga. The classes will be about 35min each in length. Each gentle posture will help you release tensions and encourage mindfulness. As you go through each class / each chakra, Mariel will be guiding you through these postures with some meditation and will discuss each chakra in details.</p>',
+    price: 700,
+    puchaseLabel: 'Purchase for £7',
+    title: 'The Yinergy ChallengeScreen by Mariel Witmond',
+    onPressCallback: (id: string) => console.log('Card clicked', id),
+    days: [
+      {
+        title: 'Day 1: Root Chakra',
+        image: 'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2023-08/main-min.png?itok=g21nbiph',
+        id: 'day-1',
+      },
+      {
+        title: 'Day 2: Sacral Chakra',
+        image: 'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2023-08/main-min.png?itok=g21nbiph',
+        id: 'day-2',
+      },
+      {
+        title: 'Day 3: Solar Plexus Chakra',
+        image: 'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2023-08/main-min.png?itok=g21nbiph',
+        id: 'day-3',
+      },
+      {
+        title: 'Day 4: Heart Chakra',
+        image: 'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2023-08/main-min.png?itok=g21nbiph',
+        id: 'day-4',
+      },
+      {
+        title: 'Day 5: Throat Chakra',
+        image: 'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2023-08/main-min.png?itok=g21nbiph',
+        id: 'day-5',
+      },
+      {
+        title: 'Day 6: Third Eye Chakra',
+        image: 'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2023-08/main-min.png?itok=g21nbiph',
+        id: 'day-6',
+      },
+      {
+        title: 'Day 7: Crown Chakra',
+        image: 'https://d9r66csa6956h.cloudfront.net/styles/full_16_9/s3/2023-08/main-min.png?itok=g21nbiph',
+        id: 'day-7',
+      },
+    ],
+  },
+};
+
+export default meta;

package/src/templates/ChallengeScreen/ChallengeScreen.tsx

@@ -0,0 +1,88 @@
+import React, { useMemo } from 'react';
+import { format } from 'date-fns';
+import Screen from '../../components/Screen';
+import { Props } from './ChallengeScreen.types';
+import {
+  BTN_VARIANTS,
+  Button,
+  Card,
+  CardVariant,
+  Copy,
+  COPY_SIZE,
+  DisplayHeading,
+  HtmlContent,
+  Label,
+} from '../../components';
+import { useLanguage } from '../../hooks';
+import { DATE_FORMAT } from '../../constants';
+
+const ChallengeScreen = ({
+  testID,
+  title,
+  image,
+  created = 0,
+  body,
+  days,
+  puchaseLabel,
+  hasAccess = false,
+  onPressCallback,
+  purchaseCallback,
+  isLoading,
+}: Props) => {
+  const T = useLanguage();
+  const formattedCreated = useMemo(() => format(new Date(created * 1000), DATE_FORMAT), [created]);
+
+  return (
+    <Screen data-testid={testID || 'ChallengeScreen'} image={image}>
+      <div>
+        {title && <DisplayHeading text={title} />}
+        <Label>
+          {T.UI.CREATED}: {formattedCreated}
+        </Label>
+        {!hasAccess && (
+          <div className="flex flex-col gap-2 mb-4">
+            <Copy bold className="mb-0">
+              {T.GLOBAL.SCREENS.CHALLENGE.NOT_ENTERED_IN_CHALLENGE}
+            </Copy>
+            <Copy className="mb-0">{T.GLOBAL.SCREENS.CHALLENGE.CLICK_TO_ENTER}</Copy>
+            <div>
+              <Button variant={BTN_VARIANTS.PRIMARY} onClick={purchaseCallback} isLoading={isLoading} disabled={isLoading}>
+                {puchaseLabel}
+              </Button>
+            </div>
+            <Copy size={COPY_SIZE.SMALL} className="mb-0">
+              ** {T.GLOBAL.SCREENS.CHALLENGE.PAYMENT_NOTE}
+            </Copy>
+          </div>
+        )}
+      </div>
+      <div>{body && <HtmlContent data={body} />}</div>
+      <div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-4">
+        {days?.map(day => {
+          return (
+            <Card
+              key={day.id}
+              variant={CardVariant.MEDIA}
+              data={{
+                id: day.id,
+                title: day.title,
+                image: {
+                  src: day.image,
+                  alt: day.title,
+                },
+                raised: true,
+                onClick: hasAccess ? () => onPressCallback(day.video) : undefined,
+                accessRestriced: !hasAccess,
+              }}
+            />
+          );
+        })}
+      </div>
+    </Screen>
+  );
+};
+
+ChallengeScreen.displayName = 'ChallengeScreen';
+
+export default ChallengeScreen;
+export type { Props };

package/src/templates/ChallengeScreen/ChallengeScreen.types.ts

@@ -0,0 +1,22 @@
+interface ChallengeDay {
+  title: string;
+  image: string;
+  video: string;
+  id: string;
+}
+
+export interface Props {
+  testID?: string;
+  title: string;
+  image?: string;
+  created?: number;
+  body?: string;
+  days?: ChallengeDay[];
+  hasAccess?: boolean;
+  onPressCallback: (id: string) => void;
+  // Web only props
+  price?: number;
+  puchaseLabel?: string;
+  purchaseCallback: () => void;
+  isLoading?: boolean;
+}

package/src/templates/ChallengeScreen/index.ts

@@ -0,0 +1 @@
+export { default } from './ChallengeScreen';

package/src/templates/ContentScreen/ContentScreen.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import ContentScreen from '.';
+import { formatPages } from '@techstuff-dev/foundation-api-utils';
+
+const meta: Meta<typeof ContentScreen> = {
+  title: 'TEMPLATES/ContentScreen',
+  component: ContentScreen,
+};
+
+type Story = StoryObj<typeof ContentScreen>;
+
+const ESPage = {
+  _index: 'elasticsearch_index_nrgprodcms_pages',
+  _id: 'entity:node/184:en',
+  _score: 1.0,
+  _ignored: ['body.keyword'],
+  _source: {
+    _language: 'en',
+    url: ['/page/privacy-policy'],
+    body: [
+      "<h4>General</h4>\n\n<p>This Privacy Policy applies to the collection, use, storage, and disclosure of customer information by N-RG. By using our website, you consent to the collection and use of information as outlined in this Privacy Policy. We will clearly disclose any exceptions to the Privacy Policy prior to collecting any information from our users.</p>\n\n<p>N-RG may decide to modify or amend this Privacy Policy from time to time. When we do, we will post any changes or new language here.</p>\n\n<p>If you are under 18, please be sure to read this policy with your parents so that you understand how your personal information will be used by N-RG. If you are under 13, please get your parent's or legal guardian's permission before giving us your e-mail address or any personal information.</p>\n\n<p>As used in this privacy policy, the word \"parent\" includes both parents and legal guardians.</p>\n\n<p>Collection and Use of Information from Users 13 and Older</p>\n\n<p>N-RG may collect contact information including your name, address, e-mail address, and other personally identifying information when you place an order or request information through our website. Contact information may be used by N-RG or shared with third parties for the purposes of processing your transaction, including fraud prevention and credit card authorization. Additionally, N-RG may use contact information to notify you about new products, promotions, and special offers that will benefit you, as well as general news about N-RG that may be of interest to you. If you are not interested in receiving this information, please email us at nathalie@n-rg.co.uk and we will remove your name from our mailing lists.</p>\n\n<p>Collection and Use of Information from Users Younger than 13 To the extent N-RG collects information from users who are younger than 13, N-RG complies with the Children's Online Privacy Protection Act (\"COPPA\"). COPPA requires that N-RG inform parents about our collection, use, and disclosure of personal information obtained from children younger than 13, and that we obtain the consent of parents before allowing those children to use certain features of our website.</p>\n\n<p>We may collect a child's personally identifiable information, including names, birthdates, and e-mail addresses, for use in promotions, surveys, requests for suggestions, requests for additional information. For children under 13, we will initially collect only the child's name and e-mail address as well as the parent's e-mail address. Before using a child's personal information for these purposes, we will send the child's parent an e-mail that informs the parent that we wish to collect and use the child's personal information and request the parent's consent to do so. We will also provide the parent a link to access this Privacy Policy, which describes our practices and policies with regard to information collection practices and use of information as required by COPPA. If the parent does not provide consent within two (2) weeks of our request, any information collected online by N-RG will be deleted from N-RG's records.</p>\n\n<p>We may also collect a child's online contact information in connection with the child's request to receive N-RG's newsletter or other e-mail communications from N-RG. In this case, we will also collect the parent's e-mail address and, before the child receives e-mail communication from us, we will notify the parent and allow them to opt out of further use of the information collected from the child.</p>\n\n<p>If N-RG collects information from a child in order to participate in an activity on the website, N-RG will not condition the child's participation on the disclosure of more information than is reasonably necessary to participate in that activity.</p>\n\n<p>Please note that parents can revoke their consent to N-RG 's collection or use of their child's personal information at any time by emailing nathalie@n-rg.co.uk with their request. Parents may also unsubscribe from our newsletters or other e-mail communications by clicking on the unsubscribe link included in those e-mails.</p>\n\n<p>Parents have the right to review their child's personal information in N-RG 's possession upon request; such requests may be submitted to nathalie@n-rg.co.uk .</p>\n\n<p>N-RG does not share a child's personally identifiable information with third parties except in the rare case that the disclosure is reasonable necessary to comply with law, or to protect the security of a child or our web site.</p>\n\n<p>Data Storage To prevent unauthorized access, maintain data accuracy, and ensure the appropriate use of information, N-RG has physical, electronic, and managerial procedures to safeguard and secure the information it collects online.</p>\n\n<p>More Information If you have any questions about anything in this Privacy Policy, or about our collection of personally identifiable information, or information generally, please contact N-RG by email: nathalie@n-rg.co.uk.</p>",
+    ],
+    created: [1578305472],
+    langcode: ['en'],
+    title: ['Privacy Policy'],
+    updated: [1641762291],
+    uuid: ['9bae61e5-549c-4f8d-b348-c4e25ea5e97e'],
+  },
+};
+
+const formattedPage = formatPages([ESPage])[0];
+
+export const Default: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    testID: 'cookies-policy',
+    title: 'Cookies Policy',
+    content:
+      "<h4>What Are Cookies</h4>\n\n<p>As is common practice with almost all professional websites this site uses cookies, which are tiny files that are downloaded to your computer, to improve your experience. This page describes what information they gather, how we use it and why we sometimes need to store these cookies. We will also share how you can prevent these cookies from being stored however this may downgrade or 'break' certain elements of the sites functionality.</p>\n\n<p>For more general information on cookies see the Wikipedia article on HTTP Cookies.</p>\n\n<h4>How We Use Cookies</h4>\n\n<p>We use cookies for a variety of reasons detailed below. Unfortunately in most cases there are no industry standard options for disabling cookies without completely disabling the functionality and features they add to this site. It is recommended that you leave on all cookies if you are not sure whether you need them or not in case they are used to provide a service that you use.</p>\n\n<h4>Disabling Cookies</h4>\n\n<p>You can prevent the setting of cookies by adjusting the settings on your browser (see your browser Help for how to do this). Be aware that disabling cookies will affect the functionality of this and many other websites that you visit. Disabling cookies will usually result in also disabling certain functionality and features of the this site. Therefore it is recommended that you do not disable cookies.</p>\n\n<h4>The Cookies We Set</h4>\n\n<p>Site preferences cookies</p>\n\n<p>* In order to provide you with a great experience on this site we provide the functionality to set your preferences for how this site runs when you use it. In order to remember your preferences we need to set cookies so that this information can be called whenever you interact with a page is affected by your preferences.</p>\n\n<h4>Third Party Cookies</h4>\n\n<p>In some special cases we also use cookies provided by trusted third parties. The following section details which third party cookies you might encounter through this site.</p>\n\n<p>This site uses Google Analytics which is one of the most widespread and trusted analytics solution on the web for helping us to understand how you use the site and ways that we can improve your experience. These cookies may track things such as how long you spend on the site and the pages that you visit so we can continue to produce engaging content. For more information on Google Analytics cookies, see the official Google Analytics page.</p>\n\n<h4>More Information</h4>\n\n<p>Hopefully that has clarified things for you and as was previously mentioned if there is something that you aren't sure whether you need or not it's usually safer to leave cookies enabled in case it does interact with one of the features you use on our site. This Cookies Policy was created with the help of the CookiePolicyGenerator.com</p>\n\n<p>However if you are still looking for more information then you can contact us through one of our preferred contact methods: Email: admin@n-rg.co.uk</p>",
+  },
+};
+
+export const WithImage: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    testID: 'cookies-policy',
+    title: 'Cookies Policy',
+    content:
+      "<h4>What Are Cookies</h4>\n\n<p>As is common practice with almost all professional websites this site uses cookies, which are tiny files that are downloaded to your computer, to improve your experience. This page describes what information they gather, how we use it and why we sometimes need to store these cookies. We will also share how you can prevent these cookies from being stored however this may downgrade or 'break' certain elements of the sites functionality.</p>\n\n<p>For more general information on cookies see the Wikipedia article on HTTP Cookies.</p>\n\n<h4>How We Use Cookies</h4>\n\n<p>We use cookies for a variety of reasons detailed below. Unfortunately in most cases there are no industry standard options for disabling cookies without completely disabling the functionality and features they add to this site. It is recommended that you leave on all cookies if you are not sure whether you need them or not in case they are used to provide a service that you use.</p>\n\n<h4>Disabling Cookies</h4>\n\n<p>You can prevent the setting of cookies by adjusting the settings on your browser (see your browser Help for how to do this). Be aware that disabling cookies will affect the functionality of this and many other websites that you visit. Disabling cookies will usually result in also disabling certain functionality and features of the this site. Therefore it is recommended that you do not disable cookies.</p>\n\n<h4>The Cookies We Set</h4>\n\n<p>Site preferences cookies</p>\n\n<p>* In order to provide you with a great experience on this site we provide the functionality to set your preferences for how this site runs when you use it. In order to remember your preferences we need to set cookies so that this information can be called whenever you interact with a page is affected by your preferences.</p>\n\n<h4>Third Party Cookies</h4>\n\n<p>In some special cases we also use cookies provided by trusted third parties. The following section details which third party cookies you might encounter through this site.</p>\n\n<p>This site uses Google Analytics which is one of the most widespread and trusted analytics solution on the web for helping us to understand how you use the site and ways that we can improve your experience. These cookies may track things such as how long you spend on the site and the pages that you visit so we can continue to produce engaging content. For more information on Google Analytics cookies, see the official Google Analytics page.</p>\n\n<h4>More Information</h4>\n\n<p>Hopefully that has clarified things for you and as was previously mentioned if there is something that you aren't sure whether you need or not it's usually safer to leave cookies enabled in case it does interact with one of the features you use on our site. This Cookies Policy was created with the help of the CookiePolicyGenerator.com</p>\n\n<p>However if you are still looking for more information then you can contact us through one of our preferred contact methods: Email: admin@n-rg.co.uk</p>",
+    image: 'https://picsum.photos/600/400',
+  },
+};
+
+export const PrivacyPolicy: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    testID: 'privacy-policy',
+    updated: 1641762291,
+    image: 'https://picsum.photos/600/400',
+    title: formattedPage.title,
+    content: formattedPage.body,
+  },
+};
+
+export default meta;

package/src/templates/ContentScreen/ContentScreen.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { format } from 'date-fns';
+import Screen from '../../components/Screen';
+import { Props } from './ContentScreen.types';
+import DisplayHeading from '../../components/DisplayHeading';
+import Loader from '../../components/Loader';
+import HtmlContent from '../../components/HtmlContent';
+import Copy from '../../components/Copy';
+import { useLanguage } from '../../hooks';
+import { DATE_TIME_FORMAT } from '../../constants';
+
+const ContentScreen = ({
+  testID,
+  title,
+  image,
+  updated,
+  content,
+  isLoading,
+  isLayoutMinimal = false,
+}: Props) => {
+  const T = useLanguage();
+  const formatUpdatedDate = updated ? format(new Date(updated * 1000), DATE_TIME_FORMAT) : undefined;
+
+  return (
+    <Screen
+      data-testid={testID || 'ContentScreen'}
+      image={image}
+      showHeader={!isLayoutMinimal}
+      showFooter={!isLayoutMinimal}>
+      {isLoading && (
+        <div className="flex flex-1 min-h-[125px] items-center justify-center">
+          <Loader />
+        </div>
+      )}
+      {title && <DisplayHeading text={title} />}
+      {updated && (
+        <div>
+          <Copy>
+            {T?.UI?.UPDATED}: {formatUpdatedDate}
+          </Copy>
+        </div>
+      )}
+      {content && (
+        <div>
+          <HtmlContent data={content} />
+        </div>
+      )}
+    </Screen>
+  );
+};
+
+ContentScreen.displayName = 'ContentScreen';
+
+export default ContentScreen;
+export type { Props };

package/src/templates/ContentScreen/ContentScreen.types.ts

@@ -0,0 +1,9 @@
+export interface Props {
+  testID?: string;
+  title?: string;
+  image?: string;
+  content?: string;
+  updated?: number;
+  isLoading?: boolean;
+  isLayoutMinimal?: boolean;
+}

package/src/templates/ContentScreen/index.ts

@@ -0,0 +1 @@
+export { default } from './ContentScreen';