ordering-ui-admin-external 1.43.86 → 1.43.88

package/src/components/Stores/PaymentOptionStripeLink/styles.js

@@ -0,0 +1,171 @@
+import styled, { css } from 'styled-components'
+import { darken } from 'polished'
+
+export const Container = styled.div`
+  padding: 20px;
+  overflow: auto;
+  transition: 0.3s;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+
+  > button {
+    margin-top: 20px;
+    padding: 5px 15px 35px;
+    position: sticky;
+    top: 100%;
+    width: fit-content;
+    height: 42px;
+  }
+
+  .message {
+    margin: 0px;
+    font-size: 12px;
+  }
+
+  .alert-message {
+    margin: 30px 0 0 0;
+    font-weight: 700;
+  }
+
+  .select {
+    width: 100%;
+    > div:first-child {
+      padding: 8px 15px;
+    }
+  }
+
+  @media (min-width: 1000px) {
+    width: 0;
+    ${props => props.theme?.rtl ? css`
+      border-right: 1px solid #E9ECEF;
+    ` : css`
+      border-left: 1px solid #E9ECEF;
+    `}
+  }
+`
+
+export const Option = styled.div`
+  display: flex;
+  align-items: center;
+  column-gap: 10px;
+  font-size: 13px;
+  line-height: 2;
+  font-weight: 500;
+`
+
+export const SandboxWrapper = styled.div`
+  margin-top: 30px;
+  display: flex;
+  align-items: center;
+  color: ${props => props.theme.colors.headingColor};
+  span {
+    ${props => props.theme?.rtl ? css`
+      margin-right: 10px;
+    ` : css`
+      margin-left: 10px;
+    `}
+  }
+`
+
+export const FieldName = styled.p`
+  color: ${props => props.theme.colors.headingColor};
+  margin: 30px 0 10px;
+`
+
+export const Header = styled.div`
+  display: flex;
+  align-items: center;
+  h1 {
+    font-size: 20px;
+    color: ${props => props.theme.colors.headingColor};
+    font-weight: 700;
+    flex: 1;
+    margin: 0;
+  }
+`
+
+export const CloseButton = styled.div`
+  display: none;
+  @media (min-width: 1000px) {
+    display: flex;
+    align-items: center;
+  }
+`
+export const TabOption = styled.div`
+  display: flex;
+  align-items: center;
+  padding: 12px 0;
+  cursor: pointer;
+  color: ${props => props.theme.colors.headingColor};
+
+  > svg {
+    font-size: 20px;
+    &.fill {
+      color: ${props => props.theme.colors.primary};
+    }
+  }
+`
+
+export const TabOptionName = styled.span`
+  color: ${props => props.theme.colors.headingColor};
+  ${props => props.theme?.rtl ? css`
+    margin-right: 10px;
+  ` : css`
+    margin-left: 10px;
+  `}
+`
+export const ActionSelectorWrapper = styled.div`
+  margin: 0 10px;
+  button {
+    background: transparent !important;
+    border: none;
+    padding: 0px 5px;
+    &:active,
+    &:focus {
+      border-color: unset !important;
+      box-shadow: none !important;
+    }
+    svg {
+      color: ${props => props.theme.colors.headingColor};
+      font-size: 20px;
+    }
+
+    &:after {
+      display: none;
+    }
+
+    &:hover {
+      background: ${props => darken(0.04, props.theme.colors.secundary)} !important;
+    }
+    &:active {
+      background: ${props => darken(0.1, props.theme.colors.secundary)} !important;
+    }
+  }
+
+  .show {
+    button {
+      background: ${props => darken(0.04, props.theme.colors.secundary)} !important;
+    }
+    >div {
+      border: 1px solid ${props => props.theme.colors.borderColor};
+      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.12);
+    }
+  }
+
+  > div {
+    > div {
+      border-radius: 8px;
+      .dropdown-item {
+        font-size: 12px;
+        color: ${props => props.theme.colors.headingColor};
+        &:active {
+          background: ${props => darken(0.1, props.theme.colors.secundary)} !important;
+        }
+      }
+      .dropdown-item:last-child {
+        color: #E63757;
+      }
+    }
+  }
+`

package/src/components/Stores/ProductExtraOptionDetails/index.js

@@ -94,6 +94,7 @@ const ProductExtraOptionDetailsUI = (props) => {
   const [cropState, setCropState] = useState({ name: null, data: null, open: false })
   const [externalId, setExternalId] = useState()
   const [isExtraOptionSnooze, setIsExtraOptionSnooze] = useState(false)
+  const [isDraggingExtraOption, setIsDraggingExtraOption] = useState(false)
 
   const handleClickSubOptionImage = (id) => {
     document.getElementById(id).click()
@@ -286,6 +287,8 @@ const ProductExtraOptionDetailsUI = (props) => {
               handleDrop={handleDrop}
               handleDragEnd={handleDragEnd}
               handleDuplicateSubOption={handleDuplicateSubOption}
+              isDraggingExtraOption={isDraggingExtraOption}
+              setIsDraggingExtraOption={setIsDraggingExtraOption}
             />
           )
         })}
