@mindly/ui-components 7.5.1 → 8.0.0-alpha.31

package/dist/esm/lib/Consultations/CancelSession/CancelSession.style.js

@@ -0,0 +1,130 @@
+import styled from 'styled-components';
+export const CancelSessionConfirmWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  row-gap: 24px;
+
+  & .cancel-title {
+    font-weight: 600;
+    font-size: 20px;
+    color: #1d201f;
+  }
+
+  & .cancel-desc {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+    color: #5b5b5b;
+    margin-bottom: 6px;
+  }
+
+  & .reschedule-btn {
+    position: relative;
+    outline: none;
+    margin: 0 0 6px 0;
+    padding: 16px;
+    background: #d6f2f9;
+    border-radius: 10px;
+    font-weight: 600;
+    font-size: 14px;
+    color: #177590;
+
+    & ion-icon {
+      position: absolute;
+      left: 16px;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 18px;
+    }
+  }
+
+  & .confirm-btn {
+    outline: none;
+    margin: 0;
+    background: none;
+    width: fit-content;
+    font-weight: 600;
+    font-size: 12px;
+    color: #5b5b5b;
+  }
+`;
+export const CancelConfirmWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  row-gap: 24px;
+
+  & .confirm-title {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 24px;
+    color: #1d201f;
+    margin-top: -8px;
+  }
+
+  & .confirm-textarea {
+    outline: none;
+    background: #ffffff;
+    border: 1px solid #e5e5e5;
+    border-radius: 10px;
+    resize: none;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 16px;
+    color: #1d201f;
+    height: 72px;
+    width: 100%;
+    margin: 0;
+    padding: 10px 12px;
+
+    &::placeholder {
+      color: #c1c1c1;
+    }
+
+    &.error {
+      margin-bottom: 5px;
+      border: 1px solid #c13e18;
+      border-radius: 10px;
+    }
+  }
+
+  & .error-message {
+    font-style: normal;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 14px;
+
+    color: #c13e18;
+  }
+
+  & .cancel-btn {
+    position: relative;
+    outline: none;
+    border-radius: 10px;
+    font-weight: 600;
+    font-size: 14px;
+    color: #ffffff;
+    margin: 0;
+    padding: 17px;
+
+    &.blue {
+      background-color: #177590;
+    }
+
+    &.red {
+      background-color: #b12631;
+    }
+
+    &:disabled {
+      background: #c1c1c1;
+    }
+
+    & ion-spinner {
+      position: absolute;
+      left: 16px;
+      top: 50%;
+      transform: translateY(-50%);
+      color: #fff;
+      font-size: 24px;
+    }
+  }
+`;

package/dist/esm/lib/Consultations/CancelSession/index.js

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

