@capillarytech/creatives-library 8.0.86 → 8.0.87-alpha.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.86",
+  "version": "8.0.87-alpha.1",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/services/api.js

@@ -520,7 +520,13 @@ export const checkBulkDuplicates = (data) => {
 export const createWhatsappTemplate = ({payload, gupshupMediaFile }) => {
   const data = new FormData();
   data.append('payload', JSON.stringify(payload));
-  data.append('gupshupMediaFile', gupshupMediaFile);
+  if (Array.isArray(gupshupMediaFile) && gupshupMediaFile.length) {
+    gupshupMediaFile.forEach((file, index) => {
+      data.append(`gupshupMediaFile_${index}`, file);
+    });
+  } else {
+    data.append('gupshupMediaFile', gupshupMediaFile);
+  }
   const url = `${API_ENDPOINT}/templates/WHATSAPP`;
   return request(url, getAPICallObject('POST', data, true));
 };

package/v2Components/CapWhatsappCTA/messages.js

@@ -104,4 +104,8 @@ export default defineMessages({
     id: `${prefix}.whatsappCtaTagListRevert`,
     defaultMessage: 'Reset website URL label to default value',
   },
+  url: {
+    id: `${prefix}.url`,
+    defaultMessage: 'URL',
+  },
 });

package/v2Components/CapWhatsappCarouselButton/constant.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+import capWhatsappCTAMsg from '../CapWhatsappCTA/messages';
+import capWhatsappMsg from '../../v2Containers/Whatsapp/messages';
+
+export const PHONE_NUMBER = 'PHONE_NUMBER';
+export const URL = 'URL';
+export const QUICK_REPLY = 'QUICK_REPLY';
+export const STATIC_URL = 'STATIC_URL';
+export const BTN_MAX_LENGTH = 20;
+export const PHONE_NUMBER_MAX_LENGTH = 15;
+export const URL_MAX_LENGTH = 2000;
+export const carouselButtonOptions = [
+  {
+    value: PHONE_NUMBER,
+    label: <FormattedMessage {...capWhatsappCTAMsg.ctaPhoneNo} />,
+  },
+  {
+    value: URL,
+    label: <FormattedMessage {...capWhatsappCTAMsg.url} />,
+  },
+  {
+    value: QUICK_REPLY,
+    label: <FormattedMessage {...capWhatsappMsg.btnTypeQuickReply} />,
+  },
+];
+
+export const INITIAL_CAROUSEL_PHONE_NUMBER_DATA = {
+  buttonType: PHONE_NUMBER,
+  text: '',
+  phone_number: '',
+  isSaved: false,
+  textError: "",
+};
+
+export const INITIAL_CAROUSEL_URL_DATA = {
+  buttonType: URL,
+  text: '',
+  urlType: STATIC_URL,
+  url: '',
+  isSaved: false,
+  textError: "",
+  urlError: "",
+};
+
+export const INITIAL_CAROUSEL_QUICK_REPLY_DATA = {
+  text: "",
+  buttonType: QUICK_REPLY,
+  isSaved: false,
+  textError: "",
+};

package/v2Components/CapWhatsappCarouselButton/index.js

