@mindly/ui-components 3.1.4 → 3.1.6

package/dist/lib/consultation-card/ConsultationCard.test.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ConsultationCard, DateTimeType } from './ConsultationCard';
+import { DateTime } from 'luxon';
+
+describe('Test consultation card', () => {
+  test('Smoke test', () => {
+    render(
+      <ConsultationCard
+        startConsultation={() => undefined}
+        handleReschedule={() => undefined}
+        handleRefund={() => undefined}
+        consultationWith="Елена Шимановская"
+        avatar=""
+        autorecord
+        userTimeZone="America/New_York"
+        consultationTime={
+          {
+            _seconds: DateTime.now().toSeconds(),
+            _nanoseconds: 0,
+          } as DateTimeType
+        }
+      />
+    );
+  });
+
+  test('Text all handle clicks', () => {
+    const startConsultation = jest.fn();
+    const handleRefund = jest.fn();
+
+    render(
+      <ConsultationCard
+        startConsultation={() => startConsultation()}
+        handleReschedule={() => undefined}
+        handleRefund={() => handleRefund()}
+        consultationWith="Елена Шимановская"
+        avatar=""
+        autorecord
+        userTimeZone="America/New_York"
+        consultationTime={
+          {
+            _seconds: DateTime.now().toSeconds(),
+            _nanoseconds: 0,
+          } as DateTimeType
+        }
+      />
+    );
+
+    const refundButton = screen.getByText('Відмінити');
+    const startConsultationButton = screen.getByText('Почати консультацію');
+    expect(startConsultation).toHaveBeenCalledTimes(0);
+    expect(handleRefund).toHaveBeenCalledTimes(0);
+
+    startConsultationButton.click();
+    expect(startConsultation).toHaveBeenCalledTimes(1);
+    expect(handleRefund).toHaveBeenCalledTimes(0);
+
+    expect(startConsultation).toHaveBeenCalledTimes(1);
+    expect(handleRefund).toHaveBeenCalledTimes(0);
+
+    refundButton.click();
+    expect(startConsultation).toHaveBeenCalledTimes(1);
+    expect(handleRefund).toHaveBeenCalledTimes(1);
+  });
+});

package/dist/lib/consultation-card/ConsultationCard.tsx

@@ -0,0 +1,155 @@
+import React from 'react';
+import {
+  ButtonContainer,
+  ButtonsContainer,
+  Container,
+  DividersContainer,
+  InfoContainer,
+  TextInfo,
+} from './ConsultationCard.style';
+import { Button } from '../button/Button';
+import '../Theme/global.css';
+import { DateTime } from 'luxon';
+import { Avatar } from '../Avatar';
+
+export enum DayOfWeeks {
+  'Понеділок' = 1,
+  'Вівторок',
+  'Середа',
+  'Четверг',
+  "П'ятниця",
+  'Субота',
+  'Неділя',
+}
+
+export type DateTimeType = {
+  _nanoseconds: number;
+  _seconds: number;
+};
+
+export interface ConsultationCardProps {
+  /*
+   * Here you need to pass a function to start consultation
+   */
+  startConsultation: (props?: React.SyntheticEvent) => void;
+
+  /*
+   * Function for refund consultation
+   */
+  handleReschedule: (props?: React.SyntheticEvent) => void;
+
+  /*
+   * Function for refund consultation
+   */
+  handleRefund: (props?: React.SyntheticEvent) => void;
+  handleNotes?: (props?: React.SyntheticEvent) => void;
+
+  /*
+   * Psychologist name and last name
+   */
+  consultationWith: string;
+
+  consultationTime: DateTimeType;
+  userTimeZone: string;
+
+  /*
+   * Psychologist avatar link
+   */
+  avatar: string;
+  autorecord?: boolean;
+
+  ['data-container-testid']?: string;
+  ['data-start-testid']?: string;
+  ['data-reschedule-testid']?: string;
+  ['data-refund-testid']?: string;
+}
+
+export const ConsultationCard: React.FC<ConsultationCardProps> = ({
+  startConsultation,
+  handleReschedule,
+  handleRefund,
+  consultationWith,
+  consultationTime,
+  userTimeZone,
+  avatar,
+  autorecord = false,
+  ...props
+}) => {
+  const time = DateTime.fromSeconds(consultationTime._seconds)
+    .setZone(userTimeZone)
+    .setLocale('uk-UK');
+  const finishedTime = DateTime.fromSeconds(consultationTime._seconds)
+    .setZone(userTimeZone)
+    .setLocale('uk-UK')
+    .plus({ minute: 50 });
+  const currentTime = DateTime.now().setZone(userTimeZone).setLocale('uk-UK');
+
+  return (
+    <Container data-testid={props['data-container-testid']}>
+      <InfoContainer>
+        <TextInfo>
+          <h3>Консультація з {consultationWith}</h3>
+          {autorecord && <span>Автозапис</span>}
+          <h2 className="time">
+            {currentTime.toSeconds() <= finishedTime.toSeconds() ? (
+              <>
+                {DayOfWeeks[time.weekday]}
+                <br />
+              </>
+            ) : (
+              <>
+                Відбулась <br />
+              </>
+            )}
+            {time.toLocaleString({
+              month: 'long',
+              day: 'numeric',
+            })}{' '}
+            о {time.toFormat('HH:mm')}
+          </h2>
+        </TextInfo>
+        <Avatar
+          src={avatar}
+          dimensions={104}
+          firstName={consultationWith}
+          className="person-avatar"
+        />
+      </InfoContainer>
+      {currentTime.toSeconds() <= finishedTime.toSeconds() && (
+        <ButtonsContainer>
+          <Button
+            buttonType="primary"
+            isDisabled={false}
+            data-testid={props['data-start-testid']}
+            onClick={startConsultation} // # skipcq JS-0411
+          >
+            Почати консультацію
+          </Button>
+          <DividersContainer>
+            <div className="divider" />
+            <h4>чи</h4>
+            <div className="divider" />
+          </DividersContainer>
+          <ButtonContainer>
+            <Button
+              buttonType="secondaryCancel"
+              isDisabled={false}
+              onClick={handleRefund}
+              data-testid={props['data-refund-testid']}
+            >
+              Відмінити
+            </Button>
+            <Button
+              buttonType="secondary"
+              isDisabled={false}
+              onClick={handleReschedule}
+              data-testid={props['data-refund-testid']}
+            >
+              Перенести
+            </Button>
+          </ButtonContainer>
+        </ButtonsContainer>
+      )}
+    </Container>
+  );
+};