package/dist/esm/lib/Consultations/ConsultationCard/ConsultationCard.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import { DateTime } from 'luxon';
+import { IonIcon } from '@ionic/react';
+import { arrowForwardOutline } from 'ionicons/icons';
+import { ConsultationCardContainer, ConsultationCardDate, ConsultationCardInfo, ConsultationCardWrapper, LastConsultationCardContainer, LastConsultationCardInfo, LastConsultationCardTime, } from './ConsultationCard.style';
+import { Avatar } from '../../Avatar';
+import ConsultationCardSkeleton from './ConsultationCardSkeleton';
+import { timeNormalize } from '../utils';
+import { ConsultationCardType } from './types';
+const ConsultationCard = ({ type, sessionId, name, avatar, time, timeZone = 'Europe/Kiev', onClick, isLoading = false, withBorder = false, onVideoCall, locale, translations, }) => {
+    const cardDate = useMemo(() => DateTime.fromSeconds(time).setLocale(locale).setZone(timeZone), [time, timeZone, DateTime.now(), locale]);
+    const isSoonStart = useMemo(() => cardDate.toSeconds() - DateTime.now().toSeconds() < 1800, [time, timeZone, cardDate]);
+    if (isLoading) {
+        return _jsx(ConsultationCardSkeleton, { type: type });
+    }
+    if (type === ConsultationCardType.UNBOOKED) {
+        return (_jsx(ConsultationCardWrapper, Object.assign({ onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(sessionId) }, { children: _jsxs(LastConsultationCardContainer, { children: [_jsxs(LastConsultationCardInfo, Object.assign({ className: 'choose-day-and-time' }, { children: [_jsx(Avatar, { src: avatar, dimensions: 72, withBorder: withBorder }), _jsx("h2", Object.assign({ className: 'choose-day-and-time' }, { children: translations === null || translations === void 0 ? void 0 : translations.choose_day_and_time }))] })), _jsx(LastConsultationCardTime, { children: _jsxs("div", Object.assign({ className: "sign-up-on-session" }, { children: [translations === null || translations === void 0 ? void 0 : translations.sign_up, _jsx("button", Object.assign({ className: 'join-btn filled' }, { children: _jsx(IonIcon, { icon: arrowForwardOutline }) }))] })) })] }) })));
+    }
+    if (type === ConsultationCardType.LAST) {
+        return (_jsx(ConsultationCardWrapper, Object.assign({ onClick: () => isSoonStart ? onVideoCall === null || onVideoCall === void 0 ? void 0 : onVideoCall(sessionId) : onClick === null || onClick === void 0 ? void 0 : onClick(sessionId), className: `${isSoonStart ? 'is-soon-start' : ''}` }, { children: _jsxs(LastConsultationCardContainer, { children: [_jsxs(LastConsultationCardInfo, { children: [_jsxs("div", { children: [_jsx("div", Object.assign({ className: "card-day" }, { children: timeNormalize(cardDate, translations === null || translations === void 0 ? void 0 : translations.days, translations === null || translations === void 0 ? void 0 : translations.hour, translations === null || translations === void 0 ? void 0 : translations.minutes, translations === null || translations === void 0 ? void 0 : translations.from, translations === null || translations === void 0 ? void 0 : translations.started) })), _jsxs("div", Object.assign({ className: "card-info" }, { children: [translations === null || translations === void 0 ? void 0 : translations.with, " ", name] }))] }), _jsx(Avatar, { src: avatar, dimensions: 72, withBorder: withBorder })] }), _jsx(LastConsultationCardTime, Object.assign({ className: "card-date" }, { children: isSoonStart ? (_jsxs("div", Object.assign({ className: "card-join-text" }, { children: [translations === null || translations === void 0 ? void 0 : translations.join, _jsx("button", Object.assign({ className: 'join-btn' }, { children: _jsx(IonIcon, { icon: arrowForwardOutline }) }))] }))) : (_jsxs("div", Object.assign({ className: 'card-local-day-wrapper' }, { children: [_jsxs("div", { children: [_jsx("div", Object.assign({ className: "card-local-day" }, { children: cardDate.toFormat('EEEE, d MMMM') })), _jsxs("div", Object.assign({ className: "card-local-gmt" }, { children: [cardDate.toLocaleString(DateTime.TIME_SIMPLE), ' ', cardDate.toFormat('ZZZZ'), ", ", translations === null || translations === void 0 ? void 0 : translations.sessionDuration] })), _jsx("div", Object.assign({ className: "card-local-time" }, { children: translations === null || translations === void 0 ? void 0 : translations.forLocalTime }))] }), _jsx("button", Object.assign({ className: 'join-btn filled' }, { children: _jsx(IonIcon, { icon: arrowForwardOutline }) }))] }))) }))] }) })));
+    }
+    return (_jsx(ConsultationCardWrapper, Object.assign({ onClick: () => onClick === null || onClick === void 0 ? void 0 : onClick(sessionId) }, { children: _jsxs(ConsultationCardContainer, Object.assign({ className: `${type === ConsultationCardType.PAST && 'finished-card'}` }, { children: [_jsxs(ConsultationCardDate, { children: [_jsx("div", Object.assign({ className: "card-month" }, { children: cardDate.toFormat('LLL') })), _jsx("div", Object.assign({ className: "card-day" }, { children: cardDate.toFormat('d') }))] }), _jsxs(ConsultationCardInfo, { children: [_jsxs("div", Object.assign({ className: "card-date" }, { children: [_jsx("span", { children: cardDate.toFormat('EEEE') }), ",", ' ', cardDate.toLocaleString(DateTime.TIME_SIMPLE)] })), _jsx("div", Object.assign({ className: "card-user-name" }, { children: name }))] }), _jsx(Avatar, { src: avatar, dimensions: 40, className: "card-avatar" })] })) })));
+};
+export default React.memo(ConsultationCard);

