@4alldigital/foundation-ui--core 3.0.0

package/src/templates/SubscriptionScreen/SubscriptionScreen.stories.tsx

@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import SubscriptionScreen from '.';
+import { Copy } from '../../components';
+
+const meta: Meta<typeof SubscriptionScreen> = {
+  title: 'TEMPLATES/SubscriptionScreen',
+  component: SubscriptionScreen,
+};
+
+type Story = StoryObj<typeof SubscriptionScreen>;
+
+export const Default: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    title: 'Manage Subscription',
+    testID: 'subscription',
+    image: 'https://picsum.photos/600/400',
+    user: {
+      profile: {
+        firstName: 'Joe',
+        lastName: 'Bloggs',
+        email: 'joe.bloggs@example.com',
+        picture: 'https://dpyu2eix72mhm.cloudfront.net/54D17717-343B-4DAA-A2D0-071F8C1F8DF3.jpg',
+        dateOfBirth: '1980-01-01',
+      },
+      subscription: {
+        status: 'Active',
+        plan: 'Premium',
+        price: '$9.99',
+        billingDate: '2024-12-31',
+        cardType: 'Visa',
+        cardNumber: '**** **** **** 1234',
+        cardExpiry: '12/24',
+      },
+    },
+    handleSubscriptionSubmit: values => console.log('handleSubscriptionSubmit', values),
+    subscriptionCallback: () => {
+      // Open mailto link
+      window.location.href = 'mailto:example@example.com?subject=Your%20Subject&body=Your%20message%20here';
+    },
+    subscriptionManagerProps: {
+      description: 'Manage your subscription here.  New subscription include a 7-day free trial.',
+      subscription: {
+        id: '1',
+        status: 'active',
+        plan: 'Premium',
+        price: '£4.50',
+        nextBillingDate: '20th August 2021',
+        endDate: '20th September 2021',
+      },
+      // subscription: undefined,
+      plans: [
+        {
+          id: '1',
+          name: 'Premium',
+          price: '£4.50',
+          icon: 'mdi:rotate-360',
+          description: 'Unlimited Platform Access',
+        },
+        {
+          id: '2',
+          name: 'Premium+',
+          price: '£19.50',
+          icon: 'mdi:camera-flip',
+          description: 'Unlimited On-Demand and Live classes',
+        },
+        {
+          id: '3',
+          name: 'Premium (Annual)',
+          price: '£4.50',
+          icon: 'mdi:rotate-360',
+          description: 'Unlimited Platform Access',
+        },
+        {
+          id: '4',
+          name: 'Premium+ (Annual)',
+          price: '£19.50',
+          icon: 'mdi:camera-flip',
+          description: 'Unlimited On-Demand and Live classes',
+        },
+      ],
+      children: (
+        <div className="flex justify-center gap-4">
+          <Copy>Stripe payment form goes here FROM APP.</Copy>
+        </div>
+      ),
+      pauseSubscriptionCallback: () => console.log('Pause Subscription'),
+      changeSubscriptionCallback: (id: string) => console.log('Change Subscription to: ', id),
+      // contactSupportCallback: () => console.log('Contact Support'),
+      selectedPlanCallback: (planId: string) => console.log('Selected Plan: ', planId),
+      isLoading: false,
+    },
+  },
+};
+
+export default meta;

