@bjsdistribution/dms-client-return 0.1.70-prod → 0.1.71-prod

package/src/components/order-view/notification/FlagTemplate.tsx

@@ -1,81 +0,0 @@
-import {
-  FlagAlert,
-  formatUtcToLocal,
-} from '@bjsdistribution/dms-component-library';
-import React from 'react';
-import styled from 'styled-components';
-import { useFlagRefId } from '../order-actions/store';
-import { useCurrentAction } from '../store';
-import { useClientPortal } from '../../store';
-function FlagTemplate({ data, dismissFlags }: any) {
-  const [, setSelectedFlag] = useFlagRefId();
-  const [, setCurrentAction] = useCurrentAction();
-  const [isCustomerPortal] = useClientPortal();
-  //
-  const openModal = () => {
-    setCurrentAction('view-flag');
-  };
-  const handleClick = (Id: number) => {
-    setSelectedFlag(Id);
-    openModal();
-  };
-
-  const titleColor = data?.status === 'SD' ? '#36A053' : '#3a3630';
-  return (
-    <StyledAlert>
-      <FlagAlert
-        type={data?.status === 'AD' ? 'info' : 'success'}
-        title={
-          <>
-            <StyledTitle color={titleColor}>
-              Flag : {data?.is_private ? 'Private' : 'Public'}{' '}
-              <StyledLink onClick={() => handleClick(data.id)}>
-                {data?.id} - {data?.flag_type}{' '}
-              </StyledLink>{' '}
-              {data?.status === 'AD' ? 'Unresolved' : 'Resolved on'}{' '}
-              {data?.status == 'SD' ? (
-                <>
-                  {`${formatUtcToLocal(data?.resolved_at)?.date}  ${
-                    formatUtcToLocal(data?.resolved_at)?.time
-                  }`}{' '}
-                  by {data?.resolved_by}{' '}
-                </>
-              ) : null}
-            </StyledTitle>
-          </>
-        }
-        subtitle=""
-        description={
-          isCustomerPortal ? (
-            <span dangerouslySetInnerHTML={{ __html: data?.description }} />
-          ) : (
-            `${data?.description}`
-          )
-        }
-        showOkButton={false}
-        onClose={() => dismissFlags(data?.id)}
-      />
-    </StyledAlert>
-  );
-}
-
-const StyledAlert = styled.div``;
-
-const StyledLink = styled.span`
-  color: var(--contextual-blue, #6396e5);
-  font-family: Roboto;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 600;
-  cursor: pointer;
-`;
-
-const StyledTitle = styled.span<{ color: string }>`
-  color: ${({ color }) => color};
-  font-family: Roboto;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 600;
-`;
-
-export default FlagTemplate;

package/src/components/order-view/notification/OrderTemplate.tsx