package/dist/esm/lib/Consultations/ConsultationCard/ConsultationCard.style.d.ts

@@ -1,7 +1,8 @@
-export declare const ConsultationCardWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ConsultationCardContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ConsultationCardDate: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ConsultationCardInfo: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const LastConsultationCardContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const LastConsultationCardInfo: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const LastConsultationCardTime: import("styled-components").StyledComponent<"div", any, {}, never>;
+/// <reference types="react" />
+export declare const ConsultationCardWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ConsultationCardContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ConsultationCardDate: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ConsultationCardInfo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const LastConsultationCardContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const LastConsultationCardInfo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const LastConsultationCardTime: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/esm/lib/Consultations/ConsultationCard/ConsultationCard.style.js

@@ -0,0 +1,214 @@
+import styled from 'styled-components';
+export const ConsultationCardWrapper = styled.div `
+  width: 100%;
+  padding: 16px;
+  background: #ffffff;
+  border: 1px solid #eeeeee;
+  border-radius: 10px;
+  cursor: pointer;
+
+  &.is-soon-start {
+    background: #177590;
+    border: none;
+
+    & .card-day,
+    .card-info,
+    .card-date {
+      color: #ffffff;
+    }
+
+    &:active {
+      background: #13637a;
+    }
+  }
+
+  & .card-join-text {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 20px;
+    color: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  &:active {
+    background: #f2f4f7;
+  }
+
+  .join-btn {
+    border: none;
+    outline: none;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: #ffffff;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    color: #1d201f;
+
+    &.filled {
+      background: #177590;
+      color: #ffffff;
+    }
+  }
+
+  .card-local-day-wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+  }
+`;
+export const ConsultationCardContainer = styled.div `
+  display: flex;
+  column-gap: 13px;
+  justify-content: space-between;
+  align-items: stretch;
+
+  &.finished-card .card-avatar {
+    opacity: 0.75;
+  }
+
+  &.finished-card .card-month,
+  &.finished-card .card-day,
+  &.finished-card .card-date,
+  &.finished-card .card-user-name {
+    color: #5b5b5b;
+  }
+`;
+export const ConsultationCardDate = styled.div `
+  display: flex;
+  flex-direction: column;
+  row-gap: 2px;
+  align-items: center;
+  justify-content: space-between;
+  font-weight: 600;
+
+  & .card-month {
+    font-size: 12px;
+    color: #b12631;
+    text-transform: uppercase;
+  }
+
+  & .card-day {
+    font-size: 16px;
+    text-align: center;
+    color: #1d201f;
+  }
+`;
+export const ConsultationCardInfo = styled.div `
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  row-gap: 4px;
+
+  & .card-date {
+    font-weight: 600;
+    font-size: 16px;
+    color: #1d201f;
+
+    & span {
+      font-weight: inherit;
+      font-size: inherit;
+      color: inherit;
+      text-transform: capitalize;
+    }
+  }
+
+  & .card-user-name {
+    font-weight: 400;
+    font-size: 12px;
+    color: #5b5b5b;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    line-clamp: 1;
+    -webkit-box-orient: vertical;
+    word-break: break-word;
+  }
+`;
+export const LastConsultationCardContainer = styled.div `
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 132px;
+  row-gap: 16px;
+`;
+export const LastConsultationCardInfo = styled.div `
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  font-weight: 600;
+  column-gap: 10px;
+
+  & .card-day {
+    font-size: 10px;
+    line-height: 14px;
+    color: #b12631;
+    margin-bottom: 9px;
+    text-transform: uppercase;
+  }
+
+  & .card-info {
+    font-size: 20px;
+    line-height: 24px;
+    color: #1d201f;
+    word-break: break-word;
+  }
+
+  &.choose-day-and-time {
+    column-gap: 15px;
+    align-items: center;
+
+    h2 {
+      font-style: normal;
+      font-weight: 600;
+      font-size: 20px;
+      line-height: 24px;
+      color: #1d201f;
+    }
+  }
+`;
+export const LastConsultationCardTime = styled.div `
+  display: flex;
+  flex-direction: column;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 16px;
+  color: #1d201f;
+
+  & .card-local-day:first-letter {
+    text-transform: uppercase;
+  }
+
+  & .card-local-day {
+    font-weight: 600;
+  }
+
+  & .card-local-gmt {
+    font-weight: 600;
+  }
+
+  & .card-local-time {
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 14px;
+    color: #1d201f;
+  }
+
+  & .sign-up-on-session {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    font-style: normal;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 20px;
+    color: #1d201f;
+  }
+`;

