Merge pull request Sitecore#2 from erincdustin/OCP-905

src/components/promotions/detail/PromotionDetail.tsx

@@ -114,9 +114,10 @@ export function PromotionDetail({
 
   const {handleSubmit, control, reset} = useForm<PromotionDetailFormFields>({
     resolver: yupResolver(validationSchema) as any,
-    defaultValues: promotion?.ID
-      ? {Promotion: promotion, PromotionAssignments: promotionAssignments || []}
-      : defaultValues,
+    defaultValues:
+      promotion?.ID || router.query?.cloneid
+        ? {Promotion: promotion, PromotionAssignments: promotionAssignments || []}
+        : defaultValues,
     mode: "onBlur"
   })
 
@@ -171,7 +172,7 @@ export function PromotionDetail({
       router.replace(`/promotions/${updatedPromotion.ID}`)
     } else {
       const [finalPromotion, finalPromotionAssignments] = await Promise.all([
-        fetchPromotion(updatedPromotion.ID),
+        fetchPromotion(updatedPromotion.ID, false),
         fetchPromotionAssignments(updatedPromotion.ID)
       ])
       reset({
@@ -193,7 +194,16 @@ export function PromotionDetail({
               <ResetButton control={control} reset={reset} variant="outline">
                 Discard Changes
               </ResetButton>
-              <SubmitButton control={control} variant="solid" colorScheme="primary">
+              {!isCreatingNew && (
+                <Button
+                  variant="solid"
+                  colorScheme="primary"
+                  onClick={() => router.push(`/promotions/clone/${promotion.ID}`)}
+                >
+                  Clone
+                </Button>
+              )}
+              <SubmitButton control={control} variant="solid" colorScheme="secondary">
                 Save
               </SubmitButton>
             </ButtonGroup>

src/hooks/usePromoDetail.tsx

@@ -10,8 +10,13 @@ export function usePromotionDetail() {
   const [promotionAssignments, setPromotionAssignments] = useState([] as PromotionAssignment[])
   const [defaultOwnerId, setDefaultOwnerId] = useState("")
 
-  const fetchPromotion = useCallback(async (promotionID: string) => {
+  const fetchPromotion = useCallback(async (promotionID: string, isCloning: boolean) => {
     const promo = await Promotions.Get<IPromotion>(promotionID)
+    if (isCloning) {
+      promo.ID = null
+      promo.Name = null
+      promo.Code = null
+    }
     setPromotion(promo)
     return promo
   }, [])
@@ -32,15 +37,16 @@ export function usePromotionDetail() {
 
   const getData = useCallback(async () => {
     const promotionID = query.promotionid?.toString()
+    const cloneID = query.cloneid?.toString()
     const requests: any[] = []
-    if (promotionID) {
-      requests.push(fetchPromotion(promotionID))
-      requests.push(fetchPromotionAssignments(promotionID))
+    if (promotionID || cloneID) {
+      requests.push(fetchPromotion(promotionID || cloneID, !!cloneID))
+      requests.push(fetchPromotionAssignments(promotionID || cloneID))
     } else {
       requests.push(fetchDefaultOwnerId())
     }
     await Promise.all(requests)
-  }, [query.promotionid, fetchPromotion, fetchPromotionAssignments, fetchDefaultOwnerId])
+  }, [query.promotionid, query.cloneid, fetchPromotion, fetchPromotionAssignments, fetchDefaultOwnerId])
 
   useEffect(() => {
     const initializeData = async () => {

src/pages/promotions/clone/[cloneid].tsx

@@ -0,0 +1,25 @@
+import ProtectedContent from "components/auth/ProtectedContent"
+import {appPermissions} from "config/app-permissions.config"
+import {PromotionDetail} from "@/components/promotions/detail/PromotionDetail"
+import {usePromotionDetail} from "hooks/usePromoDetail"
+import {PromotionDetailSkeleton} from "@/components/promotions/detail/PromotionDetailSkeleton"
+
+const ClonePromotionDetailPage = () => {
+  const promotionDetailProps = usePromotionDetail()
+
+  if (promotionDetailProps.loading) {
+    return <PromotionDetailSkeleton />
+  }
+
+  return <PromotionDetail {...promotionDetailProps} />
+}
+
+const ProtectedClonePromotionDetailPage = () => {
+  return (
+    <ProtectedContent hasAccess={appPermissions.PromotionManager}>
+      <ClonePromotionDetailPage />
+    </ProtectedContent>
+  )
+}
+
+export default ProtectedClonePromotionDetailPage