package/dist/lib/consultation-card/ConsultationCardSkeleton.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import { IonSkeletonText } from '@ionic/react';
+import {
+  ButtonContainer,
+  Container,
+  InfoContainer,
+  TextInfo,
+} from './ConsultationCard.style';
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const ConsultationCardSkeleton = () => {
+  return (
+    <Container>
+      <InfoContainer style={{ marginBottom: '16px' }}>
+        <TextInfo style={{ padding: '6px 0' }}>
+          <IonSkeletonText
+            animated
+            style={{
+              width: '159px',
+              height: '10px',
+              borderRadius: '4px',
+              margin: '0',
+            }}
+          />
+          <IonSkeletonText
+            animated
+            style={{
+              width: '69px',
+              height: '10px',
+              borderRadius: '4px',
+              margin: '0',
+            }}
+          />
+          <IonSkeletonText
+            animated
+            style={{
+              width: '74px',
+              height: '14px',
+              borderRadius: '4px',
+              margin: '0',
+            }}
+          />
+          <IonSkeletonText
+            animated
+            style={{
+              width: '57px',
+              height: '11px',
+              borderRadius: '4px',
+              margin: '0',
+            }}
+          />
+          <IonSkeletonText
+            animated
+            style={{
+              width: '118px',
+              height: '11px',
+              borderRadius: '4px',
+              margin: '0',
+            }}
+          />
+        </TextInfo>
+        <IonSkeletonText
+          animated
+          style={{
+            width: '104px',
+            height: '104px',
+            borderRadius: '8px',
+            margin: '0',
+          }}
+        />
+      </InfoContainer>
+      <IonSkeletonText
+        animated
+        style={{
+          width: '100%',
+          height: '40px',
+          borderRadius: '4px',
+          margin: '0 0 20px 0',
+        }}
+      />
+      <IonSkeletonText
+        animated
+        style={{
+          width: '100%',
+          height: '7px',
+          borderRadius: '4px',
+          margin: '0 0 17px 0',
+        }}
+      />
+      <ButtonContainer
+        style={{ justifyContent: 'space-around', paddingBottom: '13px' }}
+      >
+        <IonSkeletonText
+          animated
+          style={{
+            width: '68px',
+            height: '14px',
+            borderRadius: '4px',
+            margin: '0',
+          }}
+        />
+        <IonSkeletonText
+          animated
+          style={{
+            width: '76px',
+            height: '14px',
+            borderRadius: '4px',
+            margin: '0',
+          }}
+        />
+      </ButtonContainer>
+    </Container>
+  );
+};

package/dist/lib/consultation-card/index.ts

@@ -0,0 +1,2 @@
+export * from './ConsultationCard';
+export * from './ConsultationCardSkeleton';

