From 9f24c112df42b87fb171c24607c56e4a804a44d7 Mon Sep 17 00:00:00 2001 From: Albert Folch Date: Mon, 11 Dec 2023 11:52:39 +0100 Subject: [PATCH 1/4] feat: allow jurisdictions to be removed and dragged --- src/components/product/ShippingInfo.tsx | 114 ++++++++++++++---------- 1 file changed, 69 insertions(+), 45 deletions(-) diff --git a/src/components/product/ShippingInfo.tsx b/src/components/product/ShippingInfo.tsx index f4d4448c2..d08f85f7c 100644 --- a/src/components/product/ShippingInfo.tsx +++ b/src/components/product/ShippingInfo.tsx @@ -1,7 +1,9 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ +import { arrayMoveImmutable } from "array-move"; import { FieldArray } from "formik"; -import { Plus } from "phosphor-react"; +import { Plus, X } from "phosphor-react"; import { useEffect, useMemo, useState } from "react"; +import SortableList, { SortableItem } from "react-easy-sort"; import styled from "styled-components"; import Collapse from "../../components/collapse/Collapse"; @@ -25,7 +27,8 @@ import { const FieldContainerJurisdictions = styled.div` display: grid; - grid-template-columns: minmax(150px, 1fr) 3fr; + grid-template-columns: minmax(150px, 1fr) 3fr min-content; + align-items: center; grid-gap: 1rem; margin-bottom: 1rem; `; @@ -68,60 +71,81 @@ const checkLastElementIsPristine = ( }; const AddSupportedJurisdictions = () => { - const { values } = useForm(); + const { values, setFieldValue } = useForm(); const jurisdictions = useMemo( () => values?.shippingInfo?.jurisdiction, [values?.shippingInfo?.jurisdiction] ); - + const onSortEnd = (oldIndex: number, newIndex: number) => { + if (!jurisdictions) { + return; + } + setFieldValue( + "shippingInfo.jurisdiction", + arrayMoveImmutable(jurisdictions, oldIndex, newIndex) + ); + }; return ( - { - const render = jurisdictions && jurisdictions.length > 0; + + { + const render = jurisdictions && jurisdictions.length > 0; - return ( - <> - {render && ( - <> - {jurisdictions.map((_, index) => ( - -
- -
-
- -
- - ))} - - )} - {!checkLastElementIsPristine(jurisdictions) && ( - - )} - - ); - }} - /> + return ( + <> + {render && ( + <> + {jurisdictions.map((_, index, array) => ( + + +
+ +
+
+ +
+ {array.length > 1 && ( + { + arrayHelpers.remove(index); + }} + /> + )} + + + ))} + + )} + {!checkLastElementIsPristine(jurisdictions) && ( + + )} + + ); + }} + /> + ); }; From 96a9cc8786d4c1d37396291a3013fbb1c2d3845c Mon Sep 17 00:00:00 2001 From: Albert Folch Date: Mon, 11 Dec 2023 12:28:10 +0100 Subject: [PATCH 2/4] fix: issues --- src/components/product/Preview.tsx | 10 +-- src/components/product/ShippingInfo.tsx | 63 +++++++++---------- .../product/utils/useInitialValues.ts | 7 ++- .../product/utils/validationSchema.ts | 16 ++++- .../create-product/CreateProductInner.tsx | 32 +++++----- 5 files changed, 70 insertions(+), 58 deletions(-) diff --git a/src/components/product/Preview.tsx b/src/components/product/Preview.tsx index bb5e94e76..a76a3ff7e 100644 --- a/src/components/product/Preview.tsx +++ b/src/components/product/Preview.tsx @@ -240,9 +240,9 @@ export default function Preview({ {(values.shippingInfo.returnPeriod || - (values?.shippingInfo?.jurisdiction?.length > 0 && - values?.shippingInfo?.jurisdiction[0]?.region?.length > - 0)) && ( + ((values?.shippingInfo?.jurisdiction?.length > 0 && + values?.shippingInfo?.jurisdiction[0]?.region?.length) ?? + 0 > 0)) && (
Shipping information @@ -251,7 +251,9 @@ export default function Preview({ v.time && v.region + ), ({ region, time }) => { return { name: region, diff --git a/src/components/product/ShippingInfo.tsx b/src/components/product/ShippingInfo.tsx index d08f85f7c..bba9a58cf 100644 --- a/src/components/product/ShippingInfo.tsx +++ b/src/components/product/ShippingInfo.tsx @@ -2,7 +2,7 @@ import { arrayMoveImmutable } from "array-move"; import { FieldArray } from "formik"; import { Plus, X } from "phosphor-react"; -import { useEffect, useMemo, useState } from "react"; +import { useMemo } from "react"; import SortableList, { SortableItem } from "react-easy-sort"; import styled from "styled-components"; @@ -28,7 +28,7 @@ import { const FieldContainerJurisdictions = styled.div` display: grid; grid-template-columns: minmax(150px, 1fr) 3fr min-content; - align-items: center; + align-items: start; grid-gap: 1rem; margin-bottom: 1rem; `; @@ -67,11 +67,11 @@ const checkLastElementIsPristine = ( elements: ShippingInfoType["shippingInfo"]["jurisdiction"] ): boolean => { const element = elements[elements.length - 1]; - return element?.region.length === 0 || element?.time.length === 0; + return element?.region?.length === 0 || element?.time?.length === 0; }; const AddSupportedJurisdictions = () => { - const { values, setFieldValue } = useForm(); + const { values, setFieldValue, setFieldTouched, handleBlur } = useForm(); const jurisdictions = useMemo( () => values?.shippingInfo?.jurisdiction, @@ -110,22 +110,38 @@ const AddSupportedJurisdictions = () => { { + handleBlur(e); + setFieldTouched( + `shippingInfo.jurisdiction[${index}].time`, + true + ); + }} />
{ + handleBlur(e); + setFieldTouched( + `shippingInfo.jurisdiction[${index}].region`, + true + ); + }} />
{array.length > 1 && ( - { - arrayHelpers.remove(index); - }} - /> +
+ { + arrayHelpers.remove(index); + }} + /> +
)} @@ -150,37 +166,14 @@ const AddSupportedJurisdictions = () => { ); }; -const validJurisdiction = ( - jurisdictionElements: ShippingInfoType["shippingInfo"]["jurisdiction"] -): boolean => { - const validation = jurisdictionElements.some(({ time, region }) => { - return ( - (region.length === 0 && time.length > 0) || - (time.length === 0 && region.length > 0) - ); - }); - return !validation; -}; - export default function ShippingInfo() { const { values, nextIsDisabled } = useForm(); - const [isValidJurisdiction, setIsValidJurisdiction] = useState(true); const unit = useMemo( () => (values?.shippingInfo?.measurementUnit?.value || "").toUpperCase(), [values?.shippingInfo?.measurementUnit?.value] ); - const jurisdictionElements = useMemo( - () => values?.shippingInfo?.jurisdiction, - [values?.shippingInfo?.jurisdiction] - ); - - useEffect(() => { - const isValid = validJurisdiction(jurisdictionElements); - setIsValidJurisdiction(isValid); - }, [jurisdictionElements]); - const lwh = useMemo( () => `${values?.shippingInfo?.length || 0}${ @@ -326,7 +319,7 @@ export default function ShippingInfo() { Next diff --git a/src/components/product/utils/useInitialValues.ts b/src/components/product/utils/useInitialValues.ts index 2b78eece9..2e27d571b 100644 --- a/src/components/product/utils/useInitialValues.ts +++ b/src/components/product/utils/useInitialValues.ts @@ -246,9 +246,10 @@ function loadExistingProduct( ? { voucherValidDurationInDays: Number(firstOffer.voucherValidDuration) / 86400, - redemptionPeriod: dayjs( - getDateTimestamp(firstOffer.voucherRedeemableFromDate) - ), + redemptionPeriod: + firstOffer.voucherRedeemableFromDate === "0" + ? undefined + : dayjs(getDateTimestamp(firstOffer.voucherRedeemableFromDate)), offerValidityPeriod: dayjs(getDateTimestamp(firstOffer.validFromDate)) } : { diff --git a/src/components/product/utils/validationSchema.ts b/src/components/product/utils/validationSchema.ts index aeab7a08e..0ff7ce61c 100644 --- a/src/components/product/utils/validationSchema.ts +++ b/src/components/product/utils/validationSchema.ts @@ -537,8 +537,20 @@ export const shippingInfoValidationSchema = Yup.object({ // }).default([{ value: "", label: "" }]), jurisdiction: Yup.array( Yup.object({ - region: Yup.string().required(validationMessage.required), - time: Yup.string().required(validationMessage.required) + region: Yup.string().test({ + message: "Region is required if time is defined", + test: function (value, context) { + const { time } = context.parent; + return !(!value && time); + } + }), + time: Yup.string().test({ + message: "Time is required if region is defined", + test: function (value, context) { + const { region } = context.parent; + return !(!value && region); + } + }) }) ).default([{ region: "", time: "" }]), returnPeriod: Yup.string() diff --git a/src/pages/create-product/CreateProductInner.tsx b/src/pages/create-product/CreateProductInner.tsx index 598059c95..20ec4f59f 100644 --- a/src/pages/create-product/CreateProductInner.tsx +++ b/src/pages/create-product/CreateProductInner.tsx @@ -626,19 +626,22 @@ function CreateProductInner({ }); const supportedJurisdictions: Array = - shippingInfo.jurisdiction.reduce((prev, { region, time }) => { - if (region.length === 0 || time.length === 0) { - return prev; - } else { - return [ - ...prev, - { - label: region, - deliveryTime: time - } - ]; - } - }, [] as Array); + shippingInfo.jurisdiction + .filter((v) => v.time && v.region) + .reduce((prev, current) => { + const { region, time } = current; + if (!region || region.length === 0 || !time || time.length === 0) { + return prev; + } else { + return [ + ...prev, + { + label: region, + deliveryTime: time + } + ]; + } + }, [] as Array); // filter empty attributes const additionalAttributes = productAttributes.filter((attribute) => { @@ -1036,7 +1039,8 @@ function CreateProductInner({ tokenType?.value === TOKEN_TYPES[0].value ) { try { - const { decimals } = await coreSDK.getExchangeTokenInfo(tokenContract); + const result = await coreSDK.getExchangeTokenInfo(tokenContract); + const { decimals } = result ?? {}; setDecimals(decimals); } catch (error) { setDecimals(undefined); From b1f27c17266d12628b994bd0117af257e957e8c2 Mon Sep 17 00:00:00 2001 From: albertfolch-redeemeum <102516373+albertfolch-redeemeum@users.noreply.github.com> Date: Mon, 11 Dec 2023 15:13:14 +0100 Subject: [PATCH 3/4] Update src/components/product/Preview.tsx Co-authored-by: Ludovic Levalleux --- src/components/product/Preview.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/product/Preview.tsx b/src/components/product/Preview.tsx index a76a3ff7e..e96030bda 100644 --- a/src/components/product/Preview.tsx +++ b/src/components/product/Preview.tsx @@ -241,8 +241,7 @@ export default function Preview({ {(values.shippingInfo.returnPeriod || ((values?.shippingInfo?.jurisdiction?.length > 0 && - values?.shippingInfo?.jurisdiction[0]?.region?.length) ?? - 0 > 0)) && ( + values?.shippingInfo?.jurisdiction[0]?.region?.length >0))) && (
Shipping information From b525d07fd1f9b39c5bfcce723bb7ea481b918f02 Mon Sep 17 00:00:00 2001 From: Albert Folch Date: Mon, 11 Dec 2023 15:15:54 +0100 Subject: [PATCH 4/4] fix issue --- src/components/product/Preview.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/product/Preview.tsx b/src/components/product/Preview.tsx index e96030bda..6ebc94763 100644 --- a/src/components/product/Preview.tsx +++ b/src/components/product/Preview.tsx @@ -240,8 +240,9 @@ export default function Preview({ {(values.shippingInfo.returnPeriod || - ((values?.shippingInfo?.jurisdiction?.length > 0 && - values?.shippingInfo?.jurisdiction[0]?.region?.length >0))) && ( + (values?.shippingInfo?.jurisdiction?.length > 0 && + (values?.shippingInfo?.jurisdiction[0]?.region?.length ?? 0) > + 0)) && (
Shipping information