@mindly/ui-components 3.1.3 → 3.1.5

package/dist/lib/tab-bar/TabBar.style.tsx

@@ -0,0 +1,43 @@
+import styled from 'styled-components';
+import { colorConstants } from '../Theme/mindly_constants';
+
+interface ContainerProps {
+  isIos: boolean;
+}
+
+export const Container = styled.div<ContainerProps>`
+  display: flex;
+  box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.08);
+  position: fixed;
+  bottom: -1px;
+  width: 100vw;
+  border: none;
+  padding-bottom: ${(props) => (props.isIos ? '34px' : '10px')};
+  color: ${colorConstants.secondaryTextColor};
+  padding-top: 10px;
+  justify-content: center;
+  background: white;
+
+  div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 150px;
+    flex-grow: 1;
+    flex-basis: 0;
+    cursor: pointer;
+  }
+
+  ion-icon {
+    font-size: 28px;
+    margin: 0;
+  }
+
+  ion-label {
+    font-weight: 700;
+    font-size: 10px;
+    margin: 0;
+    line-height: 14px;
+    font-family: 'Lato Bold', sans-serif;
+  }
+`;

package/dist/lib/tab-bar/TabBar.tsx

@@ -0,0 +1,11 @@
+import React, { ReactNode } from 'react';
+import { Container } from './TabBar.style';
+
+export interface TabBarProps {
+  children: ReactNode;
+  isIos: boolean;
+}
+
+export const TabBar: React.FC<TabBarProps> = (props) => {
+  return <Container isIos={props.isIos}>{props.children}</Container>;
+};

package/dist/lib/therapist-card/TherapistCard.style.ts

