[CST-5270] Insertion of submission section with mock & section layout

src/app/core/submission/models/sherpa-policies-details.model.ts

@@ -0,0 +1,60 @@
+/**
+ * An interface to represent an access condition.
+ */
+export class SherpaPoliciesDetailsObject {
+
+  /**
+   * The sherpa policies uri
+   */
+  uri: string;
+
+  /**
+   * The sherpa policies details
+   */
+  journals: Journals;
+}
+
+
+export interface Journals {
+  titles: string[];
+  url: string;
+  issns: string[];
+  romeoPub: string;
+  zetoPub: string;
+  inDOAJ: boolean;
+  publisher: Publisher;
+  policies: Policies;
+  urls: string[];
+  openAccessProhibited: boolean;
+}
+
+export interface Publisher {
+  name: string;
+  relationshipType: string;
+  country: string;
+  uri: string;
+  identifier: string;
+  paidAccessDescription: string;
+  paidAccessUrl: string;
+}
+
+export interface Policies {
+  openAccessPermitted: boolean;
+  uri: string;
+  internalMoniker: string;
+  permittedVersions: PermittedVersions;
+}
+
+export interface PermittedVersions {
+  articleVersion: string;
+  conditions: string[];
+  prerequisites: string[];
+  locations: string[];
+  licenses: string[];
+  embargo: Embargo;
+}
+
+export interface Embargo {
+  units: any;
+  amount: any;
+}

src/app/core/submission/models/workspaceitem-section-sherpa-policies.model.ts

@@ -0,0 +1,22 @@
+import { SherpaPoliciesDetailsObject } from './sherpa-policies-details.model';
+
+/**
+ * An interface to represent the submission's item accesses condition.
+ */
+export interface WorkspaceitemSectionSherpaPoliciesObject {
+
+  /**
+   * The access condition id
+   */
+  id: string;
+
+  /**
+   * The sherpa policies retrievalTime
+   */
+  retrievalTime: string;
+
+  /**
+   * The sherpa policies details
+   */
+  details: SherpaPoliciesDetailsObject;
+}

src/app/core/submission/models/workspaceitem-sections.model.ts

@@ -3,6 +3,7 @@ import { WorkspaceitemSectionFormObject } from './workspaceitem-section-form.mod
 import { WorkspaceitemSectionLicenseObject } from './workspaceitem-section-license.model';
 import { WorkspaceitemSectionUploadObject } from './workspaceitem-section-upload.model';
 import { WorkspaceitemSectionCcLicenseObject } from './workspaceitem-section-cc-license.model';
