Table of Contents

Customizing your Customer Portal

Mitchell Paul-Soumis 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.

Don't modify the files inside the existing Docker Container without redirecting the GitHub link, as updates will overwrite all changes during an update

Cloning the Repository

For cloning the repository to make minor changes, you can follow the guide below:

  1. git clone the portal onto a droplet
droplet# git clone github.com/sonarsoftwareinc/customer_portal
  1. Modify the Docker Compose file:
droplet# nano ./customer_portal/docker-compose.yml
  1. 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"

  1. Remove the lines containing "watchtower"
Currently this occupies line 40-45, however it's important to note these line numbers may change as updates are made to the portal.

40 watchtower:

41 image: v2tec/watchtower

42 restart: always

43 volumes:

44 - /var/run/docker.sock:/var/run/docker.sock

45 command: sonar-customerportal

  1. 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:

  1. Take the docker container down and remove any leftover elements
docker-compose down --remove-orphans
  1. 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

  1. Enter the source file to the specific location housing billing parameters:
droplet#nano ./customer_portal/resources/views/pages/billing/index.blade.php
  1. Remove lines 321 - 326 & 391 - 396 (inclusive)
  2. Save "Index.blade.php"

Customization Example: Disable the Auto-Pay toggle

  1. Enter the source file to the specific location housing billing parameters:
droplet#nano ./customer_portal/resources/views/pages/billing/index.blade.php
  1.  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
  1. Save "Index.blade.php"
  2. 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
  1. 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">
Using this method, a user could disable this by entering the developer tools and setting "value=0"
  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:

The most up to date version of this information is available at https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/syncing-a-fork

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.

  1. Open Terminal.
  2. Change the current working directory to your local project.
  3. 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
  4. Check out your fork's local master branch.
    $ git checkout master
    > Switched to branch 'master'
  5. Merge the changes from upstream/master into your local master branch. This brings your fork's master branch into sync with the upstream repository, without losing your local changes.
    $ git merge upstream/master
    > 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
    If your local branch didn't have any unique commits, Git will instead perform a "fast-forward":
    $ git merge upstream/master
    > Updating 34e91da..16c56ad
    > Fast-forward
    >  README.md                 |    5 +++--
    >  1 file changed, 3 insertions(+), 2 deletions(-)

How did we do?

Filtering: Simple vs Advanced

Contact