@capillarytech/creatives-library 8.0.129 → 8.0.130

package/v2Components/CapMpushCTA/constants.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-import messages from './messages';
-
-export const DEEP_LINK = 'DEEP_LINK';
-export const EXTERNAL_URL = 'EXTERNAL_URL';
-export const WEBSITE = 'WEBSITE';
-
-export const CTA_OPTIONS = [
-  {
-    key: DEEP_LINK,
-    value: DEEP_LINK,
-    label: <FormattedMessage {...messages.ctaLinkTypeDeep} />,
-    tooltipLabel: <FormattedMessage {...messages.ctaOptionDisabledTooltipDeepLink} />,
-  },
-  {
-    key: EXTERNAL_URL,
-    value: EXTERNAL_URL,
-    label: <FormattedMessage {...messages.ctaLinkTypeExternal} />,
-    tooltipLabel: <FormattedMessage {...messages.ctaOptionDisabledTooltipExternalLink} />,
-  },
-];
-
-export const BTN_MAX_LENGTH = 20;
-export const URL_MAX_LENGTH = 2000;

package/v2Components/CapMpushCTA/index.js

@@ -1,402 +0,0 @@
-import React, { useState, useEffect, useRef } from "react";
-import { injectIntl } from "react-intl";
-import "react-phone-input-2/lib/style.css";
-import cloneDeep from "lodash/cloneDeep";
-import CapHeading from "@capillarytech/cap-ui-library/CapHeading";
-import CapColumn from "@capillarytech/cap-ui-library/CapColumn";
-import CapInput from "@capillarytech/cap-ui-library/CapInput";
-import CapButton from "@capillarytech/cap-ui-library/CapButton";
-import CapRow from "@capillarytech/cap-ui-library/CapRow";
-import CapLabel from "@capillarytech/cap-ui-library/CapLabel";
-import CapIcon from "@capillarytech/cap-ui-library/CapIcon";
-import CapTooltip from "@capillarytech/cap-ui-library/CapTooltip";
-import CapSelect from "@capillarytech/cap-ui-library/CapSelect";
-import CapTag from '@capillarytech/cap-ui-library/CapTag';
-import globalMessages from "../../v2Containers/Cap/messages";
-import inAppMsg from "../../v2Containers/InApp/messages";
-import messages from "./messages";
-import './index.scss';
-import {
-    isUrl,
-    isValidText,
-} from "../../v2Containers/Line/Container/Wrapper/utils";
-import {
-    BTN_MAX_LENGTH,
-    DEEP_LINK,
-    EXTERNAL_URL,
-    CTA_OPTIONS,
-    URL_MAX_LENGTH,
-} from "./constants";
-import { PRIMARY } from "../../v2Containers/MobilePushNew/constants";
-
-export const CapMpushCTA = (props) => {
-    const {
-        intl,
-        ctaData = [],
-        updateHandler,
-        deleteHandler,
-        deepLink,
-        buttonType,
-    } = props;
-    const { formatMessage } = intl;
-
-    const [urlError, setUrlError] = useState(false);
-    const [buttonError, setButtonError] = useState(false);
-    const [deepLinkKeysError, setDeepLinkKeysError] = useState(false);
-    const [ctaDeepLinkValue, setCtaDeepLinkValue] = useState(ctaData[0]?.url || "");
-    const [ctaDeepLinkKeysValue, setCtaDeepLinkKeysValue] = useState(ctaData[0]?.deepLinkKeys || []);
-    const [localUrlValues, setLocalUrlValues] = useState({});
-    // Track which URLs have been manually cleared to prevent restoration
-    const clearedUrlsRef = useRef(new Set());
-    const selectedDeepLink = deepLink?.find((link) => link?.value === ctaData[0]?.url);
-    const deepLinkKeysFromSelection = selectedDeepLink?.keys;
-    
-    // Handle deep link keys value - could be array or string
-    let deepLinkKeysArray = [];
-    if (Array.isArray(ctaDeepLinkKeysValue)) {
-      deepLinkKeysArray = ctaDeepLinkKeysValue;
-    } else if (ctaDeepLinkKeysValue) {
-      deepLinkKeysArray = [ctaDeepLinkKeysValue];
-    }
-
-    let deepLinkKeysFromSelectionArray = [];
-    if (Array.isArray(deepLinkKeysFromSelection)) {
-      deepLinkKeysFromSelectionArray = deepLinkKeysFromSelection;
-    } else if (deepLinkKeysFromSelection) {
-      deepLinkKeysFromSelectionArray = [deepLinkKeysFromSelection];
-    }
-
-    useEffect(() => {
-        const urlValues = {};
-        ctaData.forEach((cta) => {
-            if (cta && typeof cta.index !== 'undefined') {
-                // Don't restore URLs that have been manually cleared
-                const wasManuallyCleared = clearedUrlsRef.current.has(cta.index);
-                urlValues[cta.index] = wasManuallyCleared ? '' : (cta.url || '');
-                
-
-            }
-        });
-        setLocalUrlValues(urlValues);
-    }, [ctaData]);
-
-    const updateHelper = (type, value, index) => {
-        let clonedCta = cloneDeep(ctaData[index]);
-        clonedCta = {
-            ...clonedCta,
-            [type]: value,
-        };
-        
-        if (type === 'url') {
-            setLocalUrlValues(prev => ({
-                ...prev,
-                [index]: value
-            }));
-        }
-        
-        updateHandler(clonedCta, index);
-    };
-
-    const renderLength = (len, max) => (
-        <CapHeading
-            type="label1"
-            className="inapp-render-btn-length"
-        >
-            {formatMessage(inAppMsg.templateMessageLength, {
-                currentLength: len,
-                maxLength: max,
-            })}
-        </CapHeading>
-    );
-
-
-    const onButtonTextChange = ({ target }) => {
-        const { value, id } = target;
-        let errorMessage = "";
-        if (!isValidText(value)) {
-            errorMessage = formatMessage(messages.ctaButtonErrorMessage);
-        }
-        setButtonError(errorMessage);
-        updateHelper("text", value, id);
-    };
-
-    const onUrlTypeChange = (value, index) => {
-        // Mark this URL as manually cleared to prevent restoration
-        clearedUrlsRef.current.add(index);
-        
-        // Clear the URL field when switching between link types
-        updateHelper('url', '', index);
-        
-        // Immediately clear the local URL state for this button
-        setLocalUrlValues(prev => ({
-            ...prev,
-            [index]: ''
-        }));
-        
-        // Also clear the local deep link state
-        setCtaDeepLinkValue('');
-        // Clear any URL errors
-        setUrlError(false);
-        // Update the URL type
-        updateHelper('urlType', value, index);
-    };
-
-    const onUrlChange = ({ target }) => {
-        const { value, dataset } = target;
-        const index = parseInt(dataset.index, 10);
-        
-        // If user is typing a new URL, remove from cleared set
-        if (value && value.trim() !== '') {
-            clearedUrlsRef.current.delete(index);
-        }
-        
-        let errorMessage = false;
-        if (!isUrl(value)) {
-            errorMessage = formatMessage(messages.ctaWebsiteUrlErrorMessage);
-        }
-        setUrlError(errorMessage);
-        
-        // Update local state immediately for instant UI feedback
-        setLocalUrlValues(prev => ({
-            ...prev,
-            [index]: value
-        }));
-        
-        updateHelper('url', value, index);
-    };
-
-    const onDeepLinkSelect = (value, index) => {
-        setCtaDeepLinkValue(value);
-        let errorMessage = false;
-        if (!isUrl(value)) {
-            errorMessage = formatMessage(messages.ctaWebsiteUrlErrorMessage);
-        }
-        setUrlError(errorMessage);
-        updateHelper('url', value, index);
-    };
-
-    const onDeepLinkKeysChange = ({ target }) => {
-        const { value, dataset } = target;
-        const index = parseInt(dataset.index, 10);
-        // Parse comma-separated values into array
-        const keysArray = value.split(',').map((key) => key.trim()).filter((key) => key.length > 0);
-        setCtaDeepLinkKeysValue(keysArray);
-        setDeepLinkKeysError(keysArray.length === 0);
-        updateHelper('deepLinkKeys', keysArray, index);
-    };
-
-    const ctaSaveDisabled = (index) => {
-        const { urlType, text, url } = ctaData[index] || {};
-        if (text === "" || buttonError) {
-            return true;
-        } else if (urlType === DEEP_LINK && (ctaDeepLinkValue === "" || urlError)) {
-            return true;
-        } else if (urlType === DEEP_LINK && ctaDeepLinkValue && deepLinkKeysFromSelectionArray.length > 0 && (!Array.isArray(ctaDeepLinkKeysValue) || ctaDeepLinkKeysValue.length === 0 || deepLinkKeysError)) {
-            return true;
-        } else if (urlType === EXTERNAL_URL && (url === "" || urlError)) {
-            return true;
-        }
-    };
-
-    const isSavedCta = (index, saved) => {
-        updateHelper("isSaved", saved, index);
-    };
-
-    const renderedContent = () => {
-        const renderArray = [];
-        const filteredCtaData = ctaData?.filter((cta) => {
-            if (buttonType === PRIMARY) {
-                return cta.index === 0;
-            } else {
-                return cta.index === 1;
-            }
-        });
-        
-        filteredCtaData?.forEach((cta) => {
-            const { index, text, url, urlType, isSaved } = cta || {};
-            if (isSaved) {
-                renderArray.push(
-                    <CapRow
-                        className="cap-inapp-saved-cta"
-                        align="middle"
-                        type="flex"
-                    >
-                        <CapRow className="inapp-cta-row">
-                            <CapColumn>
-                                <CapIcon size="s" type={'launch'} className="btn-icon" />
-                            </CapColumn>
-                            <CapColumn className="btn-text">
-                                <CapLabel type="label2" className="inapp-saved-cta-button-text">
-                                    {text}
-                                </CapLabel>
-                            </CapColumn>
-                        </CapRow>
-                        <CapColumn >
-                            {urlType === DEEP_LINK ?
-                                <CapTag className="cta-type-label">{formatMessage(messages.urlDeepLink)}</CapTag>
-                                : <CapTag className="cta-type-label">{formatMessage(messages.urlExternalLink)}</CapTag>}
-                        </CapColumn>
-                        <CapColumn>
-                            {urlType === DEEP_LINK ? selectedDeepLink?.label : ''}
-                        </CapColumn>
-                        <CapColumn>
-                            {urlType === DEEP_LINK && deepLinkKeysFromSelectionArray.length > 0 && (ctaData[index]?.deepLinkKeys || selectedDeepLink?.keys) ? (
-                                <CapLabel type="label2" className="inapp-saved-cta-deep-link-keys">
-                                    {(() => {
-                                        const keys = selectedDeepLink?.keys || ctaData[index].deepLinkKeys;
-                                        if (Array.isArray(keys)) {
-                                            return keys.join(', ');
-                                        }
-                                        return keys;
-                                    })()}
-                                </CapLabel>
-                            ) : ''}
-                        </CapColumn>
-                        {(
-                            <CapRow className="cta-action-grp">
-                                <CapColumn
-                                    className="inapp-saved-cta-edit-icon"
-                                    onClick={() => isSavedCta(index, false)}
-                                >
-                                    <CapIcon size="s" type="edit" className="cta-action" />
-                                </CapColumn>
-                                <CapColumn onClick={() => deleteHandler(index)} className="cta-del-icon">
-                                    <CapIcon size="s" type="delete" className="cta-action" ariaLabel="delete-cta-icon" />
-                                </CapColumn>
-                            </CapRow>
-                        )}
-                    </CapRow>
-                );
-            } else {
-                renderArray.push(
-                    <CapRow
-                        className="cap-inapp-cta"
-                        id={`cap-inapp-cta-${index}`}
-                    >
-                        <CapColumn>
-                            <CapHeading type="h4" className="cta-label">
-                                {buttonType === PRIMARY ? formatMessage(messages.ctaButtonText) : formatMessage(messages.ctaButtonTextSecondary)}
-                            </CapHeading>
-                            <CapInput
-                                id={index}
-                                onChange={onButtonTextChange}
-                                placeholder={formatMessage(messages.ctaButtonTextPlaceholder)}
-                                value={text}
-                                maxLength={BTN_MAX_LENGTH}
-                                errorMessage={buttonError}
-                            />
-                            {renderLength(text.length, BTN_MAX_LENGTH)}
-                        </CapColumn>
-                        <CapColumn className="inapp-cta-buttons">
-                            <CapRow style={{ width: '30%', marginRight: '10px' }}>
-                                <CapHeading type="h4" className="cta-label">
-                                    {formatMessage(messages.ctaType)}
-                                </CapHeading>
-                                <CapSelect.CapCustomSelect
-                                    id="inapp-cta-type"
-                                    key="mpush-cta-type"
-                                    options={CTA_OPTIONS || []}
-                                    onChange={(value) => onUrlTypeChange(value, index)}
-                                    value={urlType}
-                                />
-                            </CapRow>
-                            {urlType === DEEP_LINK && (
-                                <CapRow style={{ width: '70%' }}>
-                                    <CapHeading type="h4">
-                                        {formatMessage(messages.urlDeepLink)}
-                                    </CapHeading>
-                                    <CapSelect.CapCustomSelect
-                                        id="inapp-deep-link-type"
-                                        key="mpush-deep-link-type"
-                                        placeholder={formatMessage(messages.ctaDeepLinkOptionsPlaceholder)}
-                                        options={deepLink || []}
-                                        onChange={(value) => onDeepLinkSelect(value, index)}
-                                        value={ctaDeepLinkValue}
-                                    />
-                                </CapRow>
-                            )}
-                            {urlType === EXTERNAL_URL && (
-                                <CapRow style={{ width: '70%' }}>
-                                    <CapHeading type="h4">
-                                        {formatMessage(messages.urlExternalLink)}
-                                    </CapHeading>
-                                    <CapInput
-                                        id="inapp-cta-external-link"
-                                        className="inapp-cta-external-link"
-                                        onChange={onUrlChange}
-                                        placeholder={formatMessage(messages.ctaExternalLinkPlaceholder)}
-                                        value={localUrlValues[index] || ''}
-                                        size="large"
-                                        maxLength={URL_MAX_LENGTH}
-                                        errorMessage={urlError}
-                                        data-index={index}
-                                    />
-                                </CapRow>
-                            )}
-                        </CapColumn>
-                        {urlType === DEEP_LINK && ctaDeepLinkValue && deepLinkKeysFromSelectionArray.length > 0 && (
-                            <CapRow style={{ marginTop: '10px' }}>
-                                <CapHeading type="h4">
-                                    {formatMessage(messages.deepLinkKeys)}
-                                </CapHeading>
-                                                                    <CapLabel type="label2" className="cta-deep-link-keys-value">
-                                        {(() => {
-                                            if (deepLinkKeysFromSelectionArray.length > 0) {
-                                                return deepLinkKeysFromSelectionArray.join(', ');
-                                            }
-                                            if (deepLinkKeysArray.length > 0) {
-                                                return deepLinkKeysArray.join(', ');
-                                            }
-                                            return "No value set";
-                                        })()}
-                                    </CapLabel>
-                                                                    <CapInput
-                                        id="inapp-deep-link-keys"
-                                        className="inapp-deep-link-keys"
-                                        onChange={onDeepLinkKeysChange}
-                                        placeholder={formatMessage(messages.deepLinkKeysPlaceholder, { key: deepLinkKeysFromSelectionArray.join(', ') || 'deep link keys' })}
-                                        value={Array.isArray(ctaDeepLinkKeysValue) ? ctaDeepLinkKeysValue.join(', ') : (ctaDeepLinkKeysValue || '')}
-                                        size="large"
-                                        data-index={index}
-                                        errorMessage={deepLinkKeysError ? formatMessage(messages.deepLinkKeysRequired) : ""}
-                                    />
-                            </CapRow>
-                        )}
-                        <CapRow className="inapp-cta-save-delete-btn">
-                            <CapTooltip
-                                title={
-                                    ctaSaveDisabled(index)
-                                        ? formatMessage(messages.ctaSaveDisabled)
-                                        : ""
-                                }
-                                placement={"bottom"}
-                            >
-                                <div className="button-disabled-tooltip-wrapper">
-                                    <CapButton
-                                        onClick={() => isSavedCta(index, true)}
-                                        disabled={ctaSaveDisabled(index)}
-                                        className="inapp-cta-save-btn"
-                                    >
-                                        {formatMessage(globalMessages.save)}
-                                    </CapButton>
-                                </div>
-                            </CapTooltip>
-                            <CapButton
-                                onClick={() => deleteHandler(index)}
-                                className="inapp-cta-delete-btn"
-                                type="secondary"
-                            >
-                                {formatMessage(globalMessages.delete)}
-                            </CapButton>
-                        </CapRow>
-                    </CapRow>
-                );
-            }
-        });
-        return renderArray;
-    };
-
-    return renderedContent();
-};
-
-export default injectIntl(CapMpushCTA);