@@ -309,12 +312,10 @@ const ProductExtraOptionDetailsUI = (props) => {
                       <DragAndDrop
                         onDrop={dataTransfer => handleSubOptionFiles(dataTransfer.files, 'add_suboption_image')}
                         accept='image/png, image/jpeg, image/jpg'
-                        disabled={optionState.loading}
+                        disabled={optionState.loading || isDraggingExtraOption}
                       >
                         {
-                          (changesState?.result?.image && editSubOptionId === null)
-                            ? (<img src={changesState?.result?.image} alt='sub option image' loading='lazy' />)
-                            : (changesState?.changes?.image && editSubOptionId === null) && (<img src={changesState?.changes?.image} alt='sub option image' loading='lazy' />)
+                          (changesState?.changes?.image && editSubOptionId === null) && (<img src={changesState?.changes?.image} alt='sub option image' loading='lazy' />)
                         }
                         <UploadImageIconContainer>
                           <UploadImageIcon small>

package/src/components/Stores/ProductExtraSuboption/index.js

@@ -45,7 +45,9 @@ export const ProductExtraSuboption = (props) => {
     hanldeDragOver,
     handleDrop,
     handleDragEnd,
-    handleDuplicateSubOption
+    handleDuplicateSubOption,
+    isDraggingExtraOption,
+    setIsDraggingExtraOption
   } = props
 
   const theme = useTheme()
@@ -133,6 +135,15 @@ export const ProductExtraSuboption = (props) => {
     setExternalIdOpen(false)
   }
 
+  const handleDropSubOption = (e, subOption) => {
+    setIsDraggingExtraOption(false)
+    handleDrop(e, subOption)
+  }
+
+  const handleDragStartSubOption = () => {
+    setIsDraggingExtraOption(true)
+  }
+
   useEffect(() => {
     if (Object.keys(errors).length > 0) {
       setAlertState({
@@ -160,8 +171,9 @@ export const ProductExtraSuboption = (props) => {
       onSubmit={handleSubmit(onSubmit)}
       isDragOver={dragoverSubOptionId === subOption.id}
       isBorderBottom={isSubOptionsBottom && isLastSubOption}
+      onDragStart={handleDragStartSubOption}
       onDragOver={e => hanldeDragOver(e, subOption, isLastSubOption)}
-      onDrop={e => handleDrop(e, subOption)}
+      onDrop={e => handleDropSubOption(e, subOption)}
       onDragEnd={handleDragEnd}
       className='draggable-suboption'
     >
@@ -186,7 +198,7 @@ export const ProductExtraSuboption = (props) => {
             <DragAndDrop
               onDrop={dataTransfer => handleSubOptionFiles(dataTransfer.files, subOption.id)}
               accept='image/png, image/jpeg, image/jpg'
-              disabled={optionState.loading}
+              disabled={optionState.loading || isDraggingExtraOption}
             >
               {
                 (changesState?.result?.image && editSubOptionId === subOption.id)

package/src/components/Stores/index.js

@@ -44,6 +44,7 @@ import { BusinessMenuOptions } from './BusinessMenuOptions'
 import { BusinessDeliveryDetails } from './BusinessDeliveryDetails'
 import { BusinessPickupDetails } from './BusinessPickupDetails'
 import { PaymentOptionStripeDirect } from './PaymentOptionStripeDirect'
+import { PaymentOptionStripeLink } from './PaymentOptionStripeLink'
 import { PaymentOption } from './PaymentOption'
 import { PaymethodOptionPaypalExpress } from './PaymethodOptionPaypalExpress'
 import { PaymethodOptionStripeRedirect } from './PaymethodOptionStripeRedirect'
@@ -163,6 +164,7 @@ export {
   BusinessDeliveryDetails,
   BusinessPickupDetails,
   PaymentOptionStripeDirect,
+  PaymentOptionStripeLink,
   PaymentOption,
   PaymethodOptionPaypalExpress,
   PaymethodOptionStripeRedirect,

package/src/index.js

@@ -254,6 +254,7 @@ import {
   BusinessDeliveryDetails,
   BusinessPickupDetails,
   PaymentOptionStripeDirect,
+  PaymentOptionStripeLink,
   PaymentOption,
   PaymethodOptionPaypalExpress,
   PaymethodOptionStripeRedirect,
@@ -685,6 +686,7 @@ export {
   BusinessDeliveryDetails,
   BusinessPickupDetails,
   PaymentOptionStripeDirect,
+  PaymentOptionStripeLink,
   PaymentOption,
   PaymethodOptionPaypalExpress,
   PaymethodOptionStripeRedirect,