Table of Contents
Customizing your Customer Portal
Updated
by Mitchell Paul-Soumis
While Sonar provides a pre-built Customer Portal which can be tied to your instance and used to provide more control to your customers, we don't want to limit your creativity, branding, or control how your customers access their information. The Sonar Customer Portal code repository is available on https://github.com/SonarSoftwareInc/customer_portal, and you're welcome to fork or clone this repository in order to modify the underlying code to suit your needs.
Cloning the Repository
For cloning the repository to make minor changes, you can follow the guide below:
- git clone the portal onto a droplet
droplet# git clone github.com/sonarsoftwareinc/customer_portal
- Modify the Docker Compose file:
droplet# nano ./customer_portal/docker-compose.yml
- Change image name in Docker Compose file from
image: "sonarsoftware/customerportal:stable"
to a unique name. In this example, we'll be changing in to "image: customized:stable"
- Remove the lines containing "watchtower"
40 watchtower:
41 image: v2tec/watchtower
42 restart: always
43 volumes:
44 - /var/run/docker.sock:/var/run/docker.sock
45 command: sonar-customerportal
- Save the modified "docker-compose.yml"
If you've already run the Customer Portal container before making these changes, you'll need to run the following commands:
- Take the docker container down and remove any leftover elements
docker-compose down --remove-orphans
- Bring the docker container back up with the new "docker-compose.yml" file we've just created
docker-compose up --build -d
Customization Example: Remove the ability to delete a payment method
- Enter the source file to the specific location housing billing parameters:
droplet#nano ./customer_portal/resources/views/pages/billing/index.blade.php
- Remove lines 321 - 326 & 391 - 396 (inclusive)
- Save "Index.blade.php"
Customization Example: Disable the Auto-Pay toggle
- Enter the source file to the specific location housing billing parameters:
droplet#nano ./customer_portal/resources/views/pages/billing/index.blade.php
- Remove lines 308 - 320, which contains the Auto-pay toggle code:
1 @if($paymentMethod->auto == 1)
2 {!! Form::open(['action' => ["BillingController@toggleAutoPay",$paymentMethod->id],'id' => 'deletePaymentMethodForm', 'method' => 'patch']) !!}
3 <button class="dropdown-item btn btn-sm btn-danger" onClick="submit(); this.disabled=true;this.innerHTML='<i class="fe fe-loader mt-2 mr-2 "></i> {{utrans("billing.disabling")}}'">
4 <i class="fe fe-minus-circle mr-2"></i> {{utrans("billing.disableAuto")}}
5 </button>
6 {!! Form::close() !!}
7 @else
8 {!! Form::open(['action' => ["BillingController@toggleAutoPay",$paymentMethod->id],'id' => 'deletePaymentMethodForm', 'method' => 'patch']) !!}
9 <button class="dropdown-item btn btn-sm btn-primary" onClick="submit(); this.disabled=true;this.innerHTML='<i class="fe fe-loader mt-2 mr-2"></i> {{utrans("billing.enabling")}}'">
10 <i class="fe fe-check-circle mr-2"></i> {{utrans("billing.enableAuto")}}
11 </button>
12 {!! Form::close() !!}
13 @endif
- Save "Index.blade.php"
- Modify Auto-pay on new credit card payments by entering the the file which controls the logic for adding new cards:\
droplet#nano ./customer_portal/resources/views/pages/billing/add_card.blade.php
- Replace the following lines:
<div class="col mt-1">
{!! Form::checkbox("auto",1,false,['id' => 'auto', 'class' => 'custom-control-input']) !!}
<label class="custom-control-label" for="auto"></label>
with:
<input type="hidden" id="auto" class="custom-control-input" name="auto" value="1">
- Because the above lines remove the toggle on the "Add Credit Card" page, we also want to remove the visible tooltip that contains the "Automatically charge this card for all future invoices" text:
<div class="col mt-1">
<small class="text-muted">
{{utrans("billing.saveAsAutoPayMethod")}}
</small>
</div>
What about Portal Updates?
After you update your Sonar portal to the newest version, customizations will be cleared. While you could manually upload the custom files back into the upgraded portal, a more common method to reintroduce these customizations would be through synchronizing a fork. Below is the GitHub recommended approach to doing this:
Syncing a fork
Sync a fork of a repository to keep it up-to-date with the upstream repository.
Before you can sync your fork with an upstream repository, you must configure a remote that points to the upstream repository in Git.
- Open Terminal.
- Change the current working directory to your local project.
- Fetch the branches and their respective commits from the upstream repository. Commits to
master
will be stored in a local branch,upstream/master
.$ git fetch upstream
> remote: Counting objects: 75, done.
> remote: Compressing objects: 100% (53/53), done.
> remote: Total 62 (delta 27), reused 44 (delta 9)
> Unpacking objects: 100% (62/62), done.
> From https://github.com/ORIGINAL_OWNER/ORIGINAL_REPOSITORY
> * [new branch] master -> upstream/master - Check out your fork's local
master
branch.$ git checkout master
> Switched to branch 'master' - Merge the changes from
upstream/master
into your localmaster
branch. This brings your fork'smaster
branch into sync with the upstream repository, without losing your local changes.$ git merge upstream/master
If your local branch didn't have any unique commits, Git will instead perform a "fast-forward":
> Updating a422352..5fdff0f
> Fast-forward
> README | 9 -------
> README.md | 7 ++++++
> 2 files changed, 7 insertions(+), 9 deletions(-)
> delete mode 100644 README
> create mode 100644 README.md$ git merge upstream/master
> Updating 34e91da..16c56ad
> Fast-forward
> README.md | 5 +++--
> 1 file changed, 3 insertions(+), 2 deletions(-)