package/src/templates/SubscriptionScreen/SubscriptionScreen.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import Screen from '../../components/Screen';
+import { Props } from './SubscriptionScreen.types';
+import DisplayHeading from '../../components/DisplayHeading';
+import SubscriptionManager from '../../components/SubscriptionManager';
+import Copy from '../../components/Copy';
+import Button from '../../components/Button';
+import { BTN_VARIANTS } from '../../components/Button/Button.types';
+import { useLanguage } from '../../hooks';
+
+const SubscriptionScreen = ({
+  testID,
+  title,
+  image,
+  // user,
+  // handleSubscriptionSubmit,
+  subscriptionCallback,
+  subscriptionManagerProps,
+}: Props) => {
+  const T = useLanguage();
+
+  return (
+    <Screen data-testid={testID || 'SubscriptionScreen'} image={image}>
+      {title && <DisplayHeading text={title} />}
+      {subscriptionManagerProps && (
+        <div>
+          <SubscriptionManager {...subscriptionManagerProps} />
+        </div>
+      )}
+      {subscriptionCallback && (
+        <div className="flex items-center justify-center">
+          <div className="flex flex-col gap-4 items-center">
+            <Copy>{T?.UI?.NEED_HELP_WITH_SUBSCRIPTION}</Copy>
+            <div>
+              <Button icon="mdi:help" variant={BTN_VARIANTS.SECONDARY} onClick={subscriptionCallback}>
+                {T?.UI?.CONTACT_SUPPORT}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+    </Screen>
+  );
+};
+
+SubscriptionScreen.displayName = 'SubscriptionScreen';
+
+export default SubscriptionScreen;
+export type { Props };

package/src/templates/SubscriptionScreen/SubscriptionScreen.types.ts

@@ -0,0 +1,28 @@
+import { Props as SubscriptionManagerProps } from '../../components/SubscriptionManager/SubscriptionManager.types';
+
+export interface Props {
+  testID?: string;
+  title: string;
+  image?: string;
+  user?: {
+    profile?: {
+      picture?: string;
+      firstName?: string;
+      lastName?: string;
+      dateOfBirth?: string;
+      email: string;
+    };
+    subscription?: {
+      status?: string;
+      plan?: string;
+      price?: string;
+      billingDate?: string;
+      cardType?: string;
+      cardNumber?: string;
+      cardExpiry?: string;
+    };
+  };
+  handleSubscriptionSubmit: (values: any) => void;
+  subscriptionCallback?: () => void;
+  subscriptionManagerProps: SubscriptionManagerProps;
+}

package/src/templates/SubscriptionScreen/index.ts

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

package/src/templates/WorkoutScreen/WorkoutScreen.stories.tsx

@@ -0,0 +1,173 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import { useReducer } from 'react';
+import { ESVideo, formatVideos } from '@techstuff-dev/foundation-api-utils';
+import WorkoutScreen from '.';
+
+function secondsToISO8601(seconds?: number): string {
+  if (!seconds) return '';
+  // Calculate hours, minutes, and remaining seconds
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor((seconds % 3600) / 60);
+  const remainingSeconds = seconds % 60;
+
+  // Build the ISO 8601 duration string
+  let duration = 'PT';
+  if (hours > 0) {
+    duration += `${hours}H`;
+  }
+  if (minutes > 0) {
+    duration += `${minutes}M`;
+  }
+  if (remainingSeconds > 0 || duration === 'PT') {
+    duration += `${remainingSeconds}S`;
+  }
+
+  return duration;
+}
+
+const exampleWorkoutData = {
+  changed: 1716885585,
+  created: 1716885585,
+  description:
+    'Join me for this 45min barre floor class. A full body workout with no cardio element. A great dose of strength training on the mat, ending with a lovely stretch. No props needed for this class.',
+  duration: 'PT45M',
+  duration_filter: 2700,
+  image: 'https://d9r66csa6956h.cloudfront.net/2024-05/Screenshot%202024-05-28%20at%2010.37.16.png',
+  level: 'Beginner-Intermediate',
+  livestream_section: 'Barre Floor',
+  published: true,
+  targeted_section: 'Live Streams',
+  title: 'Barre Floor',
+  uid: 12,
+  uuid: '495c848b-519b-464b-939c-5f0bdee8efbc',
+  video:
+    'https://d227lq76md6ahr.cloudfront.net/ff7a5f88-5d37-40d4-8ca9-0789c32308b9/hls/livestream--barre-floor-21-08-2024.m3u8',
+  video_download:
+    'https://d227lq76md6ahr.cloudfront.net/e25e6d62-d9f5-4adb-863a-fcb4b95c9d3e/mp4/livestream--3-15-legs-abs-stretch--07-07-2024_Mp4_Avc_Aac_16x9_1920x1080p_24Hz_6Mbps_qvbr.mp4',
+  video_poster: 's3://2024-05/Screenshot 2024-05-28 at 10.37.16_0.png',
+  workout_category: 'Live Streams',
+  workout_type: 'Booty',
+};
+
+const ES_VIDEO_DATA = [
+  {
+    _index: 'elasticsearch_index_nrgprodcms_videos',
+    _id: 'entity:node/1049:en',
+    _score: 1.0,
+    sort: [0,1,2],
+    _source: {
+      _language: 'en',
+      image: [
+        'https://assets.nrgbarrebody.app/styles/full_16_9/s3/2023-10/Screenshot%202023-10-21%20at%2010.09.21.png?itok=Qd2g68zD',
+      ],
+      video_poster: [
+        'https://assets.nrgbarrebody.app/styles/full_16_9/s3/2023-10/Screenshot%202023-10-21%20at%2010.09.21_0.png?itok=KRrkt6hx',
+      ],
+      created: [1697875583],
+      description: [
+        '<p>Today we work every single muscle in our core. Last day of our challenge but I also want to say that it should be the first day of the rest of your core training hopefully. Try to integrate 1-2 core-focused workouts per week in your fitness routine, if you can.&nbsp;</p>',
+      ],
+      duration: [1800],
+      section: ['7 days for a leaner waistline'],
+      section_id: [85],
+      title: ['Day 7 - The Leaner Waistline Challenge'],
+      updated: [1697887298],
+      uuid: ['63c30ba9-edff-4142-b341-4a0e08e662d7'],
+      video_url: [
+        'https://d227lq76md6ahr.cloudfront.net/ff7a5f88-5d37-40d4-8ca9-0789c32308b9/hls/livestream--barre-floor-21-08-2024.m3u8',
+      ],
+      video_download: [''],
+    },
+  },
+];
+
+const meta: Meta<typeof WorkoutScreen> = {
+  title: 'TEMPLATES/WorkoutScreen',
+  component: WorkoutScreen,
+};
+
+type Story = StoryObj<typeof WorkoutScreen>;
+
+export const Default: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    id: exampleWorkoutData.uuid,
+    title: exampleWorkoutData.title,
+    description: exampleWorkoutData.description,
+    image: exampleWorkoutData.image,
+    video: exampleWorkoutData.video,
+    videoDownload: exampleWorkoutData.video_download,
+    videoPoster: exampleWorkoutData.video_poster,
+    created: exampleWorkoutData.created,
+    duration: exampleWorkoutData.duration,
+    level: exampleWorkoutData.level,
+    section: exampleWorkoutData.livestream_section,
+    uuid: exampleWorkoutData.uuid,
+    category: exampleWorkoutData.workout_category,
+    type: exampleWorkoutData.workout_type,
+    hasActiveSubscription: true,
+    noSubActionCallback: () => console.log('No subscription action callback'),
+  },
+  render: args => {
+    const [isLiked, setIsLiked] = useReducer(state => !state, false);
+    const [isCompleted, setIsCompleted] = useReducer(state => !state, false);
+    const [isFavourited, setIsFavourited] = useReducer(state => !state, false);
+    return (
+      <WorkoutScreen
+        {...args}
+        likeCallback={setIsLiked}
+        completedCallback={setIsCompleted}
+        favouriteCallback={setIsFavourited}
+        isLiked={isLiked}
+        isCompleted={isCompleted}
+        isFavourite={isFavourited}
+      />
+    );
+  },
+};
+
+const formattedESVideoData = formatVideos(ES_VIDEO_DATA as ESVideo[])?.[0];
+
+export const Video: Story = {
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    isVideo: true,
+    sharePath: 'video',
+    id: formattedESVideoData.uuid,
+    title: formattedESVideoData.title,
+    description: formattedESVideoData.description,
+    image: formattedESVideoData.image,
+    video: formattedESVideoData.video,
+    videoDownload: formattedESVideoData.videoDownload,
+    // videoPoster: exampleWorkoutData.video_poster,
+    created: formattedESVideoData.created,
+    duration: secondsToISO8601(formattedESVideoData.duration),
+    // level: exampleWorkoutData.level,
+    // section: exampleWorkoutData.livestream_section,
+    // uuid: exampleWorkoutData.uuid,
+    // category: exampleWorkoutData.workout_category,
+    // type: exampleWorkoutData.workout_type,
+    hasActiveSubscription: true,
+    htmlDetails: true,
+    noSubActionCallback: () => console.log('No subscription action callback'),
+  },
+  render: args => {
+    const [isLiked, setIsLiked] = useReducer(state => !state, false);
+    const [isCompleted, setIsCompleted] = useReducer(state => !state, false);
+    return (
+      <WorkoutScreen
+        {...args}
+        likeCallback={setIsLiked}
+        completedCallback={setIsCompleted}
+        isLiked={isLiked}
+        isCompleted={isCompleted}
+      />
+    );
+  },
+};
+
+export default meta;

