ordering-ui-external 10.4.0 → 10.5.0

package/src/themes/five/src/components/BusinessesListing/layouts/OriginalBusinessesListing/styles.js

@@ -202,3 +202,69 @@ export const AddressFormWrapper = styled.div`
     margin-top: 20px;
   }
 `
+
+export const IconTypeButton = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 44px;
+  height: 44px;
+  background: ${({ activated, theme }) => activated ? theme?.colors?.white : '#F3F9FF'};
+  border-radius: 44px;
+`
+
+export const TypesContainer = styled.div`
+  display: flex;
+  margin: 42px 20px 0px 20px;
+`
+
+export const AdditionalTypesContainer = styled.div`
+  width: 60%;
+  display: flex;
+  margin-bottom: 20px;
+  margin-left: 20px;
+  button {
+    padding: 4px 10px;
+    border-radius: 50px;
+    font-size: 10px;
+    line-height: 0;
+    height: 25px;
+    margin-right: 20px;
+  }
+  .activated {
+    color: ${({ theme }) => theme?.colors?.darkTextColor}
+  }
+`
+
+export const TypeButton = styled.div`
+  display: flex;
+  align-items: center;
+  width: 215px;
+  height: 75px;
+  border-radius: 7.6px;
+  padding: 16px;
+  box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.10);
+  margin-right: 32px;
+  margin-bottom: 32px;
+  cursor: pointer;
+  background: ${({ activated, theme }) => activated ? theme?.colors?.primary : theme?.colors?.white};
+  p{
+    margin: 0;
+    margin-left: 33px;
+    ${({ activated, theme }) => activated && css`
+      color: ${theme?.colors?.white};
+    `}
+  }
+`
+
+export const Title = styled.h2`
+  font-weight: 600;
+  font-size: 24px;
+  color: ${props => props.theme?.colors.headingColor};
+  margin: 0px 20px 5px 20px;
+`
+
+export const TypesWrapper = styled.div`
+  margin-left: 20px;
+  width: 600px;
+`

package/src/themes/five/src/components/Cart/index.js

@@ -8,6 +8,7 @@ import {
   useValidationFields,
   useConfig,
   useSite,
+  useSession,
   useCustomer
 } from 'ordering-components-external'
 import { Button } from '../../styles/Buttons'
@@ -73,13 +74,16 @@ const CartUI = (props) => {
     hideCouponInput,
     businessConfigs,
     loyaltyRewardRate,
-    isCustomerMode
+    isCustomerMode,
+    guestCheckoutComment,
+    guestCheckoutCupon
   } = props
 
   const theme = useTheme()
   const [, t] = useLanguage()
   const [orderState] = useOrder()
   const [events] = useEvent()
+  const [{ user: loginUser }] = useSession()
   const [{ parsePrice, parseNumber, parseDate }] = useUtils()
   const [validationFields] = useValidationFields()
   const [{ configs }] = useConfig()
@@ -107,8 +111,8 @@ const CartUI = (props) => {
   const isMultiCheckout = configs?.checkout_multi_business_enabled?.value === '1'
   const cart = cartMulticart || orderState?.carts?.[`businessId:${props.cart?.business_id}`]
   const viewString = isStore ? 'business_view' : 'header'
-  const hideCartComments = theme?.[viewString]?.components?.cart?.components?.comments?.hidden || !validationFields?.fields?.checkout?.comments?.enabled
-  const hideCartDiscount = theme?.[viewString]?.components?.cart?.components?.discount_coupon?.hidden
+  const hideCartComments = theme?.[viewString]?.components?.cart?.components?.comments?.hidden || ((loginUser?.guest_id && guestCheckoutComment) ? !guestCheckoutComment?.enabled : !validationFields?.fields?.checkout?.comments?.enabled)
+  const hideCartDiscount = theme?.[viewString]?.components?.cart?.components?.discount_coupon?.hidden || ((loginUser?.guest_id && guestCheckoutCupon) ? !guestCheckoutCupon?.enabled : !validationFields?.fields?.checkout?.comments?.enabled)
   const cateringTypeString = orderState?.options?.type === 7
     ? 'catering_delivery'
     : orderState?.options?.type === 8
@@ -142,7 +146,6 @@ const CartUI = (props) => {
     }
     return acc = acc
   }, cart?.subtotal)
-  console.log('cart', cart)
   const clearAmount = (value) => parseFloat((Math.trunc(value * 100) / 100).toFixed(configs.format_number_decimal_length?.value ?? 2))
   const loyaltyRewardValue = clearAmount((cart?.subtotal + getIncludedTaxes()) * loyaltyRewardRate)
 

package/src/themes/five/src/components/Checkout/index.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import VscWarning from '@meronex/icons/vsc/VscWarning'
 import Skeleton from 'react-loading-skeleton'
 import { useTheme } from 'styled-components'
@@ -99,7 +99,8 @@ const CheckoutUI = (props) => {
     handleStoreRedirect,
     onPlaceOrderClick,
     setPlaceSpotNumber,
-    placeSpotNumber
+    placeSpotNumber,
+    checkoutFieldsState
   } = props
 
   const theme = useTheme()
@@ -136,13 +137,18 @@ const CheckoutUI = (props) => {
   const isWalletEnabled = configs?.cash_wallet?.value && configs?.wallet_enabled?.value === '1' &&
     (isWalletCashEnabled || isWalletCreditPointsEnabled) && !useKioskApp && !isCustomerMode
   const isMultiDriverTips = theme?.header?.components?.layout?.type?.toLowerCase() === 'chew'
+  const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes', 'comments']
 
   const placeSpotTypes = [3, 4, 5]
   const placeSpotsEnabled = placeSpotTypes.includes(options?.type) && !useKioskApp
   const isGiftCardCart = !cart?.business_id
+  const guestCheckoutDriveTip = checkoutFieldsState?.fields?.find(field => field.order_type_id === 1 && field?.validation_field?.code === 'driver_tip')
+  const guestCheckoutComment = useMemo(() => checkoutFieldsState?.fields?.find(field => field.order_type_id === options?.type && field?.validation_field?.code === 'comments'), [checkoutFieldsState, options])
+  const guestCheckoutCupon = useMemo(() => checkoutFieldsState?.fields?.find(field => field.order_type_id === options?.type && field?.validation_field?.code === 'coupon'), [checkoutFieldsState, options])
   // const [hasBusinessPlaces, setHasBusinessPlaces] = useState(null)
 
-  const validateCommentsCartField = validationFields?.fields?.checkout?.comments?.enabled && validationFields?.fields?.checkout?.comments?.required && (cart?.comment === null || cart?.comment?.trim().length === 0)
+  const validateCommentsCartField = (!user?.guest_id ? (validationFields?.fields?.checkout?.comments?.enabled && validationFields?.fields?.checkout?.comments?.required) : (guestCheckoutComment?.enabled && guestCheckoutComment?.required)) && (cart?.comment === null || cart?.comment?.trim().length === 0)
+  const validateDriverTipField = options.type === 1 && (!user?.guest_id ? (validationFields?.fields?.checkout?.driver_tip?.enabled && validationFields?.fields?.checkout?.driver_tip?.required) : (guestCheckoutDriveTip?.enabled && guestCheckoutDriveTip?.required)) && (Number(cart?.driver_tip) <= 0)
 
   const validateZipcodeCard =
     validationFields?.fields?.card?.zipcode?.enabled && validationFields?.fields?.card?.zipcode?.required && paymethodSelected?.gateway === 'stripe' && paymethodSelected?.data?.card && !paymethodSelected?.data?.card?.zipcode
@@ -157,10 +163,7 @@ const CheckoutUI = (props) => {
     !cart?.valid_maximum ||
     (!cart?.valid_minimum && !(cart?.discount_type === 1 && cart?.discount_rate === 100)) ||
     // (((placeSpotTypes.includes(options?.type) && !cart?.place) && hasBusinessPlaces)) ||
-    (options.type === 1 &&
-      validationFields?.fields?.checkout?.driver_tip?.enabled &&
-      validationFields?.fields?.checkout?.driver_tip?.required &&
-      (Number(cart?.driver_tip) <= 0)) ||
+    (validateDriverTipField && !isGiftCardCart) ||
     (validateCommentsCartField) ||
     validateZipcodeCard
 
@@ -178,7 +181,7 @@ const CheckoutUI = (props) => {
   const hideBusinessDetails = theme?.checkout?.components?.business?.hidden
   const hideBusinessMap = theme?.checkout?.components?.map?.hidden
   const hideCustomerDetails = theme?.checkout?.components?.customer?.hidden
-  const driverTipsField = !cartState.loading && cart && cart?.business_id && options.type === 1 && cart?.status !== 2 && validationFields?.fields?.checkout?.driver_tip?.enabled && driverTipsOptions.length > 0 && !useKioskApp
+  const driverTipsField = !cartState.loading && cart && cart?.business_id && options.type === 1 && cart?.status !== 2 && ((!user?.guest_id && validationFields?.fields?.checkout?.driver_tip?.enabled) || (user?.guest_id && guestCheckoutDriveTip?.enabled)) && driverTipsOptions.length > 0 && !useKioskApp
 
   const creditPointPlan = loyaltyPlansState?.result?.find(loyal => loyal.type === 'credit_point')
   const creditPointPlanOnBusiness = creditPointPlan?.businesses?.find(b => b.business_id === cart?.business_id && b.accumulates)
@@ -190,8 +193,7 @@ const CheckoutUI = (props) => {
       return
     }
 
-    if (!userErrors.length && (!requiredFields?.length ||
-      (allowedGuest && (paymethodSelected?.gateway === 'cash' || paymethodSelected?.gateway === 'card_delivery')))) {
+    if (!userErrors.length && !requiredFields?.length) {
       const body = {}
       if (behalfName) {
         body.on_behalf_of = behalfName
@@ -227,10 +229,30 @@ const CheckoutUI = (props) => {
     setIsUserDetailsEdit(false)
   }
 
+  const checkGuestValidationFields = () => {
+    const userSelected = isCustomerMode ? customerState.user : user
+    const _requiredFields = checkoutFieldsState?.fields
+      .filter(field => (field?.order_type_id === options?.type) && field?.enabled && field?.required &&
+        !notFields.includes(field?.validation_field?.code) &&
+        userSelected && !userSelected[field?.validation_field?.code])
+      .map(item => item?.validation_field?.code)
+    const guestCheckoutCellPhone = checkoutFieldsState?.fields?.find(field => field.order_type_id === options?.type && field?.validation_field?.code === 'mobile_phone')
+
+    if (
+      userSelected &&
+        !userSelected?.cellphone &&
+        ((guestCheckoutCellPhone?.enabled &&
+          guestCheckoutCellPhone?.required) ||
+          configs?.verification_phone_required?.value === '1')
+    ) {
+      _requiredFields.push('cellphone')
+    }
+    setRequiredFields(_requiredFields)
+  }
+
   const checkValidationFields = () => {
     setUserErrors([])
     const errors = []
-    const notFields = ['coupon', 'driver_tip', 'mobile_phone', 'address', 'zipcode', 'address_notes', 'comments']
     const userSelected = isCustomerMode ? customerState.user : user
     const _requiredFields = []
 
@@ -294,6 +316,11 @@ const CheckoutUI = (props) => {
     }
   }, [validationFields, user, customerState])
 
+  useEffect(() => {
+    if (checkoutFieldsState?.loading || !user?.guest_id || customerState.loading || userLoading) return
+    checkGuestValidationFields()
+  }, [user, checkoutFieldsState, customerState])
+
   useEffect(() => {
     if (errors) {
       setAlertState({
@@ -313,12 +340,12 @@ const CheckoutUI = (props) => {
 
   useEffect(() => {
     if (cart?.products?.length) return
-    if (cart?.business?.slug) {
+    if (cart?.business_id !== null) {
       handleStoreRedirect(cart?.business?.slug)
     } else {
       events.emit('go_to_page', { page: 'wallets' })
     }
-  }, [cart?.products])
+  }, [JSON.stringify(cart?.products)])
 
   useEffect(() => {
     window.scrollTo(0, 0)
@@ -542,24 +569,24 @@ const CheckoutUI = (props) => {
 
         {
           !!(!isMultiDriverTips && driverTipsField) &&
-          <>
-            <DriverTipContainer>
-              <h1>{t('DRIVER_TIPS', 'Driver Tips')}</h1>
-              <p>{t('100%_OF_THE_TIP_YOUR_DRIVER', '100% of the tip goes to your driver')}</p>
-              <DriverTips
-                businessId={cart?.business_id}
-                driverTipsOptions={driverTipsOptions}
-                isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1}
-                isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
-                driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1
-                  ? cart?.driver_tip
-                  : cart?.driver_tip_rate}
-                cart={cart}
-                useOrderContext
-              />
-            </DriverTipContainer>
-            <DriverTipDivider />
-          </>
+            <>
+              <DriverTipContainer>
+                <h1>{t('DRIVER_TIPS', 'Driver Tips')}</h1>
+                <p>{t('100%_OF_THE_TIP_YOUR_DRIVER', '100% of the tip goes to your driver')}</p>
+                <DriverTips
+                  businessId={cart?.business_id}
+                  driverTipsOptions={driverTipsOptions}
+                  isFixedPrice={parseInt(configs?.driver_tip_type?.value, 10) === 1}
+                  isDriverTipUseCustom={!!parseInt(configs?.driver_tip_use_custom?.value, 10)}
+                  driverTip={parseInt(configs?.driver_tip_type?.value, 10) === 1
+                    ? cart?.driver_tip
+                    : cart?.driver_tip_rate}
+                  cart={cart}
+                  useOrderContext
+                />
+              </DriverTipContainer>
+              <DriverTipDivider />
+            </>
         }
         {!cartState.loading && placeSpotsEnabled && cart?.business_id && (
           <SelectSpotContainer>
@@ -594,6 +621,8 @@ const CheckoutUI = (props) => {
                 creditPointPlanOnBusiness?.accumulation_rate ??
                 (!!creditPointPlanOnBusiness && creditPointPlan?.accumulation_rate) ?? 0
               }
+              guestCheckoutComment={guestCheckoutComment}
+              guestCheckoutCupon={guestCheckoutCupon}
             />
           </CartContainer>
         )}
@@ -658,10 +687,7 @@ const CheckoutUI = (props) => {
           </WarningText>
         )}
 
-        {options.type === 1 &&
-          validationFields?.fields?.checkout?.driver_tip?.enabled &&
-          validationFields?.fields?.checkout?.driver_tip?.required &&
-          (Number(cart?.driver_tip) <= 0) &&
+        {validateDriverTipField && !isGiftCardCart &&
           (
             <WarningText>
               {t('WARNING_INVALID_DRIVER_TIP', 'Driver Tip is required.')}

package/src/themes/five/src/components/GiftCard/GiftCardOrdersList/index.js

@@ -0,0 +1,50 @@
+import React, { useState } from 'react'
+import { useLanguage } from 'ordering-components-external'
+import { HorizontalGiftCardOrdersLayout } from '../HorizontalGiftCardOrdersLayout'
+import {
+  Container,
+  Divider,
+  NoOrdersWrapper
+} from './styles'
+
+export const GiftCardOrdersList = (props) => {
+  const [, t] = useLanguage()
+  const [isEmptyPending, setIsEmptyPending] = useState(false)
+  const [isEmptySent, setIsEmptySent] = useState(false)
+  const [isEmptyRedeemed, setIsEmptyRedeemed] = useState(false)
+
+  return (
+    <Container>
+      <HorizontalGiftCardOrdersLayout
+        title={t('PENDING', 'Pending')}
+        defaultStatus='pending'
+        setIsEmpty={setIsEmptyPending}
+        scrollId='pendingGifts'
+      />
+
+      {isEmptyPending && isEmptySent && isEmptyRedeemed && (
+        <Divider />
+      )}
+
+      <HorizontalGiftCardOrdersLayout
+        title={t('SENT', 'Sent')}
+        defaultStatus='sent'
+        setIsEmpty={setIsEmptySent}
+        scrollId='sentGifts'
+      />
+
+      <HorizontalGiftCardOrdersLayout
+        title={t('REDEEMED', 'Redeemed')}
+        defaultStatus='activated'
+        setIsEmpty={setIsEmptyRedeemed}
+        scrollId='redeemedgGifts'
+      />
+
+      {isEmptyPending && isEmptySent && isEmptyRedeemed && (
+        <NoOrdersWrapper>
+          <p>{t('YOU_DONT_HAVE_CARDS', 'You don\'t have cards')}</p>
+        </NoOrdersWrapper>
+      )}
+    </Container>
+  )
+}

package/src/themes/five/src/components/GiftCard/GiftCardOrdersList/styles.js

@@ -0,0 +1,34 @@
+import styled from 'styled-components'
+
+export const Container = styled.div`
+  h2 {
+    font-size: 24px;
+    font-weight: 600;
+    margin: 40px 0 20px 0;
+  }
+`
+
+export const Divider = styled.div`
+  margin-top: 25px;
+  background: #F8F9FA;
+  height: 8px;
+  width: 100%;
+`
+export const NoOrdersWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 50px 0px;
+  box-sizing: border-box;
+  min-height: calc(100% - 120px);
+  width: 100%;
+
+  > p {
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+    margin-top: 0px;
+    margin-bottom: 25px;
+  }
+`