package/v2Components/CapMpushCTA/index.scss

@@ -1,95 +0,0 @@
-@import '~@capillarytech/cap-ui-library/styles/_variables.scss';
-
-.cap-inapp-cta {
-    margin-top: $CAP_SPACE_16;
-    margin-left: 1.6rem;
-    padding: $CAP_SPACE_16 $CAP_SPACE_24;
-    border: 1px solid $CAP_G06;
-    border-radius: $CAP_SPACE_04;
-
-    .inapp-cta-buttons {
-        margin-top: $CAP_SPACE_12;
-        display: flex;
-        flex-direction: row;
-        align-items: flex-end;
-        justify-content: space-between;
-
-        .inapp-render-btn-length {
-            margin-top: $CAP_SPACE_12;
-            width: 90%;
-            margin-left: 52%;
-            margin-bottom: $CAP_SPACE_12;
-        }
-    }
-
-    #inapp-deep-link-type {
-        width: 100%;
-        margin-top: $CAP_SPACE_12;
-    }
-
-    .inapp-cta-external-link {
-        margin-top: $CAP_SPACE_12;
-    }
-
-    .inapp-cta-save-delete-btn {
-        margin-top: $CAP_SPACE_16;
-
-        .inapp-cta-save-btn {
-            margin-right: $CAP_SPACE_04;
-        }
-        .inapp-cta-delete-btn {
-            margin-left: $CAP_SPACE_04;
-        }
-    }
-    
-}
-
-.cap-inapp-saved-cta {
-    border: solid 1px $CAP_G06;
-    margin-left: $CAP_SPACE_20;
-    display: flex;
-    justify-content: space-between;
-    padding: $CAP_SPACE_08 $CAP_SPACE_12;
-    border-radius: $CAP_SPACE_04;
-    margin-top: $CAP_SPACE_12;
-    height: $CAP_SPACE_40;
-
-    .inapp-saved-cta-button-text {
-        font-weight: 500;
-        padding-left: $CAP_SPACE_16;
-    }
-
-    .inapp-saved-cta-edit-icon {
-        margin-left: 4.286rem;
-    }
-}
-.cta-label {
-    margin-bottom: $CAP_SPACE_08;
-}
-.cta-type-label {
-    border-radius: 1rem;
-    background-color: $CAP_G08;
-    width: $CAP_SPACE_80;
-    height: $CAP_SPACE_24 !important;
-    align-items: center;
-    justify-content: center;
-}
-.cta-action {
-    cursor: pointer;
-}
-.inapp-cta-row {
-    display: flex;
-    align-items: center;
-}
-.cta-action-grp {
-    display: flex;
-}
-.cta-del-icon {
-    padding-left: 1rem;
-}
-.btn-text {
-    margin-left: $CAP_SPACE_08;
-}
-.btn-icon {
-    color: $CAP_G06;
-}