+import { WorkspaceitemSectionSherpaPoliciesObject } from './workspaceitem-section-sherpa-policies.model';
 
 /**
  * An interface to represent submission's section object.
@@ -21,4 +22,5 @@ export type WorkspaceitemSectionDataType
   | WorkspaceitemSectionLicenseObject
   | WorkspaceitemSectionCcLicenseObject
   | WorkspaceitemSectionAccessesObject
+  | WorkspaceitemSectionSherpaPoliciesObject
   | string;

src/app/submission/objects/submission-objects.effects.ts

@@ -1,3 +1,4 @@
+import { WorkspaceitemSectionSherpaPoliciesObject } from './../../core/submission/models/workspaceitem-section-sherpa-policies.model';
 import { Injectable } from '@angular/core';
 import { Actions, Effect, ofType } from '@ngrx/effects';
 import { Store } from '@ngrx/store';
@@ -51,6 +52,7 @@ import { SubmissionObjectDataService } from '../../core/submission/submission-ob
 import { followLink } from '../../shared/utils/follow-link-config.model';
 import parseSectionErrorPaths, { SectionErrorPath } from '../utils/parseSectionErrorPaths';
 import { FormState } from '../../shared/form/form.reducer';
+import { SUBMISSION_SECTION_TYPE } from 'src/app/core/config/models/config-type';
 
 @Injectable()
 export class SubmissionObjectEffects {
@@ -63,7 +65,7 @@ export class SubmissionObjectEffects {
     map((action: InitSubmissionFormAction) => {
       const definition = action.payload.submissionDefinition;
       const mappedActions = [];
-      definition.sections.page.forEach((sectionDefinition: any) => {
+      definition.sections.page.forEach((sectionDefinition: any, index) => {
         const selfLink = sectionDefinition._links.self.href || sectionDefinition._links.self;
         const sectionId = selfLink.substr(selfLink.lastIndexOf('/') + 1);
         const config = sectionDefinition._links.config ? (sectionDefinition._links.config.href || sectionDefinition._links.config) : '';
@@ -75,6 +77,7 @@ export class SubmissionObjectEffects {
           sectionData = action.payload.item.metadata;
         }
         const sectionErrors = isNotEmpty(action.payload.errors) ? (action.payload.errors[sectionId] || null) : null;
+
         mappedActions.push(
           new InitSectionAction(
             action.payload.submissionId,
@@ -89,7 +92,87 @@ export class SubmissionObjectEffects {
             sectionErrors
           )
         );
+
+        if (index === definition.sections.page.length - 1) {
+          mappedActions.push(
+            new InitSectionAction(
+              action.payload.submissionId,
+              'sherpaPolicies',
+              'submit.progressbar.sherpaPolicies',
+              'submit.progressbar.sherpaPolicies',
+              true,
+              SectionsType.SherpaPolicies,
+              { main: null, other: 'READONLY' },
+              true,
+              {
+                'id': 'sherpaPolicies',
+                'retrievalTime': '2022-01-11T09:43:53Z',
+                'details': {
+                  'uri': 'https://www.nature.com/natsynth/',
+                  'journals': {
+                    'titles': [
+                      'Nature Synthesis'
+                    ],
+                    'url': 'http://europepmc.org/',
+                    'issns': [
+                      '2731-0582',
+                      '2731-0583',
+                      '2731-0584',
+                    ],
+                    'romeoPub': 'Self archiving and license to publish',
+                    'zetoPub': 'Self archiving and license to publish',
+                    'inDOAJ': true,
+                    'publisher': {
+                      'name': 'Europe PMC',
+                      'relationshipType': 'Stest',
+                      'country': 'gb',
+                      'uri': 'https://v2.sherpa.ac.uk/id/publication/40863',
+                      'identifier': '123123123',
+                      'paidAccessDescription': 'test test sss',
+                      'paidAccessUrl': 'https://www.nature.com/nature-portfolio/editorial-policies/preprints-and-conference-proceedings'
+                    },
+                    'policies': {
+                      'openAccessPermitted': true,
+                      'uri': 'https://v2.sherpa.ac.uk/id/publisher_policy/3286',
+                      'internalMoniker': 'Default Policy',
+                      'permittedVersions': {
+                        'articleVersion': 'submitted',
+                        'conditions': [
+                          'Must link to publisher version',
+                          'Published source must be acknowledged and DOI cited',
+                          'Post-prints are subject to Springer Nature re-use terms',
+                          'Non-commercial use only'
+                        ],
+                        'prerequisites': [],
+                        'locations': [
+                          'authors_homepage',
+                          'funder_designated_location',
+                          'institutional_repository',
+                          'preprint_repository'
+                        ],
+                        'licenses': [],
+                        'embargo': {
+                          'units': 'months',
+                          'amount': 6
+                        }
+                      }
+                    },
+                    'urls': [
+                      'https://www.nature.com/neuro/editorial-policies/self-archiving-and-license-to-publish',
+                      'https://www.nature.com/nature-portfolio/editorial-policies/preprints-and-conference-proceedings',
+                      'https://www.springernature.com/gp/open-research/policies/accepted-manuscript-terms'
+                    ],
+                    'openAccessProhibited': true
+                  }
+                }
+              } as WorkspaceitemSectionSherpaPoliciesObject,
+              null
+            )
+          );
+        }
+
       });
+      console.log(mappedActions);
       return { action: action, definition: definition, mappedActions: mappedActions };
     }),
     mergeMap((result) => {
@@ -125,8 +208,8 @@ export class SubmissionObjectEffects {
         this.submissionService.getSubmissionObjectLinkName(),
         action.payload.submissionId,
         'sections').pipe(
-        map((response: SubmissionObject[]) => new SaveSubmissionFormSuccessAction(action.payload.submissionId, response, action.payload.isManual)),
+          map((response: SubmissionObject[]) => new SaveSubmissionFormSuccessAction(action.payload.submissionId, response, action.payload.isManual)),
-        catchError(() => observableOf(new SaveSubmissionFormErrorAction(action.payload.submissionId))));
+          catchError(() => observableOf(new SaveSubmissionFormErrorAction(action.payload.submissionId))));
     }));
 
   /**
@@ -139,8 +222,8 @@ export class SubmissionObjectEffects {
         this.submissionService.getSubmissionObjectLinkName(),
         action.payload.submissionId,
         'sections').pipe(
-        map((response: SubmissionObject[]) => new SaveForLaterSubmissionFormSuccessAction(action.payload.submissionId, response)),
+          map((response: SubmissionObject[]) => new SaveForLaterSubmissionFormSuccessAction(action.payload.submissionId, response)),
-        catchError(() => observableOf(new SaveSubmissionFormErrorAction(action.payload.submissionId))));
+          catchError(() => observableOf(new SaveSubmissionFormErrorAction(action.payload.submissionId))));
     }));
 
   /**
@@ -179,8 +262,8 @@ export class SubmissionObjectEffects {
         action.payload.submissionId,
         'sections',
         action.payload.sectionId).pipe(
-        map((response: SubmissionObject[]) => new SaveSubmissionSectionFormSuccessAction(action.payload.submissionId, response)),
+          map((response: SubmissionObject[]) => new SaveSubmissionSectionFormSuccessAction(action.payload.submissionId, response)),
-        catchError(() => observableOf(new SaveSubmissionSectionFormErrorAction(action.payload.submissionId))));
+          catchError(() => observableOf(new SaveSubmissionSectionFormErrorAction(action.payload.submissionId))));
     }));
 
   /**
@@ -317,13 +400,13 @@ export class SubmissionObjectEffects {
     tap(() => this.notificationsService.error(null, this.translate.get('submission.sections.general.discard_error_notice'))));
 
   constructor(private actions$: Actions,
-              private notificationsService: NotificationsService,
+    private notificationsService: NotificationsService,
-              private operationsService: SubmissionJsonPatchOperationsService,
+    private operationsService: SubmissionJsonPatchOperationsService,
-              private sectionService: SectionsService,
+    private sectionService: SectionsService,
-              private store$: Store<any>,
+    private store$: Store<any>,
-              private submissionService: SubmissionService,
+    private submissionService: SubmissionService,
-              private submissionObjectService: SubmissionObjectDataService,
+    private submissionObjectService: SubmissionObjectDataService,
-              private translate: TranslateService) {
+    private translate: TranslateService) {
   }
 
   /**

src/app/submission/sections/sections-type.ts

@@ -6,4 +6,5 @@ export enum SectionsType {
   CcLicense = 'cclicense',
   collection = 'collection',
   AccessesCondition = 'accessCondition',
+  SherpaPolicies = 'sherpaPolicies',
 }

src/app/submission/sections/sherpa-policies/content-accordion/content-accordion.component.html

@@ -0,0 +1,30 @@
+<ngb-accordion #acc="ngbAccordion" activeIds="publication-information">
+    <ngb-panel id="publication-information">
+        <ng-template ngbPanelTitle>
+            <span class="float-left section-title" tabindex="0">Publication information</span>
+            <div class="d-inline-block float-right">
+                <span *ngIf="!acc.isExpanded('publication-information')" class="fas fa-plus"></span>
+                <span *ngIf="acc.isExpanded('publication-information')" class="fas fa-minus"></span>
+            </div>
+        </ng-template>
+        <ng-template ngbPanelContent>
+            <div class="ml-4">
+                <div class="row">
+                    <div class="col-4">
+                        <p class="m-0">Title</p>
+                    </div>
+                    <div class="col-4">
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-4">
+                        <p class="m-0">ISSNs</p>
+                    </div>
+                    <div class="col-4">
+                    </div>
+                </div>
+            </div>
+
+        </ng-template>
+    </ngb-panel>
+</ngb-accordion>

src/app/submission/sections/sherpa-policies/content-accordion/content-accordion.component.scss

@@ -0,0 +1,33 @@
+:host ::ng-deep {
+    .card {
+        border: none;
+        margin-bottom: 20px;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+
+        .card-header {
+            border: none;
+            background-color: transparent;
+            border-top: 1px solid rgba(0, 0, 0, 0.125);
+
+            button {
+                text-align: left;
+                padding: 0px;
+                width: 100%;
+                color: #000;
+                font-weight: normal;
+
+                .fas {
+                    background: #fff;
+                    color: #000;
+                    margin-right: 10px;
+                    height: 1.25em;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 12px;
+                }
+            }
+        }
+    }
+
+}

src/app/submission/sections/sherpa-policies/content-accordion/content-accordion.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContentAccordionComponent } from './content-accordion.component';
+
+describe('ContentAccordionComponent', () => {
+  let component: ContentAccordionComponent;
+  let fixture: ComponentFixture<ContentAccordionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ContentAccordionComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContentAccordionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/submission/sections/sherpa-policies/content-accordion/content-accordion.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ds-content-accordion',
+  templateUrl: './content-accordion.component.html',
+  styleUrls: ['./content-accordion.component.scss']
+})
+export class ContentAccordionComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/submission/sections/sherpa-policies/section-sherpa-policies.component.html

@@ -0,0 +1,45 @@
+<ngb-accordion #acc="ngbAccordion" activeIds="publication-information">
+    <ngb-panel id="publication-information">
+        <ng-template ngbPanelTitle>
+            <div class="d-inline-block float-left">
+                <span *ngIf="!acc.isExpanded('publication-information')" class="fas fa-chevron-up fa-fw"></span>
+                <span *ngIf="acc.isExpanded('publication-information')" class="fas fa-chevron-down fa-fw"></span>
+            </div>
+            <span class="float-left section-title" tabindex="0">Publication information</span>
+        </ng-template>
+        <ng-template ngbPanelContent>
+            <div class="ml-4">
+                <div class="row">
+                    <div class="col-4">
+                        <p class="m-0">Title</p>
+                    </div>
+                    <div class="col-4">
+                        <p class="m-0" *ngFor="let title of sherpaPoliciesData.details.journals.titles">{{title}}</p>
+                    </div>
+                </div>
+                <div class="row">
+                    <div class="col-4">
+                        <p class="m-0">ISSNs</p>
+                    </div>
+                    <div class="col-4">
+                        <p class="m-0" *ngFor="let issn of sherpaPoliciesData.details.journals.issns">{{issn}}</p>
+                    </div>
+                </div>
+            </div>
+
+        </ng-template>
+    </ngb-panel>
+    <ngb-panel id="publisher-policy">
+        <ng-template ngbPanelTitle>
+            <div class="d-inline-block float-left">
+                <span *ngIf="!acc.isExpanded('publisher-policy')" class="fas fa-chevron-up fa-fw"></span>
+                <span *ngIf="acc.isExpanded('publisher-policy')" class="fas fa-chevron-down fa-fw"></span>
+            </div>
+            <span class="float-left section-title" tabindex="0">Publisher Policy</span>
+        </ng-template>
+        <ng-template ngbPanelContent>
+            <ds-content-accordion></ds-content-accordion>
+            <ds-content-accordion></ds-content-accordion>
+        </ng-template>
+    </ngb-panel>
+</ngb-accordion>

src/app/submission/sections/sherpa-policies/section-sherpa-policies.component.scss

@@ -0,0 +1,31 @@
+:host ::ng-deep {
+    .card {
+        border: none;
+        margin-bottom: 20px;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.125);
+
+        .card-header {
+            border: none;
+            background-color: transparent;
+            border-top: 1px solid rgba(0, 0, 0, 0.125);
+
+            button {
+                text-align: left;
+                padding: 0px;
+                width: auto;
+                font-weight: bold;
+
+                .fas {
+                    background: #207698;
+                    color: #fff;
+                    margin-right: 10px;
+                    height: 1.25em;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+            }
+        }
+    }
+
+}

src/app/submission/sections/sherpa-policies/section-sherpa-policies.component.spec.ts

@@ -0,0 +1,204 @@
+import { FormService } from '../../../shared/form/form.service';
+import { ComponentFixture, inject, TestBed } from '@angular/core/testing';
+
+import { SubmissionSectionAccessesComponent } from './section-accesses.component';
+import { SectionsService } from '../sections.service';
+import { SectionsServiceStub } from '../../../shared/testing/sections-service.stub';
+
+import { FormBuilderService } from '../../../shared/form/builder/form-builder.service';
+import { getMockFormBuilderService } from '../../../shared/mocks/form-builder-service.mock';
+import { SubmissionAccessesConfigService } from '../../../core/config/submission-accesses-config.service';
+import {
+  getSubmissionAccessesConfigNotChangeDiscoverableService,
+  getSubmissionAccessesConfigService
+} from '../../../shared/mocks/section-accesses-config.service.mock';
+import { SectionAccessesService } from './section-accesses.service';
+import { SectionFormOperationsService } from '../form/section-form-operations.service';
+import { JsonPatchOperationsBuilder } from '../../../core/json-patch/builder/json-patch-operations-builder';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { SubmissionJsonPatchOperationsService } from '../../../core/submission/submission-json-patch-operations.service';
+import { getSectionAccessesService } from '../../../shared/mocks/section-accesses.service.mock';
+import { getMockFormOperationsService } from '../../../shared/mocks/form-operations-service.mock';
+import { getMockTranslateService } from '../../../shared/mocks/translate.service.mock';
+import { SubmissionJsonPatchOperationsServiceStub } from '../../../shared/testing/submission-json-patch-operations-service.stub';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { of as observableOf } from 'rxjs';
+import { Store } from '@ngrx/store';
+import { FormComponent } from '../../../shared/form/form.component';
+import {
+  DynamicCheckboxModel,
+  DynamicDatePickerModel,
+  DynamicFormArrayModel,
+  DynamicSelectModel
+} from '@ng-dynamic-forms/core';
+import { AppState } from '../../../app.reducer';
+import { getMockFormService } from '../../../shared/mocks/form-service.mock';
+import { mockAccessesFormData } from '../../../shared/mocks/submission.mock';
+import { accessConditionChangeEvent, checkboxChangeEvent } from '../../../shared/testing/form-event.stub';
+
+describe('SubmissionSectionAccessesComponent', () => {
+  let component: SubmissionSectionAccessesComponent;
+  let fixture: ComponentFixture<SubmissionSectionAccessesComponent>;
+
+  const sectionsServiceStub = new SectionsServiceStub();
+  // const pathCombiner = new JsonPatchOperationPathCombiner('sections', sectionId, 'files', fileIndex);
+
+  const builderService: FormBuilderService = getMockFormBuilderService();
+  const submissionAccessesConfigService = getSubmissionAccessesConfigService();
+  const sectionAccessesService = getSectionAccessesService();
+  const sectionFormOperationsService = getMockFormOperationsService();
+  const operationsBuilder = jasmine.createSpyObj('operationsBuilder', {
+    add: undefined,
+    remove: undefined,
+    replace: undefined,
+  });
+
+  let formService: any;
+
+  const storeStub = jasmine.createSpyObj('store', ['dispatch']);
+
+  const sectionData = {
+    header: 'submit.progressbar.accessCondition',
+    config: 'http://localhost:8080/server/api/config/submissionaccessoptions/AccessConditionDefaultConfiguration',
+    mandatory: true,
+    sectionType: 'accessCondition',
+    collapsed: false,
+    enabled: true,
+    data: {
+      discoverable: true,
+      accessConditions: []
+    },
+    errorsToShow: [],
+    serverValidationErrors: [],
+    isLoading: false,
+    isValid: true
+  };
+
+  describe('First with canChangeDiscoverable true', () => {
+
+    beforeEach(async () => {
+      await TestBed.configureTestingModule({
+        imports: [
+          BrowserModule,
+          TranslateModule.forRoot()
+        ],
+        declarations: [SubmissionSectionAccessesComponent, FormComponent],
+        providers: [
+          { provide: SectionsService, useValue: sectionsServiceStub },
+          { provide: FormBuilderService, useValue: builderService },
+          { provide: SubmissionAccessesConfigService, useValue: submissionAccessesConfigService },
+          { provide: SectionAccessesService, useValue: sectionAccessesService },
+          { provide: SectionFormOperationsService, useValue: sectionFormOperationsService },
+          { provide: JsonPatchOperationsBuilder, useValue: operationsBuilder },
+          { provide: TranslateService, useValue: getMockTranslateService() },
+          { provide: FormService, useValue: getMockFormService() },
+          { provide: Store, useValue: storeStub },
+          { provide: SubmissionJsonPatchOperationsService, useValue: SubmissionJsonPatchOperationsServiceStub },
+          { provide: 'sectionDataProvider', useValue: sectionData },
+          { provide: 'submissionIdProvider', useValue: '1508' },
+        ]
+      })
+        .compileComponents();
+    });
+
+    beforeEach(inject([Store], (store: Store<AppState>) => {
+      fixture = TestBed.createComponent(SubmissionSectionAccessesComponent);
+      component = fixture.componentInstance;
+      formService = TestBed.inject(FormService);
+      formService.validateAllFormFields.and.callFake(() => null);
+      formService.isValid.and.returnValue(observableOf(true));
+      formService.getFormData.and.returnValue(observableOf(mockAccessesFormData));
+      fixture.detectChanges();
+    }));
+
+
+    it('should create', () => {
+      expect(component).toBeTruthy();
+    });
+
+    it('should have created formModel', () => {
+      expect(component.formModel).toBeTruthy();
+    });
+
+    it('should have formModel length should be 2', () => {
+      expect(component.formModel.length).toEqual(2);
+    });
+
+    it('formModel should have 1 model type checkbox and 1 model type array', () => {
+      expect(component.formModel[0] instanceof DynamicCheckboxModel).toBeTrue();
+      expect(component.formModel[1] instanceof DynamicFormArrayModel).toBeTrue();
+    });
+
+    it('formModel type array should have formgroup with 1 input and 2 datepickers', () => {
+      const formModel: any = component.formModel[1];
+      const formGroup = formModel.groupFactory()[0].group;
+      expect(formGroup[0] instanceof DynamicSelectModel).toBeTrue();
+      expect(formGroup[1] instanceof DynamicDatePickerModel).toBeTrue();
+      expect(formGroup[2] instanceof DynamicDatePickerModel).toBeTrue();
+    });
+
+    it('when checkbox changed it should call operationsBuilder replace function', () => {
+      component.onChange(checkboxChangeEvent);
+      fixture.detectChanges();
+
+      expect(operationsBuilder.replace).toHaveBeenCalled();
+    });
+
+    it('when dropdown select changed it should call operationsBuilder add function', () => {
+      component.onChange(accessConditionChangeEvent);
+      fixture.detectChanges();
+      expect(operationsBuilder.add).toHaveBeenCalled();
+    });
+  });
+
+  describe('when canDescoverable is false', () => {
+
+
+
+    beforeEach(async () => {
+      await TestBed.configureTestingModule({
+        imports: [
+          BrowserModule,
+          TranslateModule.forRoot()
+        ],
+        declarations: [SubmissionSectionAccessesComponent, FormComponent],
+        providers: [
+          { provide: SectionsService, useValue: sectionsServiceStub },
+          { provide: FormBuilderService, useValue: builderService },
+          { provide: SubmissionAccessesConfigService, useValue: getSubmissionAccessesConfigNotChangeDiscoverableService() },
+          { provide: SectionAccessesService, useValue: sectionAccessesService },
+          { provide: SectionFormOperationsService, useValue: sectionFormOperationsService },
+          { provide: JsonPatchOperationsBuilder, useValue: operationsBuilder },
+          { provide: TranslateService, useValue: getMockTranslateService() },
+          { provide: FormService, useValue: getMockFormService() },
+          { provide: Store, useValue: storeStub },
+          { provide: SubmissionJsonPatchOperationsService, useValue: SubmissionJsonPatchOperationsServiceStub },
+          { provide: 'sectionDataProvider', useValue: sectionData },
+          { provide: 'submissionIdProvider', useValue: '1508' },
+        ]
+      })
+        .compileComponents();
+    });
+
+    beforeEach(inject([Store], (store: Store<AppState>) => {
+      fixture = TestBed.createComponent(SubmissionSectionAccessesComponent);
+      component = fixture.componentInstance;
+      formService = TestBed.inject(FormService);
+      formService.validateAllFormFields.and.callFake(() => null);
+      formService.isValid.and.returnValue(observableOf(true));
+      formService.getFormData.and.returnValue(observableOf(mockAccessesFormData));
+      fixture.detectChanges();
+    }));
+
+
+    it('should have formModel length should be 1', () => {
+      expect(component.formModel.length).toEqual(1);
+    });
+
+    it('formModel should have only 1 model type array', () => {
+      expect(component.formModel[0] instanceof DynamicFormArrayModel).toBeTrue();
+    });
+
+  });
+});

src/app/submission/sections/sherpa-policies/section-sherpa-policies.component.ts

@@ -0,0 +1,79 @@
+import { WorkspaceitemSectionSherpaPoliciesObject } from './../../../core/submission/models/workspaceitem-section-sherpa-policies.model';
+import { SectionSherpaPoliciesService } from './section-sherpa-policies.service';
+import { Component, Inject, ViewChild } from '@angular/core';
+import { FormControl } from '@angular/forms';
+
+import { filter, map, mergeMap, take } from 'rxjs/operators';
+import { combineLatest, Observable, of, Subscription } from 'rxjs';
+import { TranslateService } from '@ngx-translate/core';
+
+import { renderSectionFor } from '../sections-decorator';
+import { SectionsType } from '../sections-type';
+import { SectionDataObject } from '../models/section-data.model';
+import { SectionsService } from '../sections.service';
+import { SectionModelComponent } from '../models/section.model';
+import { NgbAccordionConfig } from '@ng-bootstrap/ng-bootstrap';
+
+/**
+ * This component represents a section for managing item's access conditions.
+ */
+@Component({
+  selector: 'ds-section-sherpa-policies',
+  templateUrl: './section-sherpa-policies.component.html',
+  styleUrls: ['./section-sherpa-policies.component.scss']
+})
+@renderSectionFor(SectionsType.SherpaPolicies)
+export class SubmissionSectionSherpaPoliciesComponent extends SectionModelComponent {
+
+  /**
+   * The accesses section data
+   * @type {WorkspaceitemSectionAccessesObject}
+   */
+  public sherpaPoliciesData: WorkspaceitemSectionSherpaPoliciesObject;
+
+
+  /**
+   * Initialize instance variables
+   *
+   * @param {SectionsService} sectionService
+   * @param {SectionDataObject} injectedSectionData
+   * @param {SectionSherpaPoliciesService} sectionSherpaPoliciesService
+   * @param {string} injectedSubmissionId
+   */
+  constructor(
+    protected sectionService: SectionsService,
+    private sectionSherpaPoliciesService: SectionSherpaPoliciesService,
+    @Inject('sectionDataProvider') public injectedSectionData: SectionDataObject,
+    @Inject('submissionIdProvider') public injectedSubmissionId: string) {
+    super(undefined, injectedSectionData, injectedSubmissionId);
+  }
+
+  /**
+   * Unsubscribe from all subscriptions
+   */
+  // tslint:disable-next-line:no-empty
+  onSectionDestroy() {
+
+  }
+
+  /**
+   * Initialize all instance variables and retrieve collection default access conditions
+   */
+  protected onSectionInit(): void {
+    this.sectionSherpaPoliciesService.getSherpaPoliciesData(this.submissionId, this.sectionData.id).subscribe((sherpaPolicies: WorkspaceitemSectionSherpaPoliciesObject) => {
+      console.log(sherpaPolicies);
+      this.sherpaPoliciesData = sherpaPolicies;
+    });
+  }
+
+  /**
+   * Get section status
+   *
+   * @return Observable<boolean>
+   *     the section status
+   */
+  protected getSectionStatus(): Observable<boolean> {
+    return of(true);
+  }
+
+}