package/dist/lib/content-card/ContentCard.style.ts

@@ -0,0 +1,59 @@
+import styled from 'styled-components';
+import { colorConstants } from '../Theme/mindly_constants';
+import { IonSkeletonText } from '@ionic/react';
+
+export const Container = styled.div`
+  border: 1px solid ${colorConstants.StrokeGray};
+  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+`;
+
+export const ContentArticle = styled.a`
+  width: 100%;
+  min-height: 192px;
+  max-height: 192px;
+  display: block;
+
+  img {
+    border-radius: 8px 8px 0 0;
+    width: 100%;
+    height: 192px;
+  }
+`;
+
+export const ContentVideo = styled.iframe`
+  width: 100%;
+  height: 192px;
+  margin: 0;
+  padding: 0;
+  border-radius: 8px 8px 0 0;
+`;
+
+export const Title = styled.h3`
+  padding: 16px !important;
+  height: 104px;
+  color: ${colorConstants.primaryTextColor};
+`;
+
+interface SkeletonProps {
+  isLoading: boolean;
+}
+
+export const SkeletonWrapper = styled.div<SkeletonProps>`
+  visibility: ${(props) => (props.isLoading ? 'visible' : 'hidden')};
+  position: absolute;
+  width: 100%;
+  top: 0;
+`;
+
+export const Skeleton = styled(IonSkeletonText)`
+  height: 192px;
+  border-radius: 4px 4px 0 0;
+  border: none;
+  margin: 0;
+  padding: 0;
+`;

package/dist/lib/content-card/ContentCard.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ContentCard } from './ContentCard';
+
+describe('Test content card', () => {
+  test('Smoke test video', () => {
+    render(
+      <ContentCard
+        contentVideo={{
+          title: 'КАК ВЫЙТИ ИЗ ДЕПРЕССИИ: СОВЕТЫ ПСИХОЛОГА',
+          url: 'watch?v=GnrkrxNL1Ek',
+        }}
+      />
+    );
+  });
+
+  test('Smoke test articles', () => {
+    render(
+      <ContentCard
+        contentArticle={{
+          link: 'https://ru.mindly.cc/our-thoughts-our-friends-or-enemies/',
+          photoURL:
+            'https://ru.mindly.cc/content/images/size/w2000/2020/10/cover-prepared-1--2-.jpg',
+          title: 'Мысли - наши друзья или наши враги?',
+        }}
+      />
+    );
+  });
+});

package/dist/lib/content-card/ContentCard.tsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react';
+import {
+  Container,
+  ContentArticle,
+  ContentVideo,
+  Skeleton,
+  SkeletonWrapper,
+  Title,
+} from './ContentCard.style';
+import '../Theme/global.css';
+
+export interface ContentCardProps {
+  /*
+   * We pass this object when we need to create a card with a video
+   * title: video title
+   * url: link to video
+   */
+  contentVideo?: {
+    title: string;
+    url: string;
+  };
+
+  /*
+   * We pass this object when we need to create a card with a article
+   * title: article title
+   * link: link to article
+   * photoURL: link to article preview
+   */
+  contentArticle?: {
+    link: string;
+    photoURL: string;
+    title: string;
+  };
+  ['data-testid']?: string;
+}
+
+export const ContentCard: React.FC<ContentCardProps> = (props) => {
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const title = props.contentVideo?.title || props.contentArticle?.title;
+  const contentJSX = props.contentArticle ? (
+    <ContentArticle
+      data-testID={props['data-testid']}
+      href={props.contentArticle.link}
+    >
+      <img
+        src={props.contentArticle.photoURL}
+        alt="article-img"
+        onLoad={() => {
+          setIsLoading(false);
+        }}
+      />
+    </ContentArticle>
+  ) : (
+    <ContentVideo
+      data-testid={props['data-testid']}
+      src={`https://www.youtube.com/embed/${props.contentVideo?.url}`}
+      title="YouTube video player"
+      frameBorder="0"
+      onLoad={() => {
+        setIsLoading(false);
+      }}
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+      allowFullScreen
+    />
+  );
+  return (
+    <Container>
+      {contentJSX}
+      <SkeletonWrapper isLoading={isLoading}>
+        <Skeleton animated />
+      </SkeletonWrapper>
+      <Title className="semiBold">
+        {' '}
+        {
+          // #skipcq
+        }
+        {title}
+      </Title>
+    </Container>
+  );
+};

package/dist/lib/date-picker/DatePicker.style.ts