package/v2Components/CapMpushCTA/messages.js

@@ -1,101 +0,0 @@
-import { defineMessages } from 'react-intl';
-const prefix = `creatives.componentsV2.CapMpushCTA`;
-export default defineMessages({
-  ctaType: {
-    id: `${prefix}.ctaType`,
-    defaultMessage: 'Type of link',
-  },
-  urlDeepLink: {
-    id: `${prefix}.urlDeepLink`,
-    defaultMessage: 'Deep link',
-  },
-  deepLinkKeys: {
-    id: `${prefix}.deepLinkKeys`,
-    defaultMessage: 'Deep Link Keys',
-  },
-      deepLinkKeysPlaceholder: {
-      id: `${prefix}.deepLinkKeysPlaceholder`,
-      defaultMessage: 'Please input {key}',
-    },
-    deepLinkKeysRequired: {
-      id: `${prefix}.deepLinkKeysRequired`,
-      defaultMessage: 'Value cannot be empty.',
-    },
-  urlExternalLink: {
-    id: `${prefix}.urlExternalLink`,
-    defaultMessage: 'External link',
-  },
-  ctaButtonText: {
-    id: `${prefix}.ctaButtonText`,
-    defaultMessage: 'Primary button text',
-  },
-  ctaButtonTextSecondary: {
-    id: `${prefix}.ctaButtonTextSecondary`,
-    defaultMessage: 'Secondary button text',
-  },
-  ctaDeepLinkOptionsPlaceholder: {
-    id: `${prefix}.ctaDeepLinkOptionsPlaceholder`,
-    defaultMessage: 'Select deep link',
-  },
-  ctaExternalLinkPlaceholder: {
-    id: `${prefix}.ctaExternalLinkPlaceholder`,
-    defaultMessage: 'Enter the external link',
-  },
-  ctaButtonTextPlaceholder: {
-    id: `${prefix}.ctaButtonTextPlaceholder`,
-    defaultMessage: 'Enter button text',
-  },
-  ctaWebsiteType: {
-    id: `${prefix}.ctaWebsiteType`,
-    defaultMessage: 'URL Type',
-  },
-  ctaLinkTypeDeep: {
-    id: `${prefix}.ctaLinkTypeDeep`,
-    defaultMessage: 'Deep link',
-  },
-  ctaLinkTypeExternal: {
-    id: `${prefix}.ctaLinkTypeExternal`,
-    defaultMessage: 'External link',
-  },
-  ctaWebsiteUrl: {
-    id: `${prefix}.ctaWebsiteUrl`,
-    defaultMessage: 'Website URL',
-  },
-  ctaStaticPlaceholder: {
-    id: `${prefix}.ctaStaticPlaceholder`,
-    defaultMessage: 'Enter website URL',
-  },
-  ctaWebsiteUrlErrorMessage: {
-    id: `${prefix}.ctaWebsiteUrlErrorMessage`,
-    defaultMessage: 'URL is not valid',
-  },
-  ctaButtonErrorMessage: {
-    id: `${prefix}.ctaButtonErrorMessage`,
-    defaultMessage: "Newlines, Emojis, or Special characters are not allowed",
-  },
-  ctaSaveDisabled: {
-    id: `${prefix}.ctaSaveDisabled`,
-    defaultMessage: 'Please complete the above fields to enable button',
-  },
-  ctaButtonTextTooltip: {
-    id: `${prefix}.ctaButtonTextTooltip`,
-    defaultMessage:
-      'Use this to name the button. We would recommend not to use special characters for the button text.',
-  },
-  ctaOptionDisabledTooltipDeepLink: {
-    id: `${prefix}.ctaOptionDisabledTooltipDeepLink`,
-    defaultMessage: 'A page within the mobile app',
-  },
-  ctaOptionDisabledTooltipExternalLink: {
-    id: `${prefix}.ctaOptionDisabledTooltipExternalLink`,
-    defaultMessage: 'An external web page',
-  },
-  staticUrlWithVarErrorMessage: {
-    id: `${prefix}.staticUrlWithVarErrorMessage`,
-    defaultMessage: 'Button with url type as static cannot contain variables',
-  },
-  useTwoBracketsOnly: {
-    id: `${prefix}.useTwoBracketsOnly`,
-    defaultMessage: 'Use two brackets on each side to declare a variable',
-  },
-});