@@ -1,494 +0,0 @@
-import { FlagAlert } from '@bjsdistribution/dms-component-library';
-import React, { useState } from 'react';
-import styled from 'styled-components';
-import { useOrderNotify } from '../order-actions/store';
-import { useOrderStaticData } from '../store';
-import { useClientPortal } from '../../store';
-
-function OrderTemplate({ orderDetails, routeInfoData }: any) {
-  const [, setOrderCount] = useOrderNotify();
-  // const precall = false;
-  const [orderStaticData] = useOrderStaticData();
-  const statusVal = routeInfoData?.status_value;
-  const [isClientPortal] = useClientPortal();
-  const unholdReasons = orderStaticData?.cancellation_reasons?.map(
-    (x: any) => ({
-      id: x?.id,
-      reason: x?.reason,
-    })
-  );
-
-  const getReasonById = (id: number) => {
-    if (!unholdReasons || unholdReasons?.length === 0) {
-      return 'Reason not found';
-    }
-    const match = unholdReasons?.find((item: any) => item?.id === id);
-    return match ? match?.reason : 'Reason not found';
-  };
-
-  const reason = getReasonById(orderDetails?.order_cancellations?.reason_id);
-
-  const [alertVisibility, setAlertVisibility] = useState({
-    isHoldVisible: true,
-    isCompleted: true,
-    isOutstanding: true,
-    isAwaitingConfirmation: true,
-    isAwaitingRoute: true,
-    isCancelled: true,
-    isEnroute: true,
-    isPreCall: true,
-    isConfirmed: true,
-    isPostcode: true,
-    isSubcontracted: true,
-    isRouted: true,
-    isOnSite: true,
-    isFailed: true,
-  });
-
-  // useEffect(() => {
-  //   if (precall) {
-  //     setOrderCount(prevCount => prevCount + 1);
-  //   }
-  // }, [precall]);
-
-  //on close alert functionality
-  const onCloseAlert = (alertType: string) => {
-    setAlertVisibility(prev => ({
-      ...prev,
-      [alertType]: false,
-    }));
-    setOrderCount(0);
-  };
-
-  return (
-    <>
-      {/* order_red_cross_alerts */}
-      {!isClientPortal && routeInfoData?.order_red_cross_alerts?.length > 0 && (
-        <FlagAlert
-          type="error"
-          title=""
-          description={
-            <FlagsStyle>
-              <div className="redCross">
-                <div
-                  className="spanStyle"
-                  dangerouslySetInnerHTML={{
-                    __html: routeInfoData?.order_red_cross_alerts,
-                  }}
-                />
-              </div>
-            </FlagsStyle>
-          }
-          showOkButton={false}
-          onClose={() => onCloseAlert('isPostcode')}
-        />
-      )}
-
-      {statusVal == 'on hold' && alertVisibility?.isHoldVisible && (
-        <StyledAlert>
-          <FlagAlert
-            type="warn"
-            title={
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: routeInfoData?.order_info_alerts,
-                }}
-              ></div>
-            }
-            description={''}
-            showOkButton={false}
-            onClose={() => onCloseAlert('isHoldVisible')}
-          />
-        </StyledAlert>
-      )}
-      {statusVal == 'complete' && alertVisibility.isCompleted && (
-        <StyledAlert>
-          <FlagAlert
-            type="success"
-            title={
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: routeInfoData?.order_info_alerts,
-                }}
-              ></div>
-            }
-            description={''}
-            showOkButton={false}
-            onClose={() => onCloseAlert('isCompleted')}
-          />
-        </StyledAlert>
-      )}
-
-      {statusVal == 'outstanding' && alertVisibility.isOutstanding && (
-        <StyledAlert>
-          <FlagAlert
-            type="release"
-            title={
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: routeInfoData?.order_info_alerts,
-                }}
-              ></div>
-            }
-            description={``}
-            showOkButton={false}
-            onClose={() => onCloseAlert('isOutstanding')}
-          />
-        </StyledAlert>
-      )}
-
-      {statusVal == 'awaiting confirmation' &&
-        alertVisibility.isAwaitingConfirmation && (
-          <StyledAlert>
-            <FlagAlert
-              type="info"
-              title={
-                <div
-                  dangerouslySetInnerHTML={{
-                    __html: routeInfoData?.order_info_alerts,
-                  }}
-                ></div>
-              }
-              description={``}
-              showOkButton={false}
-              onClose={() => onCloseAlert('isAwaitingConfirmation')}
-            />
-          </StyledAlert>
-        )}
-      {statusVal == 'awaiting route' && alertVisibility.isAwaitingRoute && (
-        <StyledAlert>
-          <FlagAlert
-            type="info"
-            title={
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: routeInfoData?.order_info_alerts,
-                }}
-              ></div>
-            }
-            description={``}
-            showOkButton={false}
-            onClose={() => onCloseAlert('isAwaitingRoute')}
-          />
-        </StyledAlert>
-      )}
-      {statusVal == 'cancelled' && alertVisibility.isCancelled && (
-        <StyledAlert>
-          <FlagAlert
-            type="info"
-            title={
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: routeInfoData?.order_info_alerts,
-                }}
-              ></div>
-            }
-            description={reason}
-            showOkButton={false}
-            onClose={() => onCloseAlert('isCancelled')}
-          />
-        </StyledAlert>
-      )}
-
-      {statusVal == 'confirmed' && alertVisibility.isConfirmed && (
-        <StyledAlert>
-          <FlagAlert
-            type="info"
-            title={
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: routeInfoData?.order_info_alerts,
-                }}
-              ></div>
-            }
-            description={``}
-            showOkButton={false}
-            onClose={() => onCloseAlert('isConfirmed')}
-          />
-        </StyledAlert>
-      )}
-
-      {statusVal == 'subcontracted' && alertVisibility.isSubcontracted && (
-        <StyledAlert>
-          <FlagAlert
-            type="info"
-            title={
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: routeInfoData?.order_info_alerts,
-                }}
-              ></div>
-            }
-            description={``}
-            showOkButton={false}
-            onClose={() => onCloseAlert('isRouted')}
-          />
-        </StyledAlert>
-      )}
-
-      {statusVal == 'enroute' && alertVisibility.isEnroute && (
-        <StyledAlert>
-          <FlagAlert
-            type="info"
-            title={
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: routeInfoData?.order_info_alerts,
-                }}
-              ></div>
-            }
-            description={``}
-            showOkButton={false}
-            onClose={() => onCloseAlert('isEnroute')}
-          />
-        </StyledAlert>
-      )}
-
-      {statusVal == 'routed' && alertVisibility.isRouted && (
-        <StyledAlert>
-          <FlagAlert
-            type="info"
-            title={
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: routeInfoData?.order_info_alerts,
-                }}
-              ></div>
-            }
-            description={``}
-            showOkButton={false}
-            onClose={() => onCloseAlert('isRouted')}
-          />
-        </StyledAlert>
-      )}
-
-      {statusVal == 'precalled' && alertVisibility.isPreCall && (
-        <StyledAlert>
-          <FlagAlert
-            type="info"
-            title={
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: routeInfoData?.order_info_alerts,
-                }}
-              ></div>
-            }
-            description={``}
-            showOkButton={false}
-            onClose={() => onCloseAlert('isPreCall')}
-          />
-        </StyledAlert>
-      )}
-
-      {statusVal == 'on site' && alertVisibility.isOnSite && (
-        <StyledAlert>
-          <FlagAlert
-            type="info"
-            title={
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: routeInfoData?.order_info_alerts,
-                }}
-              ></div>
-            }
-            description={``}
-            showOkButton={false}
-            onClose={() => onCloseAlert('isOnSite')}
-          />
-        </StyledAlert>
-      )}
-
-      {statusVal == 'failed' && alertVisibility.isFailed && (
-        <StyledAlert>
-          <FlagAlert
-            type="info"
-            title={
-              <div
-                dangerouslySetInnerHTML={{
-                  __html: routeInfoData?.order_info_alerts,
-                }}
-              ></div>
-            }
-            description={``}
-            showOkButton={false}
-            onClose={() => onCloseAlert('isFailed')}
-          />
-        </StyledAlert>
-      )}
-
-      {/* order_warnings_alerts */}
-      {!isClientPortal && routeInfoData?.order_warnings_alerts?.length > 0 && (
-        <FlagAlert
-          type="warn"
-          title=""
-          description={
-            <FlagsStyle>
-              <div className="">
-                <div
-                  dangerouslySetInnerHTML={{
-                    __html: routeInfoData?.order_warnings_alerts,
-                  }}
-                />
-              </div>
-            </FlagsStyle>
-          }
-          showOkButton={false}
-          onClose={() => onCloseAlert('isPostcode')}
-        />
-      )}
-
-      {/* order_green_check_alerts */}
-      {!isClientPortal && routeInfoData?.order_green_check_alerts?.length > 0 && (
-        <FlagAlert
-          type="success"
-          title=""
-          description={
-            <FlagsStyle>
-              <div className="">
-                <div
-                  dangerouslySetInnerHTML={{
-                    __html: routeInfoData?.order_green_check_alerts,
-                  }}
-                />
-              </div>
-            </FlagsStyle>
-          }
-          showOkButton={false}
-          onClose={() => onCloseAlert('isPostcode')}
-        />
-      )}
-
-      {!isClientPortal &&
-        routeInfoData?.same_postcode_orders &&
-        alertVisibility.isPostcode && (
-          <FlagAlert
-            type="info"
-            title=""
-            description={
-              <FlagsStyle>
-                <div className="postcode-alert-content">
-                  <div
-                    dangerouslySetInnerHTML={{
-                      __html: routeInfoData?.same_postcode_orders,
-                    }}
-                  />
-                </div>
-              </FlagsStyle>
-            }
-            showOkButton={false}
-            onClose={() => onCloseAlert('isPostcode')}
-          />
-        )}
-    </>
-  );
-}
-
-const FlagsStyle = styled.div`
-  .redCross {
-    font-size: 13px;
-    margin-top: 4px;
-  }
-  .postcode-alert-content {
-    > div {
-      > h4 {
-        color: #3a3630;
-        font-family: Lato;
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 500;
-        line-height: 18px;
-      }
-    }
-    ul {
-      margin-bottom: 0;
-    }
-
-    li {
-      border-radius: 6px;
-      list-style-type: none;
-      > a {
-        color: #6396e5;
-        font-family: Roboto;
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 600;
-        line-height: 24px;
-        text-decoration: none;
-      }
-      > strong {
-        > a {
-          color: #6396e5;
-
-          font-family: Roboto;
-          font-size: 14px;
-          font-style: normal;
-          font-weight: 600;
-          line-height: 24px;
-          text-decoration: none;
-        }
-      }
-    }
-
-    li.outstanding strong,
-    li.awaiting_confirmation strong,
-    li.awaiting_route strong {
-      font-family: Roboto, sans-serif;
-      font-size: 14px;
-      font-weight: 600;
-      line-height: 24px;
-      font-style: normal;
-    }
-    li.routed strong {
-      margin-left: 5px;
-      color: #3a3630;
-      font-family: Lato;
-      font-size: 14px;
-      font-style: normal;
-      font-weight: 500;
-      line-height: 18px;
-    }
-
-    li.outstanding strong {
-      color: #e95252;
-    }
-    li.awaiting_confirmation strong {
-      color: #6396e5;
-    }
-    li.awaiting_route strong {
-      color: #36a053;
-    }
-    li.confirmed strong {
-      color: #36a053;
-    }
-    li.enroute strong {
-      color: #36a053;
-    }
-    li.cancelled strong {
-      color: #e95252;
-    }
-    li.complete strong {
-      color: #36a053;
-    }
-    li.on_hold strong {
-      color: #feba30;
-    }
-    li.routed strong {
-      color: #3a3630;
-    }
-    span {
-      margin-left: 5px;
-      color: #3a3630;
-      font-family: Lato;
-      font-size: 14px;
-      font-style: normal;
-      font-weight: 500;
-      line-height: 18px;
-    }
-  }
-`;
-
-const StyledAlert = styled.div`
-  margin-bottom: 5px;
-`;
-
-export default OrderTemplate;