@@ -0,0 +1,104 @@
+import { IonIcon } from '@ionic/react';
+import styled from 'styled-components';
+import { colorConstants } from '../Theme/mindly_constants';
+
+export const Container = styled.div`
+  cursor: pointer;
+  border-radius: 8px;
+  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.15);
+  position: relative;
+  padding: 11px;
+
+  @media (min-width: 600px) {
+    max-width: 452px;
+  }
+`;
+
+export const Card = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  align-items: center;
+
+  .img-container {
+    max-height: 102px;
+    max-width: 102px;
+    flex: 1 0;
+  }
+  
+  .card-content {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+  
+  .img {
+    width: 102px;
+    height: 102px;
+    object-fit: cover;
+    border-radius: 4px;
+  }
+
+  h1 {
+    margin: 0px 16px 0;
+    color: ${colorConstants.primaryTextColor};
+    font-size: 16px;
+    line-height: 20px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  h3 {
+    margin: 4px 16px 0;
+    color: ${colorConstants.secondaryTextColor};
+    font-size: 14px;
+    line-height: 16px;
+  }
+`;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const PsychologistCardIcons = styled<any>(IonIcon)`
+  // #skipcq
+  color: ${colorConstants.primaryColor};
+  font-size: 20px;
+  margin: 0;
+
+  @media (max-width: 320px) {
+    font-size: 19px;
+  }
+`;
+
+export const IconsContainer = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 0;
+  margin-right: 12px;
+  margin-top: 4px;
+
+  .color-green {
+    // #skipcq
+    color: ${colorConstants.AccentTickColor};
+  }
+  
+  p {
+    color: ${colorConstants.primaryTextColor};
+    font-size: 12px;
+    line-height: 16px;
+    padding-left: 4px;
+    margin: 0;
+    font-family: 'Lato Regular', sans-serif;
+    white-space: nowrap;
+
+    @media (max-width: 320px) {
+      font-size: 10.5px;
+      line-height: 14px;
+    }
+  }
+`;
+
+export const InfoContainer = styled.div`
+  display: flex;
+  margin-left: 16px;
+  flex-wrap: wrap;
+`;

package/dist/lib/therapist-card/TherapistCard.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { TherapistCard } from './TherapistCard';
+
+describe('Test therapist card', () => {
+  test('Smoke test', () => {
+    render(
+      <TherapistCard
+        handleClick={() => false}
+        psychologistDuration={50}
+        psychologistExperience={11}
+        psychologistLastName="Test"
+        psychologistName="User"
+        psychologistPhoto=""
+        psychologistPrice={500}
+        psychologistType="Therapist"
+      />
+    );
+  });
+
+  test('Try click on card', () => {
+    const handleClick = jest.fn();
+    expect(handleClick).toHaveBeenCalledTimes(0);
+    render(
+      <TherapistCard
+        handleClick={handleClick}
+        psychologistDuration={50}
+        psychologistExperience={11}
+        psychologistLastName="Test"
+        psychologistName="User"
+        psychologistPhoto=""
+        psychologistPrice={500}
+        psychologistType="Therapist"
+        data-testid="container"
+      />
+    );
+    screen.getByTestId('container').click();
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+});

package/dist/lib/therapist-card/TherapistCard.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { IonSkeletonText } from '@ionic/react';
+import { timeOutline, cardOutline, briefcaseOutline } from 'ionicons/icons';
+import {
+  PsychologistCardIcons,
+  IconsContainer,
+  Container,
+  InfoContainer,
+  Card,
+} from './TherapistCard.style';
+
+export interface TherapistCardProps {
+  psychologistName: string;
+  psychologistLastName: string;
+
+  /*
+   * The direction of psychologist work
+   */
+  psychologistType: string;
+
+  /*
+   * Link to psychologist photo
+   */
+  psychologistPhoto: string;
+
+  /*
+   * Consultation price
+   */
+  psychologistPrice: number;
+
+  /*
+   * Duration of consultation
+   */
+  psychologistDuration: number;
+  psychologistExperience: number;
+
+  /*
+   * The function that is called when clicking on the card
+   */
+  handleClick: (props?: React.SyntheticEvent) => void;
+  ['data-testid']?: string;
+}
+
+export const TherapistCard: React.FC<TherapistCardProps> = (props) => {
+  const [imageLoaded, setImageLoaded] = React.useState(false);
+
+  return (
+    <Container data-testid={props['data-testid']} onClick={props.handleClick}>
+      <Card>
+        <div className="img-container">
+        <img
+          className="img"
+          src={props.psychologistPhoto}
+          alt="psychologistPhoto"
+          onLoad={() => setImageLoaded(true)}
+          style={{ display: imageLoaded ? 'block' : 'none' }}
+        />
+
+        <IonSkeletonText
+          animated
+          className="img"
+          style={{ display: imageLoaded ? 'none' : 'block' }}
+        />
+        </div>
+
+        <div className="card-content">
+        <h1 className="bold">
+          {`${props.psychologistName} ${props.psychologistLastName}`}
+        </h1>
+        <h3 className="semiBold">{props.psychologistType}</h3>
+        <InfoContainer>
+          <IconsContainer>
+            <PsychologistCardIcons icon={timeOutline} />
+            <p className="semiBold">{`${props.psychologistDuration} хвилин`}</p>
+          </IconsContainer>
+          <IconsContainer>
+            <PsychologistCardIcons icon={briefcaseOutline} />
+            <p className="semiBold">
+              {props.psychologistExperience >= 5
+                ? `${props.psychologistExperience} років досвіду`
+                : props.psychologistExperience === 1
+                ? `${props.psychologistExperience} рік досвіду`
+                : `${props.psychologistExperience} роки досвіду`}
+            </p>
+          </IconsContainer>
+          <IconsContainer>
+            <PsychologistCardIcons icon={cardOutline} className="color-green" />
+            <p className="semiBold color-green">{`${props.psychologistPrice} грн`}</p>
+          </IconsContainer>
+        </InfoContainer>
+        </div>
+
+      </Card>
+    </Container>
+  );
+};

package/dist/lib/therapist-information-component/TherapistInformationComponent.style.ts

@@ -0,0 +1,40 @@
+import styled from 'styled-components';
+import { colorConstants } from '../Theme/mindly_constants';
+
+export const Container = styled.div`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  img {
+    width: 100%;
+    height: 222px;
+    border-radius: 8px;
+    object-fit: cover;
+
+    @media (min-width: 600px) {
+      height: auto;
+    }
+
+    @media (min-width: 1024px) {
+      height: auto;
+    }
+  }
+`;
+
+export const Info = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin-top: 16px;
+
+  h3 {
+    color: ${colorConstants.primaryTextColor};
+    display: flex;
+    align-items: center;
+
+    ion-icon {
+      margin-right: 4px;
+      font-size: 24px;
+    }
+  }
+`;

package/dist/lib/therapist-information-component/TherapistInformationComponent.test.tsx

@@ -0,0 +1,16 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { TherapistInformationComponent } from './TherapistInformationComponent';
+
+describe('Test therapist information component', () => {
+  test('Smoke test', () => {
+    render(
+      <TherapistInformationComponent
+        price="1200 грн"
+        avatar=""
+        duration="50 хв"
+        experience="4 роки"
+      />
+    );
+  });
+});

package/dist/lib/therapist-information-component/TherapistInformationComponent.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Container, Info } from './TherapistInformationComponent.style';
+import { timeOutline, cardOutline, briefcaseOutline } from 'ionicons/icons';
+import { IonIcon } from '@ionic/react';
+import '../Theme/global.css';
+
+export interface TherapistInformationComponentProps {
+  /*
+   * Link to psychologist avatar
+   */
+  avatar: string;
+
+  /*
+   * Psychologist's experience
+   */
+  experience: string;
+
+  /*
+   * Consultation duration
+   */
+  duration: string;
+
+  /*
+   * Consultation cost
+   */
+  price: string;
+  ['data-testid']?: string;
+}
+
+export const TherapistInformationComponent: React.FC<TherapistInformationComponentProps> =
+  (props) => {
+    return (
+      <Container data-testid={props['data-testid']}>
+        <img src={props.avatar} alt="therapist avatar" />
+        <Info>
+          <h3 className="semiBold">
+            <IonIcon icon={briefcaseOutline} color="primary" />
+            {props.experience}
+          </h3>
+          <h3 className="semiBold">
+            <IonIcon icon={timeOutline} color="primary" />
+            {props.duration}
+          </h3>
+          <h3 className="semiBold">
+            <IonIcon icon={cardOutline} color="primary" />
+            {props.price}
+          </h3>
+        </Info>
+      </Container>
+    );
+  };

package/dist/lib/toast/index.css

@@ -0,0 +1,13 @@
+.toast_classes {
+  color: #ffffff;
+  --background: #1d201f;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+  margin-top: 30px;
+  border-radius: 4px;
+}
+
+.toast_classes_ios {
+  top: -36px;
+}

package/dist/lib/toast/toast.ts

@@ -0,0 +1,17 @@
+import './index.css';
+import { isPlatform } from '@ionic/react';
+/**
+ * Toast that work line an API, we can call it anywhere, need message text and duration(default 3 seconds)
+ */
+export const toast = (message: string, duration = 4500): Promise<void> => {
+  const toastMessage = document.createElement('ion-toast');
+  toastMessage.message = message;
+  toastMessage.duration = duration;
+  toastMessage.position = 'top';
+  toastMessage.cssClass = isPlatform('ios')
+    ? 'toast_classes toast_classes_ios'
+    : 'toast_classes';
+
+  document.getElementById('root')?.appendChild(toastMessage);
+  return toastMessage.present();
+};

package/dist/lib/userAppTypes.ts

@@ -0,0 +1,261 @@
+export interface IPromotionalCode {
+  /**
+   * The percentage value that specifies the size of the discount
+   * @example 25
+   */
+  percent_off: number;
+  /**
+   * Price after applying promocode
+   */
+  price_uah: string;
+}
+
+export enum PaidTypes {
+  paid_100 = 'paid_100',
+  paid_0 = 'paid_0',
+}
+
+export type PsychologistProfileType = {
+  id: string;
+  psychologist_id?: string;
+  articles: Array<{
+    subtheme: string;
+    content: Array<{ photoURL: string; title: string; link: string }>;
+  }>;
+  education: string;
+  experience: string;
+  goal: string;
+  not_work_with: Array<string>;
+  short_description: string;
+  specialization: string;
+  video: Array<{
+    subtheme: string;
+    content: Array<{ title: string; url: string }>;
+  }>;
+  work_with: Array<string>;
+};
+
+//PsychologistCalendarType****
+export type PsycologistCalendarType = {
+  id: string;
+  psychologist_id: string;
+  schedule: Array<{ slot_id: string }>;
+};
+
+export type WeeklyAvailabilitiesItem = {
+  reason: 'busy' | 'opened' | 'booked';
+  isAvailable: boolean;
+  time: string;
+};
+
+export type PsychologistDevicesProfileType = {
+  tokens?: {
+    fcmtokens?: string[];
+  };
+};
+
+export type PsychologistType = {
+  id: string;
+  consultation_with: string;
+  duration: number;
+  email: string;
+  first_name: string;
+  last_name: string;
+  price: number;
+  focus: string;
+  photo: string;
+  avatar: string;
+  experience: number;
+  time_zone: string;
+  calendar: PsycologistCalendarType;
+  devices?: PsychologistDevicesProfileType;
+  profile: PsychologistProfileType;
+  isTestUser: boolean;
+  psychologistSex?: 'female' | 'male';
+};
+
+export type ConsultationType = {
+  id: string;
+  consultation_time: {
+    _seconds: number;
+    nanoseconds: number;
+  };
+  consultation_with: string;
+  duration: number;
+  exchange_rate: string;
+  payment_date: {
+    _seconds: number;
+    nanoseconds: number;
+  };
+  payment_type?: string;
+  price: number;
+  price_uah: number;
+  psychologist_avatar: string;
+  psychologist_id: string;
+  psychologist_name: string;
+  psychologist_timezone: string;
+  user_avatar: string;
+  user_id: string;
+  user_name: string;
+  user_timezone: string;
+  videochat_url: string;
+  was_rescheduled: boolean;
+  session_status?: 'client_showed' | 'client_not_showed';
+  consultation_time_before_rescheduling?: {
+    _seconds: number;
+    nanoseconds: number;
+  };
+  applied_promotional_code?: string | null;
+  auto_booking_status?: 'enable' | 'disable';
+};
+
+export type ConsultationWatcherType = {
+  user_id: string;
+  payment_date: {
+    seconds: number;
+    nanoseconds: number;
+  };
+};
+
+export type HasPaidConsultationsWithType = {
+  therapistID?: string;
+  currentPrice?: string;
+};
+
+export type UserType = {
+  id?: string | undefined;
+  avatar?: Array<{ url: string }>;
+  display_name: string;
+  last_name?: string;
+  displayName?: string;
+  email: string;
+  phone_number: string;
+  phoneNumber?: string;
+  surveyAnswers?: QuestionType[];
+  user_psychologists?: Array<string> | string;
+  isTestUser: boolean;
+  /**
+   * @deprecated
+   */
+  client_from_country?: string;
+  financial_support_approved?: boolean;
+  hasPaidConsultationsWith?: Array<HasPaidConsultationsWithType>;
+};
+
+export type QuestionType = {
+  answers: string[];
+  photoURL: string;
+  question: string;
+  subquestion: string;
+};
+
+export type AnswerType = {
+  id: number;
+  question: string;
+  answer: string;
+};
+
+export type SurveyType = {
+  questions: QuestionType[];
+};
+
+export type InputState = {
+  value: string;
+  active: boolean;
+};
+
+export type ChangeUserDataObject = {
+  display_name: string;
+  last_name: string;
+  phone_number: string;
+};
+
+export type GoogleForgotPasswordAnswer = {
+  apiKey: string;
+  lang: string;
+  mode: string;
+  oobCode: string;
+};
+
+export interface Customer {
+  /**
+   * Unique identifier for the object.
+   */
+  id: string;
+
+  /**
+   * String representing the object's type. Objects of the same type share the same value.
+   */
+  object: 'customer';
+
+  /**
+   * Current balance, if any, being stored on the customer. If negative, the customer has credit to apply to their next invoice. If positive, the customer has an amount owed that will be added to their next invoice. The balance does not refer to any unpaid invoices; it solely takes into account amounts that have yet to be successfully applied to any invoice. This balance is only taken into account as invoices are finalized.
+   */
+  balance: number;
+
+  /**
+   * Time at which the object was created. Measured in seconds since the Unix epoch.
+   */
+  created: number;
+
+  /**
+   * Three-letter [ISO code for the currency](https://stripe.com/docs/currencies) the customer can be charged in for recurring billing purposes.
+   */
+  currency: string | null;
+
+  deleted?: void;
+
+  /**
+   * When the customer's latest invoice is billed by charging automatically, `delinquent` is `true` if the invoice's latest charge failed. When the customer's latest invoice is billed by sending an invoice, `delinquent` is `true` if the invoice isn't paid by its due date.
+   *
+   * If an invoice is marked uncollectible by [dunning](https://stripe.com/docs/billing/automatic-collection), `delinquent` doesn't get reset to `false`.
+   */
+  delinquent: boolean | null;
+
+  /**
+   * An arbitrary string attached to the object. Often useful for displaying to users.
+   */
+  description: string | null;
+
+  /**
+   * The customer's email address.
+   */
+  email: string | null;
+
+  /**
+   * The prefix for the customer used to generate unique invoice numbers.
+   */
+  invoice_prefix: string | null;
+
+  invoice_settings: {
+    /**
+     * ID of a payment method that's attached to the customer, to be used as the customer's default payment method for subscriptions and invoices.
+     */
+    default_payment_method?: string;
+  };
+
+  /**
+   * Has the value `true` if the object exists in live mode or the value `false` if the object exists in test mode.
+   */
+  livemode: boolean;
+
+  /**
+   * The customer's full name or business name.
+   */
+  name: string | null;
+
+  /**
+   * The suffix of the customer's next invoice number, e.g., 0001.
+   */
+  next_invoice_sequence?: number;
+
+  /**
+   * The customer's phone number.
+   */
+  phone: string | null;
+
+  /**
+   * The customer's preferred locales (languages), ordered by preference.
+   */
+  preferred_locales: Array<string> | null;
+}