package/src/themes/five/src/components/GiftCard/HorizontalGiftCardOrdersLayout/index.js

@@ -0,0 +1,75 @@
+import React, { useEffect } from 'react'
+import { GiftCardOrdersList as GiftCardOrdersListController } from 'ordering-components-external'
+import Skeleton from 'react-loading-skeleton'
+import { AutoScroll } from '../../AutoScroll'
+import { SingleGiftCard } from '../SingleGiftCard'
+import { Pagination } from '../../Pagination'
+import {
+  ProductsListContainer,
+  ProductsList,
+  PaginationWrapper
+} from './styles'
+
+const HorizontalGiftCardOrdersLayoutUI = (props) => {
+  const {
+    giftCards,
+    paginationProps,
+    goToPage,
+    title,
+    setIsEmpty,
+    scrollId
+  } = props
+
+  useEffect(() => {
+    if (giftCards.loading) return
+    if (giftCards.list?.length === 0) setIsEmpty(true)
+  }, [giftCards])
+
+  return (
+    <>
+      {giftCards.loading
+        ? <Skeleton width={100} height={24} />
+        : giftCards.list?.length > 0 && <h2>{title}</h2>}
+      <ProductsListContainer>
+        <ProductsList>
+          <AutoScroll scrollId={scrollId}>
+            {giftCards.loading ? (
+              [...Array(10).keys()].map(i => (
+                <SingleGiftCard
+                  isSkeleton
+                  key={i}
+                />
+              ))
+            ) : (
+              <>
+                {giftCards.list.map(card => (
+                  <SingleGiftCard
+                    key={card.id}
+                    card={card}
+                  />
+                ))}
+              </>
+            )}
+          </AutoScroll>
+        </ProductsList>
+      </ProductsListContainer>
+      {giftCards.list?.length > 0 && Math.ceil(paginationProps?.totalPages) > 1 && (
+        <PaginationWrapper>
+          <Pagination
+            currentPage={paginationProps.currentPage}
+            totalPages={Math.ceil(paginationProps?.totalPages)}
+            handleChangePage={goToPage}
+          />
+        </PaginationWrapper>
+      )}
+    </>
+  )
+}
+
+export const HorizontalGiftCardOrdersLayout = (props) => {
+  const giftCardsProps = {
+    ...props,
+    UIComponent: HorizontalGiftCardOrdersLayoutUI
+  }
+  return <GiftCardOrdersListController {...giftCardsProps} />
+}

