ordering-ui-external 2.0.3 → 2.1.0

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

@@ -28,7 +28,9 @@ import { OrderBillSection } from './OrderBillSection'
 import { ActionsSection } from './ActionsSection'
 import { OrderPreferencesSection } from './OrderPreferencesSections'
 import { PlaceSpot } from '../PlaceSpot'
+import { SendGiftCard } from '../GiftCard/SendGiftCard'
 import { Confirm } from '../Confirm'
+import { OrderEta } from './OrderEta'
 
 import {
   Container,
@@ -111,6 +113,7 @@ const OrderDetailsUI = (props) => {
   const [isProductReviewed, setIsProductReviewed] = useState(false)
   const [isDriverReviewed, setIsDriverReviewed] = useState(false)
   const [isProReviewed, setIsProReviewed] = useState(false)
+  const [isGiftCardSent, setIsGiftCardSent] = useState(false)
   const [unreadAlert, setUnreadAlert] = useState({ business: false, driver: false })
   const [isReviewOpen, setIsReviewOpen] = useState(false)
   const [reviewStatus, setReviewStatus] = useState({ order: false, product: false, driver: false, professional: false })
@@ -124,29 +127,31 @@ const OrderDetailsUI = (props) => {
   const acceptedStatus = [1, 2, 5, 6, 10, 11, 12]
   const completedStatus = [1, 2, 5, 6, 10, 11, 12, 15, 16, 17]
   const placeSpotTypes = [3, 4, 5]
+  const activeStatus = [0, 3, 4, 7, 8, 9, 14, 18, 19, 20, 21, 22, 23]
   const googleMapsApiKey = configs?.google_maps_api_key?.value
   const enabledPoweredByOrdering = configs?.powered_by_ordering_module?.value
 
-  const showOrderActions = order?.delivery_type !== 1
+  const hideOrderActions = order?.delivery_type === 1
+  const isGiftCardOrder = !order?.business_id
 
   const isOriginalLayout = orderingTheme?.theme?.confirmation?.components?.layout?.type === 'original'
-  const showDeliveryType = !orderingTheme?.theme?.confirmation?.components?.order?.components?.delivery_type?.hidden
-  const showDeliveryDate = !orderingTheme?.theme?.confirmation?.components?.order?.components?.date?.hidden
-  const showDeliveryProgress = !orderingTheme?.theme?.confirmation?.components?.order?.components?.progress?.hidden
-  const showBusinessPhone = !orderingTheme?.theme?.confirmation?.components?.business?.components?.phone?.hidden
-  const showBusinessMessages = !orderingTheme?.theme?.confirmation?.components?.business?.components?.messages?.hidden
-  const showBusinessEmail = !orderingTheme?.theme?.confirmation?.components?.business?.components?.email?.hidden
-  const showBusinessAddress = !orderingTheme?.theme?.confirmation?.components?.business?.components?.address?.hidden
-  const showBusinessMap = !orderingTheme?.theme?.confirmation?.components?.business?.components?.map?.hidden
-  const showDriverName = !orderingTheme?.theme?.confirmation?.components?.driver?.components?.name?.hidden
-  const showDriverPhone = !orderingTheme?.theme?.confirmation?.components?.driver?.components?.phone?.hidden
-  const showDriverMessages = !orderingTheme?.theme?.confirmation?.components?.driver?.components?.messages?.hidden
-  const showDriverEmail = !orderingTheme?.theme?.confirmation?.components?.driver?.components?.email?.hidden
-  const showDriverPhoto = !orderingTheme?.theme?.confirmation?.components?.driver?.components?.photo?.hidden
-  const showCustomerPhone = !orderingTheme?.theme?.confirmation?.components?.customer?.components?.phone?.hidden
-  const showCustomerAddress = !orderingTheme?.theme?.confirmation?.components?.customer?.components?.address?.hidden
-  const showCustomerEmail = !orderingTheme?.theme?.confirmation?.components?.customer?.components?.email?.hidden
-  const showCustomerPhoto = !orderingTheme?.theme?.confirmation?.components?.customer?.components?.photo?.hidden
+  const hideDeliveryType = theme?.confirmation?.components?.order?.components?.delivery_type?.hidden
+  const hideDeliveryDate = theme?.confirmation?.components?.order?.components?.date?.hidden
+  const hideDeliveryProgress = theme?.confirmation?.components?.order?.components?.progress?.hidden
+  const hideBusinessPhone = theme?.confirmation?.components?.business?.components?.phone?.hidden
+  const hideBusinessMessages = theme?.confirmation?.components?.business?.components?.messages?.hidden
+  const hideBusinessEmail = theme?.confirmation?.components?.business?.components?.email?.hidden
+  const hideBusinessAddress = theme?.confirmation?.components?.business?.components?.address?.hidden
+  const hideBusinessMap = theme?.confirmation?.components?.business?.components?.map?.hidden
+  const hideDriverName = theme?.confirmation?.components?.driver?.components?.name?.hidden
+  const hideDriverPhone = theme?.confirmation?.components?.driver?.components?.phone?.hidden
+  const hideDriverMessages = theme?.confirmation?.components?.driver?.components?.messages?.hidden
+  const hideDriverEmail = theme?.confirmation?.components?.driver?.components?.email?.hidden
+  const hideDriverPhoto = theme?.confirmation?.components?.driver?.components?.photo?.hidden
+  const hideCustomerPhone = theme?.confirmation?.components?.customer?.components?.phone?.hidden
+  const hideCustomerAddress = theme?.confirmation?.components?.customer?.components?.address?.hidden
+  const hideCustomerEmail = theme?.confirmation?.components?.customer?.components?.email?.hidden
+  const hideCustomerPhoto = theme?.confirmation?.components?.customer?.components?.photo?.hidden
 
   const validTrackingStatus = [9, 19, 23]
   const mapConfigs = { zoom: 15 }
@@ -407,25 +412,25 @@ const OrderDetailsUI = (props) => {
                 {order?.status !== 0 && order?.integration_id && (
                   <h1>{t('TICKET', 'Ticket')}: {order?.integration_id}</h1>
                 )}
-                {showDeliveryType && (
+                {!hideDeliveryType && (
                   <p className='types'>
                     {isService
                       ? t('SERVICE_AT_HOME', 'Service at home')
                       : orderTypes?.find(type => order?.delivery_type === type?.value)?.text}
                   </p>
                 )}
-                {showDeliveryDate && (
+                {!hideDeliveryDate && (
                   <p className='date'>
-                    {
-                      order?.delivery_datetime_utc
-                        ? parseDate(order?.delivery_datetime_utc)
-                        : parseDate(order?.delivery_datetime, { utc: false })
-                    }
+                    {activeStatus.includes(order?.status) ? (
+                      <OrderEta order={order} />
+                    ) : (
+                      parseDate(order?.reporting_data?.at[`status:${order.status}`])
+                    )}
                   </p>
                 )}
                 {(acceptedStatus.includes(parseInt(order?.status, 10)) ||
                   !isOriginalLayout
-                ) &&
+                ) && !isGiftCardOrder &&
                   (
                     <ReOrder>
                       <Button
@@ -451,7 +456,7 @@ const OrderDetailsUI = (props) => {
                     </ReOrder>
                   )}
               </TitleContainer>
-              {showDeliveryProgress && (
+              {!hideDeliveryProgress && !isGiftCardOrder && (
                 <>
                   <StatusBar percentage={getOrderStatus(order?.status)?.percentage} />
                   <OrderStatusAndLinkContainer>
@@ -478,120 +483,116 @@ const OrderDetailsUI = (props) => {
                 </>
               )}
             </OrderInfo>
-            <OrderBusiness>
-              <BusinessExternalWrapper>
-                <BusinessWrapper
-                  w='calc(100% - 20px)'
-                // borderBottom={showOrderActions}
-                >
-                  {isShowBusinessLogo && <img src={order?.business?.logo} />}
-                  <BusinessInfo>
-                    <h2>{order?.business?.name}</h2>
-                    <ActionsSection
-                      {...ActionsSectionProps}
-                      actionType='business'
-                      showPhone={showBusinessPhone}
-                      showMessages={showBusinessMessages}
-                    />
-                    {showBusinessEmail && (
-                      <p>{order?.business?.email}</p>
-                    )}
-                    {showBusinessPhone && (
-                      <p>{order?.business?.cellphone}</p>
-                    )}
-                    {showBusinessAddress && (
-                      <p>{order?.business?.address}</p>
-                    )}
-                    {order?.place?.name && (
-                      <PlaceSpotSection>
-                        <p>
-                          {yourSpotString}: {order?.place?.name}
-                        </p>
-                      </PlaceSpotSection>
-                    )}
-                    {showOrderActions && (
-                      <DirectionButtonWrapper>
-                        <Button
-                          color='primary'
-                          onClick={() => window.open(`http://maps.google.com/?q=${order?.business?.address}`)}
-                        >
-                          {t('GET_DIRECTIONS', 'Get Directions')}
-                        </Button>
-                      </DirectionButtonWrapper>
-                    )}
-                  </BusinessInfo>
-                </BusinessWrapper>
-
-                {showDeliveryType && placeSpotTypes.includes(order?.delivery_type) && (
-                  <PlaceSpotWrapper>
-                    <PlaceSpot
-                      isInputMode
-                      cart={order}
-                      spotNumberDefault={order?.spot_number}
-                      vehicleDefault={order?.vehicle}
-                    />
-                  </PlaceSpotWrapper>
-                )}
-
-                {showOrderActions && (
+            {!isGiftCardOrder && (
+              <OrderBusiness>
+                <BusinessExternalWrapper>
                   <BusinessWrapper
                     w='calc(100% - 20px)'
-                    borderTop
+                    borderTop={!hideDeliveryType && placeSpotTypes.includes(order?.delivery_type)}
                   >
-                    <BtsOrderStatus>
-                      <div>
-                        <Button
-                          style={{ fontSize: 14 }}
-                          color={order?.status === 20 ? 'secundary' : 'primary'}
-                          onClick={() => handleChangeOrderStatus(20)}
-                          disabled={disableLeftButton.includes(order?.status)}
-                        >
-                          {getOrderStatus(20)?.value}
-                        </Button>
-                      </div>
-                      <div>
-                        <Button
-                          style={{ fontSize: 14 }}
-                          color={order?.status === 20 ? 'primary' : 'secundary'}
-                          disabled={disableRightButton.includes(order?.status)}
-                          onClick={() => handleChangeOrderStatus(21)}
-                        >
-                          {getOrderStatus(21)?.value}
-                        </Button>
-                      </div>
-                    </BtsOrderStatus>
+                    {isShowBusinessLogo && <img src={order?.business?.logo} />}
+                    <BusinessInfo>
+                      <h2>{order?.business?.name}</h2>
+                      <ActionsSection
+                        {...ActionsSectionProps}
+                        actionType='business'
+                        showPhone={!hideBusinessPhone}
+                        showMessages={!hideBusinessMessages}
+                      />
+                      {!hideBusinessEmail && (
+                        <p>{order?.business?.email}</p>
+                      )}
+                      {!hideBusinessPhone && (
+                        <p>{order?.business?.cellphone}</p>
+                      )}
+                      {!hideBusinessAddress && (
+                        <p>{order?.business?.address}</p>
+                      )}
+                      {order?.place?.name && (
+                        <PlaceSpotSection>
+                          <p>
+                            {yourSpotString}: {order?.place?.name}
+                          </p>
+                        </PlaceSpotSection>
+                      )}
+                      {hideOrderActions && (
+                        <DirectionButtonWrapper>
+                          <Button
+                            color='primary'
+                            onClick={() => window.open(`http://maps.google.com/?q=${order?.business?.address}`)}
+                          >
+                            {t('GET_DIRECTIONS', 'Get Directions')}
+                          </Button>
+                        </DirectionButtonWrapper>
+                      )}
+                    </BusinessInfo>
+                    {!hideOrderActions && (
+                      <BtsOrderStatus>
+                        <div>
+                          <Button
+                            style={{ fontSize: 14 }}
+                            color={order?.status === 20 ? 'secundary' : 'primary'}
+                            onClick={() => handleChangeOrderStatus(20)}
+                            disabled={disableLeftButton.includes(order?.status)}
+                          >
+                            {getOrderStatus(20)?.value}
+                          </Button>
+                        </div>
+                        <div>
+                          <Button
+                            style={{ fontSize: 14 }}
+                            color={order?.status === 20 ? 'primary' : 'secundary'}
+                            disabled={disableRightButton.includes(order?.status)}
+                            onClick={() => handleChangeOrderStatus(21)}
+                          >
+                            {getOrderStatus(21)?.value}
+                          </Button>
+                        </div>
+                      </BtsOrderStatus>
+                    )}
                   </BusinessWrapper>
+
+                  {!hideDeliveryType && placeSpotTypes.includes(order?.delivery_type) && (
+                    <PlaceSpotWrapper>
+                      <PlaceSpot
+                        isInputMode
+                        cart={order}
+                        spotNumberDefault={order?.spot_number}
+                        vehicleDefault={order?.vehicle}
+                      />
+                    </PlaceSpotWrapper>
+                  )}
+                </BusinessExternalWrapper>
+                {googleMapsApiKey && !hideBusinessMap && (
+                  <MapWrapper>
+                    <Map style={{ width: '100%' }}>
+                      <img
+                        src={getGoogleMapImage(order?.business?.location, googleMapsApiKey, mapConfigs)}
+                        id='google-maps-image'
+                        alt='google-maps-location'
+                        width='100%'
+                        height='100%'
+                        loading='lazy'
+                      />
+                    </Map>
+                  </MapWrapper>
                 )}
-              </BusinessExternalWrapper>
-              {googleMapsApiKey && showBusinessMap && (
-                <MapWrapper>
-                  <Map style={{ width: '100%' }}>
-                    <img
-                      src={getGoogleMapImage(order?.business?.location, googleMapsApiKey, mapConfigs)}
-                      id='google-maps-image'
-                      alt='google-maps-location'
-                      width='100%'
-                      height='100%'
-                      loading='lazy'
-                    />
-                  </Map>
-                </MapWrapper>
-              )}
-            </OrderBusiness>
+              </OrderBusiness>
+            )}
             <OrderCustomer>
               <BusinessWrapper>
-                {showCustomerPhoto && order?.customer?.photo && (
+                {!hideCustomerPhoto && order?.customer?.photo && (
                   <img src={order?.customer?.photo} />
                 )}
                 <BusinessInfo>
                   <p>{order?.customer?.name} {order?.customer?.lastname}</p>
-                  {showCustomerEmail && (
+                  {!hideCustomerEmail && (
                     <p>{order?.customer?.email}</p>
                   )}
-                  {showCustomerPhone && (
+                  {!hideCustomerPhone && (
                     <p>{order?.customer?.cellphone || order?.customer?.phone}</p>
                   )}
-                  {showCustomerAddress && (
+                  {!hideCustomerAddress && (
                     <p>{order?.customer?.address}</p>
                   )}
                 </BusinessInfo>
@@ -605,12 +606,12 @@ const OrderDetailsUI = (props) => {
                     <ActionsSection
                       {...ActionsSectionProps}
                       actionType='driver'
-                      showPhone={showDriverPhone}
-                      showMessages={showDriverMessages}
+                      showPhone={!hideDriverPhone}
+                      showMessages={!hideDriverMessages}
                     />
                   </SectionTitleContainer>
                   <WrapperDriver>
-                    {showDriverPhoto && (
+                    {!hideDriverPhoto && (
                       <div className='photo'>
                         {order?.driver?.photo ? (
                           <PhotoBlock src={order?.driver?.photo} />
@@ -620,13 +621,13 @@ const OrderDetailsUI = (props) => {
                       </div>
                     )}
                     <div>
-                      {showDriverName && (
+                      {!hideDriverName && (
                         <h2>{order?.driver?.name} {order?.driver?.lastname}</h2>
                       )}
-                      {showDriverEmail && (
+                      {!hideDriverEmail && (
                         <p>{order?.driver?.email}</p>
                       )}
-                      {showDriverPhone && (
+                      {!hideDriverPhone && (
                         <p>{order?.driver?.cellphone || order?.driver?.phone}</p>
                       )}
                     </div>
@@ -652,7 +653,7 @@ const OrderDetailsUI = (props) => {
                 }
               </>
             )}
-            {(order?.delivery_type === 1 || order?.comment) && (
+            {(order?.delivery_type === 1 || order?.comment) && !isGiftCardOrder && (
               <OrderPreferences>
                 <OrderPreferencesSection
                   order={order}
@@ -678,6 +679,13 @@ const OrderDetailsUI = (props) => {
               />
             </OrderProducts>
           </WrapperRightContainer>
+
+          {isGiftCardOrder && order?.products[0]?.gift_card?.status === 'pending' && !isGiftCardSent && (
+            <SendGiftCard
+              giftCardId={order?.products[0]?.gift_card?.id}
+              setIsGiftCardSent={setIsGiftCardSent}
+            />
+          )}
         </WrapperContainer>
       )}
 

package/src/themes/five/src/components/OrderDetails/styles.js

@@ -90,7 +90,6 @@ export const BusinessWrapper = styled.div`
     }
   }
   @media (min-width: 400px) {
-    flex-direction: row;
     width: ${props => props.w ?? '100%'};
   }
 `

package/src/themes/five/src/components/OrderItAgain/styles.js

@@ -1,8 +1,8 @@
 import styled, { css } from 'styled-components'
 
 export const Container = styled.div`
-  padding-top: 30px;
-  margin-right: 30px;
+  padding-top: 5px;
+  margin: 0px;
   ${props => props.theme.rtl && css`
     margin-left: 30px;
     margin-right: 0px;
@@ -12,11 +12,13 @@ export const Container = styled.div`
     margin-right: 0px;
     margin-left: 0px;
   `}
+  @media (min-width: 993px) {
+    margin-right: 30px;
+  }
 `
 
 export const ContentHeader = styled.div`
-  margin-bottom: 27px;
-
+  margin-bottom: 15px;
   > h2 {
     font-weight: 600;
     font-size: 24px;
@@ -53,11 +55,9 @@ export const ProductList = styled.div`
   flex-direction: row;
   box-sizing: border-box;
   align-items: center;
-
   button {
     padding: 0px;
   }
-
   #orderItAgain > div {
     width: 350px;
     ${({ theme }) => theme?.business_view?.components?.products?.components?.layout?.type === 'starbucks' && css`

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

@@ -6,10 +6,10 @@ import {
   OrderList as OrderListController
 } from 'ordering-components-external'
 import { Button } from '../../styles/Buttons'
-import moment from 'moment'
 import Skeleton from 'react-loading-skeleton'
 import { useTheme } from 'styled-components'
 import BsArrowRight from '@meronex/icons/bs/BsArrowRight'
+import { OrderEta } from '../OrderDetails/OrderEta'
 import {
   OrderProgressContainer,
   OrderInfoWrapper,
@@ -31,20 +31,11 @@ const OrderProgressUI = (props) => {
     isCustomerMode
   } = props
   const [, t] = useLanguage()
-  const [{ optimizeImage, parseDate, parseTime }] = useUtils()
+  const [{ optimizeImage, parseTime }] = useUtils()
   const theme = useTheme()
   const [events] = useEvent()
   const [lastOrder, setLastOrder] = useState(null)
 
-  const convertDiffToHours = (time) => {
-    if (!time) return
-    const deliveryTime = lastOrder?.delivery_datetime_utc
-      ? parseDate(lastOrder?.delivery_datetime_utc, { outputFormat: 'YYYY-MM-DD hh:mm A' })
-      : parseDate(lastOrder?.delivery_datetime, { utc: false, outputFormat: 'YYYY-MM-DD hh:mm A' })
-    const returnedDate = moment(new Date(deliveryTime.replace(/-/g, '/'))).add(time, 'minutes').format('hh:mm A')
-    return returnedDate
-  }
-
   const handleGoToPage = (index) => {
     events.emit('go_to_page', { page: index, params: { orderId: lastOrder?.uuid } })
   }
@@ -102,7 +93,7 @@ const OrderProgressUI = (props) => {
                       ? parseTime(lastOrder?.delivery_datetime_utc, { outputFormat: 'hh:mm A' })
                       : parseTime(lastOrder?.delivery_datetime, { utc: false })}
                        - 
-                    {convertDiffToHours(lastOrder.eta_time)}
+                    <OrderEta order={lastOrder} outputFormat='hh:mm A' />
                   </span>
                 </TimeWrapper>
               </ProgressTextWrapper>

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

@@ -11,7 +11,8 @@ import {
   PaymentOptions as PaymentOptionsController,
   useLanguage,
   useOrder,
-  useSession
+  useSession,
+  useValidationFields
 } from 'ordering-components-external'
 
 import { Modal } from '../Modal'
@@ -30,7 +31,8 @@ import {
   PaymentMethodsList,
   PayCard,
   PayCardSelected,
-  CardItemContent
+  CardItemContent,
+  Container
 } from './styles'
 
 const stripeOptions = ['stripe_direct', 'stripe', 'stripe_connect']
@@ -100,8 +102,9 @@ const PaymentOptionsUI = (props) => {
   } = props
   const [, t] = useLanguage()
   const [{ token }] = useSession()
+  const [{ options }] = useOrder()
   const [alertState, setAlertState] = useState({ open: false, content: [] })
-
+  const [validationFields] = useValidationFields()
   const paymethodSelected = props.paySelected || props.paymethodSelected
 
   const methodsPay = ['google_pay', 'apple_pay']
@@ -116,11 +119,25 @@ const PaymentOptionsUI = (props) => {
   const supportedMethods = list?.filter(p => useKioskApp ? includeKioskPaymethods.includes(p.gateway) : p)
 
   const handlePaymentMethodClick = (paymethod) => {
+    if (paymethod?.gateway === 'paypal' &&
+      options.type === 1 &&
+      validationFields?.fields?.checkout?.driver_tip?.enabled &&
+      validationFields?.fields?.checkout?.driver_tip?.required &&
+      (Number(cart?.driver_tip) <= 0)
+    ) {
+      setAlertState({
+        open: true,
+        content: [t('DRIVER_TIPS_REQUIRED', 'Driver tips is required, please select a driver tip before select this paymethod')]
+      })
+      return
+    }
+
     if (cart?.balance > 0) {
       const isPopupMethod = popupMethods.includes(paymethod?.gateway)
       handlePaymethodClick(paymethod, isPopupMethod)
       return
     }
+
     setAlertState({
       open: true,
       content: [t('CART_BALANCE_ZERO', 'Sorry, the amount to pay is equal to zero and it is not necessary to select a payment method')]
@@ -227,7 +244,6 @@ const PaymentOptionsUI = (props) => {
             setErrorCash={props.setErrorCash}
           />
         )}
-
         {isOpenMethod?.paymethod?.gateway === 'stripe' && isOpenMethod.paymethod?.gateway === 'stripe' && (
           <PaymentOptionStripe
             paymethod={isOpenMethod?.paymethod}
@@ -310,7 +326,12 @@ const PaymentOptionsUI = (props) => {
           className='modal-info'
           onClose={() => handlePaymethodClick(null)}
         >
-          {stripeDirectMethods?.includes(isOpenMethod?.paymethod?.gateway) && (
+          {!isOpenMethod?.paymethod?.credentials?.publishable &&
+            <Container>
+              <p>{t('ADD_PUBLISHABLE_KEY', 'Please add a stripe key')}</p>
+            </Container>
+          }
+          {isOpenMethod?.paymethod?.credentials?.publishable && stripeDirectMethods?.includes(isOpenMethod?.paymethod?.gateway) && (
             <StripeElementsForm
               methodsPay={methodsPay}
               paymethod={isOpenMethod?.paymethod?.gateway}

package/src/themes/five/src/components/PaymentOptions/styles.js

@@ -14,6 +14,10 @@ export const PaymentMethodsList = styled.div`
   margin-left: -15px;
 `
 
+export const Container = styled.div`
+  margin: 0 auto;
+`
+
 export const PayCard = styled.div`
   width: calc(50% - 30px);
   cursor: pointer;

package/src/themes/five/src/components/ProductOptionSubOption/styles.js

@@ -92,11 +92,18 @@ export const QuantityControl = styled.div`
   svg {
     color: ${props => props.theme.colors.primary};
     font-size: 20px;
-    margin-right: 3px;
+    margin-right: 6px;
     ${props => props.theme?.rtl && css`
-      margin-left: 3px;
+      margin-left: 6px;
       margin-right: 0px;
     `}
+    @media (min-width: 425px) {
+      margin-right: 3px
+      ${props => props.theme?.rtl && css`
+        margin-right: 3px;
+        margin-left: 0px;
+    `}
+    }
   }
 
   svg[disabled] {
@@ -104,12 +111,20 @@ export const QuantityControl = styled.div`
   }
 
   svg:last-child {
-    margin-left: 3px;
+    margin-left: 6px;
     margin-right: 0;
     ${props => props.theme?.rtl && css`
-      margin-right: 3px;
+      margin-right: 6px;
       margin-left: 0px;
   `}
+    @media (min-width: 425px) {
+      margin-left: 3px;
+      margin-right: 0;
+      ${props => props.theme?.rtl && css`
+        margin-right: 3px;
+        margin-left: 0px;
+    `}
+    }
   }
 `
 
@@ -167,7 +182,12 @@ export const LeftOptionContainer = styled.div`
 
 export const RightOptionContainer = styled.div`
   display: flex;
+  flex-direction: column;
   width: 25%;
   align-items: center;
   justify-content: space-between;
+
+  @media (min-width: 425px) {
+    flex-direction: row;
+  }
 `