package/dist/esm/lib/Consultations/ConsultationCard/ConsultationCardSkeleton.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { IonSkeletonText } from '@ionic/react';
+import { ConsultationCardType } from './types';
+import { ConsultationCardContainer, ConsultationCardDate, ConsultationCardInfo, ConsultationCardWrapper, LastConsultationCardContainer, LastConsultationCardInfo, LastConsultationCardTime, } from './ConsultationCard.style';
+const ConsultationCardSkeleton = ({ type, }) => {
+    switch (type) {
+        case ConsultationCardType.LAST:
+            return (_jsx(ConsultationCardWrapper, { children: _jsxs(LastConsultationCardContainer, { children: [_jsxs(LastConsultationCardInfo, { children: [_jsxs("div", { children: [_jsx("div", Object.assign({ className: "card-day" }, { children: _jsx(IonSkeletonText, { animated: true, style: {
+                                                    margin: 0,
+                                                    width: '74px',
+                                                    height: '12px',
+                                                    borderRadius: '4px',
+                                                } }) })), _jsx("div", Object.assign({ className: "card-info" }, { children: _jsx(IonSkeletonText, { animated: true, style: {
+                                                    margin: 0,
+                                                    width: '191px',
+                                                    height: '24px',
+                                                    borderRadius: '4px',
+                                                } }) }))] }), _jsx(IonSkeletonText, { animated: true, style: {
+                                        margin: 0,
+                                        width: '72px',
+                                        height: '72px',
+                                        borderRadius: '50%',
+                                    } })] }), _jsxs(LastConsultationCardTime, Object.assign({ className: "card-date" }, { children: [_jsx("div", { children: _jsx(IonSkeletonText, { animated: true, style: {
+                                            margin: '0 0 4px 0',
+                                            width: '148px',
+                                            height: '12px',
+                                            borderRadius: '4px',
+                                        } }) }), _jsx("div", { children: _jsx(IonSkeletonText, { animated: true, style: {
+                                            margin: 0,
+                                            width: '114px',
+                                            height: '12px',
+                                            borderRadius: '4px',
+                                        } }) })] }))] }) }));
+        default:
+            return (_jsx(ConsultationCardWrapper, { children: _jsxs(ConsultationCardContainer, { children: [_jsxs(ConsultationCardDate, { children: [_jsx("div", Object.assign({ className: "card-month" }, { children: _jsx(IonSkeletonText, { animated: true, style: {
+                                            margin: 0,
+                                            width: '23px',
+                                            height: '14px',
+                                            borderRadius: '4px',
+                                        } }) })), _jsx("div", Object.assign({ className: "card-day" }, { children: _jsx(IonSkeletonText, { animated: true, style: {
+                                            margin: 0,
+                                            width: '11px',
+                                            height: '14px',
+                                            borderRadius: '4px',
+                                        } }) }))] }), _jsxs(ConsultationCardInfo, { children: [_jsx("div", Object.assign({ className: "card-date" }, { children: _jsx(IonSkeletonText, { animated: true, style: {
+                                            margin: 0,
+                                            width: '145px',
+                                            height: '24px',
+                                            borderRadius: '4px',
+                                        } }) })), _jsx("div", Object.assign({ className: "card-user-name" }, { children: _jsx(IonSkeletonText, { animated: true, style: {
+                                            margin: 0,
+                                            width: '51px',
+                                            height: '14px',
+                                            borderRadius: '4px',
+                                        } }) }))] }), _jsx(IonSkeletonText, { animated: true, style: {
+                                margin: 0,
+                                width: '40px',
+                                height: '40px',
+                                borderRadius: '50%',
+                            } })] }) }));
+    }
+};
+export default React.memo(ConsultationCardSkeleton);

