@bjsdistribution/dms-client-return 0.2.2-prod → 0.2.3-prod

package/dist/components/order-view/order-details/expanded-content/customer-section/contact-info/ContactHome.js

@@ -1,14 +1,14 @@
 import { jsxs as u, jsx as l } from "react/jsx-runtime";
-import { Input as y, Label as D } from "@bjsdistribution/dms-component-library";
+import { Input as w, Label as y } from "@bjsdistribution/dms-component-library";
 import c from "styled-components";
-import { errorAtom as w, useOrderDetails as E, usePrevOrderDetails as W } from "../../../../store.js";
+import { errorAtom as D, useOrderDetails as E, usePrevOrderDetails as W } from "../../../../store.js";
 import { handleKeyDown as _ } from "../../../../utils.js";
 import { useClientPortal as H } from "../../../../../store.js";
 import O from "./CallCustomer.js";
 import { Tooltip as N } from "antd";
 import { useAtom as $ } from "jotai";
 function G() {
-  const [f, m] = $(w), [x] = H(), [g, C] = E(), [b] = W(), d = b?.order_recipient?.contact_home, p = g?.order_recipient, v = (i) => {
+  const [d, m] = $(D), [x] = H(), [g, C] = E(), [b] = W(), f = b?.order_recipient?.contact_home, p = g?.order_recipient, v = (i) => {
     let t = i.target.value.replace(/\s+/g, "");
     if (console.log(t, "valuee"), !/^\+?\d*$/.test(t)) return;
     let s = ["+44", "44", "0", "+353", "353"].find((o) => t.startsWith(o)) || "", n = t.slice(s.length);
@@ -26,7 +26,7 @@ function G() {
     })) : m((o) => ({ ...o, homeContactError: "" })) : m((o) => ({ ...o, homeContactError: "" }));
   };
   return /* @__PURE__ */ u(j, { children: [
-    /* @__PURE__ */ l(I, { children: /* @__PURE__ */ l(D, { label: "Contact Home", htmlFor: "contact-home" }) }),
+    /* @__PURE__ */ l(I, { children: /* @__PURE__ */ l(y, { label: "Contact Home", htmlFor: "contact-home" }) }),
     /* @__PURE__ */ u(k, { children: [
       /* @__PURE__ */ l(
         L,
@@ -40,8 +40,8 @@ function G() {
           disabled: x
         }
       ),
-      d && (() => {
-        const i = d.replace(/\s+/g, "");
+      f && (() => {
+        const i = f.replace(/\s+/g, "");
         let t = i.replace(/\D/g, ""), e = "", r = "";
         i.startsWith("+44") ? (e = "+44", r = t.slice(2)) : i.startsWith("44") ? (e = "44", r = t.slice(2)) : i.startsWith("0") ? (e = "0", r = t.slice(1)) : i.startsWith("+353") ? (e = "+353", r = t.slice(3)) : i.startsWith("353") ? (e = "353", r = t.slice(3)) : r = t;
         const s = e === "+353" || e === "353" ? 9 : 10;
@@ -52,7 +52,7 @@ function G() {
         return /* @__PURE__ */ l(N, { placement: "top", title: /* @__PURE__ */ l("span", { children: "Zoom" }), children: /* @__PURE__ */ l("a", { href: a, style: { cursor: "pointer" }, children: /* @__PURE__ */ l(O, {}) }) });
       })()
     ] }),
-    f.homeContactError && /* @__PURE__ */ l(A, { children: f.homeContactError })
+    d.homeContactError && /* @__PURE__ */ l(A, { children: d.homeContactError })
   ] });
 }
 const k = c.div`
@@ -63,9 +63,13 @@ const k = c.div`
   display: flex;
   align-items: center;
   gap: 5px;
-`, L = c(y)`
+`, L = c(w)`
   width: 80%;
 
+  @media screen and (max-width: 768px) {
+    width: 100%;
+  }
+
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
     -webkit-appearance: none;

package/dist/components/order-view/order-details/expanded-content/customer-section/contact-info/ContactHome.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactHome.js","sources":["../../../../../../../src/components/order-view/order-details/expanded-content/customer-section/contact-info/ContactHome.tsx"],"sourcesContent":["import { Input, Label } from '@bjsdistribution/dms-component-library';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n  errorAtom,\n  useAtom,\n  useOrderDetails,\n  usePrevOrderDetails,\n} from '../../../../store';\nimport { handleKeyDown } from '../../../../utils';\nimport { useClientPortal } from '../../../../../store';\n\n//import { VALIDATE_UK_IRISH_NUMBER_REGEX } from '../../../helper';\nimport CallCustomer from './CallCustomer';\nimport { Tooltip } from 'antd';\n\nfunction ContactHome() {\n  const [errors, setErrors] = useAtom(errorAtom);\n  const [isClientPortal] = useClientPortal();\n  const [orderDetails, setOrderDetails] = useOrderDetails();\n  const [prevOrderDetails] = usePrevOrderDetails();\n  const apiContactHome = prevOrderDetails?.order_recipient?.contact_home;\n  const orderRecipient = orderDetails?.order_recipient;\n\n  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    let val = e.target.value.replace(/\\s+/g, '');\n    console.log(val, 'valuee');\n\n    if (!/^\\+?\\d*$/.test(val)) return;\n\n    const validPrefixes = ['+44', '44', '0', '+353', '353'];\n\n    let matchedPrefix = validPrefixes.find(prefix => val.startsWith(prefix));\n    let prefix = matchedPrefix || '';\n    let numberPart = val.slice(prefix.length);\n\n    const digitLimit = prefix === '+353' || prefix === '353' ? 9 : 10;\n\n    if (numberPart.length > digitLimit) return;\n\n    const contactValue = val;\n\n    const updatedOrderRecipient = {\n      ...(orderRecipient === null\n        ? { contact_home: contactValue }\n        : { ...orderRecipient, contact_home: contactValue }),\n    };\n\n    setOrderDetails(prev => ({\n      ...prev,\n      order_recipient: updatedOrderRecipient,\n    }));\n\n    if (!numberPart) {\n      setErrors(prev => ({ ...prev, homeContactError: '' }));\n    } else if (numberPart.length !== digitLimit) {\n      setErrors(prev => ({\n        ...prev,\n        homeContactError: `Number must have exactly ${digitLimit} digits after the prefix.`,\n      }));\n    } else {\n      setErrors(prev => ({ ...prev, homeContactError: '' }));\n    }\n  };\n\n  return (\n    <Container>\n      <Wrapper>\n        <Label label=\"Contact Home\" htmlFor=\"contact-home\" />\n      </Wrapper>\n      <InputContainer>\n        <CustomInput\n          name=\"contact-home\"\n          // maxLength={12}\n          type=\"text\"\n          placeholder=\"Home Number\"\n          onKeyDown={handleKeyDown}\n          value={orderRecipient?.contact_home || ''}\n          onChange={onChange}\n          disabled={isClientPortal}\n        />\n        {/* \n        <CallCustomer /> */}\n        {apiContactHome &&\n          (() => {\n            const rawNumber = apiContactHome.replace(/\\s+/g, '');\n\n            let formattedNumber = rawNumber.replace(/\\D/g, ''); // digits only\n            let prefix = '';\n            let numberPart = '';\n\n            if (rawNumber.startsWith('+44')) {\n              prefix = '+44';\n              numberPart = formattedNumber.slice(2);\n            } else if (rawNumber.startsWith('44')) {\n              prefix = '44';\n              numberPart = formattedNumber.slice(2);\n            } else if (rawNumber.startsWith('0')) {\n              prefix = '0';\n              numberPart = formattedNumber.slice(1);\n            } else if (rawNumber.startsWith('+353')) {\n              prefix = '+353';\n              numberPart = formattedNumber.slice(3);\n            } else if (rawNumber.startsWith('353')) {\n              prefix = '353';\n              numberPart = formattedNumber.slice(3);\n            } else {\n              numberPart = formattedNumber;\n            }\n\n            // Set digit limit based on prefix\n            const digitLimit = prefix === '+353' || prefix === '353' ? 9 : 10;\n\n            if (numberPart.length !== digitLimit) return null;\n\n            let hrefPrefix = '';\n\n            if (prefix === '0' || prefix === '44' || prefix === '+44') {\n              hrefPrefix = '+44';\n            } else if (prefix === '353' || prefix === '+353') {\n              hrefPrefix = '+353';\n            } else {\n              hrefPrefix = '+44';\n            }\n\n            const finalHref = `tel:${hrefPrefix}${numberPart}`;\n\n            return (\n              <Tooltip placement=\"top\" title={<span>Zoom</span>}>\n                <a href={finalHref} style={{ cursor: 'pointer' }}>\n                  <CallCustomer />\n                </a>\n              </Tooltip>\n            );\n          })()}\n      </InputContainer>\n      {errors.homeContactError && (\n        <ErrorText>{errors.homeContactError}</ErrorText>\n      )}\n    </Container>\n  );\n}\n\nconst InputContainer = styled.div`\n  display: flex;\n  gap: 7px;\n  align-items: center;\n`;\n\nconst Wrapper = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 5px;\n`;\n\nconst CustomInput = styled(Input)`\n  width: 80%;\n\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n`;\n\nconst ErrorText = styled.span`\n  color: red;\n  font-size: 0.85rem;\n  margin-top: 4px;\n`;\n\nexport default ContactHome;\n"],"names":["ContactHome","errors","setErrors","useAtom","errorAtom","isClientPortal","useClientPortal","orderDetails","setOrderDetails","useOrderDetails","prevOrderDetails","usePrevOrderDetails","apiContactHome","orderRecipient","onChange","e","val","prefix","numberPart","digitLimit","contactValue","updatedOrderRecipient","prev","Container","jsx","Wrapper","Label","InputContainer","CustomInput","handleKeyDown","rawNumber","formattedNumber","hrefPrefix","finalHref","Tooltip","CallCustomer","ErrorText","styled","Input"],"mappings":"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"}
+{"version":3,"file":"ContactHome.js","sources":["../../../../../../../src/components/order-view/order-details/expanded-content/customer-section/contact-info/ContactHome.tsx"],"sourcesContent":["import { Input, Label } from '@bjsdistribution/dms-component-library';\nimport React from 'react';\nimport styled from 'styled-components';\nimport {\n  errorAtom,\n  useAtom,\n  useOrderDetails,\n  usePrevOrderDetails,\n} from '../../../../store';\nimport { handleKeyDown } from '../../../../utils';\nimport { useClientPortal } from '../../../../../store';\n\n//import { VALIDATE_UK_IRISH_NUMBER_REGEX } from '../../../helper';\nimport CallCustomer from './CallCustomer';\nimport { Tooltip } from 'antd';\n\nfunction ContactHome() {\n  const [errors, setErrors] = useAtom(errorAtom);\n  const [isClientPortal] = useClientPortal();\n  const [orderDetails, setOrderDetails] = useOrderDetails();\n  const [prevOrderDetails] = usePrevOrderDetails();\n  const apiContactHome = prevOrderDetails?.order_recipient?.contact_home;\n  const orderRecipient = orderDetails?.order_recipient;\n\n  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    let val = e.target.value.replace(/\\s+/g, '');\n    console.log(val, 'valuee');\n\n    if (!/^\\+?\\d*$/.test(val)) return;\n\n    const validPrefixes = ['+44', '44', '0', '+353', '353'];\n\n    let matchedPrefix = validPrefixes.find(prefix => val.startsWith(prefix));\n    let prefix = matchedPrefix || '';\n    let numberPart = val.slice(prefix.length);\n\n    const digitLimit = prefix === '+353' || prefix === '353' ? 9 : 10;\n\n    if (numberPart.length > digitLimit) return;\n\n    const contactValue = val;\n\n    const updatedOrderRecipient = {\n      ...(orderRecipient === null\n        ? { contact_home: contactValue }\n        : { ...orderRecipient, contact_home: contactValue }),\n    };\n\n    setOrderDetails(prev => ({\n      ...prev,\n      order_recipient: updatedOrderRecipient,\n    }));\n\n    if (!numberPart) {\n      setErrors(prev => ({ ...prev, homeContactError: '' }));\n    } else if (numberPart.length !== digitLimit) {\n      setErrors(prev => ({\n        ...prev,\n        homeContactError: `Number must have exactly ${digitLimit} digits after the prefix.`,\n      }));\n    } else {\n      setErrors(prev => ({ ...prev, homeContactError: '' }));\n    }\n  };\n\n  return (\n    <Container>\n      <Wrapper>\n        <Label label=\"Contact Home\" htmlFor=\"contact-home\" />\n      </Wrapper>\n      <InputContainer>\n        <CustomInput\n          name=\"contact-home\"\n          // maxLength={12}\n          type=\"text\"\n          placeholder=\"Home Number\"\n          onKeyDown={handleKeyDown}\n          value={orderRecipient?.contact_home || ''}\n          onChange={onChange}\n          disabled={isClientPortal}\n        />\n        {/* \n        <CallCustomer /> */}\n        {apiContactHome &&\n          (() => {\n            const rawNumber = apiContactHome.replace(/\\s+/g, '');\n\n            let formattedNumber = rawNumber.replace(/\\D/g, ''); // digits only\n            let prefix = '';\n            let numberPart = '';\n\n            if (rawNumber.startsWith('+44')) {\n              prefix = '+44';\n              numberPart = formattedNumber.slice(2);\n            } else if (rawNumber.startsWith('44')) {\n              prefix = '44';\n              numberPart = formattedNumber.slice(2);\n            } else if (rawNumber.startsWith('0')) {\n              prefix = '0';\n              numberPart = formattedNumber.slice(1);\n            } else if (rawNumber.startsWith('+353')) {\n              prefix = '+353';\n              numberPart = formattedNumber.slice(3);\n            } else if (rawNumber.startsWith('353')) {\n              prefix = '353';\n              numberPart = formattedNumber.slice(3);\n            } else {\n              numberPart = formattedNumber;\n            }\n\n            // Set digit limit based on prefix\n            const digitLimit = prefix === '+353' || prefix === '353' ? 9 : 10;\n\n            if (numberPart.length !== digitLimit) return null;\n\n            let hrefPrefix = '';\n\n            if (prefix === '0' || prefix === '44' || prefix === '+44') {\n              hrefPrefix = '+44';\n            } else if (prefix === '353' || prefix === '+353') {\n              hrefPrefix = '+353';\n            } else {\n              hrefPrefix = '+44';\n            }\n\n            const finalHref = `tel:${hrefPrefix}${numberPart}`;\n\n            return (\n              <Tooltip placement=\"top\" title={<span>Zoom</span>}>\n                <a href={finalHref} style={{ cursor: 'pointer' }}>\n                  <CallCustomer />\n                </a>\n              </Tooltip>\n            );\n          })()}\n      </InputContainer>\n      {errors.homeContactError && (\n        <ErrorText>{errors.homeContactError}</ErrorText>\n      )}\n    </Container>\n  );\n}\n\nconst InputContainer = styled.div`\n  display: flex;\n  gap: 7px;\n  align-items: center;\n`;\n\nconst Wrapper = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 5px;\n`;\n\nconst CustomInput = styled(Input)`\n  width: 80%;\n\n  @media screen and (max-width: 768px) {\n    width: 100%;\n  }\n\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n`;\n\nconst ErrorText = styled.span`\n  color: red;\n  font-size: 0.85rem;\n  margin-top: 4px;\n`;\n\nexport default ContactHome;\n"],"names":["ContactHome","errors","setErrors","useAtom","errorAtom","isClientPortal","useClientPortal","orderDetails","setOrderDetails","useOrderDetails","prevOrderDetails","usePrevOrderDetails","apiContactHome","orderRecipient","onChange","e","val","prefix","numberPart","digitLimit","contactValue","updatedOrderRecipient","prev","Container","jsx","Wrapper","Label","InputContainer","CustomInput","handleKeyDown","rawNumber","formattedNumber","hrefPrefix","finalHref","Tooltip","CallCustomer","ErrorText","styled","Input"],"mappings":"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"}

package/dist/components/order-view/order-details/expanded-content/customer-section/contact-info/ContactMobile.js

@@ -1,5 +1,5 @@
-import { jsxs as f, jsx as n } from "react/jsx-runtime";
-import { Input as P, Label as w } from "@bjsdistribution/dms-component-library";
+import { jsxs as d, jsx as n } from "react/jsx-runtime";
+import { Input as w, Label as P } from "@bjsdistribution/dms-component-library";
 import m from "styled-components";
 import D from "../../../../../../common/copy/CopyText.js";
 import E from "./CallCustomer.js";
@@ -9,29 +9,29 @@ import { useClientPortal as N } from "../../../../../store.js";
 import { Tooltip as $ } from "antd";
 import { useAtom as k } from "jotai";
 function Q() {
-  const [d, p] = k(W), [h] = N(), [x, g] = O(), [v] = I(), u = v?.order_recipient?.contact_mobile, s = x?.order_recipient, C = s?.contact_mobile !== void 0 && s?.contact_mobile !== null && s?.contact_mobile?.length > 0, y = (o) => {
+  const [f, p] = k(W), [h] = N(), [x, g] = O(), [v] = I(), u = v?.order_recipient?.contact_mobile, s = x?.order_recipient, C = s?.contact_mobile !== void 0 && s?.contact_mobile !== null && s?.contact_mobile?.length > 0, y = (o) => {
     let t = o.target.value.replace(/\s+/g, "");
     if (!/^\+?\d*$/.test(t)) return;
-    let c = ["+44", "44", "0", "+353", "353"].find((i) => t.startsWith(i)) || "", l = t.slice(c.length);
-    const a = c === "+353" || c === "353" ? 9 : 10;
-    if (l.length > a) return;
+    let a = ["+44", "44", "0", "+353", "353"].find((i) => t.startsWith(i)) || "", l = t.slice(a.length);
+    const c = a === "+353" || a === "353" ? 9 : 10;
+    if (l.length > c) return;
     const b = t, _ = {
       ...s === null ? { contact_mobile: b } : { ...s, contact_mobile: b }
     };
     g((i) => ({
       ...i,
       order_recipient: _
-    })), l ? l.length !== a ? p((i) => ({
+    })), l ? l.length !== c ? p((i) => ({
       ...i,
-      mobileError: `Number must have exactly ${a} digits after the prefix.`
+      mobileError: `Number must have exactly ${c} digits after the prefix.`
     })) : p((i) => ({ ...i, mobileError: "" })) : p((i) => ({ ...i, mobileError: "" }));
   };
-  return /* @__PURE__ */ f(A, { children: [
-    /* @__PURE__ */ f(T, { children: [
-      /* @__PURE__ */ n(w, { label: "Contact Mobile", htmlFor: "contact-mobile" }),
+  return /* @__PURE__ */ d(A, { children: [
+    /* @__PURE__ */ d(T, { children: [
+      /* @__PURE__ */ n(P, { label: "Contact Mobile", htmlFor: "contact-mobile" }),
       C && /* @__PURE__ */ n(D, { text: s?.contact_mobile })
     ] }),
-    /* @__PURE__ */ f(L, { children: [
+    /* @__PURE__ */ d(L, { children: [
       /* @__PURE__ */ n(
         j,
         {
@@ -48,15 +48,15 @@ function Q() {
         const o = u.replace(/\s+/g, "");
         let t = o.replace(/\D/g, ""), e = "", r = "";
         o.startsWith("+44") ? (e = "+44", r = t.slice(2)) : o.startsWith("44") ? (e = "44", r = t.slice(2)) : o.startsWith("0") ? (e = "0", r = t.slice(1)) : o.startsWith("+353") ? (e = "+353", r = t.slice(3)) : o.startsWith("353") ? (e = "353", r = t.slice(3)) : r = t;
-        const c = e === "+353" || e === "353" ? 9 : 10;
-        if (r.length !== c) return null;
+        const a = e === "+353" || e === "353" ? 9 : 10;
+        if (r.length !== a) return null;
         let l = "";
         e === "0" || e === "44" || e === "+44" ? l = "+44" : e === "353" || e === "+353" ? l = "+353" : l = "+44";
-        const a = `tel:${l}${r}`;
-        return /* @__PURE__ */ n($, { placement: "top", title: /* @__PURE__ */ n("span", { children: "Zoom" }), children: /* @__PURE__ */ n("a", { href: a, style: { cursor: "pointer" }, children: /* @__PURE__ */ n(E, {}) }) });
+        const c = `tel:${l}${r}`;
+        return /* @__PURE__ */ n($, { placement: "top", title: /* @__PURE__ */ n("span", { children: "Zoom" }), children: /* @__PURE__ */ n("a", { href: c, style: { cursor: "pointer" }, children: /* @__PURE__ */ n(E, {}) }) });
       })()
     ] }),
-    d.mobileError && /* @__PURE__ */ n(K, { children: d.mobileError })
+    f.mobileError && /* @__PURE__ */ n(K, { children: f.mobileError })
   ] });
 }
 const L = m.div`
@@ -67,9 +67,13 @@ const L = m.div`
   display: flex;
   align-items: center;
   gap: 5px;
-`, j = m(P)`
+`, j = m(w)`
   width: 80%;
 
+  @media screen and (max-width: 768px) {
+    width: 100%;
+  }
+
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
     -webkit-appearance: none;

package/dist/components/order-view/order-details/expanded-content/customer-section/contact-info/ContactMobile.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContactMobile.js","sources":["../../../../../../../src/components/order-view/order-details/expanded-content/customer-section/contact-info/ContactMobile.tsx"],"sourcesContent":["import { Input, Label } from '@bjsdistribution/dms-component-library';\nimport React from 'react';\nimport styled from 'styled-components';\nimport CopyText from '../../../../../../common/copy/CopyText';\nimport CallCustomer from './CallCustomer';\nimport {\n  errorAtom,\n  useAtom,\n  useOrderDetails,\n  usePrevOrderDetails,\n} from '../../../../store';\nimport { handleKeyDown } from '../../../../utils';\nimport { useClientPortal } from '../../../../../store';\nimport { Tooltip } from 'antd';\n\nfunction ContactMobile() {\n  const [errors, setErrors] = useAtom(errorAtom);\n  const [isClientPortal] = useClientPortal();\n  const [orderDetails, setOrderDetails] = useOrderDetails();\n  const [prevOrderDetails] = usePrevOrderDetails();\n  const apiContactMobile = prevOrderDetails?.order_recipient?.contact_mobile;\n  const orderRecipient = orderDetails?.order_recipient;\n\n  const showCopyIcon =\n    orderRecipient?.contact_mobile !== undefined &&\n    orderRecipient?.contact_mobile !== null &&\n    orderRecipient?.contact_mobile?.length > 0;\n\n  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    let val = e.target.value.replace(/\\s+/g, '');\n\n    if (!/^\\+?\\d*$/.test(val)) return;\n\n    const validPrefixes = ['+44', '44', '0', '+353', '353'];\n\n    let matchedPrefix = validPrefixes.find(prefix => val.startsWith(prefix));\n    let prefix = matchedPrefix || '';\n    let numberPart = val.slice(prefix.length);\n\n    const digitLimit = prefix === '+353' || prefix === '353' ? 9 : 10;\n\n    if (numberPart.length > digitLimit) return;\n\n    const contactValue = val;\n\n    const updatedOrderRecipient = {\n      ...(orderRecipient === null\n        ? { contact_mobile: contactValue }\n        : { ...orderRecipient, contact_mobile: contactValue }),\n    };\n\n    setOrderDetails(prev => ({\n      ...prev,\n      order_recipient: updatedOrderRecipient,\n    }));\n\n    // Validation errors\n    if (!numberPart) {\n      setErrors(prev => ({ ...prev, mobileError: '' }));\n    } else if (numberPart.length !== digitLimit) {\n      setErrors(prev => ({\n        ...prev,\n        mobileError: `Number must have exactly ${digitLimit} digits after the prefix.`,\n      }));\n    } else {\n      setErrors(prev => ({ ...prev, mobileError: '' }));\n    }\n  };\n\n  return (\n    <Container>\n      <Wrapper>\n        <Label label=\"Contact Mobile\" htmlFor=\"contact-mobile\" />\n        {showCopyIcon && <CopyText text={orderRecipient?.contact_mobile!} />}\n      </Wrapper>\n      <InputContainer>\n        <CustomInput\n          name=\"contact-mobile\"\n          // maxLength={12}\n          type=\"text\"\n          placeholder=\"Mobile Number\"\n          onKeyDown={handleKeyDown}\n          value={orderRecipient?.contact_mobile || ''}\n          onChange={onChange}\n          disabled={isClientPortal}\n        />\n\n        {apiContactMobile &&\n          (() => {\n            const rawNumber = apiContactMobile.replace(/\\s+/g, '');\n\n            let formattedNumber = rawNumber.replace(/\\D/g, '');\n            let prefix = '';\n            let numberPart = '';\n\n            if (rawNumber.startsWith('+44')) {\n              prefix = '+44';\n              numberPart = formattedNumber.slice(2);\n            } else if (rawNumber.startsWith('44')) {\n              prefix = '44';\n              numberPart = formattedNumber.slice(2);\n            } else if (rawNumber.startsWith('0')) {\n              prefix = '0';\n              numberPart = formattedNumber.slice(1);\n            } else if (rawNumber.startsWith('+353')) {\n              prefix = '+353';\n              numberPart = formattedNumber.slice(3);\n            } else if (rawNumber.startsWith('353')) {\n              prefix = '353';\n              numberPart = formattedNumber.slice(3);\n            } else {\n              numberPart = formattedNumber;\n            }\n\n            // Set digit limit based on prefix\n            const digitLimit = prefix === '+353' || prefix === '353' ? 9 : 10;\n\n            if (numberPart.length !== digitLimit) return null;\n\n            let hrefPrefix = '';\n\n            if (prefix === '0' || prefix === '44' || prefix === '+44') {\n              hrefPrefix = '+44';\n            } else if (prefix === '353' || prefix === '+353') {\n              hrefPrefix = '+353';\n            } else {\n              hrefPrefix = '+44';\n            }\n\n            const finalHref = `tel:${hrefPrefix}${numberPart}`;\n\n            return (\n              <Tooltip placement=\"top\" title={<span>Zoom</span>}>\n                <a href={finalHref} style={{ cursor: 'pointer' }}>\n                  <CallCustomer />\n                </a>\n              </Tooltip>\n            );\n          })()}\n      </InputContainer>\n\n      {errors.mobileError && <ErrorText>{errors.mobileError}</ErrorText>}\n    </Container>\n  );\n}\n\nconst InputContainer = styled.div`\n  display: flex;\n  gap: 7px;\n  align-items: center;\n`;\n\nconst Wrapper = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 5px;\n`;\n\nconst CustomInput = styled(Input)`\n  width: 80%;\n\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n`;\n\nconst ErrorText = styled.span`\n  color: red;\n  font-size: 0.85rem;\n  margin-top: 4px;\n`;\n\nexport default ContactMobile;\n"],"names":["ContactMobile","errors","setErrors","useAtom","errorAtom","isClientPortal","useClientPortal","orderDetails","setOrderDetails","useOrderDetails","prevOrderDetails","usePrevOrderDetails","apiContactMobile","orderRecipient","showCopyIcon","onChange","e","val","prefix","numberPart","digitLimit","contactValue","updatedOrderRecipient","prev","Container","jsxs","Wrapper","jsx","Label","CopyText","InputContainer","CustomInput","handleKeyDown","rawNumber","formattedNumber","hrefPrefix","finalHref","Tooltip","CallCustomer","ErrorText","styled","Input"],"mappings":"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"}
+{"version":3,"file":"ContactMobile.js","sources":["../../../../../../../src/components/order-view/order-details/expanded-content/customer-section/contact-info/ContactMobile.tsx"],"sourcesContent":["import { Input, Label } from '@bjsdistribution/dms-component-library';\nimport React from 'react';\nimport styled from 'styled-components';\nimport CopyText from '../../../../../../common/copy/CopyText';\nimport CallCustomer from './CallCustomer';\nimport {\n  errorAtom,\n  useAtom,\n  useOrderDetails,\n  usePrevOrderDetails,\n} from '../../../../store';\nimport { handleKeyDown } from '../../../../utils';\nimport { useClientPortal } from '../../../../../store';\nimport { Tooltip } from 'antd';\n\nfunction ContactMobile() {\n  const [errors, setErrors] = useAtom(errorAtom);\n  const [isClientPortal] = useClientPortal();\n  const [orderDetails, setOrderDetails] = useOrderDetails();\n  const [prevOrderDetails] = usePrevOrderDetails();\n  const apiContactMobile = prevOrderDetails?.order_recipient?.contact_mobile;\n  const orderRecipient = orderDetails?.order_recipient;\n\n  const showCopyIcon =\n    orderRecipient?.contact_mobile !== undefined &&\n    orderRecipient?.contact_mobile !== null &&\n    orderRecipient?.contact_mobile?.length > 0;\n\n  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    let val = e.target.value.replace(/\\s+/g, '');\n\n    if (!/^\\+?\\d*$/.test(val)) return;\n\n    const validPrefixes = ['+44', '44', '0', '+353', '353'];\n\n    let matchedPrefix = validPrefixes.find(prefix => val.startsWith(prefix));\n    let prefix = matchedPrefix || '';\n    let numberPart = val.slice(prefix.length);\n\n    const digitLimit = prefix === '+353' || prefix === '353' ? 9 : 10;\n\n    if (numberPart.length > digitLimit) return;\n\n    const contactValue = val;\n\n    const updatedOrderRecipient = {\n      ...(orderRecipient === null\n        ? { contact_mobile: contactValue }\n        : { ...orderRecipient, contact_mobile: contactValue }),\n    };\n\n    setOrderDetails(prev => ({\n      ...prev,\n      order_recipient: updatedOrderRecipient,\n    }));\n\n    // Validation errors\n    if (!numberPart) {\n      setErrors(prev => ({ ...prev, mobileError: '' }));\n    } else if (numberPart.length !== digitLimit) {\n      setErrors(prev => ({\n        ...prev,\n        mobileError: `Number must have exactly ${digitLimit} digits after the prefix.`,\n      }));\n    } else {\n      setErrors(prev => ({ ...prev, mobileError: '' }));\n    }\n  };\n\n  return (\n    <Container>\n      <Wrapper>\n        <Label label=\"Contact Mobile\" htmlFor=\"contact-mobile\" />\n        {showCopyIcon && <CopyText text={orderRecipient?.contact_mobile!} />}\n      </Wrapper>\n      <InputContainer>\n        <CustomInput\n          name=\"contact-mobile\"\n          // maxLength={12}\n          type=\"text\"\n          placeholder=\"Mobile Number\"\n          onKeyDown={handleKeyDown}\n          value={orderRecipient?.contact_mobile || ''}\n          onChange={onChange}\n          disabled={isClientPortal}\n        />\n\n        {apiContactMobile &&\n          (() => {\n            const rawNumber = apiContactMobile.replace(/\\s+/g, '');\n\n            let formattedNumber = rawNumber.replace(/\\D/g, '');\n            let prefix = '';\n            let numberPart = '';\n\n            if (rawNumber.startsWith('+44')) {\n              prefix = '+44';\n              numberPart = formattedNumber.slice(2);\n            } else if (rawNumber.startsWith('44')) {\n              prefix = '44';\n              numberPart = formattedNumber.slice(2);\n            } else if (rawNumber.startsWith('0')) {\n              prefix = '0';\n              numberPart = formattedNumber.slice(1);\n            } else if (rawNumber.startsWith('+353')) {\n              prefix = '+353';\n              numberPart = formattedNumber.slice(3);\n            } else if (rawNumber.startsWith('353')) {\n              prefix = '353';\n              numberPart = formattedNumber.slice(3);\n            } else {\n              numberPart = formattedNumber;\n            }\n\n            // Set digit limit based on prefix\n            const digitLimit = prefix === '+353' || prefix === '353' ? 9 : 10;\n\n            if (numberPart.length !== digitLimit) return null;\n\n            let hrefPrefix = '';\n\n            if (prefix === '0' || prefix === '44' || prefix === '+44') {\n              hrefPrefix = '+44';\n            } else if (prefix === '353' || prefix === '+353') {\n              hrefPrefix = '+353';\n            } else {\n              hrefPrefix = '+44';\n            }\n\n            const finalHref = `tel:${hrefPrefix}${numberPart}`;\n\n            return (\n              <Tooltip placement=\"top\" title={<span>Zoom</span>}>\n                <a href={finalHref} style={{ cursor: 'pointer' }}>\n                  <CallCustomer />\n                </a>\n              </Tooltip>\n            );\n          })()}\n      </InputContainer>\n\n      {errors.mobileError && <ErrorText>{errors.mobileError}</ErrorText>}\n    </Container>\n  );\n}\n\nconst InputContainer = styled.div`\n  display: flex;\n  gap: 7px;\n  align-items: center;\n`;\n\nconst Wrapper = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 5px;\n`;\n\nconst CustomInput = styled(Input)`\n  width: 80%;\n\n  @media screen and (max-width: 768px) {\n    width: 100%;\n  }\n\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n`;\n\nconst ErrorText = styled.span`\n  color: red;\n  font-size: 0.85rem;\n  margin-top: 4px;\n`;\n\nexport default ContactMobile;\n"],"names":["ContactMobile","errors","setErrors","useAtom","errorAtom","isClientPortal","useClientPortal","orderDetails","setOrderDetails","useOrderDetails","prevOrderDetails","usePrevOrderDetails","apiContactMobile","orderRecipient","showCopyIcon","onChange","e","val","prefix","numberPart","digitLimit","contactValue","updatedOrderRecipient","prev","Container","jsxs","Wrapper","jsx","Label","CopyText","InputContainer","CustomInput","handleKeyDown","rawNumber","formattedNumber","hrefPrefix","finalHref","Tooltip","CallCustomer","ErrorText","styled","Input"],"mappings":"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"}

package/dist/components/order-view/order-details/expanded-content/customer-section/contact-info/index.js

@@ -1,25 +1,31 @@
 import { jsxs as t, jsx as o } from "react/jsx-runtime";
-import i from "styled-components";
+import r from "styled-components";
 import n from "./ContactHome.js";
 import e from "./ContactWork.js";
 import m from "./ContactMobile.js";
-import p from "./ContactEmail.js";
+import a from "./ContactEmail.js";
 function u() {
-  return /* @__PURE__ */ t(a, { children: [
-    /* @__PURE__ */ t(r, { children: [
+  return /* @__PURE__ */ t(p, { children: [
+    /* @__PURE__ */ t(i, { children: [
       /* @__PURE__ */ o(n, {}),
       /* @__PURE__ */ o(e, {})
     ] }),
-    /* @__PURE__ */ t(r, { children: [
+    /* @__PURE__ */ t(i, { children: [
       /* @__PURE__ */ o(m, {}),
-      /* @__PURE__ */ o(p, {})
+      /* @__PURE__ */ o(a, {})
     ] })
   ] });
 }
-const r = i.div`
+const i = r.div`
   display: flex;
   gap: 15px;
-`, a = i.div`
+
+  @media screen and (max-width: 768px) {
+    flex-direction: column;
+    gap: 15px;
+    min-width: 0;
+  }
+`, p = r.div`
   display: flex;
   flex-direction: column;
   gap: 10px;

package/dist/components/order-view/order-details/expanded-content/customer-section/contact-info/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../../src/components/order-view/order-details/expanded-content/customer-section/contact-info/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport React from 'react';\nimport ContactHome from './ContactHome';\nimport ContactWork from './ContactWork';\nimport ContactMobile from './ContactMobile';\nimport ContactEmail from './ContactEmail';\n\nfunction ContactDetails() {\n  return (\n    <Container>\n      <GroupedInputs>\n        <ContactHome />\n        <ContactWork />\n      </GroupedInputs>\n      <GroupedInputs>\n        <ContactMobile />\n        <ContactEmail />\n      </GroupedInputs>\n    </Container>\n  );\n}\n\nconst GroupedInputs = styled.div`\n  display: flex;\n  gap: 15px;\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n`;\n\nexport default ContactDetails;\n"],"names":["ContactDetails","Container","jsxs","GroupedInputs","jsx","ContactHome","ContactWork","ContactMobile","ContactEmail","styled"],"mappings":";;;;;;AAOA,SAASA,IAAiB;AACxB,2BACGC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAY;AAAA,wBACZC,GAAA,CAAA,CAAY;AAAA,IAAA,GACf;AAAA,sBACCH,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAC,EAACG,GAAA,EAAc;AAAA,wBACdC,GAAA,CAAA,CAAa;AAAA,IAAA,EAAA,CAChB;AAAA,EAAA,GACF;AAEJ;AAEA,MAAML,IAAgBM,EAAO;AAAA;AAAA;AAAA,GAKvBR,IAAYQ,EAAO;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"index.js","sources":["../../../../../../../src/components/order-view/order-details/expanded-content/customer-section/contact-info/index.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport React from 'react';\nimport ContactHome from './ContactHome';\nimport ContactWork from './ContactWork';\nimport ContactMobile from './ContactMobile';\nimport ContactEmail from './ContactEmail';\n\nfunction ContactDetails() {\n  return (\n    <Container>\n      <GroupedInputs>\n        <ContactHome />\n        <ContactWork />\n      </GroupedInputs>\n      <GroupedInputs>\n        <ContactMobile />\n        <ContactEmail />\n      </GroupedInputs>\n    </Container>\n  );\n}\n\nconst GroupedInputs = styled.div`\n  display: flex;\n  gap: 15px;\n\n  @media screen and (max-width: 768px) {\n    flex-direction: column;\n    gap: 15px;\n    min-width: 0;\n  }\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n`;\n\nexport default ContactDetails;\n"],"names":["ContactDetails","Container","jsxs","GroupedInputs","jsx","ContactHome","ContactWork","ContactMobile","ContactEmail","styled"],"mappings":";;;;;;AAOA,SAASA,IAAiB;AACxB,2BACGC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAY;AAAA,wBACZC,GAAA,CAAA,CAAY;AAAA,IAAA,GACf;AAAA,sBACCH,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAC,EAACG,GAAA,EAAc;AAAA,wBACdC,GAAA,CAAA,CAAa;AAAA,IAAA,EAAA,CAChB;AAAA,EAAA,GACF;AAEJ;AAEA,MAAML,IAAgBM,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAWvBR,IAAYQ,EAAO;AAAA;AAAA;AAAA;AAAA;"}

package/dist/components/order-view/order-details/expanded-content/customer-section/index.js

@@ -1,31 +1,37 @@
 import { jsxs as r, jsx as o } from "react/jsx-runtime";
-import { FormSection as e } from "@bjsdistribution/dms-component-library";
+import { FormSection as i } from "@bjsdistribution/dms-component-library";
 import t from "styled-components";
-import i from "../../common/Header.js";
+import e from "../../common/Header.js";
 import m from "./RecipientName.js";
-import p from "./location-info/index.js";
-import n from "./contact-info/index.js";
-function C() {
-  return /* @__PURE__ */ r(s, { children: [
-    /* @__PURE__ */ o(i, { label: "Customer" }),
-    /* @__PURE__ */ r(a, { children: [
+import n from "./location-info/index.js";
+import a from "./contact-info/index.js";
+function h() {
+  return /* @__PURE__ */ r(d, { children: [
+    /* @__PURE__ */ o(e, { label: "Customer" }),
+    /* @__PURE__ */ r(p, { children: [
       /* @__PURE__ */ o(m, {}),
-      /* @__PURE__ */ o(p, {}),
-      /* @__PURE__ */ o(n, {})
+      /* @__PURE__ */ o(n, {}),
+      /* @__PURE__ */ o(a, {})
     ] })
   ] });
 }
-const a = t.div`
+const p = t.div`
   display: flex;
   flex-direction: column;
   gap: 15px;
-`, s = t(e)`
+`, d = t(i)`
   flex: 1;
   border-radius: 8px;
   background: #f8fafc;
   box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);
+
+  @media screen and (max-width: 768px) {
+    min-width: 0;
+    max-width: 100%;
+    box-sizing: border-box;
+  }
 `;
 export {
-  C as default
+  h as default
 };
 //# sourceMappingURL=index.js.map

package/dist/components/order-view/order-details/expanded-content/customer-section/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../../src/components/order-view/order-details/expanded-content/customer-section/index.tsx"],"sourcesContent":["import React from 'react';\nimport { FormSection } from '@bjsdistribution/dms-component-library';\nimport styled from 'styled-components';\nimport Header from '../../common/Header';\nimport RecipientName from './RecipientName';\nimport LocationDetails from './location-info';\nimport ContactDetails from './contact-info';\n\nfunction CustomerSection() {\n  return (\n    <CustomFormSection>\n      <Header label=\"Customer\" />\n      <FormInputs>\n        <RecipientName />\n        <LocationDetails />\n        <ContactDetails />\n      </FormInputs>\n    </CustomFormSection>\n  );\n}\n\nconst FormInputs = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n`;\n\nconst CustomFormSection = styled(FormSection)`\n  flex: 1;\n  border-radius: 8px;\n  background: #f8fafc;\n  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);\n`;\n\nexport default CustomerSection;\n"],"names":["CustomerSection","CustomFormSection","jsx","Header","FormInputs","RecipientName","LocationDetails","ContactDetails","styled","FormSection"],"mappings":";;;;;;;AAQA,SAASA,IAAkB;AACzB,2BACGC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAO,OAAM,WAAA,CAAW;AAAA,sBACxBC,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAF,EAACG,GAAA,EAAc;AAAA,wBACdC,GAAA,EAAgB;AAAA,wBAChBC,GAAA,CAAA,CAAe;AAAA,IAAA,EAAA,CAClB;AAAA,EAAA,GACF;AAEJ;AAEA,MAAMH,IAAaI,EAAO;AAAA;AAAA;AAAA;AAAA,GAMpBP,IAAoBO,EAAOC,CAAW;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/order-view/order-details/expanded-content/customer-section/index.tsx"],"sourcesContent":["import React from 'react';\nimport { FormSection } from '@bjsdistribution/dms-component-library';\nimport styled from 'styled-components';\nimport Header from '../../common/Header';\nimport RecipientName from './RecipientName';\nimport LocationDetails from './location-info';\nimport ContactDetails from './contact-info';\n\nfunction CustomerSection() {\n  return (\n    <CustomFormSection>\n      <Header label=\"Customer\" />\n      <FormInputs>\n        <RecipientName />\n        <LocationDetails />\n        <ContactDetails />\n      </FormInputs>\n    </CustomFormSection>\n  );\n}\n\nconst FormInputs = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 15px;\n`;\n\nconst CustomFormSection = styled(FormSection)`\n  flex: 1;\n  border-radius: 8px;\n  background: #f8fafc;\n  box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.1);\n\n  @media screen and (max-width: 768px) {\n    min-width: 0;\n    max-width: 100%;\n    box-sizing: border-box;\n  }\n`;\n\nexport default CustomerSection;\n"],"names":["CustomerSection","CustomFormSection","jsx","Header","FormInputs","RecipientName","LocationDetails","ContactDetails","styled","FormSection"],"mappings":";;;;;;;AAQA,SAASA,IAAkB;AACzB,2BACGC,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAO,OAAM,WAAA,CAAW;AAAA,sBACxBC,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAF,EAACG,GAAA,EAAc;AAAA,wBACdC,GAAA,EAAgB;AAAA,wBAChBC,GAAA,CAAA,CAAe;AAAA,IAAA,EAAA,CAClB;AAAA,EAAA,GACF;AAEJ;AAEA,MAAMH,IAAaI,EAAO;AAAA;AAAA;AAAA;AAAA,GAMpBP,IAAoBO,EAAOC,CAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/components/order-view/order-details/expanded-content/customer-section/location-info/Address.js

@@ -1,10 +1,10 @@
 import { jsxs as t, jsx as r } from "react/jsx-runtime";
 import { TextArea as m, Label as x } from "@bjsdistribution/dms-component-library";
 import s from "styled-components";
-import u from "../../../../../../common/copy/CopyText.js";
-import { useOrderDetails as f } from "../../../../store.js";
+import h from "../../../../../../common/copy/CopyText.js";
+import { useOrderDetails as u } from "../../../../store.js";
 function O() {
-  const [o, n] = f(), e = o?.order_recipient, a = e?.address !== void 0 && e?.address !== null && e?.address?.length > 0, i = (l) => {
+  const [o, n] = u(), e = o?.order_recipient, a = e?.address !== void 0 && e?.address !== null && e?.address?.length > 0, i = (l) => {
     const d = l.target.value, p = {
       ...e === null ? { address: d } : { ...e, address: d }
     };
@@ -14,9 +14,9 @@ function O() {
     }));
   };
   return /* @__PURE__ */ t(g, { children: [
-    /* @__PURE__ */ t(h, { children: [
+    /* @__PURE__ */ t(f, { children: [
       /* @__PURE__ */ r(x, { label: "Address", htmlFor: "address" }),
-      a && /* @__PURE__ */ r(u, { text: e?.address })
+      a && /* @__PURE__ */ r(h, { text: e?.address })
     ] }),
     /* @__PURE__ */ r(
       v,
@@ -29,7 +29,7 @@ function O() {
     )
   ] });
 }
-const h = s.div`
+const f = s.div`
   display: flex;
   align-items: center;
   gap: 5px;
@@ -42,6 +42,11 @@ const h = s.div`
   resize: none;
   height: 70%;
   border-radius: 15px;
+
+  @media screen and (max-width: 768px) {
+    height: auto;
+    min-height: 90px;
+  }
 `;
 export {
   O as default

package/dist/components/order-view/order-details/expanded-content/customer-section/location-info/Address.js.map

@@ -1 +1 @@
-{"version":3,"file":"Address.js","sources":["../../../../../../../src/components/order-view/order-details/expanded-content/customer-section/location-info/Address.tsx"],"sourcesContent":["import { Label, TextArea } from '@bjsdistribution/dms-component-library';\nimport React from 'react';\nimport styled from 'styled-components';\nimport CopyText from '../../../../../../common/copy/CopyText';\nimport { useOrderDetails } from '../../../../store';\n\nfunction Address() {\n  // show copy icon if there is input value\n  const [orderDetails, setOrderDetails] = useOrderDetails();\n  const orderRecipient = orderDetails?.order_recipient;\n\n  const showCopyIcon =\n    orderRecipient?.address !== undefined &&\n    orderRecipient?.address !== null &&\n    orderRecipient?.address?.length > 0;\n\n  const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    const val = e.target.value;\n    const updatedOrderRecipient = {\n      ...(orderRecipient === null\n        ? { address: val }\n        : { ...orderRecipient, address: val }),\n    };\n    setOrderDetails(prev => {\n      return {\n        ...prev,\n        order_recipient: updatedOrderRecipient,\n      };\n    });\n  };\n\n  return (\n    <Container>\n      <Wrapper>\n        <Label label=\"Address\" htmlFor=\"address\" />\n        {showCopyIcon && <CopyText text={orderRecipient?.address!} />}\n      </Wrapper>\n      <TextContainer\n        name=\"address\"\n        placeholder=\"Address\"\n        value={orderRecipient?.address || ''}\n        onChange={onChange}\n      />\n    </Container>\n  );\n}\n\nconst Wrapper = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 5px;\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n`;\nconst TextContainer = styled(TextArea)`\n  resize: none;\n  height: 70%;\n  border-radius: 15px;\n`;\n\nexport default Address;\n"],"names":["Address","orderDetails","setOrderDetails","useOrderDetails","orderRecipient","showCopyIcon","onChange","e","val","updatedOrderRecipient","prev","Container","jsxs","Wrapper","jsx","Label","CopyText","TextContainer","styled","TextArea"],"mappings":";;;;;AAMA,SAASA,IAAU;AAEjB,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAA,GAClCC,IAAiBH,GAAc,iBAE/BI,IACJD,GAAgB,YAAY,UAC5BA,GAAgB,YAAY,QAC5BA,GAAgB,SAAS,SAAS,GAE9BE,IAAW,CAACC,MAA8C;AAC9D,UAAMC,IAAMD,EAAE,OAAO,OACfE,IAAwB;AAAA,MAC5B,GAAIL,MAAmB,OACnB,EAAE,SAASI,EAAA,IACX,EAAE,GAAGJ,GAAgB,SAASI,EAAA;AAAA,IAAI;AAExC,IAAAN,EAAgB,CAAAQ,OACP;AAAA,MACL,GAAGA;AAAA,MACH,iBAAiBD;AAAA,IAAA,EAEpB;AAAA,EACH;AAEA,2BACGE,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAM,OAAM,WAAU,SAAQ,WAAU;AAAA,MACxCV,KAAgB,gBAAAS,EAACE,GAAA,EAAS,MAAMZ,GAAgB,QAAA,CAAU;AAAA,IAAA,GAC7D;AAAA,IACA,gBAAAU;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,aAAY;AAAA,QACZ,OAAOb,GAAgB,WAAW;AAAA,QAClC,UAAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;AAEA,MAAMO,IAAUK,EAAO;AAAA;AAAA;AAAA;AAAA,GAMjBP,IAAYO,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAMnBD,IAAgBC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"Address.js","sources":["../../../../../../../src/components/order-view/order-details/expanded-content/customer-section/location-info/Address.tsx"],"sourcesContent":["import { Label, TextArea } from '@bjsdistribution/dms-component-library';\nimport React from 'react';\nimport styled from 'styled-components';\nimport CopyText from '../../../../../../common/copy/CopyText';\nimport { useOrderDetails } from '../../../../store';\n\nfunction Address() {\n  // show copy icon if there is input value\n  const [orderDetails, setOrderDetails] = useOrderDetails();\n  const orderRecipient = orderDetails?.order_recipient;\n\n  const showCopyIcon =\n    orderRecipient?.address !== undefined &&\n    orderRecipient?.address !== null &&\n    orderRecipient?.address?.length > 0;\n\n  const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n    const val = e.target.value;\n    const updatedOrderRecipient = {\n      ...(orderRecipient === null\n        ? { address: val }\n        : { ...orderRecipient, address: val }),\n    };\n    setOrderDetails(prev => {\n      return {\n        ...prev,\n        order_recipient: updatedOrderRecipient,\n      };\n    });\n  };\n\n  return (\n    <Container>\n      <Wrapper>\n        <Label label=\"Address\" htmlFor=\"address\" />\n        {showCopyIcon && <CopyText text={orderRecipient?.address!} />}\n      </Wrapper>\n      <TextContainer\n        name=\"address\"\n        placeholder=\"Address\"\n        value={orderRecipient?.address || ''}\n        onChange={onChange}\n      />\n    </Container>\n  );\n}\n\nconst Wrapper = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 5px;\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n`;\nconst TextContainer = styled(TextArea)`\n  resize: none;\n  height: 70%;\n  border-radius: 15px;\n\n  @media screen and (max-width: 768px) {\n    height: auto;\n    min-height: 90px;\n  }\n`;\n\nexport default Address;\n"],"names":["Address","orderDetails","setOrderDetails","useOrderDetails","orderRecipient","showCopyIcon","onChange","e","val","updatedOrderRecipient","prev","Container","jsxs","Wrapper","jsx","Label","CopyText","TextContainer","styled","TextArea"],"mappings":";;;;;AAMA,SAASA,IAAU;AAEjB,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAA,GAClCC,IAAiBH,GAAc,iBAE/BI,IACJD,GAAgB,YAAY,UAC5BA,GAAgB,YAAY,QAC5BA,GAAgB,SAAS,SAAS,GAE9BE,IAAW,CAACC,MAA8C;AAC9D,UAAMC,IAAMD,EAAE,OAAO,OACfE,IAAwB;AAAA,MAC5B,GAAIL,MAAmB,OACnB,EAAE,SAASI,EAAA,IACX,EAAE,GAAGJ,GAAgB,SAASI,EAAA;AAAA,IAAI;AAExC,IAAAN,EAAgB,CAAAQ,OACP;AAAA,MACL,GAAGA;AAAA,MACH,iBAAiBD;AAAA,IAAA,EAEpB;AAAA,EACH;AAEA,2BACGE,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAM,OAAM,WAAU,SAAQ,WAAU;AAAA,MACxCV,KAAgB,gBAAAS,EAACE,GAAA,EAAS,MAAMZ,GAAgB,QAAA,CAAU;AAAA,IAAA,GAC7D;AAAA,IACA,gBAAAU;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,aAAY;AAAA,QACZ,OAAOb,GAAgB,WAAW;AAAA,QAClC,UAAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;AAEA,MAAMO,IAAUK,EAAO;AAAA;AAAA;AAAA;AAAA,GAMjBP,IAAYO,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAMnBD,IAAgBC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/components/order-view/order-details/expanded-content/customer-section/location-info/Latitude.js

@@ -1,33 +1,35 @@
-import { jsxs as u, jsx as e } from "react/jsx-runtime";
-import { Input as s, Label as d } from "@bjsdistribution/dms-component-library";
-import t from "styled-components";
-import { useOrderDetails as p } from "../../../../store.js";
-import { handleKeyDown as m } from "../../../../utils.js";
-function w() {
-  const [n, o] = p(), r = (i) => {
-    const a = i.target.value;
-    o((l) => ({
-      ...l,
-      latitude: a
+import { jsxs as p, jsx as n } from "react/jsx-runtime";
+import { Input as s, Label as c } from "@bjsdistribution/dms-component-library";
+import o from "styled-components";
+import { useOrderDetails as m } from "../../../../store.js";
+import { handleKeyDown as f } from "../../../../utils.js";
+function D() {
+  const [r, i] = m(), e = r?.order_recipient, a = (l) => {
+    const t = l.target.value, d = {
+      ...e === null ? { latitude: t } : { ...e, latitude: t }
+    };
+    i((u) => ({
+      ...u,
+      order_recipient: d
     }));
   };
-  return /* @__PURE__ */ u(f, { children: [
-    /* @__PURE__ */ e(d, { label: "Latitude", htmlFor: "lat" }),
-    /* @__PURE__ */ e(
-      c,
+  return /* @__PURE__ */ p(x, { children: [
+    /* @__PURE__ */ n(c, { label: "Latitude", htmlFor: "lat" }),
+    /* @__PURE__ */ n(
+      b,
       {
         name: "lat",
         type: "number",
         placeholder: "Latitude",
-        onKeyDown: m,
-        value: n?.latitude || "",
-        onChange: r,
+        onKeyDown: f,
+        value: e?.latitude || "",
+        onChange: a,
         readOnly: !0
       }
     )
   ] });
 }
-const c = t(s)`
+const b = o(s)`
   width: 100%;
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
@@ -40,13 +42,13 @@ const c = t(s)`
   opacity: 0.8;
   background-color: #f4f4f4;
   pointer-events: none;
-`, f = t.div`
+`, x = o.div`
   display: flex;
   flex-direction: column;
   gap: 6px;
   flex: 1;
 `;
 export {
-  w as default
+  D as default
 };
 //# sourceMappingURL=Latitude.js.map

package/dist/components/order-view/order-details/expanded-content/customer-section/location-info/Latitude.js.map

@@ -1 +1 @@
-{"version":3,"file":"Latitude.js","sources":["../../../../../../../src/components/order-view/order-details/expanded-content/customer-section/location-info/Latitude.tsx"],"sourcesContent":["import { Input, Label } from '@bjsdistribution/dms-component-library';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { useOrderDetails } from '../../../../store';\nimport { handleKeyDown } from '../../../../utils';\n\nfunction Latitude() {\n  const [orderDetails, setOrderDetails] = useOrderDetails();\n\n  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const val = e.target.value;\n    setOrderDetails(prev => ({\n      ...prev,\n      latitude: val,\n    }));\n  };\n\n  return (\n    <Container>\n      <Label label=\"Latitude\" htmlFor=\"lat\" />\n      <CustomInput\n        name=\"lat\"\n        type=\"number\"\n        placeholder=\"Latitude\"\n        onKeyDown={handleKeyDown}\n        value={orderDetails?.latitude || ''}\n        onChange={onChange}\n        readOnly\n      />\n    </Container>\n  );\n}\n\nconst CustomInput = styled(Input)`\n  width: 100%;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n  opacity: 0.8;\n  background-color: #f4f4f4;\n  pointer-events: none;\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n`;\n\nexport default Latitude;\n"],"names":["Latitude","orderDetails","setOrderDetails","useOrderDetails","onChange","e","val","prev","Container","jsx","Label","CustomInput","handleKeyDown","styled","Input"],"mappings":";;;;;AAMA,SAASA,IAAW;AAClB,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAA,GAElCC,IAAW,CAACC,MAA2C;AAC3D,UAAMC,IAAMD,EAAE,OAAO;AACrB,IAAAH,EAAgB,CAAAK,OAAS;AAAA,MACvB,GAAGA;AAAA,MACH,UAAUD;AAAA,IAAA,EACV;AAAA,EACJ;AAEA,2BACGE,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAM,OAAM,YAAW,SAAQ,OAAM;AAAA,IACtC,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,aAAY;AAAA,QACZ,WAAWC;AAAA,QACX,OAAOX,GAAc,YAAY;AAAA,QACjC,UAAAG;AAAA,QACA,UAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EACV,GACF;AAEJ;AAEA,MAAMO,IAAcE,EAAOC,CAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAe1BN,IAAYK,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"Latitude.js","sources":["../../../../../../../src/components/order-view/order-details/expanded-content/customer-section/location-info/Latitude.tsx"],"sourcesContent":["import { Input, Label } from '@bjsdistribution/dms-component-library';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { useOrderDetails } from '../../../../store';\nimport { handleKeyDown } from '../../../../utils';\n\nfunction Latitude() {\n  const [orderDetails, setOrderDetails] = useOrderDetails();\n  const orderRecipient = orderDetails?.order_recipient;\n\n  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const val = e.target.value;\n    const updatedOrderRecipient = {\n      ...(orderRecipient === null\n        ? { latitude: val }\n        : { ...orderRecipient, latitude: val }),\n    };\n    setOrderDetails(prev => ({\n      ...prev,\n      order_recipient: updatedOrderRecipient,\n    }));\n  };\n\n  return (\n    <Container>\n      <Label label=\"Latitude\" htmlFor=\"lat\" />\n      <CustomInput\n        name=\"lat\"\n        type=\"number\"\n        placeholder=\"Latitude\"\n        onKeyDown={handleKeyDown}\n        value={orderRecipient?.latitude || ''}\n        onChange={onChange}\n        readOnly\n      />\n    </Container>\n  );\n}\n\nconst CustomInput = styled(Input)`\n  width: 100%;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n  opacity: 0.8;\n  background-color: #f4f4f4;\n  pointer-events: none;\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n`;\n\nexport default Latitude;\n"],"names":["Latitude","orderDetails","setOrderDetails","useOrderDetails","orderRecipient","onChange","e","val","updatedOrderRecipient","prev","Container","jsx","Label","CustomInput","handleKeyDown","styled","Input"],"mappings":";;;;;AAMA,SAASA,IAAW;AAClB,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAA,GAClCC,IAAiBH,GAAc,iBAE/BI,IAAW,CAACC,MAA2C;AAC3D,UAAMC,IAAMD,EAAE,OAAO,OACfE,IAAwB;AAAA,MAC5B,GAAIJ,MAAmB,OACnB,EAAE,UAAUG,EAAA,IACZ,EAAE,GAAGH,GAAgB,UAAUG,EAAA;AAAA,IAAI;AAEzC,IAAAL,EAAgB,CAAAO,OAAS;AAAA,MACvB,GAAGA;AAAA,MACH,iBAAiBD;AAAA,IAAA,EACjB;AAAA,EACJ;AAEA,2BACGE,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAM,OAAM,YAAW,SAAQ,OAAM;AAAA,IACtC,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,aAAY;AAAA,QACZ,WAAWC;AAAA,QACX,OAAOV,GAAgB,YAAY;AAAA,QACnC,UAAAC;AAAA,QACA,UAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EACV,GACF;AAEJ;AAEA,MAAMQ,IAAcE,EAAOC,CAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAe1BN,IAAYK,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/components/order-view/order-details/expanded-content/customer-section/location-info/Longitude.js

@@ -1,33 +1,35 @@
-import { jsxs as u, jsx as e } from "react/jsx-runtime";
-import { Input as s, Label as d } from "@bjsdistribution/dms-component-library";
-import n from "styled-components";
-import { useOrderDetails as p } from "../../../../store.js";
-import { handleKeyDown as m } from "../../../../utils.js";
-function v() {
-  const [o, t] = p(), r = (i) => {
-    const l = i.target.value;
-    t((a) => ({
-      ...a,
-      longitude: l
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { Input as s, Label as c } from "@bjsdistribution/dms-component-library";
+import o from "styled-components";
+import { useOrderDetails as m } from "../../../../store.js";
+import { handleKeyDown as f } from "../../../../utils.js";
+function D() {
+  const [r, i] = m(), e = r?.order_recipient, l = (u) => {
+    const n = u.target.value, a = {
+      ...e === null ? { longitude: n } : { ...e, longitude: n }
+    };
+    i((d) => ({
+      ...d,
+      order_recipient: a
     }));
   };
-  return /* @__PURE__ */ u(f, { children: [
-    /* @__PURE__ */ e(d, { label: "Longitude", htmlFor: "long" }),
-    /* @__PURE__ */ e(
-      c,
+  return /* @__PURE__ */ p(b, { children: [
+    /* @__PURE__ */ t(c, { label: "Longitude", htmlFor: "long" }),
+    /* @__PURE__ */ t(
+      g,
       {
         name: "long",
         type: "number",
         placeholder: "Longitude",
-        onKeyDown: m,
-        value: o?.longitude || "",
-        onChange: r,
+        onKeyDown: f,
+        value: e?.longitude || "",
+        onChange: l,
         readOnly: !0
       }
     )
   ] });
 }
-const c = n(s)`
+const g = o(s)`
   width: 100%;
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
@@ -40,13 +42,13 @@ const c = n(s)`
   opacity: 0.8;
   background-color: #f4f4f4;
   pointer-events: none;
-`, f = n.div`
+`, b = o.div`
   display: flex;
   flex-direction: column;
   gap: 6px;
   flex: 1;
 `;
 export {
-  v as default
+  D as default
 };
 //# sourceMappingURL=Longitude.js.map

package/dist/components/order-view/order-details/expanded-content/customer-section/location-info/Longitude.js.map

@@ -1 +1 @@
-{"version":3,"file":"Longitude.js","sources":["../../../../../../../src/components/order-view/order-details/expanded-content/customer-section/location-info/Longitude.tsx"],"sourcesContent":["import { Input, Label } from '@bjsdistribution/dms-component-library';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { useOrderDetails } from '../../../../store';\nimport { handleKeyDown } from '../../../../utils';\n\nfunction Longitude() {\n  const [orderDetails, setOrderDetails] = useOrderDetails();\n\n  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const val = e.target.value;\n    setOrderDetails(prev => {\n      return {\n        ...prev,\n        longitude: val,\n      };\n    });\n  };\n  return (\n    <Container>\n      <Label label=\"Longitude\" htmlFor=\"long\" />\n      <CustomInput\n        name=\"long\"\n        type=\"number\"\n        placeholder=\"Longitude\"\n        onKeyDown={handleKeyDown}\n        value={orderDetails?.longitude || ''}\n        onChange={onChange}\n        readOnly\n      />\n    </Container>\n  );\n}\n\nconst CustomInput = styled(Input)`\n  width: 100%;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n  opacity: 0.8;\n  background-color: #f4f4f4;\n  pointer-events: none;\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n`;\n\nexport default Longitude;\n"],"names":["Longitude","orderDetails","setOrderDetails","useOrderDetails","onChange","e","val","prev","Container","jsx","Label","CustomInput","handleKeyDown","styled","Input"],"mappings":";;;;;AAMA,SAASA,IAAY;AACnB,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAA,GAElCC,IAAW,CAACC,MAA2C;AAC3D,UAAMC,IAAMD,EAAE,OAAO;AACrB,IAAAH,EAAgB,CAAAK,OACP;AAAA,MACL,GAAGA;AAAA,MACH,WAAWD;AAAA,IAAA,EAEd;AAAA,EACH;AACA,2BACGE,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAM,OAAM,aAAY,SAAQ,QAAO;AAAA,IACxC,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,aAAY;AAAA,QACZ,WAAWC;AAAA,QACX,OAAOX,GAAc,aAAa;AAAA,QAClC,UAAAG;AAAA,QACA,UAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EACV,GACF;AAEJ;AAEA,MAAMO,IAAcE,EAAOC,CAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAe1BN,IAAYK,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"Longitude.js","sources":["../../../../../../../src/components/order-view/order-details/expanded-content/customer-section/location-info/Longitude.tsx"],"sourcesContent":["import { Input, Label } from '@bjsdistribution/dms-component-library';\nimport React from 'react';\nimport styled from 'styled-components';\nimport { useOrderDetails } from '../../../../store';\nimport { handleKeyDown } from '../../../../utils';\n\nfunction Longitude() {\n  const [orderDetails, setOrderDetails] = useOrderDetails();\n  const orderRecipient = orderDetails?.order_recipient;\n\n  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const val = e.target.value;\n    const updatedOrderRecipient = {\n      ...(orderRecipient === null\n        ? { longitude: val }\n        : { ...orderRecipient, longitude: val }),\n    };\n    setOrderDetails(prev => {\n      return {\n        ...prev,\n        order_recipient: updatedOrderRecipient,\n      };\n    });\n  };\n  return (\n    <Container>\n      <Label label=\"Longitude\" htmlFor=\"long\" />\n      <CustomInput\n        name=\"long\"\n        type=\"number\"\n        placeholder=\"Longitude\"\n        onKeyDown={handleKeyDown}\n        value={orderRecipient?.longitude || ''}\n        onChange={onChange}\n        readOnly\n      />\n    </Container>\n  );\n}\n\nconst CustomInput = styled(Input)`\n  width: 100%;\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n  &:focus-visible {\n    outline: none;\n  }\n  opacity: 0.8;\n  background-color: #f4f4f4;\n  pointer-events: none;\n`;\n\nconst Container = styled.div`\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  flex: 1;\n`;\n\nexport default Longitude;\n"],"names":["Longitude","orderDetails","setOrderDetails","useOrderDetails","orderRecipient","onChange","e","val","updatedOrderRecipient","prev","Container","jsx","Label","CustomInput","handleKeyDown","styled","Input"],"mappings":";;;;;AAMA,SAASA,IAAY;AACnB,QAAM,CAACC,GAAcC,CAAe,IAAIC,EAAA,GAClCC,IAAiBH,GAAc,iBAE/BI,IAAW,CAACC,MAA2C;AAC3D,UAAMC,IAAMD,EAAE,OAAO,OACfE,IAAwB;AAAA,MAC5B,GAAIJ,MAAmB,OACnB,EAAE,WAAWG,EAAA,IACb,EAAE,GAAGH,GAAgB,WAAWG,EAAA;AAAA,IAAI;AAE1C,IAAAL,EAAgB,CAAAO,OACP;AAAA,MACL,GAAGA;AAAA,MACH,iBAAiBD;AAAA,IAAA,EAEpB;AAAA,EACH;AACA,2BACGE,GAAA,EACC,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAM,OAAM,aAAY,SAAQ,QAAO;AAAA,IACxC,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,aAAY;AAAA,QACZ,WAAWC;AAAA,QACX,OAAOV,GAAgB,aAAa;AAAA,QACpC,UAAAC;AAAA,QACA,UAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EACV,GACF;AAEJ;AAEA,MAAMQ,IAAcE,EAAOC,CAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAe1BN,IAAYK,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;"}