@@ -0,0 +1,446 @@
+import React, { useState } from "react";
+import { injectIntl } from "react-intl";
+import PhoneInput from 'react-phone-input-2';
+import { cloneDeep } from "lodash";
+import 'react-phone-input-2/lib/style.css';
+import CapRow from "@capillarytech/cap-ui-library/CapRow";
+import CapRadioGroup from "@capillarytech/cap-ui-library/CapRadioGroup";
+import CapLabel from "@capillarytech/cap-ui-library/CapLabel";
+import CapColumn from "@capillarytech/cap-ui-library/CapColumn";
+import CapInput from "@capillarytech/cap-ui-library/CapInput";
+import CapHeading from "@capillarytech/cap-ui-library/CapHeading";
+import CapTooltipWithInfo from "@capillarytech/cap-ui-library/CapTooltipWithInfo";
+import CapSelect from "@capillarytech/cap-ui-library/CapSelect";
+import CapButton from "@capillarytech/cap-ui-library/CapButton";
+import CapTooltip from "@capillarytech/cap-ui-library/CapTooltip";
+import CapIcon from "@capillarytech/cap-ui-library/CapIcon";
+import { CAP_SPACE_04 } from "@capillarytech/cap-ui-library/styled/variables";
+import TagList from "../../v2Containers/TagList";
+import {
+  carouselButtonOptions,
+  INITIAL_CAROUSEL_PHONE_NUMBER_DATA,
+  INITIAL_CAROUSEL_QUICK_REPLY_DATA,
+  INITIAL_CAROUSEL_URL_DATA,
+  PHONE_NUMBER,
+  URL,
+  BTN_MAX_LENGTH,
+  PHONE_NUMBER_MAX_LENGTH,
+  URL_MAX_LENGTH,
+  QUICK_REPLY,
+} from "./constant";
+import capWhatsappMsg from '../../v2Containers/Whatsapp/messages';
+import capWhatsappCTAMsg from '../CapWhatsappCTA/messages';
+import {
+  KARIX_GUPSHUP_URL_OPTIONS, TWILIO_URL_OPTIONS, DYNAMIC_URL, STATIC_URL,
+} from "../CapWhatsappCTA/constants";
+import globalMessages from '../../v2Containers/Cap/messages';
+import { isUrl, isValidText } from '../../v2Containers/Line/Container/Wrapper/utils';
+import { HOST_TWILIO } from "../../v2Containers/Whatsapp/constants";
+import "./index.scss";
+
+export const CapWhatsappCarouselButton = (props) => {
+  const {
+    intl,
+    carouselData = [],
+    setCarouselData,
+    carouselIndex = 0,
+    hostName = '',
+    isEditFlow = false,
+    tags = [],
+    injectedTags = {},
+    selectedOfferDetails = [],
+  } = props;
+  const { formatMessage } = intl;
+  const buttonData = carouselData[carouselIndex]?.buttons || [];
+  const invalidVarRegex = /{{(.*?)}}/g;
+
+  const handleButtonType = ({ target: { value } }, buttonIndex) => {
+    const cloneCarouselData = cloneDeep(carouselData);
+    const dataMap = {
+      [PHONE_NUMBER]: INITIAL_CAROUSEL_PHONE_NUMBER_DATA,
+      [URL]: INITIAL_CAROUSEL_URL_DATA,
+      [QUICK_REPLY]: INITIAL_CAROUSEL_QUICK_REPLY_DATA,
+    };
+
+    const updatedCarouselData = cloneCarouselData.map((carousel) => {
+      carousel.buttons[buttonIndex] = dataMap[value] || dataMap.default;
+      return carousel;
+    });
+
+    setCarouselData(updatedCarouselData);
+  };
+
+  const onValueChange = (buttonIndex, fields = []) => {
+    const updatedButtonData = cloneDeep(buttonData);
+    fields.forEach((field) => {
+      updatedButtonData[buttonIndex][field.fieldName] = field.value;
+    });
+    setCarouselData(
+      carouselData.map((item, index) => index === carouselIndex
+        ? { ...item, buttons: updatedButtonData }
+        : item)
+    );
+  };
+
+  const onTagSelect = (data, index, url) => {
+    onValueChange(index, [{fieldName: 'url', value: url.replace('{{1}}', `{{${data}}}`)}]);
+  };
+
+  const revertTagSelect = (index, url) => {
+    onValueChange(index, [{fieldName: 'url', value: url.replace(invalidVarRegex, `{{1}}`)}]);
+  };
+
+  const renderLength = (len, max) => (
+    <CapHeading type="label1" className="whatsapp-render-btn-length">
+      {formatMessage(capWhatsappMsg.templateMessageLength, {
+        currentLength: len,
+        maxLength: max,
+      })}
+    </CapHeading>
+  );
+
+  const onUrlChange = ({ target }, urlType, buttonIndex) => {
+    let { value } = target;
+    if (urlType === DYNAMIC_URL) {
+      value = value.replace(invalidVarRegex, '');
+      value = `${value}{{1}}`;
+    }
+    let errorMessage = false;
+    if (!isUrl(value)) {
+      errorMessage = formatMessage(capWhatsappCTAMsg.ctaWebsiteUrlErrorMessage);
+    } else if (
+      urlType === STATIC_URL
+      && value.match(invalidVarRegex)?.length > 0
+    ) {
+      errorMessage = formatMessage(capWhatsappCTAMsg.staticUrlWithVarErrorMessage);
+    }
+    onValueChange(buttonIndex, [{fieldName: 'url', value}, {fieldName: 'urlError', value: errorMessage}]);
+  };
+
+  const onButtonTextChange = (value, buttonIndex) => {
+    let errorMessage = '';
+    if (!isValidText(value)) {
+      errorMessage = formatMessage(capWhatsappCTAMsg.ctaButtonErrorMessage);
+    }
+    onValueChange(buttonIndex, [{fieldName: 'text', value}, {fieldName: 'textError', value: errorMessage}]);
+  };
+
+  const ctaSaveDisabled = (index) => {
+    const {
+      buttonType, text, phone_number, url, textError, urlError,
+    } = buttonData[index] || {};
+    if (text === '' || textError) {
+      return true;
+    } if (buttonType === PHONE_NUMBER && phone_number.length < 5) {
+      return true;
+    } if (buttonType === URL && (url === '' || urlError)) {
+      return true;
+    }
+    return false;
+  };
+
+  const handleSaveButton = (buttonIndex) => {
+    onValueChange(buttonIndex, [{fieldName: 'isSaved', value: true}]);
+  };
+
+  const handleEditButton = (buttonIndex) => {
+    onValueChange(buttonIndex, [{fieldName: 'isSaved', value: false}]);
+  };
+
+  const handleDeleteButton = (buttonIndex) => {
+    setCarouselData((prevData) => prevData.map((carousel) => ({
+      ...carousel,
+      buttons: carousel.buttons.filter((_, index) => index !== buttonIndex),
+    })));
+  };
+
+  const addCarouselButton = () => {
+    setCarouselData(
+      carouselData.map((item, index) => index === carouselIndex
+        ? { ...item, buttons: [...buttonData, INITIAL_CAROUSEL_PHONE_NUMBER_DATA] }
+        : item)
+    );
+  };
+
+  const renderButtonContent = (buttonType, buttonIndex) => (
+    <>
+      <CapRow className="text-box-container">
+        <CapColumn span={24}>
+          {/* Button text */}
+          <CapHeading type="h4" className="cta-label">
+            {formatMessage(capWhatsappCTAMsg.ctaButtonText)}
+            <CapTooltipWithInfo
+              infoIconProps={{
+                style: { marginLeft: CAP_SPACE_04 },
+              }}
+              autoAdjustOverflow
+              placement="right"
+              title={formatMessage(capWhatsappCTAMsg.ctaButtonTextTooltip)}
+            />
+          </CapHeading>
+          <CapInput
+            className="whatsapp-cta-button-text"
+            onChange={({ target: { value } }) => onButtonTextChange(value, buttonIndex)}
+            placeholder={formatMessage(capWhatsappCTAMsg.ctaButtonTextPlaceholder)}
+            value={buttonData[buttonIndex].text}
+            size="large"
+            maxLength={BTN_MAX_LENGTH}
+            errorMessage={buttonData[buttonIndex]?.textError}
+          />
+          {renderLength(buttonData[buttonIndex]?.text?.length, BTN_MAX_LENGTH)}
+        </CapColumn>
+      </CapRow>
+      {buttonType === PHONE_NUMBER && (
+        <CapRow className="text-box-container">
+          <CapColumn span={24}>
+            {/* phone number */}
+            <CapHeading type="h4" className="cta-label">
+              {formatMessage(capWhatsappCTAMsg.ctaPhoneNo)}
+            </CapHeading>
+            <PhoneInput
+              placeholder={formatMessage(capWhatsappCTAMsg.ctaPhoneNoPlaceholder)}
+              autoFormat={false}
+              countryCodeEditable={false}
+              value={buttonData[buttonIndex].phone_number}
+              onChange={(value) => onValueChange(buttonIndex, [{fieldName: 'phone_number', value}])}
+              country="in"
+              className="cta-phone-number carousel-button-phone-number"
+            />
+            {renderLength(buttonData[buttonIndex]?.phone_number.length, PHONE_NUMBER_MAX_LENGTH)}
+          </CapColumn>
+        </CapRow>
+      )}
+      {buttonType === URL
+      && (
+        <CapRow className="text-box-container">
+          <CapColumn span={6}>
+            {/* URL Type */}
+            <CapHeading type="h4" className="cta-label">
+              {formatMessage(capWhatsappCTAMsg.ctaWebsiteType)}
+            </CapHeading>
+            <CapSelect
+              id="whatsapp-carousel-button-url-type"
+              options={
+                hostName === HOST_TWILIO
+                  ? TWILIO_URL_OPTIONS
+                  : KARIX_GUPSHUP_URL_OPTIONS
+              }
+              onChange={(value) => onValueChange(buttonIndex, [{fieldName: 'urlType', value}])}
+              value={buttonData[buttonIndex]?.urlType}
+            />
+          </CapColumn>
+          <CapColumn span={18}>
+            {/* cta url */}
+            <CapHeading type="h4" className="cta-label">
+              {formatMessage(capWhatsappCTAMsg.ctaWebsiteUrl)}
+              {buttonData[buttonIndex]?.urlType === DYNAMIC_URL && (
+                <CapTooltipWithInfo
+                  infoIconProps={{
+                    style: { marginLeft: CAP_SPACE_04 },
+                  }}
+                  autoAdjustOverflow
+                  placement="right"
+                  title={formatMessage(capWhatsappCTAMsg.dynamicUrlTooltip, { one: '{{1}}' })}
+                />
+              )}
+            </CapHeading>
+            <CapInput
+              className="whatsapp-cta-url"
+              onChange={(event) => onUrlChange(event, buttonData[buttonIndex]?.urlType, buttonIndex)}
+              placeholder={
+              buttonData[buttonIndex]?.urlType === DYNAMIC_URL
+                ? formatMessage(capWhatsappCTAMsg.ctaDynamicPlaceholder)
+                : formatMessage(capWhatsappCTAMsg.ctaStaticPlaceholder)
+              }
+              value={buttonData[buttonIndex]?.url}
+              size="large"
+              maxLength={URL_MAX_LENGTH}
+              errorMessage={buttonData[buttonIndex]?.urlError || ''}
+            />
+            {renderLength(buttonData[buttonIndex]?.url?.length, URL_MAX_LENGTH)}
+          </CapColumn>
+        </CapRow>
+      )
+      }
+      {/* it render save and delete button */}
+      <CapRow className="whatsapp-cta-save-delete-btn whatsapp-carousel-save-edit-btn">
+        <CapTooltip
+          title={
+            ctaSaveDisabled(buttonIndex)
+              && formatMessage(capWhatsappCTAMsg.ctaSaveDisabled)
+          }
+          placement="bottom"
+        >
+          <div className="button-disabled-tooltip-wrapper">
+            <CapButton
+              onClick={() => {
+                handleSaveButton(buttonIndex);
+              }}
+              disabled={ctaSaveDisabled(buttonIndex)}
+              className="whatsapp-cta-save-btn"
+            >
+              {formatMessage(globalMessages.save)}
+            </CapButton>
+            {buttonData.length > 1 && buttonIndex > 0 && parseInt(carouselIndex) === 0 && (
+              <CapButton
+                onClick={() => {
+                  handleDeleteButton(buttonIndex);
+                }}
+                className="whatsapp-cta-delete-btn whatsapp-carousel-delete-button"
+                type="secondary"
+              >
+                {formatMessage(globalMessages.delete)}
+              </CapButton>
+            )}
+          </div>
+        </CapTooltip>
+      </CapRow>
+    </>
+  );
+
+  const isCarouselAddButtonDisable = buttonData?.length === 1 && !buttonData?.[0]?.isSaved;
+
+  return (
+    <CapRow>
+      {buttonData.map((button, index) => {
+        const isPhoneNumberType = button?.buttonType === PHONE_NUMBER;
+        const isURLtype = button?.buttonType === URL;
+        if (button.isSaved || isEditFlow) {
+          return (
+            <CapRow
+              key={`${button.buttonType}_${index}`}
+              className="cap-whatsapp-saved-cta cap-whatsapp-saved-carousel-button margin-t-12"
+              align="middle"
+              type="flex"
+              style={{ marginLeft: isEditFlow ? 0 : '' }}
+            >
+              <CapColumn
+                span={1}
+                className={`${isPhoneNumberType ? 'whatsapp-saved-cta-phone-icon' : ''}`}
+              >
+                <CapIcon size="s" type={isPhoneNumberType ? 'call' : isURLtype ? 'launch' : 'six-dots'} />
+              </CapColumn>
+              <CapColumn span={6}>
+                <CapLabel
+                  type="label2"
+                  className="whatsapp-saved-cta-button-text"
+                >
+                  {button?.text}
+                </CapLabel>
+              </CapColumn>
+              {isPhoneNumberType && (
+                <CapColumn span={10} align="left">
+                  <CapLabel className="phone">
+                    {button?.phone_number}
+                  </CapLabel>
+                </CapColumn>
+              )}
+              {isURLtype && (
+                <>
+                  <CapColumn span={3}>
+                    <CapLabel className="url-type" type="label2">
+                      {button?.urlType === STATIC_URL
+                        ? formatMessage(capWhatsappCTAMsg.ctaWebsiteTypeStatic)
+                        : formatMessage(capWhatsappCTAMsg.ctaWebsiteTypeDynamic)}
+                    </CapLabel>
+                  </CapColumn>
+                  <CapTooltip title={button?.url} placement="top">
+                    <CapColumn span={7} style={{ marginRight: '0px' }}>
+                      <CapLabel className="url">{button?.url}</CapLabel>
+                    </CapColumn>
+                  </CapTooltip>
+                </>
+              )}
+              {!isEditFlow && (
+                <>
+                  <CapColumn
+                    span={1}
+                    className="whatsapp-saved-cta-edit-icon"
+                    onClick={() => handleEditButton(index)}
+                  >
+                    <CapIcon size="s" type="edit" />
+                  </CapColumn>
+                  {parseInt(carouselIndex) === 0 && (
+                    <CapColumn span={1}>
+                      <CapButton type="flat" className="whatsapp-carousel-delete-icon-btn" onClick={() => handleDeleteButton(index)} disabled={buttonData?.length === 1}>
+                        <CapIcon size="s" type="delete" />
+                      </CapButton>
+                    </CapColumn>
+                  )}
+                </>
+              )}
+              {isEditFlow && button?.urlType === DYNAMIC_URL && button?.url.includes('{{1}}') && (
+                <CapColumn>
+                  <TagList
+                    className="whatsapp-cta-taglist"
+                    label={formatMessage(capWhatsappCTAMsg.whatsappCtaTagListLabel)}
+                    onTagSelect={(data) => onTagSelect(data, index, button?.url)}
+                    tags={tags}
+                    injectedTags={injectedTags}
+                    selectedOfferDetails={selectedOfferDetails}
+                  />
+                </CapColumn>
+              )}
+              {isEditFlow && button?.urlType === DYNAMIC_URL && !button?.url.includes('{{1}}') && (
+                <CapColumn
+                  span={1}
+                  onClick={() => revertTagSelect(index, button?.url)}
+                  className="whatsapp-cta-tag-revert"
+                >
+                  <CapTooltip
+                    title={formatMessage(capWhatsappCTAMsg.whatsappCtaTagListRevert)}
+                    placement="top"
+                  >
+                    <CapIcon size="s" type="return" />
+                  </CapTooltip>
+                </CapColumn>
+              )}
+            </CapRow>
+          );
+        } return (
+          <CapRow
+            key={`${button.buttonType}_${index}`}
+            className="cap-whatsapp-carousel-button"
+          >
+            <CapLabel type="label16" className="button-type-heading">{formatMessage(capWhatsappMsg.buttonType)}</CapLabel>
+            <CapRadioGroup
+              id="carousel-button-radio"
+              options={carouselButtonOptions}
+              value={button.buttonType}
+              onChange={(e) => handleButtonType(e, index)}
+              className="whatsapp-media-radio"
+            />
+            {renderButtonContent(button.buttonType, index)}
+          </CapRow>
+        );
+      })}
+      <CapRow>
+        {buttonData?.length < 2 && !isEditFlow && parseInt(carouselIndex) === 0 && (
+          <CapRow>
+            <CapTooltip
+              title={
+                isCarouselAddButtonDisable ? formatMessage(capWhatsappCTAMsg.ctaAddDisabled) : ""
+              }
+              placement="right"
+            >
+              <div className="button-disabled-tooltip-wrapper">
+                <CapButton
+                  type="flat"
+                  id="whatsapp-quick-reply-add-button"
+                  disabled={isCarouselAddButtonDisable}
+                  className="margin-t-12 margin-l-24"
+                  isAddBtn
+                  onClick={addCarouselButton}
+                >
+                  {formatMessage(capWhatsappCTAMsg.addButton)}
+                </CapButton>
+              </div>
+            </CapTooltip>
+          </CapRow>
+        )}
+      </CapRow>
+    </CapRow>
+  );
+};
+
+export default injectIntl(CapWhatsappCarouselButton);

