@mindly/ui-components 3.1.3 → 3.1.5

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/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>
+  );
+};

package/dist/lib/floating-button/floating button.svg

@@ -0,0 +1,6 @@
+<svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="54" height="54" fill="#21ABD2"/>
+<path d="M27.0002 15C21.9405 15 17.8237 19.1168 17.8237 24.1765V32.647C17.8237 33.8148 18.7737 34.7648 19.9413 34.7648C21.1092 34.7648 22.0591 33.8148 22.0591 32.647V25.5883C22.0591 24.4206 21.1092 23.4706 19.9413 23.4706C19.7037 23.4706 19.4788 23.5188 19.2651 23.5913C19.5663 19.5829 22.9168 16.4117 27.0002 16.4117C31.0815 16.4117 34.431 19.58 34.735 23.5856C34.5226 23.5129 34.2964 23.4706 34.0591 23.4706C32.8913 23.4706 31.9413 24.4206 31.9413 25.5883V32.647C31.9413 33.8148 32.8913 34.7648 34.0591 34.7648C34.3078 34.7648 34.5431 34.7139 34.765 34.6348V35.4706C34.765 35.8601 34.4479 36.1765 34.0591 36.1765H28.9879C28.6954 35.3566 27.9192 34.7648 27.0002 34.7648C25.8326 34.7648 24.8826 35.7147 24.8826 36.8824C24.8826 38.05 25.8326 39 27.0002 39C27.9192 39 28.6954 38.408 28.9879 37.5883H34.0591C35.2268 37.5883 36.1768 36.6383 36.1768 35.4706C36.1768 31.2248 36.1768 28.4269 36.1768 24.1765C36.1768 19.1168 32.06 15 27.0002 15V15Z" fill="white"/>
+<path d="M37.5884 25.0122V33.2227C38.4081 32.9304 39.0001 32.1542 39.0001 31.235V26.9998C39.0001 26.0808 38.4081 25.3046 37.5884 25.0122Z" fill="white"/>
+<path d="M15 26.9998V31.235C15 32.1542 15.592 32.9304 16.4117 33.2227V25.0122C15.592 25.3046 15 26.0808 15 26.9998Z" fill="white"/>
+</svg>

package/dist/lib/footer-for-booking/FooterForBooking.style.ts

@@ -0,0 +1,56 @@
+import styled from 'styled-components';
+import { IonIcon } from '@ionic/react';
+import { colorConstants } from '../Theme/mindly_constants';
+
+interface ContainerProps {
+  isIos: boolean;
+}
+
+export const Container = styled.div<ContainerProps>`
+  padding: ${(props) => (props.isIos ? '16px 24px 50px' : '16px 24px')};
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12);
+  display: flex;
+  position: fixed;
+  z-index: 10000000000000;
+  background: ${colorConstants.White};
+  bottom: -1px;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+
+  @media (min-width: 600px) {
+    padding-left: calc((100vw - 468px) / 2);
+    padding-right: calc((100vw - 468px) / 2);
+  }
+
+  @media (min-width: 1024px) {
+    padding-left: calc((100vw - 960px) / 2);
+    padding-right: calc((100vw - 960px) / 2);
+  }
+
+  button {
+    min-height: 44px !important;
+    width: 132px;
+  }
+`;
+
+export const InfoContainer = styled.div`
+  h4 {
+    color: ${colorConstants.primaryTextColor};
+  }
+
+  h4:first-child {
+    margin-bottom: 4px;
+  }
+`;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const SmallIcon = styled<any>(IonIcon)`
+  // #skipcq
+  margin: 0 5px -4px 0;
+  font-size: 18px;
+
+  &.ion-color {
+    --ion-color-base: ${colorConstants.primaryColor} !important;
+  }
+`;