ordering-ui-react-native 0.14.86 → 0.14.89

package/themes/business/src/components/OrdersOption/styles.tsx

@@ -1,11 +1,12 @@
-import styled from 'styled-components/native';
+import styled, { css } from 'styled-components/native';
 
 export const FiltersTab = styled.View`
   margin-bottom: 20px;
   min-height: 30px;
   max-height: 35px;
   flex: 1;
-`;
+  width: 100%;
+`
 
 export const TabsContainer = styled.View`
   display: flex;
@@ -13,8 +14,9 @@ export const TabsContainer = styled.View`
   justify-content: space-between;
   border-bottom-width: 1px;
   flex: 1;
+  width: 100%;
   border-bottom-color: ${(props: any) => props.theme.colors.tabBar};
-`;
+`
 
 export const Tag = styled.Pressable`
   background-color: ${({ isSelected }: { isSelected: string }) => isSelected};
@@ -24,24 +26,24 @@ export const Tag = styled.Pressable`
   padding: 4px 10px;
   border-radius: 50px;
   margin-right: 15px;
-`;
+`
 
 export const IconWrapper = styled.View`
   flex-direction: row;
   align-items: center;
+  background: #fff;
 `
 
 export const ModalContainer = styled.ScrollView`
-  padding: 20px 40px 10px 40px;
+  padding: 0px 30px;
 `
 
 export const ModalTitle = styled.Text`
   font-family: Poppins;
   font-style: normal;
-  font-weight: 600;
+  font-weight: bold;
   font-size: 20px;
   color: ${(props: any) => props.theme.colors.textGray};
-  text-transform: capitalize;
   margin-bottom: 24px;
 `
 
@@ -61,4 +63,93 @@ export const TabPressable = styled.Pressable`
   border-color: ${(props: any) => props.theme.colors.textGray};
   border-bottom-width: ${(props: any) => props.isSelected ? '1px' : '0px'};
   padding-horizontal: 10px;