src/app/submission/sections/sherpa-policies/section-sherpa-policies.service.ts

@@ -0,0 +1,42 @@
+import { WorkspaceitemSectionSherpaPoliciesObject } from './../../../core/submission/models/workspaceitem-section-sherpa-policies.model';
+import { Injectable } from '@angular/core';
+
+import { Observable } from 'rxjs';
+import { distinctUntilChanged, filter } from 'rxjs/operators';
+import { Store } from '@ngrx/store';
+
+import { SubmissionState } from '../../submission.reducers';
+import { isNotUndefined } from '../../../shared/empty.util';
+import { submissionSectionDataFromIdSelector } from '../../selectors';
+
+/**
+ * A service that provides methods to handle submission item's accesses condition state.
+ */
+@Injectable()
+export class SectionSherpaPoliciesService {
+
+  /**
+   * Initialize service variables
+   *
+   * @param {Store<SubmissionState>} store
+   */
+  constructor(private store: Store<SubmissionState>) { }
+
+
+  /**
+   * Return item's accesses condition state.
+   *
+   * @param submissionId
+   *    The submission id
+   * @param sectionId
+   *    The section id
+   * @returns {Observable}
+   *    Emits bitstream's metadata
+   */
+  public getSherpaPoliciesData(submissionId: string, sectionId: string): Observable<WorkspaceitemSectionSherpaPoliciesObject> {
+
+    return this.store.select(submissionSectionDataFromIdSelector(submissionId, sectionId)).pipe(
+      filter((state) => isNotUndefined(state)),
+      distinctUntilChanged());
+  }
+}