package/v2Components/TemplatePreview/assets/images/Android _ With date and time.svg

@@ -1,29 +0,0 @@
-<svg width="380" height="632" viewBox="0 0 380 632" fill="none" xmlns="http://www.w3.org/2000/svg">
-<mask id="mask0_195_164721" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="380" height="632">
-<rect width="380" height="632" fill="#D9D9D9"/>
-</mask>
-<g mask="url(#mask0_195_164721)">
-<path d="M377.084 179.127H378.056C379.129 179.127 380 180.192 380 181.506V299.612C380 300.925 379.129 301.99 378.056 301.99H377.084V179.127Z" fill="#DFE2E7"/>
-<path d="M377.084 368.589H378.056C379.129 368.589 380 369.654 380 370.967V430.512C380 431.826 379.129 432.891 378.056 432.891H377.084V368.589Z" fill="#DFE2E7"/>
-<path d="M0 100.357C0 55.6747 0 33.3334 10.7113 18.516C12.2323 16.4119 13.8909 14.4523 15.6717 12.6553C28.213 0 47.1224 0 84.9412 0H292.143C329.962 0 348.871 0 361.413 12.6553C363.194 14.4523 364.852 16.4119 366.373 18.516C377.084 33.3334 377.084 55.6747 377.084 100.357V884.843C377.084 929.525 377.084 951.867 366.373 966.684C364.852 968.788 363.194 970.748 361.413 972.545C348.871 985.2 329.962 985.2 292.143 985.2H84.9412C47.1224 985.2 28.213 985.2 15.6717 972.545C13.8909 970.748 12.2323 968.788 10.7113 966.684C0 951.867 0 929.525 0 884.843V100.357Z" fill="#DFE2E7"/>
-<path d="M1.94336 92.8361C1.94336 55.2748 1.94336 36.4942 10.4977 23.6736C12.4375 20.7665 14.6606 18.1399 17.1212 15.8481C27.9723 5.74121 43.868 5.74121 75.6595 5.74121H301.424C333.216 5.74121 349.111 5.74121 359.962 15.8481C362.423 18.1399 364.646 20.7665 366.586 23.6736C375.14 36.4942 375.14 55.2748 375.14 92.8361V892.364C375.14 929.925 375.14 948.706 366.586 961.526C364.646 964.433 362.423 967.06 359.962 969.352C349.111 979.459 333.216 979.459 301.424 979.459H75.6595C43.868 979.459 27.9723 979.459 17.1212 969.352C14.6606 967.06 12.4375 964.433 10.4977 961.526C1.94336 948.706 1.94336 929.925 1.94336 892.364V92.8361Z" fill="#EBECF0"/>
-<rect x="8" y="17.5557" width="363" height="943.6" rx="36" fill="#EBECF0"/>
-<path d="M8 51C8 31.1177 24.1177 15 44 15H335C354.882 15 371 31.1177 371 51V59H8V51Z" fill="#F4F5F7"/>
-<text fill="#2C2C2C" xml:space="preserve" style="white-space: pre" font-family="Roboto" font-size="14" letter-spacing="0em"><tspan x="32" y="43.7852">2:29</tspan></text>
-<path d="M285.717 35.3538C285.671 35.3973 285.616 35.4319 285.555 35.4554C285.494 35.479 285.429 35.4911 285.364 35.4911C285.298 35.4911 285.233 35.479 285.172 35.4554C285.112 35.4319 285.056 35.3973 285.01 35.3538L282.889 33.3651C282.796 33.2771 282.744 33.1581 282.744 33.0343C282.745 32.9105 282.798 32.7918 282.891 32.7042C282.984 32.6167 283.111 32.5673 283.243 32.5669C283.375 32.5666 283.502 32.6152 283.596 32.7022L285.717 34.6909C285.764 34.7344 285.8 34.7861 285.826 34.843C285.851 34.8998 285.864 34.9608 285.864 35.0224C285.864 35.0839 285.851 35.1449 285.826 35.2017C285.8 35.2586 285.764 35.3103 285.717 35.3538ZM275.111 32.7022C275.017 32.6143 274.89 32.5649 274.757 32.5649C274.624 32.5649 274.497 32.6143 274.404 32.7022L272.282 34.6909C272.188 34.7788 272.136 34.898 272.136 35.0224C272.136 35.1467 272.188 35.2659 272.282 35.3538C272.376 35.4417 272.503 35.4911 272.636 35.4911C272.768 35.4911 272.896 35.4417 272.989 35.3538L275.111 33.3651C275.157 33.3216 275.194 33.2699 275.219 33.2131C275.244 33.1562 275.257 33.0952 275.257 33.0337C275.257 32.9721 275.244 32.9112 275.219 32.8543C275.194 32.7974 275.157 32.7457 275.111 32.7022V32.7022ZM284.998 38.8561C284.999 38.9039 285 38.9518 285 38.9999C285 39.0479 284.999 39.0958 284.998 39.1437C284.998 39.15 284.997 39.1563 284.997 39.1625C284.996 39.2045 284.994 39.2465 284.992 39.2885L284.992 39.2928C284.914 40.6815 284.291 41.9941 283.242 42.9774C282.194 43.9606 280.793 44.5449 279.312 44.6173L279.308 44.6175C279.263 44.6197 279.218 44.6212 279.173 44.6223C279.167 44.6225 279.16 44.6229 279.153 44.6231C279.102 44.6242 279.051 44.6248 279 44.6249C278.949 44.6249 278.897 44.6243 278.846 44.6231C278.84 44.6229 278.833 44.6225 278.826 44.6223C278.781 44.6212 278.737 44.6196 278.692 44.6175L278.687 44.6173C277.206 44.5449 275.806 43.9607 274.757 42.9774C273.708 41.9941 273.085 40.6815 273.008 39.2928L273.008 39.2884C273.005 39.2465 273.004 39.2045 273.002 39.1625C273.002 39.1563 273.002 39.15 273.002 39.1437C273 39.0958 273 39.0479 273 38.9999C273 38.9518 273 38.9039 273.002 38.8561C273.002 38.8498 273.002 38.8435 273.002 38.8372C273.004 38.7951 273.005 38.7532 273.008 38.7112L273.008 38.707C273.085 37.3183 273.708 36.0057 274.757 35.0224C275.806 34.0391 277.206 33.4549 278.687 33.3824L278.692 33.3822C278.737 33.3801 278.781 33.3785 278.826 33.3774C278.833 33.3772 278.84 33.3769 278.846 33.3767C278.897 33.3755 278.948 33.3749 279 33.3749C279.051 33.3749 279.102 33.3755 279.153 33.3767C279.16 33.3769 279.167 33.3772 279.173 33.3774C279.218 33.3786 279.263 33.3801 279.308 33.3822L279.312 33.3824C280.793 33.4549 282.194 34.0391 283.242 35.0224C284.291 36.0056 284.914 37.3183 284.992 38.707L284.992 38.7113C284.994 38.7532 284.996 38.7951 284.997 38.8372C284.997 38.8435 284.998 38.8498 284.998 38.8561H284.998ZM283 38.9999C283 38.8755 282.947 38.7563 282.853 38.6684C282.759 38.5805 282.632 38.5311 282.5 38.5311H279.5V35.7186C279.5 35.5943 279.447 35.4751 279.353 35.3872C279.259 35.2993 279.132 35.2499 279 35.2499C278.867 35.2499 278.74 35.2993 278.646 35.3872C278.552 35.4751 278.5 35.5943 278.5 35.7186V38.9999C278.5 39.1242 278.552 39.2434 278.646 39.3313C278.74 39.4192 278.867 39.4686 279 39.4686H282.5C282.632 39.4686 282.759 39.4192 282.853 39.3313C282.947 39.2434 283 39.1242 283 38.9999Z" fill="#2C2C2C"/>
-<path d="M300 41.8C299.817 41.8008 299.636 41.8377 299.468 41.9085C299.299 41.9793 299.146 42.0827 299.017 42.2127C298.888 42.3427 298.786 42.4968 298.717 42.6662C298.648 42.8356 298.613 43.017 298.614 43.2C298.614 43.9728 299.235 44.6 300 44.6C300.183 44.5991 300.364 44.5622 300.533 44.4913C300.702 44.4205 300.855 44.3171 300.983 44.1871C301.112 44.0571 301.214 43.903 301.283 43.7336C301.352 43.5643 301.387 43.383 301.386 43.2C301.386 42.4265 300.766 41.8 300 41.8ZM297.06 40.2306L298.04 41.2204C298.296 40.9607 298.602 40.7544 298.938 40.6136C299.275 40.4728 299.636 40.4003 300.001 40.4003C300.365 40.4003 300.727 40.4728 301.063 40.6136C301.4 40.7544 301.705 40.9607 301.961 41.2204L302.94 40.2306C302.556 39.841 302.099 39.5317 301.594 39.3205C301.089 39.1093 300.547 39.0006 300 39.0006C299.453 39.0006 298.912 39.1093 298.407 39.3205C297.902 39.5317 297.444 39.841 297.06 40.2306ZM295.1 38.2496L296.08 39.2394C296.592 38.7201 297.203 38.3077 297.876 38.0262C298.548 37.7447 299.271 37.5997 300 37.5997C300.729 37.5997 301.452 37.7447 302.124 38.0262C302.797 38.3077 303.408 38.7201 303.92 39.2394L304.9 38.2496C304.26 37.6004 303.497 37.0848 302.656 36.733C301.815 36.3811 300.912 36.1999 300 36.1999C299.089 36.1999 298.186 36.3811 297.345 36.733C296.503 37.0848 295.741 37.6004 295.1 38.2496V38.2496ZM293.14 36.27L294.12 37.2598C294.888 36.4806 295.803 35.8619 296.813 35.4395C297.822 35.0172 298.906 34.7997 300 34.7997C301.094 34.7997 302.178 35.0172 303.187 35.4395C304.197 35.8619 305.112 36.4806 305.88 37.2598L306.86 36.27C305.964 35.3609 304.896 34.6391 303.718 34.1463C302.541 33.6536 301.277 33.3999 300 33.3999C298.723 33.3999 297.459 33.6536 296.282 34.1463C295.104 34.6391 294.036 35.3609 293.14 36.27V36.27Z" fill="#2C2C2C"/>
-<path d="M313.5 42.75H314.84V45H313.5V42.75Z" fill="#2C2C2C"/>
-<path d="M316.382 40.25H317.722V45H316.382V40.25Z" fill="#2C2C2C"/>
-<path d="M319.264 37.75H320.604V44.9998H319.264V37.75Z" fill="#2C2C2C"/>
-<path d="M322.145 35.25H323.485V44.9998H322.145V35.25Z" fill="#2C2C2C"/>
-<path d="M325.026 33H326.367V45H325.026V33Z" fill="#2C2C2C"/>
-<path d="M343.611 45.5834H336.329C335.928 45.5834 335.601 45.2777 335.601 44.9042V33.3584C335.601 32.9848 335.928 32.6792 336.329 32.6792H343.611C344.011 32.6792 344.339 32.9848 344.339 33.3584V44.9042C344.339 45.2777 344.011 45.5834 343.611 45.5834Z" fill="#CFD8DC"/>
-<path d="M341.426 35.0562H338.514C338.295 35.0562 338.149 34.9204 338.149 34.7167V32.3396C338.149 32.1358 338.295 32 338.514 32H341.426C341.645 32 341.791 32.1358 341.791 32.3396V34.7167C341.791 34.9204 341.645 35.0562 341.426 35.0562Z" fill="#CFD8DC"/>
-<path d="M343.611 45.5834H336.329C335.928 45.5834 335.601 45.2778 335.601 44.9042V38.4521H344.339V44.9042C344.339 45.2778 344.011 45.5834 343.611 45.5834Z" fill="#6B6B6B"/>
-<text fill="#091E42" xml:space="preserve" style="white-space: pre" font-family="Roboto" font-size="28" font-weight="600" letter-spacing="0px"><tspan x="136.5" y="146.57">2:29 PM</tspan></text>
-<text fill="#5E6C84" xml:space="preserve" style="white-space: pre" font-family="Roboto" font-size="12" letter-spacing="0px"><tspan x="161.598" y="171.102">Fri, 12 Dec</tspan></text>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M188.527 47.0783C193.95 47.0783 198.346 41.9374 198.346 35.5958C198.346 29.2542 193.95 24.1133 188.527 24.1133C183.104 24.1133 178.708 29.2542 178.708 35.5958C178.708 41.9374 183.104 47.0783 188.527 47.0783Z" fill="#DFE2E7"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M188.528 42.7726C191.917 42.7726 194.665 39.5595 194.665 35.596C194.665 31.6325 191.917 28.4194 188.528 28.4194C185.138 28.4194 182.391 31.6325 182.391 35.596C182.391 39.5595 185.138 42.7726 188.528 42.7726Z" fill="#B3BAC5"/>
-<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M188.527 34.1607C189.205 34.1607 189.755 33.5181 189.755 32.7254C189.755 31.9327 189.205 31.29 188.527 31.29C187.849 31.29 187.3 31.9327 187.3 32.7254C187.3 33.5181 187.849 34.1607 188.527 34.1607Z" fill="#DFE2E7"/>
-</g>
-</svg>