+`
+export const OrderStatus = styled.View`
+  margin-right: 5px;
+  width: 3px;
+  height: 90%;
+  border-radius: 6px;
+
+  ${(props: any) => props.timeState === 'in_time' && css`
+    background-color: #00D27A;
+  `}
+
+  ${(props: any) => props.timeState === 'at_risk' && css`
+    background-color: #FFC700;
+  `}
+
+  ${(props: any) => props.timeState === 'delayed' && css`
+    background-color: #E63757;
+  `}
+`
+
+export const SlaOption = styled.View`
+  flex-direction: row;
+  align-items: center;
+`
+
+export const SearchModalContent = styled.View`
+
+`
+
+export const SlaSettingModalContent = styled.View`
+
+`
+
+export const DeliveryStatusWrapper = styled.View`
+  position: relative;
+`
+export const VerticalLine = styled.View`
+  position: absolute;
+  background: #E9ECEF;
+  position: absolute;
+  width: 1px;
+  height: 100%;
+  top: 7px;
+  left: 7px;
+`
+export const StatusItems = styled.View`
+  position: relative;
+  margin-bottom: 20px;
+  z-index: 2;
+`
+export const ItemHeader = styled.View`
+  flex-direction: row;
+  margin-bottom: 5px;
+`
+export const ItemStatus = styled.View`
+  width: 4px;
+  height: 22px;
+  margin: 0 15px;
+  border-radius: 4px;
+  background: ${(props: any) => props.backColor};
+`
+export const ItemContent = styled.View`
+  display: flex;
+  padding: 0 30px;
+`
+
+export const TimerInputWrapper = styled.View`
+  border-width: 1px;
+  border-radius: 7.6px;
+  color: ${(props: any) => props.theme.colors.disabled};
+  border-color: ${(props: any) => props.theme.colors.disabled};
+  margin-left: 30px;
+  margin-right: 30px;
+  flex-direction: row;
+  align-items: center;
+  width: 80px;
+`
+export const OverLine = styled.View`
+  position: absolute;
+  height: 100%;
+  width: 15px;
+  top: 20px;
+  left: 0;
+  /* border-width: 1px; */
+  background-color: #fff;
+  z-index: 2;
+`
+export const Actions = styled.View`
+
 `

package/themes/business/src/components/PreviousOrders/index.tsx

@@ -16,7 +16,8 @@ export const PreviousOrders = (props: any) => {
     getOrderStatus,
     handleClickOrder,
     isLogisticOrder,
-    handleClickLogisticOrder
+    handleClickLogisticOrder,
+    slaSettingTime
   } = props;
   const [, t] = useLanguage();
   const [{ parseDate, optimizeImage }] = useUtils();
@@ -39,19 +40,14 @@ export const PreviousOrders = (props: any) => {
     },
     icon: {
       borderRadius: 7.6,
-      width: 75,
-      height: 75,
+      width: 60,
+      height: 60
     },
     logo: {
       borderRadius: 10,
-      shadowColor: "#000",
-      shadowOffset: {
-        width: 0,
-        height: 1,
-      },
-      shadowOpacity: 0.20,
-      shadowRadius: 1.41,
-      elevation: 2,
+      shadowColor: "#0000006e",
+      shadowRadius: 10,
+      elevation: 15,
       justifyContent: 'center',
       alignItems: 'center',
       marginLeft: 3,
@@ -99,9 +95,9 @@ export const PreviousOrders = (props: any) => {
 
   useEffect(() => {
     const interval = setInterval(() => {
-      const date:any = Date.now()
+      const date: any = Date.now()
       setCurrentTime(date)
-    }, 60000)
+    }, slaSettingTime)
 
     return () => clearInterval(interval)
   }, [])
@@ -130,7 +126,7 @@ export const PreviousOrders = (props: any) => {
                   activeOpacity={1}
                 >
                   <Card key={order.id}>
-                    <Timestatus style={{backgroundColor: order?.time_status === 'in_time' ? '#00D27A' : order?.time_status === 'at_risk' ? '#FFC700' : order?.time_status === 'delayed' ? '#E63757' : '' }}/>
+                    <Timestatus style={{ backgroundColor: order?.time_status === 'in_time' ? '#00D27A' : order?.time_status === 'at_risk' ? '#FFC700' : order?.time_status === 'delayed' ? '#E63757' : '' }} />
                     {
                       order.business?.logo && (
                         <Logo style={styles.logo}>
@@ -163,7 +159,7 @@ export const PreviousOrders = (props: any) => {
                           />
                         </NotificationIcon>
                       )}
-                      <View style={{flexDirection: 'row'}}>
+                      <View style={{ flexDirection: 'row' }}>
                         <OText
                           style={styles.date}
                           color={theme.colors.unselectText}
@@ -175,7 +171,7 @@ export const PreviousOrders = (props: any) => {
                             ? parseDate(order?.delivery_datetime_utc, { outputFormat: 'MM/DD/YY · HH:mm a' })
                             : parseDate(order?.delivery_datetime, { utc: false })}{' · '}
                         </OText>
-                        <OText style={styles.date} color={order?.time_status === 'in_time' ? '#00D27A' : order?.time_status === 'at_risk' ? '#FFC700' : order?.time_status === 'delayed' ? '#E63757' : '' } >{getDelayTime(order)}</OText>
+                        <OText style={styles.date} color={order?.time_status === 'in_time' ? '#00D27A' : order?.time_status === 'at_risk' ? '#FFC700' : order?.time_status === 'delayed' ? '#E63757' : ''} >{getDelayTime(order)}</OText>
                       </View>
                       {!isLogisticOrder && (
                         <MyOrderOptions>
@@ -215,28 +211,28 @@ export const PreviousOrders = (props: any) => {
                         textStyle={{ color: theme.colors.primary }}
                       />
                     ) : (
-                    <>
-                      <OButton
-                        text={t('REJECT', 'Reject')}
-                        onClick={() => handleClickLogisticOrder(2, _order?.id)}
-                        bgColor={theme.colors.danger}
-                        borderColor={theme.colors.danger}
-                        imgRightSrc={null}
-                        style={{ borderRadius: 7, height: 40 }}
-                        parentStyle={{ width: '45%' }}
-                        textStyle={{ color: theme.colors.dangerText }}
-                      />
-                      <OButton
-                        text={t('ACCEPT', 'Accept')}
-                        onClick={() => handleClickLogisticOrder(1, _order?.id)}
-                        bgColor={theme.colors.successOrder}
-                        borderColor={theme.colors.successOrder}
-                        imgRightSrc={null}
-                        style={{ borderRadius: 7, height: 40 }}
-                        parentStyle={{ width: '45%' }}
-                        textStyle={{ color: theme.colors.successText }}
-                      />
-                    </>
+                      <>
+                        <OButton
+                          text={t('REJECT', 'Reject')}
+                          onClick={() => handleClickLogisticOrder(2, _order?.id)}
+                          bgColor={theme.colors.danger}
+                          borderColor={theme.colors.danger}
+                          imgRightSrc={null}
+                          style={{ borderRadius: 7, height: 40 }}
+                          parentStyle={{ width: '45%' }}
+                          textStyle={{ color: theme.colors.dangerText }}
+                        />
+                        <OButton
+                          text={t('ACCEPT', 'Accept')}
+                          onClick={() => handleClickLogisticOrder(1, _order?.id)}
+                          bgColor={theme.colors.successOrder}
+                          borderColor={theme.colors.successOrder}
+                          imgRightSrc={null}
+                          style={{ borderRadius: 7, height: 40 }}
+                          parentStyle={{ width: '45%' }}
+                          textStyle={{ color: theme.colors.successText }}
+                        />
+                      </>
                     )}
                   </AcceptOrRejectOrder>
                 )}

package/themes/business/src/components/PreviousOrders/styles.tsx

@@ -8,16 +8,16 @@ export const Card = styled.View`
 `;
 
 export const Logo = styled.View`