package/src/templates/WorkoutScreen/WorkoutScreen.tsx

@@ -0,0 +1,230 @@
+import React, { useMemo } from 'react';
+import { toast } from 'react-toastify';
+import Screen from '../../components/Screen';
+import { format } from 'date-fns';
+import { Props } from './WorkoutScreen.types';
+import {
+  Button,
+  Container,
+  Copy,
+  DisplayHeading,
+  Heading,
+  HEADING_TAGS,
+  HtmlContent,
+  Label,
+} from '../../components';
+import { useLanguage } from '../../hooks';
+import { formatDuration } from '../../utils';
+import { DATE_FORMAT } from '../../constants';
+// import { VideoPlayerMethods } from '../../components/Video/Video';
+import FullScreenVideoModal from '../../components/FullScreenVideoModal';
+
+const WorkoutScreen = ({
+  testID,
+  id,
+  title,
+  image,
+  description,
+  created = 0,
+  duration = 'PT0M',
+  level,
+  section,
+  // uuid,
+  video,
+  videoType = 'application/x-mpegURL', // 'video/mp4',
+  category,
+  type,
+  likeCallback,
+  completedCallback,
+  favouriteCallback,
+  isLiked,
+  // isCompleted,
+  isFavourite,
+  relatedWorkouts,
+  // isLoading,
+  hasActiveSubscription,
+  htmlDetails,
+  noSubActionCallback,
+  numCompleted = '0',
+}: Props) => {
+  const T = useLanguage();
+  // const [videoAudioTrack, setVideoAudioTrack] = React.useState<number>(2);
+  // const videoRef = React.useRef<VideoPlayerMethods>(null);
+  const [launchVideoModal, setLaunchVideo] = React.useState<boolean>(false);
+
+  const formattedCreated = useMemo(() => format(new Date(created * 1000), DATE_FORMAT), [created]);
+  const formattedDuration = useMemo(() => formatDuration(duration), [duration]);
+
+  const startVideo = () => {
+    // setLaunchVideo(true);
+    // videoRef.current.play();
+    // videoRef.current.fullscreen();
+    setLaunchVideo(true);
+  };
+
+  const handleLikeClicked = () => {
+    if (id && likeCallback && typeof likeCallback === 'function') {
+      likeCallback(id);
+      toast.info(isLiked ? T.UI.REMOVED_LIKE : T.UI.ADDED_LIKE);
+    }
+  };
+
+  const handleFavouriteClicked = () => {
+    if (id && favouriteCallback && typeof favouriteCallback === 'function') {
+      favouriteCallback(id);
+      toast.info(isFavourite ? T.UI.REMOVED_FAVORITE : T.UI.ADDED_FAVORITE);
+    }
+  };
+
+  const handleCompletedClicked = () => {
+    if (id && completedCallback && typeof completedCallback === 'function') {
+      completedCallback(id);
+      // toast.info(isCompleted ? T.UI.MARKED_INCOMPLETE : T.UI.MARKED_COMPLETE);
+      toast.info(T.UI.MARKED_COMPLETE);
+    }
+  };
+
+  // Toggle track between 0 and 2
+  // const handleSelectAudioTrack = () => {
+  //   setVideoAudioTrack(videoAudioTrack === 0 ? 2 : 0);
+  //   toast.info(videoAudioTrack === 0 ? T.UI.MUSIC_DISABLED : T.UI.MUSIC_ENABLED);
+  // };
+
+  return (
+    <Screen data-testid={testID || 'WorkoutScreen'} image={image}>
+      <div>
+        {title && <DisplayHeading text={title} />}
+        <div>
+          <Label>
+            {T.UI.CREATED}: {formattedCreated}
+          </Label>
+        </div>
+        <div>
+          <Label>
+            {T.UI.DURATION}: {formattedDuration}
+          </Label>
+        </div>
+      </div>
+      {!hasActiveSubscription && (
+        <div>
+          <Heading tag={HEADING_TAGS.H4}>{T.UI.NO_ACTIVE_SUBSCRIPTION}</Heading>
+          <Copy>{T?.UI?.NO_SUBSCRIPTION_DETAILS}</Copy>
+          {noSubActionCallback && (
+            <Button rounded onClick={noSubActionCallback} icon="mdi:arrow-right-circle-outline">
+              {T.UI.SUBSCRIBE}
+            </Button>
+          )}
+        </div>
+      )}
+      <div>
+        <Button onClick={startVideo} icon="mdi:play" iconFirst disabled={!hasActiveSubscription}>
+          {T.UI.START_WORKOUT}
+        </Button>
+      </div>
+      <div className="flex gap-2">
+        {/* <div>
+          <Button icon="playlist-plus" onClick={() => console.log('trigger playlist')} />
+        </div> */}
+        {likeCallback && (
+          <div>
+            <Button
+              onClick={handleLikeClicked}
+              icon={isLiked ? 'mdi:heart' : 'mdi:heart-outline'}
+              disabled={!hasActiveSubscription}
+              rounded
+            />
+          </div>
+        )}
+        {favouriteCallback && (
+          <div>
+            <Button
+              onClick={handleFavouriteClicked}
+              icon={isFavourite ? 'mdi:bookmark' : 'mdi:bookmark-outline'}
+              disabled={!hasActiveSubscription}
+              rounded
+            />
+          </div>
+        )}
+        {completedCallback && (
+          <div>
+            <Button rounded onClick={handleCompletedClicked} icon="mdi:plus" disabled={!hasActiveSubscription}>
+              {numCompleted}
+            </Button>
+          </div>
+        )}
+        {/* <div>
+          <Button
+            onClick={handleSelectAudioTrack}
+            icon={videoAudioTrack === 2 ? 'mdi:music-note-off' : 'mdi:music-note'}
+            disabled={!hasActiveSubscription}
+            rounded
+          />
+        </div> */}
+      </div>
+      {!htmlDetails && description && (
+        <div>
+          <Copy>{description}</Copy>
+        </div>
+      )}
+      {htmlDetails && description && (
+        <div>
+          <HtmlContent data={description} />
+        </div>
+      )}
+
+      <div className="flex gap-4 flex-wrap">
+        {level && (
+          <Label>
+            {T.UI.LEVEL}: {level}
+          </Label>
+        )}
+        {section && (
+          <Label>
+            {T.UI.SECTION}: {section}
+          </Label>
+        )}
+        {category && (
+          <Label>
+            {T.UI.CATEGORY}: {category}
+          </Label>
+        )}
+        {type && (
+          <Label>
+            {T.UI.TYPE}: {type}
+          </Label>
+        )}
+      </div>
+      {relatedWorkouts && (
+        <>
+          <Container isNarrow padded>
+            <div>
+              <Heading>{T?.UI?.RELATED}</Heading>
+            </div>
+          </Container>
+        </>
+      )}
+      <div>
+        {launchVideoModal && (
+          <FullScreenVideoModal
+            modalOpen={launchVideoModal}
+            onCloseCallback={() => setLaunchVideo(false)}
+            videoProps={{
+              sources: [
+                {
+                  src: video,
+                  type: videoType,
+                },
+              ],
+              isModal: true,
+            }}
+          />
+        )}
+      </div>
+    </Screen>
+  );
+};
+
+WorkoutScreen.displayName = 'WorkoutScreen';
+
+export default WorkoutScreen;
+export type { Props };