@@ -0,0 +1,52 @@
+import styled from 'styled-components';
+import { colorConstants } from '../Theme/mindly_constants';
+
+interface ContainerProps {
+  isActive: boolean;
+}
+
+export const Container = styled.div<ContainerProps>`
+  padding: 16px 8px;
+  border-radius: 4px;
+  border: 1px solid;
+  width: 100%;
+  min-width: 86px;
+  max-height: 108px;
+  box-sizing: border-box;
+  border-color: ${(props) =>
+    props.isActive ? colorConstants.primaryColor : colorConstants.StrokeGray};
+  background: ${(props) =>
+    props.isActive ? colorConstants.secondaryColor : colorConstants.White};
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.04);
+
+  h4 {
+    margin-bottom: 4px;
+    color: ${(props) =>
+      props.isActive
+        ? colorConstants.primaryColor
+        : colorConstants.secondaryTextColor};
+  }
+
+  h1 {
+    color: ${(props) =>
+      props.isActive
+        ? colorConstants.primaryColor
+        : colorConstants.primaryTextColor};
+  }
+
+  h5 {
+    color: ${(props) =>
+      props.isActive
+        ? colorConstants.primaryColor
+        : colorConstants.secondaryTextColor};
+  }
+`;
+
+export const WeekDayH1 = styled.h1`
+  line-height: 76px;
+  font-weight: 700;
+  margin: 0;
+`;

package/dist/lib/date-picker/DatePicker.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { DatePicker } from './DatePicker';
+
+describe('Test date picker', () => {
+  test('Smoke test', () => {
+    render(<DatePicker day="monday" date="12" isActive month="jan" />);
+  });
+});

package/dist/lib/date-picker/DatePicker.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Container, WeekDayH1 } from './DatePicker.style';
+import '../Theme/global.css';
+
+export interface DatePickerProps {
+  /*
+   * Button type
+   */
+  type: 'date' | 'weekday';
+  /*
+   * Weekday. Example: "Пн"
+   */
+  weekday?: string;
+  /*
+   * Abbreviated to 2 letters day of week
+   */
+  day?: string;
+
+  /*
+   * Day of month
+   */
+  date?: string;
+
+  /*
+   * Abbreviated to 3 letters month name
+   */
+  month?: string;
+
+  /*
+   * Status defining condition (set isActive on click)
+   */
+  isActive: boolean;
+
+  /*
+   * Default react onClick
+   */
+  onClick: (props?: React.SyntheticEvent) => void;
+  ['data-testid']?: string;
+}
+
+export const DatePicker: React.FC<DatePickerProps> = (props) => {
+  return (
+    <Container
+      data-testid={props['data-testid']}
+      isActive={props.isActive}
+      onClick={() => props.onClick()}
+    >
+      {props.type === 'weekday' ? (
+        <WeekDayH1>{props.weekday}</WeekDayH1>
+      ) : (
+        <>
+          <h4>{props.day}</h4>
+          <h1 className="bold">{props.date}</h1>
+          <h5>{props.month}</h5>
+        </>
+      )}
+    </Container>
+  );
+};

package/dist/lib/floating-button/FloatingButton.style.ts

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+
+interface ContainerProps {
+  bottomHeight: number;
+  rightWidth: number;
+}
+
+export const Container = styled.a<ContainerProps>`
+  display: block;
+  width: 54px;
+  height: 54px;
+  position: fixed;
+  bottom: ${(props) => props.bottomHeight}px;
+  right: ${(props) => props.rightWidth}px;
+  z-index: 10000000000000;
+
+  img {
+    background: none;
+    border-radius: 50%;
+  }
+`;

package/dist/lib/floating-button/FloatingButton.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { FloatingButton } from './FloatingButton';
+
+describe('Test floating button', () => {
+  test('Smoke test', () => {
+    render(<FloatingButton bottomHeight={20} rightWidth={20} />);
+  });
+});

package/dist/lib/floating-button/FloatingButton.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Container } from './FloatingButton.style';
+import img from './floating button.svg';
+import '../Theme/global.css';
+
+export interface FloatingButtonType {
+  /*
+   * The position of the button relative to the bottom edge. Conveys a value in pixels
+   */
+  bottomHeight: number;
+
+  /*
+   * The position of the button relative to the right edge. Conveys a value in pixels
+   */
+  rightWidth: number;
+  ['data-testid']?: string;
+}
+
+export const FloatingButton: React.FC<FloatingButtonType> = (props) => {
+  return (
+    <Container
+      href="https://t.me/MindlySupport"
+      bottomHeight={props.bottomHeight}
+      rightWidth={props.rightWidth}
+    >
+      <img data-testid={props['data-testid']} src={img} alt="support mindly" />
+    </Container>
+  );
+};