package/dist/esm/lib/Consultations/ConsultationCard/index.js

@@ -0,0 +1,2 @@
+export { default } from './ConsultationCard';
+export * from './types';

package/dist/esm/lib/Consultations/ConsultationCard/types.js

@@ -0,0 +1,7 @@
+export var ConsultationCardType;
+(function (ConsultationCardType) {
+    ConsultationCardType["FEATURE"] = "feature";
+    ConsultationCardType["PAST"] = "past";
+    ConsultationCardType["LAST"] = "last";
+    ConsultationCardType["UNBOOKED"] = "unbooked";
+})(ConsultationCardType || (ConsultationCardType = {}));

package/dist/esm/lib/Consultations/ConsultationModal/ConsultationModal.js

@@ -0,0 +1,31 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useMemo, useRef } from 'react';
+import { IonIcon } from '@ionic/react';
+import { DateTime } from 'luxon';
+import { calendarNumberOutline, chatbubblesOutline, closeCircleOutline, videocamOutline, } from 'ionicons/icons';
+import { ConsultationModalContent, ConsultationModalWrapper, } from './ConsultationModal.style';
+import { Avatar } from '../../Avatar';
+import { timeNormalize } from '../utils';
+import { Spinner_v2 as Spinner } from '../../../lib2';
+const ConsultationModal = ({ isOpen, sessionId, userId, isSessionFinish = false, time, timeZone = 'Europe/Kiev', name, avatar, onAvatarClick, onWriteClick, onSessionStartClick, onCancel, onReschedule, onModalClose, locale, translations, isContractLoading, }) => {
+    const modalRef = useRef(null);
+    const sessionDate = useMemo(() => DateTime.fromSeconds(time).setLocale(locale).setZone(timeZone), [time, timeZone, locale]);
+    const handleModalClose = useCallback(() => __awaiter(void 0, void 0, void 0, function* () {
+        if (!modalRef.current)
+            return;
+        yield modalRef.current.dismiss();
+    }), [modalRef]);
+    return (_jsx(ConsultationModalWrapper, Object.assign({ ref: modalRef, isOpen: isOpen, initialBreakpoint: 1, breakpoints: [0, 1], mode: "ios", onIonModalDidDismiss: onModalClose, height: isSessionFinish ? 240 : 400, swipeToClose: true }, { children: _jsx(ConsultationModalContent, { children: _jsxs("div", Object.assign({ className: "modal-content" }, { children: [_jsx("button", Object.assign({ className: "modal-close-btn", onClick: handleModalClose }, { children: _jsx(IonIcon, { icon: closeCircleOutline }) })), _jsxs("div", Object.assign({ className: "session-info" }, { children: [_jsxs("div", Object.assign({ className: "session-info-data" }, { children: [_jsx("div", Object.assign({ className: `session-day${isSessionFinish ? ' session-finish' : ''}` }, { children: isSessionFinish
+                                            ? translations === null || translations === void 0 ? void 0 : translations.finishTitle
+                                            : timeNormalize(sessionDate, translations === null || translations === void 0 ? void 0 : translations.days, translations === null || translations === void 0 ? void 0 : translations.hour, translations === null || translations === void 0 ? void 0 : translations.minutes, translations === null || translations === void 0 ? void 0 : translations.from, translations === null || translations === void 0 ? void 0 : translations.started) })), _jsxs("div", Object.assign({ className: "session-name" }, { children: [translations === null || translations === void 0 ? void 0 : translations.with, " ", name] }))] })), _jsx(Avatar, { src: avatar, firstName: name, dimensions: 62, onClick: () => onAvatarClick === null || onAvatarClick === void 0 ? void 0 : onAvatarClick(userId) })] })), _jsxs("div", Object.assign({ className: "session-date-container" }, { children: [_jsxs("div", Object.assign({ className: "session-date" }, { children: [_jsx("div", Object.assign({ className: "session-date-day" }, { children: sessionDate.toFormat('EEEE, d MMMM') })), _jsxs("div", { children: [sessionDate.toLocaleString(DateTime.TIME_SIMPLE), ' ', sessionDate.toFormat('ZZZZ'), ", ", translations === null || translations === void 0 ? void 0 : translations.sessionDuration] }), _jsx("div", Object.assign({ className: "session-local-time" }, { children: translations === null || translations === void 0 ? void 0 : translations.forLocalTime }))] })), _jsxs("button", Object.assign({ className: "session-write-btn", onClick: () => onWriteClick === null || onWriteClick === void 0 ? void 0 : onWriteClick(userId) }, { children: [_jsx(IonIcon, { icon: chatbubblesOutline }), translations === null || translations === void 0 ? void 0 : translations.writeBtnLabel] }))] })), !isSessionFinish && (_jsxs(_Fragment, { children: [_jsxs("button", Object.assign({ className: "session-start-btn", onClick: () => onSessionStartClick === null || onSessionStartClick === void 0 ? void 0 : onSessionStartClick(sessionId), disabled: isContractLoading }, { children: [isContractLoading ? (_jsx("span", Object.assign({ className: "block spinner-icon" }, { children: _jsx(Spinner, { size: 24 }) }))) : (_jsx(IonIcon, { icon: videocamOutline })), translations === null || translations === void 0 ? void 0 : translations.startBtnLabel] })), _jsx("div", { className: "session-divider" }), _jsxs("div", Object.assign({ className: "session-reschedule-container" }, { children: [_jsxs("div", { children: [_jsx("div", Object.assign({ className: "session-cancel-text" }, { children: translations === null || translations === void 0 ? void 0 : translations.question })), _jsx("button", Object.assign({ className: "session-cancel-btn", onClick: () => onCancel === null || onCancel === void 0 ? void 0 : onCancel(sessionId) }, { children: translations === null || translations === void 0 ? void 0 : translations.cancelBtnLabel }))] }), _jsxs("button", Object.assign({ className: "session-reschedule-btn", onClick: () => onReschedule === null || onReschedule === void 0 ? void 0 : onReschedule(sessionId) }, { children: [_jsx(IonIcon, { icon: calendarNumberOutline }), translations === null || translations === void 0 ? void 0 : translations.rescheduleBtnLabel] }))] }))] }))] })) }) })));
+};
+export default React.memo(ConsultationModal);