package/src/templates/WorkoutScreen/WorkoutScreen.types.ts

@@ -0,0 +1,34 @@
+export interface Props {
+  testID?: string;
+  title?: string;
+  image?: string;
+  id?: string;
+  uuid?: string;
+  description?: string;
+  created?: number;
+  duration?: string;
+  level?: string;
+  section?: string;
+  video: string;
+  videoType?: string;
+  videoPoster?: string;
+  videoDownload?: string;
+  category?: string;
+  type?: string;
+  // React Native Only
+  isVideo?: boolean;
+  sharePath?: string;
+  shareMessage?: string;
+  likeCallback?: (id: string) => void;
+  isLiked?: boolean;
+  completedCallback?: (id: string) => void;
+  isCompleted?: boolean;
+  favouriteCallback?: (id: string) => void;
+  isFavourite?: boolean;
+  relatedWorkouts?: any[]; // TODO: is this an array of IDs or Data?
+  isLoading?: boolean;
+  hasActiveSubscription?: boolean;
+  htmlDetails?: boolean;
+  noSubActionCallback?: () => void;
+  numCompleted?: string;
+}

package/src/templates/WorkoutScreen/index.ts

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

package/src/templates/index.ts

@@ -0,0 +1,40 @@
+export { default as AccountScreen } from './AccountScreen';
+export { default as AuthScreen } from './AuthScreen';
+export { default as CardGridScreen } from './CardGridScreen';
+export { default as CatalogueScreen } from './CatalogueScreen';
+export { default as ChallengeLibraryScreen } from './ChallengeLibraryScreen';
+export { default as ChallengeScreen } from './ChallengeScreen';
+export { default as ContentScreen } from './ContentScreen';
+export { default as DashboardScreen } from './DashboardScreen';
+export { default as FAQScreen } from './FAQScreen';
+export { default as HomeScreen } from './HomeScreen';
+export { default as LogoutScreen } from './LogoutScreen';
+export { default as MenuScreen } from './MenuScreen';
+export { default as NotFoundScreen } from './NotFoundScreen';
+export { default as PasswordResetScreen } from './PasswordResetScreen';
+export { default as PasswordResetAuthScreen } from './PasswordResetAuthScreen';
+export { default as ProfileScreen } from './ProfileScreen';
+export { default as ScheduleScreen } from './ScheduleScreen';
+export { default as SubscriptionScreen } from './SubscriptionScreen';
+export { default as WorkoutScreen } from './WorkoutScreen';
+
+// Props
+export type { Props as AccountScreenProps } from './AccountScreen/AccountScreen.types';
+export type { Props as AuthScreenProps } from './AuthScreen/AuthScreen.types';
+export type { Props as CardGridScreenProps } from './CardGridScreen/CardGridScreen.types';
+export type { Props as CatalogueScreenProps } from './CatalogueScreen/CatalogueScreen.types';
+export type { Props as ChallengeLibraryScreenProps } from './ChallengeLibraryScreen/ChallengeLibraryScreen.types';
+export type { Props as ChallengeScreenProps } from './ChallengeScreen/ChallengeScreen.types';
+export type { Props as ContentScreenProps } from './ContentScreen/ContentScreen.types';
+export type { Props as DashboardScreenProps } from './DashboardScreen/DashboardScreen.types';
+export type { Props as FAQScreenProps } from './FAQScreen/FAQScreen.types';
+export type { Props as HomeScreenProps } from './HomeScreen/HomeScreen.types';
+export type { Props as LogoutScreenProps } from './LogoutScreen/LogoutScreen.types';
+export type { Props as MenuScreenProps } from './MenuScreen/MenuScreen.types';
+export type { Props as NotFoundScreenProps } from './NotFoundScreen/NotFoundScreen.types';
+export type { Props as PasswordResetScreenProps } from './PasswordResetScreen/PasswordResetScreen.types';
+export type { Props as PasswordResetAuthScreenProps } from './PasswordResetAuthScreen/PasswordResetAuthScreen.types';
+export type { Props as ProfileScreenProps } from './ProfileScreen/ProfileScreen.types';
+export type { Props as ScheduleScreenProps } from './ScheduleScreen/ScheduleScreen.types';
+export type { Props as SubscriptionScreenProps } from './SubscriptionScreen/SubscriptionScreen.types';
+export type { Props as WorkoutScreenProps } from './WorkoutScreen/WorkoutScreen.types';