src/app/submission/submission.module.ts

@@ -1,3 +1,4 @@
+import { SectionSherpaPoliciesService } from './sections/sherpa-policies/section-sherpa-policies.service';
 import { NgModule } from '@angular/core';
 import { CoreModule } from '../core/core.module';
 import { SharedModule } from '../shared/shared.module';
@@ -42,6 +43,8 @@ import { NgbAccordionModule, NgbModalModule } from '@ng-bootstrap/ng-bootstrap';
 import { SubmissionSectionAccessesComponent } from './sections/accesses/section-accesses.component';
 import { SubmissionAccessesConfigService } from '../core/config/submission-accesses-config.service';
 import { SectionAccessesService } from './sections/accesses/section-accesses.service';
+import { SubmissionSectionSherpaPoliciesComponent } from './sections/sherpa-policies/section-sherpa-policies.component';
+import { ContentAccordionComponent } from './sections/sherpa-policies/content-accordion/content-accordion.component';
 
 const ENTRY_COMPONENTS = [
   // put only entry components that use custom decorator
@@ -50,7 +53,8 @@ const ENTRY_COMPONENTS = [
   SubmissionSectionLicenseComponent,
   SubmissionSectionCcLicensesComponent,
   SubmissionSectionAccessesComponent,
-  SubmissionSectionUploadFileEditComponent
+  SubmissionSectionUploadFileEditComponent,
+  SubmissionSectionSherpaPoliciesComponent,
 ];
 
 const DECLARATIONS = [
@@ -75,6 +79,7 @@ const DECLARATIONS = [
   SubmissionImportExternalSearchbarComponent,
   SubmissionImportExternalPreviewComponent,
   SubmissionImportExternalCollectionComponent,
+  ContentAccordionComponent,
 ];
 
 @NgModule({
@@ -97,7 +102,8 @@ const DECLARATIONS = [
     SectionsService,
     SubmissionUploadsConfigService,
     SubmissionAccessesConfigService,
-    SectionAccessesService
+    SectionAccessesService,
+    SectionSherpaPoliciesService
   ]
 })