package/src/components/order-view/notification/ReminderTemplate.tsx

@@ -1,105 +0,0 @@
-import React from 'react';
-import { useCurrentAction } from '../store';
-import {
-  FlagAlert,
-  formatUtcToLocal,
-} from '@bjsdistribution/dms-component-library';
-import styled from 'styled-components';
-import { useReminderRefId } from '../order-actions/store';
-import { useClientPortal } from '../../store';
-
-function ReminderTemplate({ data, dismissReminder }: any) {
-  const [, setCurrentAction] = useCurrentAction();
-  const [, setReminderRefId] = useReminderRefId();
-  const [isClientPortal] = useClientPortal();
-  const openModal = () => {
-    setCurrentAction('view-reminder');
-  };
-
-  //getting particular reminder data
-  const handleClick = (Id: number) => {
-    setReminderRefId(Id);
-    openModal();
-  };
-
-  const type =
-    data?.status === true
-      ? 'success'
-      : data?.status === false
-      ? 'warn'
-      : 'info';
-
-  const titleColor =
-    data?.status === true
-      ? '#36A053'
-      : data?.staus === false
-      ? '#FEBA30'
-      : '#3A3630';
-
-  return (
-    <div>
-      <StyledAlert>
-        <FlagAlert
-          type={type}
-          title={
-            <>
-              <StyledTitle color={titleColor}>
-                Reminder:
-                <StyledLink
-                  onClick={() => handleClick(data.id)}
-                  $disable={isClientPortal || false}
-                >
-                  {' '}
-                  {data?.reference || 'NA'}{' '}
-                </StyledLink>
-                (Due -{' '}
-                {`${formatUtcToLocal(data?.due_datetime)?.date}  ${
-                  formatUtcToLocal(data?.due_datetime)?.time
-                }`}
-                )
-                {data?.assigned_to && (
-                  <div>Assigned to: {data.assigned_to}</div>
-                )}
-                {data?.completed_at && (
-                  <div>
-                    Completed On:{' '}
-                    {`${formatUtcToLocal(data.completed_at)?.date} ${
-                      formatUtcToLocal(data.completed_at)?.time
-                    }`}
-                  </div>
-                )}
-                {data?.completed_by && <div>By: {data.completed_by}</div>}
-              </StyledTitle>
-            </>
-          }
-          description={`${data?.description}`}
-          showOkButton={false}
-          onClose={() => dismissReminder(data.id)}
-        />
-      </StyledAlert>
-    </div>
-  );
-}
-const StyledAlert = styled.div`
-  margin-bottom: 10px;
-`;
-
-const StyledTitle = styled.span<{ color: string }>`
-  color: ${({ color }) => color};
-  font-family: Roboto;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 600;
-`;
-
-const StyledLink = styled.span<{ $disable: boolean }>`
-  color: var(--contextual-blue, #6396e5);
-  font-family: Roboto;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 600;
-  cursor: ${props => (props?.$disable ? 'auto' : 'pointer')};
-  ${props => props?.$disable && `pointer-events: none;`};
-`;
-
-export default ReminderTemplate;