package/src/themes/five/src/components/GiftCard/HorizontalGiftCardOrdersLayout/styles.js

@@ -0,0 +1,29 @@
+import styled from 'styled-components'
+
+export const ProductsListContainer = styled.div`
+  margin-top: 10px;
+  display: flex;
+  overflow: scroll hidden;
+`
+
+export const ProductsList = styled.div`
+  display: flex;
+  box-sizing: border-box;
+
+  .product-card {
+    width: 270px;
+    max-width: 270px;
+    margin: 10px;
+    border: 1px solid #E9ECEF;
+  }
+
+  @media(min-width: 480px){
+    .product-card {
+      width: 400px;
+      max-width: 400px;
+    }
+  }
+`
+export const PaginationWrapper = styled.div`
+  margin: 20px 0;
+`

package/src/themes/five/src/components/GiftCard/SingleGiftCard/index.js

@@ -0,0 +1,79 @@
+import React from 'react'
+import { useLanguage, useUtils, useEvent } from 'ordering-components-external'
+import Skeleton from 'react-loading-skeleton'
+import { useTheme } from 'styled-components'
+import BsDot from '@meronex/icons/bs/BsDot'
+
+import {
+  CardContainer,
+  CardLogo,
+  CardInfo
+} from './styles'
+
+export const SingleGiftCard = (props) => {
+  const {
+    card,
+    isSkeleton
+  } = props
+
+  const theme = useTheme()
+  const [, t] = useLanguage()
+  const [events] = useEvent()
+  const [{ parsePrice, optimizeImage, parseDate }] = useUtils()
+
+  const getGiftCardStatus = (status) => {
+    switch (status) {
+      case 'pending':
+        return t('PENDING', 'Pending')
+      case 'activated':
+        return t('REDEEMED')
+      default:
+        return status
+    }
+  }
+
+  const handleClickGiftCardOrder = (card) => {
+    events.emit('go_to_page', { page: 'order_detail', params: { orderId: card.order_product?.order_id } })
+  }
+
+  return (
+    <CardContainer
+      className='product-card'
+      onClick={() => handleClickGiftCardOrder(card)}
+    >
+      {isSkeleton ? (
+        <Skeleton height={86} width={86} />
+      ) : (
+        <CardLogo
+          bgimage={optimizeImage(card?.order_product?.images || theme?.images?.dummies?.product, 'h_86,c_limit')}
+        />
+      )}
+      <CardInfo>
+        <div>
+          {isSkeleton ? (
+            <Skeleton height={16} width={100} />
+          ) : (
+            <span className='name'>{card?.order_product?.name}</span>
+          )}
+          {isSkeleton ? (
+            <Skeleton height={16} width={80} />
+          ) : (
+            <span>{parsePrice(card?.order_product?.price)}</span>
+          )}
+        </div>
+        {isSkeleton ? (
+          <p className='date'><Skeleton width={150} height={14} /></p>
+        ) : (
+          <p className='date'>
+            {t('ORDER_NUM', 'Order No.')} {card?.order_product?.order_id}<BsDot />{parseDate(card?.created_at)}
+          </p>
+        )}
+        {isSkeleton ? (
+          <p className='status'><Skeleton width={80} height={14} /></p>
+        ) : (
+          <p className='status'>{getGiftCardStatus(card?.status)}</p>
+        )}
+      </CardInfo>
+    </CardContainer>
+  )
+}