package/v2Components/CapWhatsappCarouselButton/index.scss

@@ -0,0 +1,39 @@
+@import "~@capillarytech/cap-ui-library/styles/_variables";
+
+.cap-whatsapp-carousel-button {
+  border: solid 0.063rem $CAP_G06;
+  padding: $CAP_SPACE_24;
+  border-radius: 0.285rem;
+  margin-top: $CAP_SPACE_12;
+  .button-type-heading {
+    margin-bottom: $CAP_SPACE_12;
+  }
+  .carousel-button-phone-number {
+    .form-control {
+      width: 100%;
+    }
+  }
+  .text-box-container {
+    margin-top: $CAP_SPACE_16;
+  }
+  #whatsapp-carousel-button-url-type {
+    width: 90%;
+  }
+  .whatsapp-carousel-save-edit-btn {
+    margin-top: $CAP_SPACE_24;
+  }
+  .whatsapp-carousel-delete-button {
+    margin-left: $CAP_SPACE_12;
+  }
+}
+
+.cap-whatsapp-saved-carousel-button {
+  width: 100%;
+  margin-left: 0;
+  margin-top: $CAP_SPACE_12;
+  .whatsapp-carousel-delete-icon-btn {
+    padding: 0;
+    margin: 0;
+    height: auto;
+  }
+}

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -567,6 +567,10 @@
         font-size: 10px;
         font-family: 'open-sans';
       }