-  height: 75px;
-  width: 75px;
+  height: 65px;
+  width: 65px;
 `;
 
 export const Information = styled.View`
   position: relative;
   justify-content: flex-start;
-  margin-horizontal: 10px;
+  margin-horizontal: 5px;
   flex: 1;
-  max-height: 70px;
+  max-height: 60px;
 `;
 
 export const MyOrderOptions = styled.View`
@@ -39,12 +39,7 @@ export const AcceptOrRejectOrder = styled.View`
 export const Timestatus = styled.View`
   position: relative;;
   width: 4px;
-  height: 65px;
+  height: 55px;
   border-radius: 20px;
   top: 5px;
-  margin-right: 5px; 
-  ${(props: any) => props.theme?.rtl && css`
-    left: unset;
-    right: -5px;
- `}
 `

package/themes/business/src/components/ReviewCustomer/index.tsx

@@ -20,6 +20,8 @@ import { FloatingButton } from '../FloatingButton'
 import LinearGradient from 'react-native-linear-gradient'
 import Alert from '../../providers/AlertProvider'
 
+import { reviewCommentList } from '../../../../../src/utils'
+
 import {
   Content,
   ActionButtonWrapper,
@@ -101,11 +103,8 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
     { key: 5, text: t('GREAT', 'Great'), percent: 1, parentStyle: { right: '0%' }, isInnerStyle: false,  pointerColor: false }
   ]
 
-  const commentsList = [
-    { key: 0, content: t('RESPECTFUL', 'Respectful') },
-    { key: 1, content: t('EXCELLENT_COMMUNICATION', "Excellent communication") },
-    { key: 2, content: t('CORDIAL_SERVICE', 'Cordial service') }
-  ]
+  const commentsList = reviewCommentList('customer')
+
   const isSelectedComment = (commentKey: number) => {
     const found = comments.find((comment: any) => comment?.key === commentKey)
     return found
@@ -251,10 +250,10 @@ const ReviewCustomerUI = (props: ReviewCustomerParams) => {
           size={12}
           style={{ marginTop: 30 }}
         >
-          {t('COMMENTS', 'Comments')}
+          {commentsList[reviewState?.qualification || 1]?.title}
         </OText>
         <CommentsButtonGroup>
-          {commentsList.map(commentItem => (
+          {commentsList[reviewState?.qualification || 1]?.list?.map(commentItem => (
             <OButton
               key={commentItem.key}
               text={commentItem.content}

package/themes/original/index.tsx

@@ -20,6 +20,8 @@ import { BusinessPreorder } from './src/components/BusinessPreorder';
 import { BusinessMenuList } from './src/components/BusinessMenuList';
 import { UserProfileForm } from './src/components/UserProfileForm';
 import { ReviewOrder } from './src/components/ReviewOrder';
+import { ReviewProducts } from './src/components/ReviewProducts';
+import { ReviewDriver } from './src/components/ReviewDriver';
 import { UserProfile } from './src/components/UserProfile';
 import { MessageListing } from './src/components/MessageListing';
 import { Help } from './src/components/Help';
@@ -82,6 +84,8 @@ export {
 	BusinessPreorder,
 	UserProfileForm,
 	ReviewOrder,
+	ReviewProducts,
+	ReviewDriver,
 	BusinessMenuList,
 	UserProfile,
 	MessageListing,

package/themes/original/src/components/ReviewDriver/index.tsx

@@ -0,0 +1,314 @@
+import React, { useState, useEffect } from 'react'
+import { useLanguage, useToast, ToastType, ReviewDriver as ReviewDriverController } from 'ordering-components/native'
+import { StyleSheet, View, I18nManager, TouchableOpacity } from 'react-native'
+import { ReviewDriverParams } from '../../types'
+import { useTheme } from 'styled-components/native'
+import { useForm, Controller } from 'react-hook-form'
+import { OText, OIcon, OButton, OInput } from '../shared'
+import NavBar from '../NavBar'
+import LinearGradient from 'react-native-linear-gradient'
+import { FloatingBottomContainer } from '../../layouts/FloatingBottomContainer'
+import Spinner from 'react-native-loading-spinner-overlay'
+
+import { reviewCommentList } from '../../../../../src/utils'
+
+import {
+  ReviewDriverContainer,
+  DriverPhotoContainer,
+  FormReviews,
+  RatingBarContainer,
+  RatingTextContainer,
+  CommentsButtonGroup,
+  ActionContainer,
+} from './styles'
+
+const ReviewDriverUI = (props: ReviewDriverParams) => {
+  const {
+    order,
+    navigation,
+    formState,
+    dirverReviews,
+    setDriverReviews,
+    handleSendDriverReview,
+    onNavigationRedirect
+  } = props
+
+  const [, t] = useLanguage()
+  const theme = useTheme()
+  const { handleSubmit, control, errors } = useForm()
+  const [, { showToast }] = useToast()
+
+  const [isDriverReviewed, setIsDriverReviewed] = useState(false)
+
+  const styles = StyleSheet.create({
+    photoWrapper: {
+      shadowColor: theme.colors.black,
+      shadowRadius: 3,
+      shadowOffset: {width: 1, height: 4},
+      elevation: 3,
+      borderRadius: 8,
+      shadowOpacity: 0.1,
+      overflow: 'hidden'
+    },
+    inputTextArea: {
+      borderColor: theme.colors.lightGray,
+      borderRadius: 8,
+      marginTop: 10,
+      marginBottom: 40,
+      height: 100,
+      alignItems: 'flex-start'
+    },
+    statusBar: {
+      transform: [{ scaleX: I18nManager.isRTL ? -1 : 1 }],
+      height: 10,
+      borderRadius: 5,
+      marginTop: 5
+    },
+    ratingItemContainer: {
+      position: 'absolute',
+      top: -20
+    },
+    ratingItem: {
+      left: '-50%',
+      flexDirection: 'column',
+      alignItems: 'center'
+    },
+    ratingLineStyle: {
+      height: 10,
+      width: 1,
+      marginBottom: 10,
+      backgroundColor: theme.colors.dusk
+    }
+  })
+
+  const [comments, setComments] = useState<Array<any>>([])
+  const [extraComment, setExtraComment] = useState('')
+  const [alertState, setAlertState] = useState<{ open: boolean, content: Array<any>, success?: boolean }>({ open: false, content: [], success: false })
+
+  const qualificationList = [
+    { key: 1, text: t('TERRIBLE', 'Terrible'), percent: 0,  parentStyle: { left: '0%' }, isInnerStyle: false, pointerColor: false },
+    { key: 2, text: t('BAD', 'Bad'), percent: 0.25, parentStyle: { left: '25%' }, isInnerStyle: true, pointerColor: true },
+    { key: 3, text: t('OKAY', 'Okay'), percent: 0.5, parentStyle: { left: '50%' }, isInnerStyle: true, pointerColor: true },
+    { key: 4, text: t('GOOD', 'Good'), percent: 0.75, parentStyle: { left: '75%' }, isInnerStyle: true, pointerColor: true },
+    { key: 5, text: t('GREAT', 'Great'), percent: 1, parentStyle: { right: '0%' }, isInnerStyle: false,  pointerColor: false }
+  ]
+
+  const commentsList = reviewCommentList('driver')
+
+  const onSubmit = () => {
+    if (dirverReviews?.qualification === 0) {
+      setAlertState({
+        open: true,
+        content: dirverReviews?.qualification === 0 ? [`${t('REVIEW_QUALIFICATION_REQUIRED', 'Review qualification is required')}`] : []
+      })
+      return
+    }
+    handleSendDriverReview()
+    setAlertState({ ...alertState, success: true })
+  }
+
+  const isSelectedComment = (commentKey: number) => {
+    const found = comments.find((comment: any) => comment?.key === commentKey)
+    return found
+  }
+
+  const handleChangeComment = (commentItem: any) => {
+    const found = comments.find((comment: any) => comment?.key === commentItem.key)
+    if (found) {
+      const _comments = comments.filter((comment: any) => comment?.key !== commentItem.key)
+      setComments(_comments)
+    } else {
+      setComments([...comments, commentItem])
+    }
+  }
+
+  const handleChangeQualification = (qualification: number) => {
+    if (qualification) setDriverReviews({ ...dirverReviews, qualification: qualification })
+  }
+
+  const handleSendReviewClick = () => {
+    if (!order?.user_review && !isDriverReviewed) {
+      onSubmit()
+    } else {
+      onNavigationRedirect && onNavigationRedirect('MyOrders')
+    }
+  }
+
+  useEffect(() => {
+    if (!formState.loading && formState.result?.error) {
+      setAlertState({
+        open: true,
+        success: false,
+        content: formState.result?.result || [t('ERROR', 'Error')]
+      })
+    }
+    if (!formState.loading && !formState.result?.error && alertState.success) {
+      setIsDriverReviewed && setIsDriverReviewed(true)
+      onNavigationRedirect('MyOrders')
+    }
+  }, [formState])
+
+  useEffect(() => {
+    if (Object.keys(errors).length > 0) {
+      // Convert all errors in one string to show in toast provider
+      const list = Object.values(errors);
+      let stringError = '';
+      list.map((item: any, i: number) => {
+        stringError +=
+          i + 1 === list.length ? `- ${item.message}` : `- ${item.message}\n`;
+      });
+      showToast(ToastType.Error, stringError);
+    }
+  }, [errors])
+
+  useEffect(() => {
+    if (alertState.open) {
+      alertState.content && showToast(
+        ToastType.Error,
+        alertState.content
+      )
+    }
+  }, [alertState.content])
+
+  useEffect(() => {
+    let _comments = ''
+    if (comments.length > 0) {
+      comments.map((comment: any) => (_comments += comment.content + '. '))
+    }
+    const _comment = _comments + extraComment
+    setDriverReviews({ ...dirverReviews, comment: _comment })
+  }, [comments, extraComment])
+
+  return (
+    <>
+      <ReviewDriverContainer>
+        <NavBar
+          title={t('REVIEW_DRIVER', 'Review driver')}
+          titleAlign={'center'}
+          onActionLeft={() => navigation?.canGoBack() && navigation.goBack()}
+          showCall={false}
+          btnStyle={{ paddingLeft: 0 }}
+          style={{ flexDirection: 'column', alignItems: 'flex-start' }}
+          titleWrapStyle={{ paddingHorizontal: 0 }}
+          titleStyle={{ marginRight: 0, marginLeft: 0 }}
+        />
+        <DriverPhotoContainer>
+          <View
+            style={{
+              ...styles.photoWrapper,
+              backgroundColor: theme.colors.white,
+              padding: !order?.driver?.photo ? 5 : 0
+            }}
+          >
+            <OIcon
+              url={order?.driver?.photo}
+              src={!order?.driver?.photo && theme.images.general.user}
+              cover={order?.driver?.photo ? true: false}
+              width={80}
+              height={80}
+            />
+          </View>
+          <OText weight={500} style={{ marginVertical: 10 }} color={theme.colors.textNormal}>{order?.driver?.name} {order?.driver?.lastname}</OText>
+        </DriverPhotoContainer>
+
+        <View style={{flex: 1, justifyContent: 'flex-end'}}>
+          <FormReviews>
+            <OText mBottom={13} color={theme.colors.textNormal}>{t('HOW_WAS_YOUR_DRIVER', 'How was your driver?')}</OText>
+            <RatingBarContainer>
+              <LinearGradient
+                start={{ x: 0.0, y: 0.0 }}
+                end={{ x: qualificationList[dirverReviews?.qualification - 1]?.percent || 0, y: 0 }}
+                locations={[.9999, .9999]}
+                colors={[theme.colors.primary, theme.colors.backgroundGray200]}
+                style={styles.statusBar}
+              />
+              <RatingTextContainer>
+                {qualificationList.map((qualification: any) => (
+                  <View
+                    key={qualification.key}
+                    style={{ ...qualification.parentStyle, ...styles.ratingItemContainer }}
+                  >
+                    <TouchableOpacity
+                      style={qualification.isInnerStyle && styles.ratingItem}
+                      onPress={() => handleChangeQualification(qualification.key)}
+                    >
+                      <View
+                        style={{
+                          ...styles.ratingLineStyle,
+                          backgroundColor: (qualification.pointerColor && !(dirverReviews?.qualification >= qualification.key)) ? theme.colors.dusk : 'transparent'
+                        }}
+                      />
+                      <OText size={12} color={dirverReviews?.qualification === qualification.key ? theme.colors.black : theme.colors.lightGray}>{qualification.text}</OText>
+                    </TouchableOpacity>
+                  </View>
+                ))}
+              </RatingTextContainer>
+            </RatingBarContainer>
+
+            <OText style={{ marginTop: 30 }} color={theme.colors.textNormal}>
+              {commentsList[dirverReviews?.qualification || 1]?.title}
+            </OText>
+            <CommentsButtonGroup>
+              {commentsList[dirverReviews?.qualification || 1]?.list?.map(commentItem => (
+                <OButton
+                  key={commentItem.key}
+                  text={commentItem.content}
+                  bgColor={isSelectedComment(commentItem.key) ? theme.colors.primary : theme.colors.backgroundGray200}
+                  borderColor={isSelectedComment(commentItem.key) ? theme.colors.primary : theme.colors.backgroundGray200}
+                  textStyle={{
+                    color: isSelectedComment(commentItem.key) ? theme.colors.white : theme.colors.textNormal,
+                    fontSize: 13,
+                    paddingRight: isSelectedComment(commentItem.key) ? 15 : 0
+                  }}
+                  style={{ height: 35, paddingLeft: 5, paddingRight: 5, marginHorizontal: 3, marginVertical: 10 }}
+                  imgRightSrc={isSelectedComment(commentItem.key) ? theme.images.general.close : null}
+                  imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
+                  onClick={() => handleChangeComment(commentItem) }
+                />
+              ))}
+            </CommentsButtonGroup>
+
+            <OText style={{ marginTop: 30 }} color={theme.colors.textNormal}>{t('REVIEW_COMMENT_QUESTION', 'Do you want to add something?')}</OText>
+            <Controller
+              control={control}
+              defaultValue=''
+              name='comments'
+              render={({ onChange }: any) => (
+                <OInput
+                  name='comments'
+                  onChange={(val: any) => {
+                    onChange(val)
+                    setExtraComment(val.target.value)
+                  }}
+                  style={styles.inputTextArea}
+                  multiline
+                />
+              )}
+            />
+          </FormReviews>
+        </View>
+      </ReviewDriverContainer>
+      <Spinner visible={formState.loading} />
+      <FloatingBottomContainer>
+        <ActionContainer>
+          <OButton
+            textStyle={{ color: theme.colors.white, paddingRight: 10 }}
+            text={t('SEND_REVIEW', 'Send Review')}
+            style={{ borderRadius: 8 }}
+            imgRightStyle={{ tintColor: theme.colors.white, right: 5, margin: 5 }}
+            onClick={handleSubmit(handleSendReviewClick)}
+          />
+        </ActionContainer>
+      </FloatingBottomContainer>
+    </>
+  )
+}
+
+export const ReviewDriver = (props: any) => {
+  const reviewDriverProps = {
+    ...props,
+    UIComponent: ReviewDriverUI,
+    isToast: true
+  }
+  return <ReviewDriverController {...reviewDriverProps} />
+}