package/dist/esm/lib/Consultations/ConsultationModal/ConsultationModal.style.d.ts

@@ -2,6 +2,6 @@
 type ConsultationModalWrapperProps = {
     height: number;
 };
-export declare const ConsultationModalWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@ionic/core/dist/types/components").JSX.IonModal & Pick<import("react").HTMLAttributes<HTMLIonModalElement>, "slot" | "title" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("@ionic/react/dist/types/components/IonicReactProps").IonicReactProps & import("react").RefAttributes<HTMLIonModalElement>>, any, ConsultationModalWrapperProps, never>;
-export declare const ConsultationModalContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ConsultationModalWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("@ionic/core/dist/types/components").JSX.IonModal & Omit<import("react").HTMLAttributes<HTMLIonModalElement>, "style" | "placeholder"> & import("@ionic/react/dist/types/components/IonicReactProps").IonicReactProps & import("react").RefAttributes<HTMLIonModalElement>, ConsultationModalWrapperProps>> & string & Omit<import("react").ForwardRefExoticComponent<import("@ionic/core/dist/types/components").JSX.IonModal & Omit<import("react").HTMLAttributes<HTMLIonModalElement>, "style" | "placeholder"> & import("@ionic/react/dist/types/components/IonicReactProps").IonicReactProps & import("react").RefAttributes<HTMLIonModalElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const ConsultationModalContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export {};