+      &.message-pop-carousel {
+        position: relative; 
+        margin-right: 4px;
+      }
     }
   }
   .android-push-message-Container, .iphone-push-message-Container{
@@ -747,6 +751,11 @@
       width: 153px;
     }
   }
+
+  .msg-container-carousel {
+    display: flex;
+    flex-direction: column;
+  }
 }
 
 .align-center {

package/v2Components/TemplatePreview/assets/images/empty_image_preview.svg

@@ -0,0 +1,4 @@
+<svg width="258" height="140" viewBox="0 0 258 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="258" height="140" rx="4" fill="#F4F5F7"/>
+<path d="M122 79C121.45 79 120.979 78.8042 120.588 78.4125C120.196 78.0208 120 77.55 120 77V63C120 62.45 120.196 61.9792 120.588 61.5875C120.979 61.1958 121.45 61 122 61H136C136.55 61 137.021 61.1958 137.413 61.5875C137.804 61.9792 138 62.45 138 63V77C138 77.55 137.804 78.0208 137.413 78.4125C137.021 78.8042 136.55 79 136 79H122ZM122 77H136V63H122V77ZM124 75H134C134.2 75 134.35 74.9083 134.45 74.725C134.55 74.5417 134.533 74.3667 134.4 74.2L131.65 70.525C131.55 70.3917 131.417 70.325 131.25 70.325C131.083 70.325 130.95 70.3917 130.85 70.525L128.25 74L126.4 71.525C126.3 71.3917 126.167 71.325 126 71.325C125.833 71.325 125.7 71.3917 125.6 71.525L123.6 74.2C123.467 74.3667 123.45 74.5417 123.55 74.725C123.65 74.9083 123.8 75 124 75Z" fill="#5E6C84"/>
+</svg>

package/v2Components/TemplatePreview/assets/images/empty_video_preview.svg

@@ -0,0 +1,4 @@
+<svg width="258" height="140" viewBox="0 0 258 140" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="258" height="140" rx="4" fill="#F4F5F7"/>
+<path d="M123.025 74H130.975C131.192 74 131.346 73.9083 131.438 73.725C131.529 73.5417 131.508 73.3667 131.375 73.2L128.95 70.025C128.9 69.9583 128.842 69.9083 128.775 69.875C128.708 69.8417 128.633 69.825 128.55 69.825C128.467 69.825 128.392 69.8417 128.325 69.875C128.258 69.9083 128.2 69.9583 128.15 70.025L126.65 71.975C126.6 72.0417 126.542 72.0917 126.475 72.125C126.408 72.1583 126.333 72.175 126.25 72.175C126.167 72.175 126.092 72.1583 126.025 72.125C125.958 72.0917 125.9 72.0417 125.85 71.975L125.1 71C125.05 70.9333 124.992 70.8875 124.925 70.8625C124.858 70.8375 124.783 70.825 124.7 70.825C124.617 70.825 124.542 70.8375 124.475 70.8625C124.408 70.8875 124.35 70.9333 124.3 71L122.625 73.2C122.492 73.3667 122.471 73.5417 122.562 73.725C122.654 73.9083 122.808 74 123.025 74ZM121 78C120.45 78 119.979 77.8042 119.588 77.4125C119.196 77.0208 119 76.55 119 76V64C119 63.45 119.196 62.9792 119.588 62.5875C119.979 62.1958 120.45 62 121 62H133C133.55 62 134.021 62.1958 134.413 62.5875C134.804 62.9792 135 63.45 135 64V68.5L138.15 65.35C138.317 65.1833 138.5 65.1417 138.7 65.225C138.9 65.3083 139 65.4667 139 65.7V74.3C139 74.5333 138.9 74.6917 138.7 74.775C138.5 74.8583 138.317 74.8167 138.15 74.65L135 71.5V76C135 76.55 134.804 77.0208 134.413 77.4125C134.021 77.8042 133.55 78 133 78H121ZM121 76H133V64H121V76Z" fill="#5E6C84"/>
+</svg>