package/src/themes/five/src/components/GiftCard/SingleGiftCard/styles.js

@@ -0,0 +1,79 @@
+import React from 'react'
+import styled, { css } from 'styled-components'
+
+export const CardContainer = styled.div`
+  background: ${props => props.theme.colors?.backgroundPage};
+  display: flex;
+  cursor: pointer;
+  padding: 10px;
+  border-radius: 7.6px;
+
+  &:hover {
+    box-shadow: rgb(0 0 0 / 20%) 0px 8px 24px;
+  }
+`
+const CardLogoStyled = styled.div`
+  box-sizing: border-box;
+  position: relative;
+  background-repeat: no-repeat, repeat;
+  background-size: cover;
+  background-position: center;
+  object-fit: cover;
+  height: 86px;
+  width: 86px;
+  min-width: 86px;
+  min-height: 86px;
+  border-radius: 8px;
+  box-shadow: 0px 1px 4px rgba(0,0,0,0.1);
+`
+export const CardLogo = (props) => {
+  const style = {}
+  if (props.bgimage) {
+    style.backgroundImage = `url(${props.bgimage})`
+  }
+  if (props.soldOut) {
+    style.filter = 'brightness(70%)'
+  }
+  return (
+    <CardLogoStyled {...props} style={style}>
+      {props.children}
+    </CardLogoStyled>
+  )
+}
+
+export const CardInfo = styled.div`
+  ${props => props.theme?.rtl ? css`
+    margin-right: 15px;
+  ` : css`
+    margin-left: 15px;
+  `}
+
+  flex: 1;
+  > div {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 16px;
+    font-weight: 600;
+    span.name {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+  
+  p.date {
+    font-size: 14px;
+    color: ${props => props.theme.colors.darkGray};
+    margin: 7px 0;
+    line-height: 24px;
+    display: flex;
+    align-items: center;
+  }
+  p.status {
+    font-size: 14px;
+    line-height: 24px;
+    color: ${props => props.theme.colors.primary};
+    margin: 0;
+  }
+`